frontend-design-review

Frontend Design Review — навык для ревью интерфейсов и создания production-grade frontend-решений с высоким качеством визуального исполнения и соблюдением design system. Его область — UI-код, компоненты, responsive-поведение, accessibility, дизайн-ревью, creative frontend и проверка соответствия системе дизайна. Навык не предназначен для backend API, схем баз данных, инфраструктуры, DevOps и чистой бизнес-логики без пользовательского интерфейса. В исходном SKILL.md есть два режима. Design Review оценивает существующую реализацию, а Creative Frontend Design помогает создавать отличающийся от шаблонного интерфейс. Перед реализацией рекомендуется определить задачу и аудиторию, тон, ограничения framework и performance, а также отличие от типового AI-интерфейса. Для ревью сначала проверяются Storybook или компонентная библиотека, точные спецификации в Figma Dev Mode, design tokens, варианты и состояния. Если подходящего компонента нет, сначала следует проверить возможность адаптировать существующий, а исключение обсудить с дизайном. Первый принцип — frictionless insight to action: экран должен быстро отвечать, что пользователь может сделать и что произойдет дальше. В карточке зафиксирован ориентир завершить задачу не более чем за три взаимодействия, оставить одну-две первичные actions на view, убрать конкурирующие кнопки и не прятать следующий шаг. Онбординг должен объяснять возможности в начале, настройки по умолчанию — помогать, а навигация — давать понятные вход и выход, back/cancel и breadcrumbs для глубоких потоков. Второй принцип — quality is craft. Проверяются соответствие Figma и design system, использование токенов вместо случайных hardcoded values, согласованная типографика, цветовая палитра, intentional motion, responsive reflow и focus indicators. Для творческого режима исходник предлагает осознанное направление — от минималистичного до editorial, industrial или brutalist — и рекомендует distinctive typography, cohesive palette через CSS variables, CSS-first motion, выразительную композицию и аккуратную работу с фоном. Одновременно он прямо предупреждает против generic AI aesthetics и предсказуемого cookie-cutter layout. Третий принцип — trustworthy building. Ревью должно проверять прозрачность AI-generated content и понятные actionable error messages. Accessibility входит в quality pillar: исходник задаёт Grade C как минимум, связанный с WCAG 2.1 A, и Grade B как желательный уровень, связанный с WCAG 2.1 AA. Поэтому отсутствие фокуса, плохой reflow, непрозрачная ошибка или несколько равноправных primary actions — это не косметическая мелочь, а сигнал для приоритизированной рекомендации. Практический output строится от пользовательской задачи к design-system паттернам, эстетическому направлению, scope, трём quality pillars и списку рекомендаций. Для разных типов ревью исходный репозиторий предоставляет отдельные модификаторы и quick checklist; итог должен учитывать тип задачи, а не выдавать универсальный шаблон. Ограничения следует учитывать до вывода: Figma, Storybook и токены полезны только если проект действительно их использует; отсутствие такого контекста нельзя компенсировать выдуманными спецификациями. Creative mode не отменяет требования accessibility, performance и ясной иерархии действий. Design review не подтверждает backend-контракты, безопасность инфраструктуры или корректность базы данных — эти вопросы должны проверяться профильными инструментами.