Glass / Neon / Motion

Создавай оригинальные сайты, где стекло объясняет глубину, неон выделяет действие, а движение связывает состояния. Этот навык — расширение существующего frontend-процесса, а не повод менять стек проекта. Текущий brief и бренд определяют композицию. Явный запрос glassmorphism имеет приоритет над эстетическим запретом стекла/градиентов в других style-skills; их требования читаемости и проверки сохраняются.

Быстрый маршрут

1. Прочитай brief, существующие страницы, зависимости и правила проекта. Уточни только существенные неизвестные: назначение, аудитория, реальный контент, целевые устройства и результат. Для демонстрации явно пометь вымышленные данные.
2. Выбери материальное направление: матовая либо прозрачная глянцевая поверхность, отдельно плоская плёнка или объёмный край; тонировка — дополнительный параметр. Настрой согласованные светлую и тёмную версии. Собери реальные источники и собственную карту адаптации по reference-map.md. Не выдавай картинку за проверенную анимацию.
3. Построй работающую статическую композицию и две системы токенов по materials.md. Только затем уточняй типографику, иконки и интерактивные состояния. Проверяй кириллицу и реальные лицензии шрифтов.
4. Составь карту покрытия по components.md и html-atlas.md: нативная семантика → тип поля → составной компонент → состояния. Для каждого выбранного паттерна отметь live, visual, recipe или out-of-scope. Большая карта не равна готовой библиотеке всех компонентов.
5. Запиши motion-score и реализуй нужные рецепты из motion.md и motion-families.md. Один движок владеет одним свойством элемента. CSS/WAAPI достаточно для обычного сайта; библиотеки выбирай по stack.md, не устанавливай их все.
6. Проверь браузер, responsive, состояния, fallback и предпочтения доступности по acceptance.md. Исправь найденное и повтори затронутые проверки. При запросе команды раздели реализацию, а не только проверку: team-workflow.md. Приёмку поручай не автору проверяемого артефакта; задания и критерии находятся там и в acceptance.md.

Расширенная библиотека UI

Для избранного, подборок, общего экспорта и расширенной типографики используй collections-typography.md.

Для плотной кириллической типографики с цветовым акцентом внутри заголовка используй editorial-typography.md: профиль по измерениям WowPovod, роли текста, реальные глифы, локальные шрифты и экспорт.