thedaviddias/front-end-checklist

現代ウェブ開発、人間とAIエージェントのための必須チェックリスト

---

Front-End Checklistは、人間とAIエージェント向けのオープンソースのフロントエンド品質システムです。フロントエンドのベストプラクティスを、ウェブ上で閲覧したり、MCP互換ツールで実行したり、このREADMEで直接作業したりできる実用的なレビューワークフローに変換します。

---

はじめに

• ウェブサイト:frontendchecklist.io
• ルール:frontendchecklist.io/rules
• MCPサーバー:mcp.frontendchecklist.io

コンパニオンプロジェクト:UX Patterns for Devsは、開発者が実装品質を確認するためにフロントエンドチェックリストを使う前に適切なUIパターンを選ぶのを支援します。

[!重要] ブラウジングやフィルタリングにはウェブサイト、エージェントのワークフローにはMCPサーバー、チェックリストを一か所にまとめたいときはこのREADMEを使ってください。

何が手に入るか

• 386 イングランドルールは11のアクティブなカテゴリーをまたぐ
• 11 ホストサーバーによって公開されたMCPツール
• 説明、是正ガイダンス、検証手順を含むルールページ

このチェックリストの使い方

1. 下のカテゴリナビゲーターから始めて、必要なチェックリストの部分に直接進みましょう。

---

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.

---

Introduction

• 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

• 386 English rules across 11 active categories
• 11 MCP tools exposed by the hosted server
• Rule pages with explanations, remediation guidance, and verification steps

How to use this checklist

1. Start with the category navigator below and jump straight to the part of the checklist you need.
2. Work through the checkbox items that apply to your project, audit, or pull request.
3. Open the linked rule pages when you need the full guidance, examples, verification steps, and AI prompts.
4. 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