modbender/skill-library-mcp

Construye, depura y despliega sitios web con HTML, CSS, JavaScript, frameworks modernos y las mejores prácticas de producción.

¿Qué es skill-library-mcp?

Esta habilidad te guía a través del ciclo completo de desarrollo web: desde la maquetación con HTML y CSS básicos hasta el uso de patrones JavaScript modernos, frameworks como React/Next.js, y el despliegue en producción. Incluye un conjunto de reglas críticas que previenen errores comunes (como el modo quirks por falta de DOCTYPE, problemas de CORS, bucles asíncronos con `forEach` y fugas de variables de entorno), y proporciona referencias rápidas para solicitudes típicas: hacer que un sitio sea responsivo, solucionar errores CORS, mejorar el rendimiento o agregar SEO. Además, ofrece un árbol de decisión para elegir el framework adecuado según el tipo de proyecto (Astro para contenido estático, Next.js para apps interactivas o SSR, Vite para SPAs simples). Funciona en cualquier plataforma de agente de IA (Claude Code, Cursor, Codex) y está diseñada para desarrolladores que buscan consolidar buenas prácticas web y acelerar su flujo de trabajo.

Compatible con~Claude Code~Codex CLI~Cursor

npx skills add https://github.com/modbender/skill-library-mcp/tree/HEAD/data/web

Documentación

Referencia Rápida

Necesidad	Ver
Problemas de HTML/CSS	`html-css.md`
Patrones de JavaScript	`javascript.md`
React/Next.js/frameworks	`frameworks.md`
Desplegar a producción	`deploy.md`
Rendimiento/SEO/a11y	`performance.md`

Reglas Críticas

El DOCTYPE importa — La falta de <!DOCTYPE html> activa el modo quirks; los diseños se rompen de forma impredecible
La especificidad de CSS vence a la cascada — .class sobrescribe selectores de elemento sin importar el orden
=== no == — La coerción de tipos hace que "0" == false sea verdadero
Async/await en bucles — forEach no espera; usa for...of o Promise.all
CORS es del lado del servidor — No hay solución del lado del cliente; configura Access-Control-Allow-Origin en el servidor
Responsivo = viewport meta — Sin <meta name="viewport">, el móvil renderiza con el ancho de escritorio
Formulario sin preventDefault — La página se recarga; llama a e.preventDefault() en el manejador de envío
Las imágenes necesitan dimensiones — La falta de width/height provoca desplazamiento del diseño (penalización CLS)
HTTPS o bloqueado — El contenido mixto (recursos HTTP en páginas HTTPS) es bloqueado por los navegadores
Las variables de entorno se filtran — NEXT_PUBLIC_* se expone al cliente; nunca prefijes secretos

Solicitudes Comunes

"Hazlo responsivo" → CSS mobile-first con media queries; prueba en 320px, 768px, 1024px "Desplegar a producción" → Ver deploy.md para patrones de Vercel/Netlify/VPS "Solucionar error CORS" → El servidor debe enviar encabezados; usa un proxy del mismo origen si no puedes controlar el servidor "Mejorar rendimiento" → Auditoría Lighthouse; enfócate en LCP, CLS, FID; carga diferida de imágenes debajo del pliegue "Agregar SEO" → Título/descripción por página, HTML semántico, etiquetas OG, sitemap.xml

Árbol de Decisión de Frameworks

Contenido estático, compilaciones rápidas → Astro o HTML plano
Blog/docs con MDX → Astro o Next.js App Router
App interactiva con autenticación → Next.js o Remix
Control total de SSR/ISR → Next.js
SPA simple, sin necesidad de SEO → Vite + React/Vue