Front-End Checklist

Descripción

Da a un asistente acceso al conjunto de reglas de Front-End Checklist, unas 386 reglas sobre HTML, CSS, JavaScript, rendimiento, accesibilidad, SEO, seguridad, imágenes, testing, privacidad e i18n. Puede ejecutar una revisión heurística estática de código pegado, auditar una URL pública, y obtener, comprobar, explicar o corregir reglas individuales. También hay flujos de trabajo seleccionados como launch-checklist y core-web-vitals.

El servidor está alojado en un endpoint Streamable HTTP público. No hace falta iniciar sesión ni clave de API. También hay una versión stdio local en el repositorio del proyecto. La revisión de código es una pasada estática conservadora, así que un resultado vacío no demuestra que el código esté limpio.

Qué puedes hacer

• Revisar código HTML, CSS, JS, React o Next.js pegado con muchas reglas a la vez
• Auditar una página pública https en vivo
• Buscar reglas por palabra clave, categoría o prioridad
• Obtener la guía completa, los pasos de corrección o la explicación de una regla
• Comprobar código con una regla concreta
• Ejecutar flujos de trabajo seleccionados como auditorías de lanzamiento o de seguridad
• Generar listas de referencia rápida por categoría

Herramientas 11

• review_codeSolo lectura

  Revisión heurística estática de código frontend con varias reglas, que devuelve los problemas priorizados.

• audit_urlSolo lectura

  Obtener una URL pública y auditar su HTML con las reglas de frontend.

• get_workflowSolo lectura

  Obtener una secuencia ordenada de reglas para un flujo de trabajo de lista, como seo-audit.

• get_checklist_rulesSolo lectura

  Obtener en una sola llamada los detalles completos de todas las reglas de una lista seleccionada.

• get_quick_referenceSolo lectura

  Obtener una lista compacta de reglas de una categoría, filtrable por prioridad.

• get_ruleSolo lectura

  Recuperar una regla por slug con contenido, prompts y metadatos.

• search_rulesSolo lectura

  Buscar y filtrar reglas por consulta, categoría o prioridad.

• check_ruleSolo lectura

  Comprobar código con una regla concreta u obtener orientación de verificación.

• fix_ruleSolo lectura

  Obtener la corrección y el prompt de implementación de una regla.

• explain_ruleSolo lectura

  Obtener la explicación didáctica de por qué importa una regla.

• list_categoriesSolo lectura

  Listar las categorías de reglas con el número de reglas.

Leídas del servidor en funcionamiento el 7 oct 2026. Solo lectura, Escritura y Puede borrar son indicaciones que declara el servidor; tu cliente decide si te pregunta antes de ejecutar una herramienta.

Prompts de ejemplo

• Usa Front-End Checklist para revisar este componente de React y enumerar los problemas con mayor confianza.

• Audita https://example.com en busca de problemas de accesibilidad, rendimiento y SEO.

• Explica la regla de la URL canónica y muestra cómo corregirla.

• Ejecuta el flujo de trabajo launch-checklist para mi sitio.

Configuración

Todos los clientes se conectan a mcp.frontendchecklist.io. Elige el tuyo; la página recuerda tu elección.

claude mcp add --transport http front-end-checklist https://mcp.frontendchecklist.io

https://mcp.frontendchecklist.io

{
  "mcpServers": {
    "front-end-checklist": {
      "url": "https://mcp.frontendchecklist.io"
    }
  }
}

code --add-mcp '{"name":"front-end-checklist","type":"http","url":"https://mcp.frontendchecklist.io"}'

{
  "servers": {
    "front-end-checklist": {
      "type": "http",
      "url": "https://mcp.frontendchecklist.io"
    }
  }
}

{
  "mcpServers": {
    "front-end-checklist": {
      "serverUrl": "https://mcp.frontendchecklist.io"
    }
  }
}

codex mcp add front-end-checklist --url https://mcp.frontendchecklist.io

[mcp_servers.front-end-checklist]
url = "https://mcp.frontendchecklist.io"

gemini mcp add --transport http front-end-checklist https://mcp.frontendchecklist.io

{
  "mcpServers": {
    "front-end-checklist": {
      "type": "http",
      "url": "https://mcp.frontendchecklist.io"
    }
  }
}

