mcp-frontend-tools

El servidor de referencia del Model Context Protocol para trabajo frontend. Una instalación le da a cualquier agente de programación — Claude Desktop, Cursor, VS Code, Zed, Continue — ojos y manos reales sobre tu interfaz:

• axe_audit — ejecuta el motor de reglas real axe-core contra HTML sin procesar (vía jsdom) o una URL en vivo (vía Playwright). Devuelve violaciones agrupadas por impacto WCAG con enlaces de corrección.

• page_screenshot — PNGs de Chromium headless de cualquier URL o selector CSS, con controles de viewport / DPR / esquema de color / waitForSelector.

• bundle_budget_check — recorre un directorio dist/, calcula tamaños gzip (+ brotli opcional), aplica un presupuesto en KB global o por entrada. JSON de aprobado/fallo listo para CI.

• design_token_diff — diferencia estructural de dos archivos de tokens W3C DTCG / Style Dictionary. Informa de tokens añadidos / eliminados / cambiados con notas que reconocen $type.

• storybook_story_run — carga una historia individual de Storybook en Chromium headless vía iframe.html?id=…, toma una captura de pantalla y ejecuta una auditoría axe solo sobre el componente renderizado.

• scaffold_react_component — emite un componente React tipado (funcional / forwardRef / as polimórfico) además de pruebas Vitest e historias de Storybook opcionales.

Todas las herramientas devuelven JSON estructurado sobre el que el modelo puede razonar. Sin envoltorios personalizados por editor.

Instalación

npm i -g @ashios15/mcp-frontend-tools
# Optional — enables page_screenshot, storybook_story_run, and URL-mode axe_audit
npm i -g playwright
npx playwright install chromium

Se requiere Node ≥ 20. Sin Playwright, el servidor aún se inicia; esas tres herramientas devolverán un error claro de "instalar playwright" si se llaman.

Claude Desktop

Añadir a ~/Library/Application Support/Claude/claude_desktop_config.json (o el equivalente en Windows):

{
  "mcpServers": {
    "frontend-tools": {
      "command": "mcp-frontend-tools"
    }
  }
}

Cursor

Settings → MCP → Add new server:

{
  "frontend-tools": { "command": "mcp-frontend-tools" }
}

VS Code (modo agente de GitHub Copilot)

Añadir a .vscode/mcp.json:

{
  "servers": {
    "frontend-tools": { "command": "mcp-frontend-tools" }
  }
}

MCP Inspector

npx @modelcontextprotocol/inspector mcp-frontend-tools

Related MCP server: Components Build MCP

Referencia de herramientas

axe_audit

{
  url?: string;        // require playwright
  html?: string;       // jsdom
  tags?: string[];     // default: wcag2a/aa + wcag21aa + wcag22aa + best-practice
  selector?: string;   // URL mode only
  timeoutMs?: number;  // default 15000
}

Devuelve violaciones y reglas incompletas con impact, help, helpUrl y hasta 5 nodos de ejemplo fallidos por regla.

page_screenshot

{
  url: string;
  outPath: string;           // absolute; parent dirs auto-created
  selector?: string;
  fullPage?: boolean;
  width?: number;            // default 1280
  height?: number;           // default 800
  deviceScaleFactor?: number;// default 2
  colorScheme?: "light" | "dark" | "no-preference";
  waitForSelector?: string;
  timeoutMs?: number;
}

bundle_budget_check

{
  buildDir: string;
  budgetKb?: number;                       // default 250 (gzipped)
  perEntryBudgetKb?: Record<string, number>;// key = path substring, longest match wins
  ext?: string[];                          // default [".js",".mjs",".cjs",".css"]
  includeBrotli?: boolean;
}

Devuelve cada archivo con tamaños raw / gzip / brotli, su presupuesto aplicado y status: "pass" | "fail".

design_token_diff

{
  beforePath: string;
  afterPath: string;
  ignoreKeys?: string[];
}

Entiende la forma W3C DTCG ($value, $type). Las claves de metadatos de grupo que comienzan con $ se ignoran. Los cambios de color / dimensión obtienen notes anotadas.

storybook_story_run

{
  storybookUrl: string;      // e.g. http://localhost:6006
  storyId: string;           // e.g. components-button--primary
  screenshotPath?: string;
  runAxe?: boolean;          // default true
  viewport?: { width: number; height: number };
  colorScheme?: "light" | "dark" | "no-preference";
  timeoutMs?: number;
}

Carga ${storybookUrl}/iframe.html?viewMode=story&id=${storyId}, espera a #storybook-root e informa de cualquier error de página + violaciones de axe limitadas a la historia.

