---
name: aura-design
description: 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)

1. Скопируй набор в `src/` проекта:
   `cp -R ~/.claude/skills/aura-design/kit/{styles,ui,shell} <project>/src/`
2. Зависимости (последние стабильные версии): `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`.
3. Вход и `index.html` — по `kit/main.example.tsx` и `kit/index.example.html` (порядок CSS: шрифты → `tokens.css` →
   `base.css` → компоненты; встроенный скрипт темы в `<head>`). В `tsconfig` нужен `allowImportingTsExtensions`
   (импорты с `.tsx`), или убери расширения.
4. Поменяй `THEME_KEY` в `ui/theme.ts` (и в скрипте `index.html`) и `storageKey` у `AppShell` на свои.
5. Каркас — `AppShell` с разделами; страницы — `PageHeader` + `Panel` + компоненты `ui/`.
6. `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 в обеих темах).