Front-End Checklist

Descrizione

Dà a un assistente accesso al set di regole di Front-End Checklist, circa 386 regole su HTML, CSS, JavaScript, prestazioni, accessibilità, SEO, sicurezza, immagini, test, privacy e i18n. Può eseguire una revisione euristica statica del codice incollato, controllare un URL pubblico e recuperare, verificare, spiegare o correggere singole regole. Sono disponibili anche workflow curati come launch-checklist e core-web-vitals.

Il server è ospitato su un endpoint Streamable HTTP pubblico. Non servono accesso né chiave API. Nel repository del progetto è presente anche una versione stdio locale. La revisione del codice è un controllo statico prudente, quindi un risultato vuoto non dimostra che il codice sia privo di problemi.

Cosa puoi fare

• Rivedere codice HTML, CSS, JS, React o Next.js incollato rispetto a molte regole contemporaneamente
• Controllare una pagina https pubblica online
• Cercare regole per parola chiave, categoria o priorità
• Ottenere le indicazioni complete, i passaggi di correzione o la spiegazione di una regola
• Verificare il codice rispetto a una regola specifica
• Eseguire workflow curati come audit di lancio o di sicurezza
• Generare checklist di riferimento rapido per categoria

Tool 11

• review_codeSola lettura

  Revisione euristica statica del codice frontend rispetto a più regole, con problemi ordinati per priorità.

• audit_urlSola lettura

  Recupera un URL pubblico e ne controlla l’HTML rispetto alle regole frontend.

• get_workflowSola lettura

  Ottiene una sequenza ordinata di regole per un workflow di checklist come seo-audit.

• get_checklist_rulesSola lettura

  Ottiene in una sola chiamata i dettagli completi di ogni regola di una checklist curata.

• get_quick_referenceSola lettura

  Ottiene una checklist compatta di regole per una categoria, filtrabile per priorità.

• get_ruleSola lettura

  Recupera una regola tramite slug con contenuto, prompt e metadati.

• search_rulesSola lettura

  Cerca e filtra le regole per query, categoria o priorità.

• check_ruleSola lettura

  Verifica il codice rispetto a una regola specifica o fornisce indicazioni di verifica.

• fix_ruleSola lettura

  Fornisce la correzione e il prompt di implementazione per una regola.

• explain_ruleSola lettura

  Fornisce la spiegazione didattica del perché una regola è importante.

• list_categoriesSola lettura

  Elenca le categorie di regole con il numero di regole.

Letti dal server attivo (7 ott 2026). Sola lettura, Scrive e Può eliminare sono indicazioni dichiarate dal server; è il tuo client a decidere se chiederti conferma prima di eseguire un tool.

Prompt di esempio

• Usa Front-End Checklist per rivedere questo componente React ed elenca i problemi più sicuri.

• Controlla https://example.com per problemi di accessibilità, prestazioni e SEO.

• Spiega la regola sull’URL canonico e mostra come correggerla.

• Esegui il workflow launch-checklist per il mio sito.

Configurazione

Ogni client si collega a mcp.frontendchecklist.io. Scegli il tuo; la pagina ricorda la tua scelta.

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

Embed

Mostra Front-End Checklist in un README o sul tuo sito. Ogni embed rimanda a questa pagina, usa l’URL del server stesso e non imposta cookie. Come funzionano gli embed

Card, iframe e JSON sono in inglese. Aggiungi ?lang=it, fr, de o es al loro indirizzo per un’altra lingua.

Badge per il README Card per il sito iframe JSON Prompt per l’AI

Badge per il 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>

Segue la modalità chiara o scura di chi legge. Aggiungi ?theme=light o ?theme=dark per fissarla, oppure ?style=compact per mostrare il simbolo senza la scritta.

Card per il sito

HTML

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

La card compare dove si trova il tag. Aggiungi data-theme="dark" o data-size="compact" al tag per cambiarla. Il file contiene tutto ciò che serve, quindi non fa altre richieste e non imposta 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>

Usalo nelle pagine che non consentono script. Aggiungi ?theme=light o ?theme=dark all’indirizzo per fissare i colori.

JSON

La scheda come dati per le tue pagine e i tuoi strumenti: nome, descrizione breve, URL del server, tool e i link «Add to». Qualsiasi sito può leggerla (CORS aperto).

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

Cosa significa ogni campo

Prompt per l’AI

Incollalo in un assistente di programmazione con l’AI, come Claude Code o Cursor, e aggiungerà la card di Front-End Checklist al tuo sito.

Markdown

Aggiungi al mio sito la card di mcp.tc per Front-End Checklist, un server MCP. È un solo script statico: niente build, nessun pacchetto da installare, nessun cookie.

Metti questo tag dove deve comparire la card. La card appare subito prima del tag:

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

Per mostrarla altrove, metti lì questo segnaposto e carica lo stesso script una volta sola, per esempio prima di `</body>`. Lascia il link al suo interno: lo vede chi non ha 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>
```

Opzioni:
- `data-theme="light"` o `"dark"` sul tag o sul segnaposto fissa i colori. Senza l’attributo, la card segue la modalità chiara o scura di chi visita.
- `data-size="compact"` dà una card più piccola, senza la descrizione breve.
- La variabile CSS `--mcptc-max-width` sul segnaposto o su un elemento padre imposta la larghezza (predefinita `520px`).
- `?lang=` nell’URL dello script imposta la lingua della card: `en`, `it`, `fr`, `de` o `es`.

Se il sito ha una Content Security Policy, consenti `script-src https://mcp.tc` e `img-src data:` (l’icona è inline).

Per un README o altra documentazione in Markdown, usa invece il badge:

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

Riferimento: https://mcp.tc/it/embed

Cronologia delle modifiche

Leggiamo l’elenco dei tool di questo server ogni 3 ore e registriamo cosa cambia. Ultima lettura: 8 ott 2026, 10:34 UTC.

1. 6 ott 2026, 21:22 UTC, Controllo automatico

   Inizio del tracciamento: 11 tool.

Domande frequenti