Front-End-Checklist

[![Backers on Open Collective](https://opencollective.com/front-end-checklist/backers/badge.svg)](#backers)
[![Support via Open Collective](https://opencollective.com/front-end-checklist/sponsors/badge.svg)](https://opencollective.com/front-end-checklist)

<div align="center">

# Front-End Checklist

**The essential checklist for modern web development, for humans and AI agents**

[![License](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
[![ProductHunt](https://img.shields.io/badge/ProductHunt-Launch-orange)](https://www.producthunt.com/products/front-end-checklist)
[![MCP](https://img.shields.io/badge/MCP-Ready-6366f1)](https://modelcontextprotocol.io)

</div>

--

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](https://frontendchecklist.io)
- Rules: [frontendchecklist.io/rules](https://frontendchecklist.io/rules)
- MCP server: [mcp.frontendchecklist.io](https://mcp.frontendchecklist.io)

Companion project: [UX Patterns for Devs](https://uxpatterns.dev/) 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](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.

## 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](https://frontendchecklist.io/rules)
- Use curated checklists at [frontendchecklist.io/checklists](https://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](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.

### 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:skills` and `pnpm 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](https://mcp.frontendchecklist.io)
- Public docs: [frontendchecklist.io/mcp](https://frontendchecklist.io/mcp)
- Local/editor integration: stdio server at [`packages/mcp/src/cli.ts`](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, category, or priority
- Get a workflow or quick reference for a focused audit

Agent usage guidance:

- Use `review_code` first for pasted HTML, CSS, JavaScript, React, or Next.js code
- Use `search_rules` before making frontend accessibility, performance, SEO, security, or image recommendations
- Use `get_workflow` or `get_checklist_rules` for launch, accessibility, SEO, security, and performance audits
- Use `audit_url` for public `https://` pages

Example prompts:

- `Use the Front-End Checklist MCP to review this React component and report the highest-confidence findings first.`
- `Use the Front-End Checklist MCP to audit https://example.com for accessibility, performance, and SEO issues.`
- `Use the Front-End Checklist MCP to explain the canonical URL rule and suggest a fix with code examples.`

## Use with skills

Install Front-End Checklist skills when you want reusable audit workflows or focused rule-specific guidance in tools that support them.

Install:

```bash
npx skills add frontendchecklist/skills
npx skills add frontendchecklist/skills --skill https
```

Useful entry points:

- Global audit entry point: [`skills/frontend-checklist-global/SKILL.md`](skills/frontend-checklist-global/SKILL.md)
- Focused rule skill example: [`skills/https/SKILL.md`](skills/https/SKILL.md)

Example uses:

- Run a broad frontend audit against the full Front-End Checklist corpus
- Use a focused skill like `https` for security review on one concern
- Use rule-specific skills to explain why a rule matters and how to fix it

## Checklist

<!-- rules-catalog:start -->

<!-- Generated from 386 English rules. This block is maintained by `pnpm generate:readme`. -->

### Jump to a category

- [HTML](#html) (25) · [Open on the site](https://frontendchecklist.io/rules/html)
- [CSS](#css) (32) · [Open on the site](https://frontendchecklist.io/rules/css)
- [JavaScript](#javascript) (26) · [Open on the site](https://frontendchecklist.io/rules/javascript)
- [Performance](#performance) (44) · [Open on the site](https://frontendchecklist.io/rules/performance)
- [Accessibility](#accessibility) (95) · [Open on the site](https://frontendchecklist.io/rules/accessibility)
- [SEO](#seo) (94) · [Open on the site](https://frontendchecklist.io/rules/seo)
- [Security](#security) (22) · [Open on the site](https://frontendchecklist.io/rules/security)
- [Images](#images) (25) · [Open on the site](https://frontendchecklist.io/rules/images)
- [Testing](#testing) (13) · [Open on the site](https://frontendchecklist.io/rules/testing)
- [Privacy](#privacy) (5) · [Open on the site](https://frontendchecklist.io/rules/privacy)
- [Internationalization](#internationalization) (5) · [Open on the site](https://frontendchecklist.io/rules/i18n)

### Categories

### HTML

*25 rules. Semantic markup, metadata, forms, and document structure rules.*

[Browse HTML on frontendchecklist.io](https://frontendchecklist.io/rules/html)

- [ ] [Add Subresource Integrity to external scripts](https://frontendchecklist.io/rules/html/subresource-integrity) ![High][high_img]: Use Subresource Integrity (SRI) hash attributes on external scripts and stylesheets loaded from CDNs to ensure the content hasn't been tampered with.
- [ ] [Add thumbnail images to videos](https://frontendchecklist.io/rules/html/video-thumbnail) ![Medium][medium_img]: HTML5 video elements should have a poster attribute providing a thumbnail image displayed before the video loads or is played.
- [ ] [Create a custom 404 error page](https://frontendchecklist.io/rules/html/404-page) ![Medium][medium_img]: A custom 404 error page is designed with helpful navigation options for lost users.
- [ ] [Declare UTF-8 character encoding](https://frontendchecklist.io/rules/html/charset) ![Critical][critical_img]: The charset (UTF-8) is declared correctly as the first element in the head.
- [ ] [Ensure all IDs are unique](https://frontendchecklist.io/rules/html/unique-id) ![High][high_img]: All ID attributes are unique within the document. No duplicate IDs exist on the page.
- [ ] [Implement accessible breadcrumb navigation](https://frontendchecklist.io/rules/html/breadcrumb-navigation) ![Medium][medium_img]: Breadcrumb navigation is implemented with proper semantic markup and ARIA attributes for accessibility.
- [ ] [Implement favicons for all devices](https://frontendchecklist.io/rules/html/favicons) ![Medium][medium_img]: All necessary favicon formats are implemented for browsers, devices, and PWA support.
- [ ] [Link a Web App Manifest for installability](https://frontendchecklist.io/rules/html/web-app-manifest) ![Medium][medium_img]: Include a Web App Manifest (manifest.json) linked from the HTML head to enable Progressive Web App features like home screen installation, standalone display, and splash screens.
- [ ] [Load scripts with defer, async, or type=module](https://frontendchecklist.io/rules/html/defer-async) ![High][high_img]: Prevent JavaScript from blocking HTML parsing by using defer, async, or type=module attributes on script tags so the browser can continue building the DOM while scripts download.
- [ ] [Make custom elements and Web Components accessible](https://frontendchecklist.io/rules/html/custom-element-accessibility) ![Medium][medium_img]: Custom elements must implement ARIA reflection via ElementInter