scaffold_react_component

{
  name: string;           // PascalCase
  outDir: string;         // absolute
  variant?: "functional" | "forwardRef" | "polymorphic";
  withTests?: boolean;    // default true
  withStory?: boolean;    // default true
  props?: Array<{ name: string; type: string; required?: boolean; defaultValue?: string }>;
}

¿Por qué esto en lugar de scripts ad-hoc?

• Los agentes obtienen contratos tipados. Cada herramienta es un JSON Schema validado por Zod que el modelo puede inspeccionar.

• Sin alucinaciones locales. Las violaciones de Axe provienen del motor real axe-core, no de una expresión regular. Los tamaños de paquete provienen de la compresión real zlib, no de estimaciones.

• Componible. Fallo en bundle_budget_check → pide al agente que lleve el archivo más grande a page_screenshot → alimenta la imagen en un paso de regresión visual. Todo a través de MCP.

• Superficie estable. Las herramientas cambian detrás de un aumento de versión; tu .vscode/mcp.json no.

Desarrollo

git clone https://github.com/ashios15/mcp-frontend-tools.git
cd mcp-frontend-tools
npm install
npm run test       # 3 unit tests (bundle + tokens + scaffold)
npm run build
npm run inspector  # opens MCP Inspector against the built server
node scripts/smoke.mjs  # quick stdio tools/list check

Licencia

MIT © ashios15

mcp-frontend-tools

El servidor de referencia del Model Context Protocol para trabajo frontend. Una instalación le da a cualquier agente de programación — Claude Desktop, Cursor, VS Code, Zed, Continue — ojos y manos reales sobre tu interfaz:

• axe_audit — ejecuta el motor de reglas real axe-core contra HTML sin procesar (vía jsdom) o una URL en vivo (vía Playwright). Devuelve violaciones agrupadas por impacto WCAG con enlaces de corrección.

• page_screenshot — PNGs de Chromium headless de cualquier URL o selector CSS, con controles de viewport / DPR / esquema de color / waitForSelector.

• bundle_budget_check — recorre un directorio dist/, calcula tamaños gzip (+ brotli opcional), aplica un presupuesto en KB global o por entrada. JSON de aprobado/fallo listo para CI.

• design_token_diff — diferencia estructural de dos archivos de tokens W3C DTCG / Style Dictionary. Informa de tokens añadidos / eliminados / cambiados con notas que reconocen $type.

• storybook_story_run — carga una historia individual de Storybook en Chromium headless vía iframe.html?id=…, toma una captura de pantalla y ejecuta una auditoría axe solo sobre el componente renderizado.

• scaffold_react_component — emite un componente React tipado (funcional / forwardRef / as polimórfico) además de pruebas Vitest e historias de Storybook opcionales.

Todas las herramientas devuelven JSON estructurado sobre el que el modelo puede razonar. Sin envoltorios personalizados por editor.

Instalación

npm i -g @ashishjoshi/mcp-frontend-tools
# Optional — enables page_screenshot, storybook_story_run, and URL-mode axe_audit
npm i -g playwright
npx playwright install chromium

Se requiere Node ≥ 20. Sin Playwright, el servidor aún se inicia; esas tres herramientas devolverán un error claro de "instalar playwright" si se llaman.

Claude Desktop

Añadir a ~/Library/Application Support/Claude/claude_desktop_config.json (o el equivalente en Windows):

{
  "mcpServers": {
    "frontend-tools": {
      "command": "mcp-frontend-tools"
    }
  }
}

Cursor

Settings → MCP → Add new server:

{
  "frontend-tools": { "command": "mcp-frontend-tools" }
}

VS Code (modo agente de GitHub Copilot)

Añadir a .vscode/mcp.json:

{
  "servers": {
    "frontend-tools": { "command": "mcp-frontend-tools" }
  }
}

MCP Inspector

npx @modelcontextprotocol/inspector mcp-frontend-tools

Referencia de herramientas

axe_audit

{
  url?: string;        // require playwright
  html?: string;       // jsdom
  tags?: string[];     // default: wcag2a/aa + wcag21aa + wcag22aa + best-practice
  selector?: string;   // URL mode only
  timeoutMs?: number;  // default 15000
}

Devuelve violaciones y reglas incompletas con impact, help, helpUrl y hasta 5 nodos de ejemplo fallidos por regla.

page_screenshot

{
  url: string;
  outPath: string;           // absolute; parent dirs auto-created
  selector?: string;
  fullPage?: boolean;
  width?: number;            // default 1280
  height?: number;           // default 800
  deviceScaleFactor?: number;// default 2
  colorScheme?: "light" | "dark" | "no-preference";
  waitForSelector?: string;
  timeoutMs?: number;
}

