d2b4ff2018
Скилл переносится из ~/.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>
74 lines
6.9 KiB
Markdown
74 lines
6.9 KiB
Markdown
---
|
||
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 в обеих темах).
|