Umbra

Цвета и контраст

Какие цвета есть, для чего каждый и как проверить читаемость

Типографика

Шкала текста: размеры, начертания и где какой брать

Отступы и сетка

Шкала отступов, радиусы и правило внутреннего и внешнего

ИконкиIcon

Набор Phosphor: вес, размеры и что нельзя

Темы продуктов

База и слой продукта: как подключить тему ShadeNotes, портфолио или новую

Стекло и анимация

Стекло для слоя управления, пружины, перетекание и появление

Каркас

Окно, Страница, Плитка, Сайдбар

Элементы

Кнопка, Чип, Поле, Список выбора, Переключатель, Поиск, Счётчик, Строка списка

Ожидание и уведомления

Спиннер, Скелетон, Тост, Карточка итога

Запись

Капсула записи

Экраны

Первый запуск, Обработка записи, Витрина

Как подключить агента

Что дать агенту в продукте: DESIGN.md, реестр через MCP, llms.txt и сниппет

Навык «Экран по Umbra»

Навык Claude Code: порядок сборки экрана и чек-лист отчёта

Знаки продуктов

Персонажи и логотипы продуктов, их размеры и как поставить знак

Живой персонаж портфолио

Эмоции, движения и жесты живого персонажа портфолио

Проверка кода (ESLint)

Правила Umbra в ESLint: что ловят и как подключить

Склейка классов (cn)

Функция cn: склейка классов Tailwind без конфликтов