Словами самого skill
Создаёт пользовательские интерфейсы производственного качества, которые доступны, производительны и визуально выверены. Skill фокусируется на создании UI, который выглядит так, будто его создал инженер с чувством дизайна в топовой компании, а не так, будто он сгенерирован ИИ. Он обеспечивает реальное соблюдение design system, надлежащую доступность WCAG 2.1 AA, продуманные паттерны взаимодействия и избегает типичных «ИИ-эстетических» штампов.
Skill охватывает архитектуру компонентов с колокацией файлов, композицию вместо конфигурации, управление состоянием — от локального useState до глобальных хранилищ, отзывчивый mobile-first дизайн, протестированный на конкретных breakpoint'ах, клавиатурную навигацию, ARIA-метки, управление фокусом, содержательные пустые и ошибочные состояния, скелетную загрузку и оптимистичные обновления для восприятия скорости.
Что он выдаёт
- Скелетные состояния загрузки с aria-busy и aria-label для загружающегося контента
- Содержательные пустые и ошибочные состояния с role="status", описательным текстом, иконками и понятными следующими шагами
Как это работает
- 01Размещайте файлы компонента вместе
Помещайте реализацию компонента, тесты, стори, кастомные хуки и типы вместе в одну папку, названную по имени компонента.
- 02Компонуйте компоненты, а не настраивайте их
Создавайте компонуемые API компонентов с вложенными children, а не с перегруженными объектами конфигурации через props.
- 03Отделяйте получение данных от представления
Создавайте контейнерные компоненты, которые обрабатывают загрузку данных, ошибки и пустые состояния, а затем передают чистые данные компонентам представления.
- 04Выбирайте управление состоянием по масштабу
Используйте useState для UI-состояния конкретного компонента, поднятое состояние для 2–3 соседних компонентов, Context для темы/аутентификации/локали, состояние URL для фильтров и пагинации, библиотеки серверного состояния для удалённых данных и глобальные хранилища для сложного общего клиентского состояния.
- 05Следуйте токенам design system
Используйте семантические цветовые токены, такие как text-primary и bg-surface, вместо необработанных hex-значений, поддерживайте единую шкалу отступов с шагом 0.25rem и соблюдайте иерархию типографики.
- 06Реализуйте доступность WCAG 2.1 AA
Сделайте каждый интерактивный элемент доступным с клавиатуры, добавьте ARIA-метки к неозначенным элементам управления, управляйте фокусом при изменении контента, обеспечьте контраст 4.5:1 для обычного текста и предусмотрите содержательные пустые и ошибочные состояния.