Escribir mejor CSS con un ayudante que consulta la documentación

A quién le sirve. Desarrolladores web que quieren que su asistente de programación consulte la documentación real de CSS en vez de adivinar.

Qué hicieron

Se añade el servidor a Claude Code, VS Code u otro cliente MCP (un estándar para conectar agentes con herramientas) con un comando npx. Después el agente puede llamar a herramientas para traer la documentación de MDN de una función de CSS, obtener datos de compatibilidad con navegadores y analizar el CSS que pegues o los archivos CSS ya generados de un proyecto. El análisis devuelve por defecto un resumen corto y se lo pides en lenguaje normal.

Cómo salió

El README no da resultados en casos reales. Indica que las primeras consultas tardan unos 400 a 500 milisegundos y las guardadas, unos 100. El análisis resumido cuesta aproximadamente 1.000 a 2.000 tokens (trozos de texto que cuenta el modelo).

Conviene saber

El análisis completo de más de 150 métricas usa más de 10.000 tokens, así que conviene mantener el resumen por defecto. Necesita Node 20 o superior y herramientas de compilación nativas para la caché SQLite.

Qué necesitas

• Claude Code, VS Code u otro cliente MCP, que es un programa capaz de conectarse a servidores MCP
• Node 20 o superior y herramientas de compilación nativas, para la caché del servidor
• El servidor MCP de CSS de su repositorio de GitHub, con su comando de instalación
• El CSS de tu web

Cómo hacerlo tú, paso a paso

1. Comprueba que tienes Node 20 o superior y las herramientas de compilación que pide el proyecto.
2. Añade el servidor MCP a tu asistente con el comando npx que indica el README del repositorio.
3. Pega tu CSS con el prompt de la ficha y pide en lenguaje normal que lo analice.
4. Para cada propiedad dudosa, pide que consulte la documentación de MDN y te diga en qué navegadores funciona.
5. Aplica los arreglos de uno en uno y comprueba que la página sigue viéndose igual.
6. Quédate con el análisis resumido, que es el que viene por defecto.

Te paso este CSS de mi web: [código CSS]. Revísalo y dime qué propiedades pueden dar problemas en navegadores antiguos o distintos, cuáles están repetidas o sobran y cómo simplificarlas. Para cada propiedad que dudes, consulta la documentación oficial de MDN y dime en qué navegadores funciona. Habrás terminado cuando tengas una lista de problemas con su arreglo. Mantén el aspecto actual de la página y no cambies nada que no sea necesario.

Consejos

• El análisis completo gasta bastante más que el resumido. Úsalo solo cuando necesites todo el detalle.
• Pide que mantenga el aspecto actual de la página y que no cambie lo que no sea necesario.
• Comprueba los cambios en los navegadores que usan tus visitantes, no solo en el tuyo.

Preguntas frecuentes

Fuentes

• stolinski/css-mcp en GitHub ↗
• La conversación en Bluesky, 9 de octubre de 2025 ↗

En el directorio desde el 3 de octubre de 2026.