Andrey Epifancev d2b4ff2018 feat: skill aura-design — дизайн-система AURA для личных проектов (#17 )

Скилл переносится из ~/.claude/skills/aura-design в репозиторий обвязки:
SKILL.md, справочники reference/ и набор kit/ (токены, base.css, компоненты
React, оболочка AppShell, тест токенов, test-setup, примеры входа).
install.sh ставит его в ~/.claude/skills/aura-design, --check его видит.
tests/test-aura-design.sh проверяет структуру и инварианты набора.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

2026-10-22 12:10:34 +04:00

6.9 KiB

Raw Blame History

name, description

name	description
aura-design	Use when building, restyling or reviewing the UI of any of the user's own web apps, pages or HTML artifacts — a new frontend, screen, form, table, dashboard, dialog, navigation or light/dark theme — or when the user says AURA, «мой стиль», «фирменный стиль», «как в моих проектах», «в стиле хаба». Not for work projects with their own design system.

name

description

aura-design

Use when building, restyling or reviewing the UI of any of the user's own web apps, pages or HTML artifacts — a new frontend, screen, form, table, dashboard, dialog, navigation or light/dark theme — or when the user says AURA, «мой стиль», «фирменный стиль», «как в моих проектах», «в стиле хаба». Not for work projects with their own design system.

AURA — дизайн-система личных проектов

Обзор

Все личные приложения пользователя выглядят как одно семейство — AURA: тёплый светлый фон, один зелёный акцент, Mulish, контролы 32 px, кнопки-«таблетки», панели с радиусом 16, боковая панель слева, полноценная тёмная тема. Не изобретай стиль: копируй готовый набор kit/ и собирай экраны из него. Эталон живой реализации — веб-приложение jira-hub (~/projects/jira-bridge/jira-hub/web/src).

Как начать (React + TS + Vite)

Скопируй набор в src/ проекта: cp -R ~/.claude/skills/aura-design/kit/{styles,ui,shell} <project>/src/
Зависимости (последние стабильные версии): npm i react react-dom @fontsource/mulish @fontsource/ibm-plex-mono, npm i -D vite @vitejs/plugin-react typescript vitest @types/react @types/react-dom @types/node. В src/vite-env.d.ts — /// <reference types="vite/client" /> (иначе tsc не видит импорты .css). Тесты компонентов: kit/test-setup.ts (jsdom + showModal для <dialog>) в setupFiles; нужны jsdom @testing-library/react @testing-library/jest-dom. Vite 8 собирает JSX и без @vitejs/plugin-react.
Вход и index.html — по kit/main.example.tsx и kit/index.example.html (порядок CSS: шрифты → tokens.css → base.css → компоненты; встроенный скрипт темы в <head>). В tsconfig нужен allowImportingTsExtensions (импорты с .tsx), или убери расширения.
Поменяй THEME_KEY в ui/theme.ts (и в скрипте index.html) и storageKey у AppShell на свои.
Каркас — AppShell с разделами; страницы — PageHeader + Panel + компоненты ui/.
styles/tokens.test.ts оставь в проекте: он падает, если где-то вне tokens.css появился литерал цвета или тёмная тема разошлась со светлой.

Не React (чистый HTML, другой фреймворк, артефакт): бери styles/tokens.css, styles/base.css, ui/ui.css, shell/shell.css и ту же разметку классов (ui-btn ui-btn--primary, ui-panel, ui-table, sidebar__link …).

Обязательные правила

Цвета только через токены var(--color-…). Нужен новый — добавь токен во все три блока tokens.css.
Акцент один — зелёный --color-action-primary. Не синий, не фиолетовый. Категории — --color-cat-1…6.
Шрифт Mulish 400/600/700; моно — IBM Plex Mono. Не Inter, не system-ui как основной.
Геометрия: контрол 32 (крупный 40), радиус поля 10, кнопки/сегменты/бейджи — --radius-round, панель 16, окно 20, шаг 4 px. h1 — 20/28, а не 24+.
Иконки — SVG из ui/icons.tsx (штрих 1.5, currentColor). Никаких символов ✕ ⋯ ▼ ☰ ⚙ ☀ ☾ вместо иконок.
Навигация — боковая панель AppShell; на телефоне — строка с «Меню» и выезжающая панель. Нижних вкладок и верхней шапки во всю ширину нет.
Одна primary-кнопка на экран/форму; редкие действия — в меню «⋯».
Просрочка — красная дата (.ui-late) + скрытое «, просрочено»; строку не заливать. Зебры в таблицах нет.
Узкая ширина: пороги страниц — @container page, таблица прокручивается внутри панели, а не становится карточками.
Статусы — Badge с текстом; ошибки — Notice и Field error; подтверждения — Confirm. Не alert()/confirm().
Для формы, окна, строки фильтров, таблицы, пустого состояния в наборе уже есть классы (ui-form, ui-actions, ui-toolbar, ui-chips, ui-table, ui-empty) — свои app-* пиши только для того, чего там нет.

Справочники (читать по задаче)

Файл	Когда
`reference/foundations.md`	выбор цвета/роли, типографика, отступы, радиусы
`reference/components.md`	API компонентов набора; контракты AURA, которых нет в наборе (плитки выбора, загрузка файла, шаги, панель действия)
`reference/layout-ux.md`	оболочка, шаблоны экранов (список с фильтрами, форма, окно, карточка), состояния, тема, доступность, проверка перед сдачей

Частые ошибки

Ошибка	Как надо
Свой `styles.css` с палитрой «по вкусу»	`kit/styles/tokens.css` без изменений значений
`#fff`, `rgb()` в стилях страницы	токен; тест `tokens.test.ts` должен быть зелёным
Контролы 36–40 px, радиус 6–8	32 px, радиус 10; кнопка — «таблетка»
Красный фон или полоса у просроченной строки	красный текст даты
Шесть селектов фильтров в ряд	поиск + `Segmented` + «Фильтры (N)» + `Chip`-ы выбранного
`@media` по окну внутри страниц	`@container page`
Тема только через `data-theme`, без системной	оба пути — уже в `tokens.css` и `theme.ts`

Проверка перед сдачей — чеклист в конце reference/layout-ux.md (скриншоты 1920 и 390 в обеих темах).

6.9 KiB Raw Blame History Unescape Escape