{"data":{"slug":"thedaviddias-front-end-checklist","name":"Front-End-Checklist","tagline":"The essential checklist for modern web development, for humans and AI agents","github_url":"https://github.com/thedaviddias/Front-End-Checklist","owner":"thedaviddias","repo":"Front-End-Checklist","owner_avatar_url":"https://avatars.githubusercontent.com/u/237229?v=4","primary_language":"MDX","stars":73569,"forks":6663,"topics":["ai-agent","ai-agents","checklist","css","front-end-developer-tool","front-end-development","frontend","guidelines","html","javascript","lists","reference","resources","rules","web-development"],"archived":false,"github_pushed_at":"2026-08-14T05:59:25+00:00","maintenance_label":"Very active","stars_delta_30d":309,"url":"https://www.graphcanon.com/tools/thedaviddias-front-end-checklist","markdown_url":"https://www.graphcanon.com/tools/thedaviddias-front-end-checklist.md","api_url":"https://www.graphcanon.com/api/graphcanon/tools/thedaviddias-front-end-checklist","graph_url":"https://www.graphcanon.com/api/graphcanon/graph?tool=thedaviddias-front-end-checklist","description":"🗂 The essential checklist for modern web development, for humans and AI agents","homepage_url":"https://frontendchecklist.io","license":null,"open_issues":6,"watchers":1425,"ai_summary":"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.","readme_excerpt":"# Front-End Checklist\n\n\n\n\nFront-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.\n\n- Website: [frontendchecklist.io](https://frontendchecklist.io)\n- Rules: [frontendchecklist.io/rules](https://frontendchecklist.io/rules)\n- MCP server: [mcp.frontendchecklist.io](https://mcp.frontendchecklist.io)\n\nCompanion project: [UX Patterns for Devs](https://uxpatterns.dev/) helps developers choose the right UI pattern before using Front-End Checklist to verify implementation quality.\n\n> [!IMPORTANT]\n> Use the website for browsing and filtering, the MCP server for agent workflows, and this README when you want the checklist in one place.\n\n## What you get\n\n- `385` English rules across `11` active categories\n- `11` MCP tools exposed by the hosted server\n- Rule pages with explanations, remediation guidance, and verification steps\n\n## How to use this checklist\n\n1. Start with the category navigator below and jump straight to the part of the checklist you need.\n2. Work through the checkbox items that apply to your project, audit, or pull request.\n3. Open the linked rule pages when you need the full guidance, examples, verification steps, and AI prompts.\n4. Use [frontendchecklist.io](https://frontendchecklist.io) for interactive browsing, and [mcp.frontendchecklist.io](https://mcp.frontendchecklist.io) when you want agents to use the same rule corpus directly.\n\n## Priority legend\n\n- ![Critical][critical_img] means site-breaking, compliance-sensitive, or security-sensitive issues that should be fixed first.\n- ![High][high_img] means issues with major impact on user experience, accessibility, performance, or discoverability.\n- ![Medium][medium_img] means strong best practices that should be part of normal frontend quality review.\n- ![Low][low_img] means useful improvements that are situational or lower urgency.\n\n## Choose your workflow\n\n### Browse online\n\n- Explore all rules at [frontendchecklist.io/rules](https://frontendchecklist.io/rules)\n- Use curated checklists at [frontendchecklist.io/checklists](https://frontendchecklist.io/checklists)\n- Open a category page for focused audits and implementation guidance\n\n### Choose the right pattern first\n\nFront-End Checklist helps you review implementation quality. If you are still deciding what interface to build, use [UX Patterns for Devs](https://uxpatterns.dev/) to compare common UI patterns, understand tradeoffs, and find practical guidance for forms, navigation, data display, feedback states, authentication, and AI interfaces.\n\n### Contribute to the checklist\n\n- Install dependencies: `pnpm install`\n- Run local development: `pnpm dev`\n- Validate structure: `pnpm validate:rule-structure`\n- Score the corpus: `pnpm score:rules`\n- Regenerate derived artifacts: `pnpm generate:skills` and `pnpm generate:readme`\n\n## Use with MCP\n\nConnect 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.\n\n> [!TIP]\n> 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.\n\n- Public endpoint: [mcp.frontendchecklist.io](https://mcp.frontendchecklist.io)\n- Public docs: [frontendchecklist.io/mcp](https://frontendchecklist.io/mcp)\n- Local/editor integration: stdio server at [`packages/mcp/src/cli.ts`](packages/mcp/src/cli.ts)\n\nWhat you can do:\n\n- Review pasted code or file contents against the checklist\n- Audit a live public URL\n- Fetch a specific rule with remediation guidance\n- Search rules by keyword,","github_created_at":"2017-10-16T10:12:36+00:00","created_at":"2026-07-07T17:39:44.409128+00:00","updated_at":"2026-08-19T12:01:29.564384+00:00","categories":[{"slug":"ai-agents","name":"AI Agents","url":"https://www.graphcanon.com/categories/ai-agents","markdown_url":"https://www.graphcanon.com/categories/ai-agents.md","api_url":"https://www.graphcanon.com/api/graphcanon/categories/ai-agents"},{"slug":"developer-tools","name":"Developer Tools","url":"https://www.graphcanon.com/categories/developer-tools","markdown_url":"https://www.graphcanon.com/categories/developer-tools.md","api_url":"https://www.graphcanon.com/api/graphcanon/categories/developer-tools"}],"tags":[{"slug":"ai-agent","name":"ai-agent"},{"slug":"checklist","name":"checklist"},{"slug":"front-end-development","name":"front-end-development"},{"slug":"guidelines","name":"guidelines"},{"slug":"web-development","name":"web-development"}],"trust":{"provenance":{"is_fork":false,"github_id":107111421,"owner_type":"User","methodology":"github_public_v1","parent_repo":null,"near_duplicate_slugs":[]},"computed_at":"2026-08-19T12:01:28.806Z","maintenance":{"label":"Very active","score":96,"methodology":"github_public_v1","releases_90d":1,"days_since_push":5,"last_release_at":"2026-05-30T00:18:38Z","stars_delta_30d":309,"open_issues_delta_30d":2},"security_summary":{"status":"no_lockfile","scanner":null,"low_count":0,"high_count":0,"last_scan_at":"2026-07-11T11:15:07.976Z","medium_count":0,"scan_profile":"none","critical_count":0}},"capability_facts":{"mcp":{"source":"repo_scan","observed_at":"2026-08-19T12:01:29.283Z","server_manifest":false},"scan":{"source":"repo_scan","observed_at":"2026-08-19T12:01:29.283Z"},"languages":{"value":["mdx","javascript","typescript"],"source":"github.language+package.json","observed_at":"2026-08-19T12:01:29.283Z"}},"decision_facts":{"hosting":null,"pricing":{"model":"freemium","summary":"Free to use as an open-source tool. No specific paid plans are mentioned in the repository."},"requirements":{"notes":["- Node.js/pnpm for local development.","- Internet access to use the website or MCP server."],"min_ram_gb":2,"requires_docker":false},"constraints":{"min_ram_gb":2,"pricing_model":"freemium","requires_docker":false},"when_to_use":["- 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,","- During code audits or pull request reviews to help identify issues related to quality, accessibility, performance, security, and user experience.","- If you aim to improve your project's discoverability, security, and compliance aspects from the get-go."],"when_not_to_use":["- 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.","- If your project already has a well-established, customized checklist that meets all your needs and does not require integration with MCP-capable agents for automated frontend code review."],"source":"enrich:decision_facts","observed_at":"2026-07-11T12:03:30.598Z"},"constraint_facets":{"min_ram_gb":2,"pricing_model":"freemium","requires_docker":false},"decision_summary":[{"label":"Pricing","value":"freemium - Free to use as an open-source tool. No specific paid plans are mentioned in the repository."},{"label":"Requirements","value":"Min 2 GB RAM; - Node.js/pnpm for local development.; - Internet access to use the website or MCP server."},{"label":"Adopt for","value":"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."}]}}