Front-End Checklist

Über den Server

Gibt einem Assistenten Zugriff auf das Regelwerk der Front-End Checklist mit etwa 386 Regeln zu HTML, CSS, JavaScript, Performance, Barrierefreiheit, SEO, Sicherheit, Bildern, Tests, Datenschutz und i18n. Er kann eine statische heuristische Prüfung von eingefügtem Code durchführen, eine öffentliche URL auditieren und einzelne Regeln abrufen, prüfen, erklären oder beheben. Kuratierte Workflows wie launch-checklist und core-web-vitals sind ebenfalls verfügbar.

Der Server wird an einem öffentlichen Streamable-HTTP-Endpunkt gehostet. Weder Anmeldung noch API-Schlüssel sind nötig. Eine lokale stdio-Version liegt ebenfalls im Projekt-Repository. Die Code-Prüfung ist ein konservativer statischer Durchlauf, ein leeres Ergebnis beweist daher nicht, dass der Code sauber ist.

Was du damit machen kannst

• HTML-, CSS-, JS-, React- oder Next.js-Code gleichzeitig gegen viele Regeln prüfen
• Eine öffentliche https-Live-Seite auditieren
• Regeln nach Stichwort, Kategorie oder Priorität suchen
• Vollständige Anleitung, Korrekturschritte oder Erklärung einer Regel abrufen
• Code gegen eine bestimmte Regel prüfen
• Kuratierte Workflows wie Launch- oder Sicherheitsaudits ausführen
• Kurzreferenz-Checklisten nach Kategorie erzeugen

Tools 11

• review_codeLiest nur

  Statische heuristische Prüfung von Frontend-Code anhand mehrerer Regeln, mit priorisierten Problemen als Ergebnis.

• audit_urlLiest nur

  Eine öffentliche URL abrufen und ihr HTML anhand von Frontend-Regeln auditieren.

• get_workflowLiest nur

  Eine geordnete Abfolge von Regeln für einen Checklisten-Workflow wie seo-audit abrufen.

• get_checklist_rulesLiest nur

  Alle Regeldetails jeder Regel einer kuratierten Checkliste in einem Aufruf abrufen.

• get_quick_referenceLiest nur

  Eine kompakte Regel-Checkliste für eine Kategorie abrufen, nach Priorität filterbar.

• get_ruleLiest nur

  Eine Regel per Slug mit Inhalt, Prompts und Metadaten abrufen.

• search_rulesLiest nur

  Regeln nach Suchbegriff, Kategorie oder Priorität suchen und filtern.

• check_ruleLiest nur

  Code gegen eine bestimmte Regel prüfen oder Hinweise zur Verifikation erhalten.

• fix_ruleLiest nur

  Die Korrektur und den Implementierungs-Prompt für eine Regel abrufen.

• explain_ruleLiest nur

  Die didaktische Erklärung abrufen, warum eine Regel wichtig ist.

• list_categoriesLiest nur

  Regelkategorien mit der Anzahl ihrer Regeln auflisten.

Am 7. Okt. 2026 vom laufenden Server gelesen. „Liest nur“, „Schreibt“ und „Kann löschen“ sind Hinweise, die der Server selbst angibt; dein Client entscheidet, ob er vor dem Ausführen eines Tools nachfragt.

Beispiel-Prompts

• Nutze Front-End Checklist, um diese React-Komponente zu prüfen, und liste die Probleme mit der höchsten Konfidenz auf.

• Auditiere https://example.com auf Probleme bei Barrierefreiheit, Performance und SEO.

• Erkläre die Regel zur kanonischen URL und zeige, wie man sie behebt.

• Führe den Workflow launch-checklist für meine Website aus.

Einrichtung

Jeder Client verbindet sich mit mcp.frontendchecklist.io. Wähl deinen; die Seite merkt sich deine Wahl.

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

Einbinden

Zeig Front-End Checklist in einem README oder auf deiner Website. Jede Einbindung verlinkt auf diese Seite, nutzt die eigene URL des Servers und setzt keine Cookies. So funktionieren Einbindungen

Karte, iframe und JSON sind auf Englisch. Häng ?lang=it, fr, de oder es an ihre Adresse an, um eine andere Sprache zu bekommen.

README-Badge Website-Karte iframe JSON KI-Prompt

README-Badge

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>

Es folgt dem hellen oder dunklen Modus der Lesenden. Hänge ?theme=light oder ?theme=dark an, um ihn festzulegen, oder ?style=compact, um das Zeichen ohne Schriftzug zu zeigen.

Website-Karte

HTML

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

Die Karte erscheint dort, wo das Tag steht. Füge dem Tag data-theme="dark" oder data-size="compact" hinzu, um sie zu ändern. Die Datei enthält alles, was sie braucht, stellt also keine weiteren Anfragen und setzt keine 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>

Nutze es auf Seiten, die keine Skripte erlauben. Hänge ?theme=light oder ?theme=dark an die Adresse an, um die Farben festzulegen.

JSON

Der Eintrag als Daten für deine eigenen Seiten und Tools: Name, Kurzbeschreibung, die eigene URL des Servers, Tools und die „Add to“-Links. Jede Website kann ihn lesen (CORS ist offen).

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

Was jedes Feld bedeutet

KI-Prompt

Füg ihn in einen KI-Coding-Assistenten wie Claude Code oder Cursor ein, und er baut die Karte von Front-End Checklist in deine Website ein.

Markdown

Füge meiner Website die mcp.tc-Karte für den MCP-Server Front-End Checklist hinzu. Es ist ein einziges statisches Skript: kein Build-Schritt, kein Paket zu installieren, keine Cookies.

Setz dieses Tag dorthin, wo die Karte erscheinen soll. Die Karte erscheint direkt davor:

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

Um sie woanders zu zeigen, setz dort diesen Platzhalter ein und lade dasselbe Skript nur einmal, zum Beispiel vor `</body>`. Lass den Link darin stehen: Besucher ohne JavaScript sehen ihn.

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

Optionen:
- `data-theme="light"` oder `"dark"` am Tag oder Platzhalter legt die Farben fest. Ohne das Attribut folgt die Karte dem hellen oder dunklen Modus der Besucher.
- `data-size="compact"` ergibt eine kleinere Karte ohne Kurzbeschreibung.
- Die CSS-Variable `--mcptc-max-width` am Platzhalter oder einem Elternelement legt die Breite fest (Standard `520px`).
- `?lang=` in der Skript-URL legt die Sprache der Karte fest: `en`, `it`, `fr`, `de` oder `es`.

Wenn die Website eine Content Security Policy hat, erlaube `script-src https://mcp.tc` und `img-src data:` (das Icon ist eingebettet).

Für ein README oder andere Markdown-Dokumentation nimm stattdessen das Badge:

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

Referenz: https://mcp.tc/de/embed

Änderungsverlauf

Wir lesen die Tool-Liste dieses Servers alle 3 Stunden und halten fest, was sich ändert. Zuletzt gelesen: 8. Okt. 2026, 10:34 UTC.

1. 6. Okt. 2026, 21:22 UTC, Automatische Prüfung

   Beginn der Beobachtung: 11 Tools.

Häufige Fragen