bundle_budget_check

{
  buildDir: string;
  budgetKb?: number;                       // default 250 (gzipped)
  perEntryBudgetKb?: Record<string, number>;// key = path substring, longest match wins
  ext?: string[];                          // default [".js",".mjs",".cjs",".css"]
  includeBrotli?: boolean;
}

Devuelve cada archivo con tamaños raw / gzip / brotli, su presupuesto aplicado y status: "pass" | "fail".

design_token_diff

{
  beforePath: string;
  afterPath: string;
  ignoreKeys?: string[];
}

Entiende la forma W3C DTCG ($value, $type). Las claves de metadatos de grupo que comienzan con $ se ignoran. Los cambios de color / dimensión obtienen notes anotadas.

storybook_story_run

{
  storybookUrl: string;      // e.g. http://localhost:6006
  storyId: string;           // e.g. components-button--primary
  screenshotPath?: string;
  runAxe?: boolean;          // default true
  viewport?: { width: number; height: number };
  colorScheme?: "light" | "dark" | "no-preference";
  timeoutMs?: number;
}

Carga ${storybookUrl}/iframe.html?viewMode=story&id=${storyId}, espera a #storybook-root e informa de cualquier error de página + violaciones de axe limitadas a la historia.

scaffold_react_component

{
  name: string;           // PascalCase
  outDir: string;         // absolute
  variant?: "functional" | "forwardRef" | "polymorphic";
  withTests?: boolean;    // default true
  withStory?: boolean;    // default true
  props?: Array<{ name: string; type: string; required?: boolean; defaultValue?: string }>;
}

¿Por qué esto en lugar de scripts ad-hoc?

• Los agentes obtienen contratos tipados. Cada herramienta es un JSON-Schema validado por Zod que el modelo puede inspeccionar.

• Sin alucinaciones locales. Las violaciones de Axe provienen del motor real axe-core, no de una expresión regular. Los tamaños de paquete provienen de la compresión real zlib, no de estimaciones.

• Componible. Fallo en bundle_budget_check → pide al agente que lleve el archivo más grande a page_screenshot → alimenta la imagen en un paso de regresión visual. Todo a través de MCP.

• Superficie estable. Las herramientas cambian detrás de un aumento de versión; tu .vscode/mcp.json no.

Desarrollo

npm install
npm run test       # 3 unit tests (bundle + tokens + scaffold)
npm run build
npm run inspector  # opens MCP Inspector against the built server
node scripts/smoke.mjs  # quick stdio tools/list check

Licencia

MIT © Ashish Joshi

Servidor de herramientas de frontend para MCP

Un servidor de Model Context Protocol (MCP) que da a los asistentes de IA (Claude, Copilot, Cursor) acceso a herramientas de desarrollo frontend — creación de componentes, análisis de paquetes, comprobaciones de accesibilidad y guías de diseño responsivo.

Herramientas disponibles

Configuración

Claude Desktop

Añadir a ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "frontend-tools": {
      "command": "node",
      "args": ["/path/to/mcp-frontend-tools/dist/index.js"]
    }
  }
}

VS Code con Copilot

Añadir a .vscode/settings.json:

{
  "github.copilot.chat.mcpServers": {
    "frontend-tools": {
      "command": "node",
      "args": ["${workspaceFolder}/mcp-frontend-tools/dist/index.js"]
    }
  }
}

Ejemplo de uso (en chat de IA)

"Crea un componente UserProfileCard con props de avatar, nombre y biografía"

La IA llama a scaffold_react_component y obtiene:

• UserProfileCard.tsx — Componente tipado con forwardRef

• UserProfileCard.test.tsx — Pruebas con Testing Library

• UserProfileCard.stories.tsx — Historia de Storybook

• UserProfileCard.module.css — Módulo CSS

• index.ts — Exportación de barril

"Analiza mi carpeta dist/ en busca de problemas de tamaño de paquete"

La IA llama a analyze_bundle y devuelve un informe en markdown con archivos sobredimensionados, recomendaciones y una tabla resumen.

Arquitectura

src/
├── index.ts                  # MCP server setup (stdio transport)
└── tools/
    ├── index.ts              # Tool definitions + router
    ├── scaffold-component.ts # React component generator
    ├── bundle-analyzer.ts    # Build output analyzer
    ├── a11y-checker.ts       # Static WCAG checks
    └── responsive-guide.ts   # Responsive CSS pattern generator

Desarrollo

npm install
npm run build
npm run inspector   # Test with MCP Inspector

Licencia

MIT