thedaviddias/front-end-checklist

현대 웹 개발, 인간과 AI 에이전트를 위한 필수 체크리스트

---

프론트엔드 체크리스트는 인간과 AI 에이전트를 위한 오픈소스 프론트엔드 품질 시스템입니다. 이 시스템은 프론트엔드 모범 사례를 웹에서 탐색하거나 MCP 호환 도구로 직접 검토하거나 이 README에서 직접 작업할 수 있는 실용적인 검토 워크플로우로 변환합니다.

---

서론

• 웹사이트: frontendchecklist.io
• 규칙: frontendchecklist.io/rules
• MCP 서버: mcp.frontendchecklist.io

동반 프로젝트: 개발자를 위한 UX 패턴은 개발자가 구현 품질을 검증하기 위해 프론트엔드 체크리스트를 사용하기 전에 올바른 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