Front-End Checklist

Présentation

Donne à un assistant l’accès à l’ensemble de règles Front-End Checklist, environ 386 règles couvrant HTML, CSS, JavaScript, performance, accessibilité, SEO, sécurité, images, tests, confidentialité et i18n. Il peut effectuer une analyse heuristique statique de code collé, auditer une URL publique, et récupérer, vérifier, expliquer ou corriger des règles individuelles. Des workflows sélectionnés comme launch-checklist et core-web-vitals sont également disponibles.

Le serveur est hébergé sur un endpoint Streamable HTTP public. Aucun compte ni clé API n’est nécessaire. Une version stdio locale se trouve aussi dans le dépôt du projet. La revue de code est une passe statique prudente : un résultat vide ne prouve pas que le code est sain.

Ce que vous pouvez faire

• Analyser du code HTML, CSS, JS, React ou Next.js collé selon de nombreuses règles à la fois
• Auditer une page https publique en ligne
• Rechercher des règles par mot-clé, catégorie ou priorité
• Obtenir les consignes complètes, les étapes de correction ou l’explication d’une règle
• Vérifier du code par rapport à une règle précise
• Lancer des workflows sélectionnés comme les audits de lancement ou de sécurité
• Générer des checklists de référence rapide par catégorie

Outils 11

• review_codeLecture seule

  Revue heuristique statique de code frontend selon plusieurs règles, avec des problèmes classés par priorité.

• audit_urlLecture seule

  Récupérer une URL publique et auditer son HTML selon les règles frontend.

• get_workflowLecture seule

  Obtenir une séquence ordonnée de règles pour un workflow de checklist comme seo-audit.

• get_checklist_rulesLecture seule

  Obtenir en un seul appel le détail complet de chaque règle d’une checklist sélectionnée.

• get_quick_referenceLecture seule

  Obtenir une checklist compacte de règles pour une catégorie, filtrable par priorité.

• get_ruleLecture seule

  Récupérer une règle par son slug avec contenu, prompts et métadonnées.

• search_rulesLecture seule

  Rechercher et filtrer des règles par requête, catégorie ou priorité.

• check_ruleLecture seule

  Vérifier du code par rapport à une règle précise ou obtenir des conseils de vérification.

• fix_ruleLecture seule

  Obtenir la correction et le prompt d’implémentation d’une règle.

• explain_ruleLecture seule

  Obtenir l’explication pédagogique de l’importance d’une règle.

• list_categoriesLecture seule

  Lister les catégories de règles avec leur nombre de règles.

Lus directement sur le serveur le 7 oct. 2026. Lecture seule, Écriture et Peut supprimer sont des indications déclarées par le serveur ; c’est votre client qui décide de vous demander confirmation avant d’exécuter un outil.

Exemples de prompts

• Utilise Front-End Checklist pour analyser ce composant React et lister les problèmes les plus sûrs.

• Audite https://example.com pour les problèmes d’accessibilité, de performance et de SEO.

• Explique la règle de l’URL canonique et montre comment la corriger.

• Lance le workflow launch-checklist pour mon site.

Configuration

Chaque client se connecte à mcp.frontendchecklist.io. Choisissez le vôtre ; la page retient votre choix.

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"
    }
  }
}

Intégrer

Affichez Front-End Checklist dans un README ou sur votre site. Chaque intégration renvoie à cette page, utilise l’URL du serveur et ne dépose aucun cookie. Comment fonctionnent les intégrations

La carte, l’iframe et le JSON sont en anglais. Ajoutez ?lang=it, fr, de ou es à leur adresse pour une autre langue.

Badge pour README Carte pour site web iframe JSON Prompt pour l’IA

Badge pour 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>

Il suit le mode clair ou sombre du lecteur. Ajoutez ?theme=light ou ?theme=dark pour le fixer, ou ?style=compact pour afficher le symbole sans le nom.

Carte pour site web

HTML

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

La carte apparaît à l’endroit de la balise. Ajoutez data-theme="dark" ou data-size="compact" à la balise pour la modifier. Le fichier contient tout ce qu’il lui faut : il ne fait aucune autre requête et ne dépose aucun cookie.

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>

Utilisez-la sur les pages qui n’autorisent pas les scripts. Ajoutez ?theme=light ou ?theme=dark à l’adresse pour fixer les couleurs.

JSON

La fiche sous forme de données pour vos pages et vos outils : nom, accroche, URL du serveur, outils et liens « Add to ». N’importe quel site peut la lire (CORS ouvert).

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

Ce que signifie chaque champ

Prompt pour l’IA

Collez-le dans un assistant de code IA, comme Claude Code ou Cursor, et il ajoutera la carte de Front-End Checklist à votre site.

Markdown

Ajoute à mon site la carte mcp.tc de Front-End Checklist, un serveur MCP. C’est un seul script statique : pas de build, aucun paquet à installer, aucun cookie.

Place cette balise là où la carte doit apparaître. La carte s’affiche juste avant elle :

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

Pour l’afficher ailleurs, mets ce conteneur à cet endroit et charge le même script une seule fois, par exemple avant `</body>`. Garde le lien à l’intérieur : les visiteurs sans JavaScript le voient.

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

Options :
- `data-theme="light"` ou `"dark"` sur la balise ou le conteneur fixe les couleurs. Sans cela, la carte suit le mode clair ou sombre du visiteur.
- `data-size="compact"` donne une carte plus petite, sans l’accroche.
- La variable CSS `--mcptc-max-width` sur le conteneur ou un parent fixe la largeur (`520px` par défaut).
- `?lang=` dans l’URL du script choisit la langue de la carte : `en`, `it`, `fr`, `de` ou `es`.

Si le site a une Content Security Policy, autorise `script-src https://mcp.tc` et `img-src data:` (l’icône est intégrée).

Pour un README ou une autre doc en Markdown, utilise plutôt le badge :

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

Référence : https://mcp.tc/fr/embed

Historique des changements

Nous lisons la liste d’outils de ce serveur toutes les 3 heures et notons ce qui change. Dernière lecture : 8 oct. 2026, 10:34 UTC.

1. 6 oct. 2026, 21:22 UTC, Vérification automatique

   Début de l’observation : 11 outils.

FAQ