Insertar

Muestra Front-End Checklist en un README o en tu web. Cada inserción enlaza a esta página, usa la URL propia del servidor y no instala cookies. Cómo funcionan las inserciones

La tarjeta, el iframe y el JSON están en inglés. Añade ?lang=it, fr, de o es a su dirección para otro idioma.

Insignia para README Tarjeta para web iframe JSON Prompt para la IA

Insignia para README

Markdown

[![Front-End Checklist on mcp.tc](https://mcp.tc/i/front-end-checklist/badge.svg)](https://mcp.tc/i/front-end-checklist)

HTML

<a href="https://mcp.tc/i/front-end-checklist"><img src="https://mcp.tc/i/front-end-checklist/badge.svg" alt="Front-End Checklist on mcp.tc" height="20"></a>

Sigue el modo claro u oscuro de quien lee. Añade ?theme=light o ?theme=dark para fijarlo, o ?style=compact para mostrar el símbolo sin la palabra.

Tarjeta para web

HTML

<script src="https://mcp.tc/w/front-end-checklist.js" async></script>

La tarjeta aparece donde esté la etiqueta. Añade data-theme="dark" o data-size="compact" a la etiqueta para cambiarla. El archivo contiene todo lo que necesita, así que no hace otras solicitudes ni instala cookies.

iframe

HTML

<iframe src="https://mcp.tc/embed/front-end-checklist" title="Front-End Checklist on mcp.tc" width="420" height="200" loading="lazy" allow="clipboard-write" style="border:0;border-radius:8px;max-width:100%"></iframe>

Úsalo en páginas que no permiten scripts. Añade ?theme=light o ?theme=dark a la dirección para fijar los colores.

JSON

La ficha como datos para tus propias páginas y herramientas: nombre, descripción corta, la URL propia del servidor, herramientas y los enlaces «Add to». Cualquier web puede leerla (CORS abierto).

https://mcp.tc/i/front-end-checklist.json

Qué significa cada campo

Prompt para la IA

Pégalo en un asistente de programación con IA, como Claude Code o Cursor, y añadirá la tarjeta de Front-End Checklist a tu web.

Markdown

Añade a mi web la tarjeta de mcp.tc de Front-End Checklist, un servidor MCP. Es un solo script estático: sin paso de build, sin paquetes que instalar, sin cookies.

Pon esta etiqueta donde deba aparecer la tarjeta. La tarjeta se muestra justo antes de ella:

```html
<script src="https://mcp.tc/w/front-end-checklist.js" async></script>
```

Para mostrarla en otro sitio, pon allí este marcador y carga el mismo script una sola vez, por ejemplo antes de `</body>`. Deja el enlace dentro: lo ven los visitantes sin JavaScript.

```html
<div data-mcptc="front-end-checklist"><a href="https://mcp.tc/i/front-end-checklist">Front-End Checklist on mcp.tc</a></div>
```

Opciones:
- `data-theme="light"` o `"dark"` en la etiqueta o el marcador fija los colores. Sin él, la tarjeta sigue el modo claro u oscuro del visitante.
- `data-size="compact"` da una tarjeta más pequeña, sin el eslogan.
- La variable CSS `--mcptc-max-width` en el marcador o en un elemento padre fija el ancho (por defecto `520px`).
- `?lang=` en la URL del script fija el idioma de la tarjeta: `en`, `it`, `fr`, `de` o `es`.

Si el sitio tiene una Content Security Policy, permite `script-src https://mcp.tc` e `img-src data:` (el icono va incrustado).

Para un README u otra documentación en Markdown, usa la insignia:

```markdown
[![Front-End Checklist on mcp.tc](https://mcp.tc/i/front-end-checklist/badge.svg)](https://mcp.tc/i/front-end-checklist)
```

Referencia: https://mcp.tc/es/embed

Historial de cambios

Leemos la lista de herramientas de este servidor cada 3 horas y registramos lo que cambia. Última lectura: 8 oct 2026, 10:34 UTC.

1. 6 oct 2026, 21:22 UTC, Comprobación automática

   Inicio del seguimiento: 11 herramientas.

Preguntas frecuentes