How to use Front-End Checklist: browse, run audits and use with AI agents

Choose how you want to use it

You can use Front-End Checklist in three ways. Browse the rules on the website at frontendchecklist.io, connect an MCP-capable AI agent to the hosted server, or work through the checkboxes in the README directly.

The website is best for browsing and filtering. The MCP server is for agent workflows. The README is useful when you want the whole checklist in one place.

• Website: frontendchecklist.io, with rules at frontendchecklist.io/rules and curated lists at frontendchecklist.io/checklists
• MCP server: mcp.frontendchecklist.io, documented at frontendchecklist.io/mcp
• README: the checklist grouped by category with checkboxes you can tick off

Work through the checklist by category

The checklist is split into 11 categories: HTML (25 rules), CSS (32), JavaScript (26), Performance (44), Accessibility (95), SEO (94), Security (22), Images (25), Testing (13), Privacy (5) and Internationalization (5). Start with the categories that match your project or audit.

Each item has a priority marker. Critical items are site-breaking, compliance-sensitive or security-sensitive and should be fixed first. High items have major impact on user experience, accessibility, performance or discoverability. Medium items are strong best practices for normal quality review. Low items are situational.

• Tick items that apply to your project, audit or pull request
• Open the linked rule page for explanations, examples, verification steps and AI prompts
• Fix Critical items before Medium or Low ones

Use it with an MCP-capable AI agent

Connect an MCP-capable agent to the hosted endpoint at mcp.frontendchecklist.io. The server exposes 11 tools. The README recommends starting with review_code for pasted HTML, CSS, JavaScript, React or Next.js code, and audit_url for public https:// pages.

Some clients discover installed MCP tools lazily, so name the server in your prompt. The README gives this example: Use the Front-End Checklist MCP to review this React component and report the highest-confidence findings first.

• review_code: pasted HTML, CSS, JavaScript, React or Next.js code
• search_rules: look up rules by keyword, category or priority before making recommendations
• get_workflow or get_checklist_rules: launch, accessibility, SEO, security and performance audits
• audit_url: public https:// pages

Install the agent skills package

If your tool supports skills, you can install the Front-End Checklist skills package. The global skill is an audit entry point across the full corpus. Focused skills cover one concern, such as the https skill for security review.

The README lists two install commands. The first installs the whole package and the second installs only the https skill.

• Global audit entry point: skills/frontend-checklist-global/SKILL.md
• Focused example: skills/https/SKILL.md

Run a focused pre-launch or pull request review

Pick one concern for your first pass, such as accessibility or SEO, rather than the whole list at once. Check the rules in that category, then open the rule pages for anything unclear.

For pull requests or shared audits, the README checklist works well as a common reference. The README describes this as a review workflow. It does not run automatically against your code.

• Start with Critical and High items in the category you are reviewing
• Confirm each finding using the verification steps on the rule page
• Record which items you have checked in your review notes

Contribute to the checklist

If you want to change the rules, the README lists local development scripts. Run pnpm install to install dependencies, pnpm dev for local development, and pnpm validate:rule-structure to validate rule structure. Other scripts are pnpm score:rules, pnpm generate:skills and pnpm generate:readme.