thedaviddias/Front-End-Checklist

これは何？

主な機能

• 01HTML、CSS、JavaScript、アクセシビリティ、パフォーマンスなど11カテゴリにわたる386項目のルールを収録。
• 02各ルールに優先度、説明、改善方法、確認手順を記載。
• 03ホスト型MCPサーバーを使って、エージェントがコードやURLを監査したり、ルールを検索したりできます。
• 04インストール可能なスキルで、包括的な監査の進め方や個別ルールに絞ったガイダンスを提供。
• 05絞り込み機能と厳選チェックリストを備えた、閲覧可能なWebサイト。

ユースケース

• 共通のフロントエンド品質基準に照らして、プルリクエストやコンポーネントをレビューする。
• サイト公開前に、アクセシビリティ、パフォーマンス、SEOを含むリリース監査を実施する。
• AIコーディングエージェントに、生成したフロントエンドコードが確立されたベストプラクティスに沿っているか確認させる。
• ルールごとのチェックリストを通じて、チームメンバーに最新のWeb開発手法を習得してもらう。

クイックスタート

1. 1

   依存関係をインストール

   pnpm install
2. 2

   ローカル開発環境を起動

   pnpm dev

トピック

よくある質問

Front-End-Checklist とは？

人とAIエージェント向けに、フロントエンドのベストプラクティス386項目をまとめたオープンソースのチェックリスト。エージェントによる監査に使えるホスト型MCPサーバーも提供します。 Front-End Checklistは、HTML、CSS、JavaScript、パフォーマンス、アクセシビリティ、SEO、セキュリティ、画像、プライバシー、i18n、テストを対象とした、体系的なフロントエンド品質ルール集です。各ルールには優先度、簡潔な説明、改善方法、確認手順が記載されており、プロジェクトのWebサイトで閲覧できるほか、チェックリストとして順に確認できます。

Front-End-Checklist は無料で使えますか？ライセンスは？

Front-End-Checklist は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

Front-End-Checklist は今もメンテナンスされていますか？

活発にメンテナンス中。Front-End-Checklist の最終コミットは 2026年10月6日 です。

Front-End-Checklist は何に使えますか？

共通のフロントエンド品質基準に照らして、プルリクエストやコンポーネントをレビューする。 サイト公開前に、アクセシビリティ、パフォーマンス、SEOを含むリリース監査を実施する。 AIコーディングエージェントに、生成したフロントエンドコードが確立されたベストプラクティスに沿っているか確認させる。 ルールごとのチェックリストを通じて、チームメンバーに最新のWeb開発手法を習得してもらう。

Front-End-Checklist のインストール方法は？

依存関係をインストール: pnpm install ローカル開発環境を起動: pnpm dev

Front-End-Checklist はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/thedaviddias/Front-End-Checklist