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

> Un servidor MCP que consulta la documentación de MDN, informa de la compatibilidad con navegadores y analiza tu CSS para el agente.

- **Tipo:** Caso de uso
- **Tema:** Programación
- **Herramientas:** Claude Code
- **Dificultad:** avanzada
- **Origen:** [stolinski/css-mcp en GitHub](https://github.com/stolinski/css-mcp)
- **En el directorio desde:** 3 de octubre de 2026
- **URL:** https://conqueia.com/caso/escribir-mejor-css-con-un-ayudante-que-consulta-la-documentacion

## 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.

## Pruébalo con Claude Code

```
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

### ¿Qué ventaja tiene sobre preguntarle directamente a la IA?

Consulta la documentación de MDN y los datos de compatibilidad en el momento, en vez de depender de lo que la IA recuerde, que puede estar desfasado.

### ¿Cuánto cuesta?

Gastas el uso de tu asistente de IA. El análisis resumido ocupa poco y el completo mucho más, así que usa el resumen salvo que necesites todo.

## Fuentes

- [stolinski/css-mcp en GitHub](https://github.com/stolinski/css-mcp)
- [La conversación en Bluesky, 9 de octubre de 2025](https://bsky.app/profile/tolin.ski/post/3m2s5ghs6w22e)

---

Fuente: conqueia.com/caso/escribir-mejor-css-con-un-ayudante-que-consulta-la-documentacion