Front-End-Checklist
The essential checklist for modern web development, for humans and AI agents
GraphCanon updated 2d · GitHub synced 2d
Decision brief
Front-End-Checklist is an open-source, comprehensive front-end quality system offering a broad range of best practices and guidelines for web development projects.
Good fit when
- - When you need a thorough checklist to ensure high-quality standard across all aspects of your frontend project, including React, Next.js, HTML, CSS, JavaScript, accessibility, performance, SEO, and
- - In environments where both human developers and AI agents are involved in the development process, as it supports machine-computer-parallel (MCP) compatible tools, making it suitable for automated,
Avoid when
- - For projects strictly limited to backend development as it focuses on frontend practices and is designed for frontend workflows.
- - In small-scale hobby projects where comprehensive quality reviews might be overkill given the scope of application. Smaller projects may not require such an extensive set of rules and guidelines.
- Pricing:
- freemium - Free to use as an open-source tool. No specific paid plans are mentioned in the repository.
- Requirements:
- Min 2 GB RAM; - Node.js/pnpm for local development.; - Internet access to use the website or MCP server.
Observed Jul 11, 2026 · Source: enrich:decision_facts
Verify the decision
Maintenance and security
Full trust report- Maintenance
- Very active (5d since push)
- As of 2d
- Provenance
- Not a fork · Personal account
- As of 2d
- Security (OSV)
- No lockfile
- As of 1mo
Public GitHub metadata and optional OSV scans. Signals, not a guarantee. Trust methodology.
Install
git clone https://github.com/thedaviddias/Front-End-ChecklistHow it fits your stack(7)
Typed graph edges - alternatives, integrations, successors, and dependencies. Ranked by relationship type, not raw GitHub stars.
Related
Relationship graph
Optional deeper exploration of typed edges and category neighbours.
Similar tools
Same-category neighbours not already linked as typed edges.
Evidence and technical details
Sourced facts, taxonomy, compatibility claims, README excerpt, and machine-readable endpoints.
Overview
Front-End Checklist is an open-source front-end quality system that provides best practices as a review workflow, accessible via website, MCP-compatible tools, or directly in the repository.
Capability facts
- MCP server
- No MCP server detected
Source: repo_scan · Aug 19, 2026
- Languages
- mdx, javascript, typescript
Source: github.language+package.json · Aug 19, 2026
Categories
Compatibility
Sourced claims from the README excerpt - not unsourced marketing copy.
Source: README excerpt (regex_v1, Aug 19, 2026)
- Local/editor integration: stdio server at [`packages/mcp/src/cli.ts`](packages/mcp/src/cli.ts)Source link
Tags
README
Front-End Checklist
Front-End Checklist is the open-source front-end quality system for humans and AI agents. It turns front-end best practices into a practical review workflow you can browse on the web, run through with MCP-compatible tools, or work through directly in this README.
- Website: frontendchecklist.io
- Rules: frontendchecklist.io/rules
- MCP server: mcp.frontendchecklist.io
Companion project: UX Patterns for Devs helps developers choose the right UI pattern before using Front-End Checklist to verify implementation quality.
[!IMPORTANT] Use the website for browsing and filtering, the MCP server for agent workflows, and this README when you want the checklist in one place.
What you get
385English rules across11active categories11MCP tools exposed by the hosted server- Rule pages with explanations, remediation guidance, and verification steps
How to use this checklist
- Start with the category navigator below and jump straight to the part of the checklist you need.
- Work through the checkbox items that apply to your project, audit, or pull request.
- Open the linked rule pages when you need the full guidance, examples, verification steps, and AI prompts.
- Use frontendchecklist.io for interactive browsing, and mcp.frontendchecklist.io when you want agents to use the same rule corpus directly.
Priority legend
- ![Critical][critical_img] means site-breaking, compliance-sensitive, or security-sensitive issues that should be fixed first.
- ![High][high_img] means issues with major impact on user experience, accessibility, performance, or discoverability.
- ![Medium][medium_img] means strong best practices that should be part of normal frontend quality review.
- ![Low][low_img] means useful improvements that are situational or lower urgency.
Choose your workflow
Browse online
- Explore all rules at frontendchecklist.io/rules
- Use curated checklists at frontendchecklist.io/checklists
- Open a category page for focused audits and implementation guidance
Choose the right pattern first
Front-End Checklist helps you review implementation quality. If you are still deciding what interface to build, use UX Patterns for Devs to compare common UI patterns, understand tradeoffs, and find practical guidance for forms, navigation, data display, feedback states, authentication, and AI interfaces.
Contribute to the checklist
- Install dependencies:
pnpm install - Run local development:
pnpm dev - Validate structure:
pnpm validate:rule-structure - Score the corpus:
pnpm score:rules - Regenerate derived artifacts:
pnpm generate:skillsandpnpm generate:readme
Use with MCP
Connect an MCP-capable agent to Front-End Checklist for frontend code review, structured rule lookup, audits, and remediation workflows across React, Next.js, HTML, CSS, JavaScript, accessibility, performance, SEO, security, images, privacy, i18n, and testing.
[!TIP] Best first use: point an MCP-capable agent at a real component, page, or public URL and explicitly ask it to use the Front-End Checklist MCP for the highest-confidence frontend findings first. Some clients discover installed MCP tools lazily, so naming the server in the prompt helps.
- Public endpoint: mcp.frontendchecklist.io
- Public docs: frontendchecklist.io/mcp
- Local/editor integration: stdio server at
packages/mcp/src/cli.ts
What you can do:
- Review pasted code or file contents against the checklist
- Audit a live public URL
- Fetch a specific rule with remediation guidance
- Search rules by keyword,
For agents
This page has a .md twin and JSON over the API.