Front-End Checklist — 386 правил качества фронтенда для людей и AI-агентов

Front-End Checklist — открытая система контроля качества фронтенда. В ней 386 правил, собранных в 11 категорий: от HTML и CSS до доступности, SEO и безопасности. За годы проект собрал 74 тысячи звёзд на GitHub. Главная особенность текущей версии — правила заточены не только под людей, но и под AI-агентов. Чеклист можно подключить к агенту через MCP-сервер или установить как набор скиллов.

Автор позиционирует проект просто: это чеклист современной веб-разработки для людей и AI-агентов. Один и тот же корпус правил работает в трёх режимах — как сайт для просмотра, как README для чтения и как источник данных для агентов.

Что внутри: 386 правил в 11 категориях

Каждое правило — это отдельная страница с объяснением, способом исправления и шагами проверки. Распределение по категориям:

Самые крупные разделы — Accessibility (95) и SEO (94). Вместе они дают почти половину всех правил. Это отражает реальность: именно доступность и поисковая видимость чаще всего проседают в типичных проектах.

Правила покрывают и современный стек. В разделе JavaScript есть пункты про строгий режим TypeScript, валидацию внешних данных через Zod или Valibot, scheduler.yield() для длинных задач. В CSS — :has(), @layer, container queries, View Transitions API, цветовое пространство oklch.

Приоритеты: от Critical до Low

Каждое правило имеет приоритет:

• Critical — ломает сайт, нарушает требования законодательства или открывает дыры в безопасности. Например, отсутствие декларации UTF-8 или использование eval() с недоверенным кодом.
• High — сильно влияет на пользовательский опыт, доступность, производительность или видимость в поиске. Например, блокировка пинч-зума на мобильных.
• Medium — сильные лучшие практики, которые должны быть частью обычного ревью.
• Low — полезные улучшения, которые зависят от контекста.

Эта градация удобна и для агентов: AI-инструмент может сначала докладывать только находки высокого приоритета, а мелочь отложить на потом.

Три способа работы с чеклистом

Автор предлагает выбирать инструмент под задачу:

1. Сайт — для просмотра и фильтрации. Все правила живут на frontendchecklist.io/rules, есть готовые подборки для разных сценариев на frontendchecklist.io/checklists.
2. README — весь чеклист в одном файле прямо в репозитории. Удобно, когда нужно пробежаться глазами без браузера.
3. MCP и скиллы — для агентов. Правила отдаются AI-инструментам через сервер или устанавливаются как скиллы.

Отдельный компаньон проекта — UX Patterns for Devs. Он помогает выбрать UI-паттерн до начала разработки, а Front-End Checklist потом проверяет качество внедрения.

MCP-сервер для агентов

Самое интересное для аудитории этого сайта. Проект публикует хостинг MCP-сервера на mcp.frontendchecklist.io и документацию на frontendchecklist.io/mcp. Сервер отдаёт 11 инструментов и покрывает все категории: React, Next.js, HTML, CSS, JavaScript, доступность, производительность, SEO, безопасность.

Ключевые инструменты:

Сервер можно поднять и локально — в репозитории есть stdio-вариант в packages/mcp/src/cli.ts.

Примеры промптов из документации:

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.

Полезный совет из README: некоторые клиенты лениво подхватывают установленные MCP-инструменты. Поэтому в промпте стоит явно назвать сервер — тогда агент точно его использует.

Скиллы для coding-агентов

Кроме MCP, правила доступны как скиллы — в формате, который понимают современные AI-редакторы и CLI-агенты:

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

Есть два типа скиллов. Глобальный скилл frontend-checklist-global запускает широкий аудит по всему корпусу правил. Точечные скиллы вроде https отвечают за одну тему: объясняют, почему правило важно, и как его исправить.

Скиллы не пишутся вручную. Они генерируются из корпуса правил командой pnpm generate:skills — то есть сайт, README, MCP и скиллы всегда синхронны с одним источником правды.

Как устроен репозиторий

Это монорепозиторий под Turborepo:

Правила редактируются в packages/content/rules/en. Качество корпуса держат автоматические проверки: pnpm score:rules оценивает правила по внутренней шкале, pnpm validate:rule-structure следит за единообразием структуры. Конвенции репозитория описаны в AGENTS.md.

Как применить в работе

Самый простой старт описан в README. Укажите агенту на реальный компонент, страницу или публичный URL и попросите использовать Front-End Checklist MCP, начиная с находок самого высокого приоритета. Это даёт быстрый и практичный результат: агент вернёт конкретный список проблем с рекомендациями по исправлению.

Хорошие сценарии для чеклиста:

• Предрелизный аудит — прогнать правила категорий Performance, SEO и Security перед запуском.
• Ревью PR — просить агента проверять изменения интерфейса по релевантным правилам.
• Изучение — правила с объяснениями и примерами хорошо работают как учебник современного фронтенда.

Проект открыт для контрибуций: новые правила принимаются через issues и pull request'ы с описанным выше пайплайном проверок.