Skip to content
Get packs

Front-End Checklist Global Audit

Audits frontend code or public pages against 386 front-end best-practice rules via the Front-End Checklist service.

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

When installed, the agent reviews frontend code (HTML, CSS, JavaScript, React or Next.js files) or a public web page against a large set of front-end best-practice rules instead of relying on memory. It is told to look up rules through a remote service (MCP tools such as review_code, audit_url, search_rules and get_rule) and to report only well-supported findings with concrete fixes, such as missing image dimensions, unlabelled form fields, table header associations, and reduced-motion handling.

Great for

  • Developers who want a second opinion on a component, page, or form before shipping
  • Teams doing accessibility, performance, or SEO-style reviews of front-end code
  • Reviewers who want fewer but stronger findings rather than long generic checklists

Skip it if

  • Projects that cannot send code or page URLs to an external service, since the rule lookups go to frontendchecklist.io (privacy and confidentiality risk)
  • Anyone expecting a full automated accessibility or security scan; the skill relies on the agent's reading of the snippet and the remote rules, so it can miss issues or over-flag
  • Non-web projects, where the rule corpus will not apply

Try asking

  • “Audit this React checkout form for labels, button types, and autocomplete issues”
  • “Review this HTML table and tell me which header associations are missing”
  • “Check this public page at a URL for accessibility and performance problems”
  • “Explain how to fix the image sizing issue you found, with an exact code change”
Step-by-step guide: how to use Front-End Checklist Global AuditInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    frontend-checklist-global.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip frontend-checklist-global.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip frontend-checklist-global.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Paste the complete component or document, including the html or head context, so the agent does not guess about metadata or intent
  • Ask for the strongest one or two findings first if you want a short review
  • Treat findings as suggestions and verify them in your own browser or test tools before changing production code

What's inside

  • references/categories.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.