make-ui-spec

Files (2)

• SKILL.md
• template.md · references/

SKILL.md (first lines)

# Make UI Spec (UI/UX Design)

Создать `ui-spec.md` — документ интерфейсных требований, фиксирующий эскизы экранов, поведение при различных состояниях, доступность/локализацию и соответствие пользовательским сценариям.

Документ отвечает на четыре вопроса:

1. **Как выглядит интерфейс?** — эскизы и описания каждого экрана/компонента
2. **Как ведёт себя интерфейс при разных состояниях?** — загрузка, ошибка, пустой список, успех, офлайн и т.д.
3. **Как интерфейс доступен и локализован?** — требования к a11y и i18n
4. **Как экраны соотносятся с пользовательскими сценариями?** — трассировка к Feature Spec

## Процесс

### Шаг 1 — Сбор контекста

Прочитать всё релевантное перед написанием:
- Feature Spec, если есть (`feature-spec.md` или `*.spec.md` в корне проекта)
- UI/UX требования, макеты или дизайн-файлы, упомянутые пользователем
- Базу знаний, если есть (`.docs/knowledge/README.md`)
- ADR (`.docs/knowledge/adr/`)

Спросить пользователя о недостающей информации — не придумывать. Типичные пробелы:
- Какой экран является стартовым / главным
- Нужна ли мобильная или адаптивная версия
- Требования к теме (светлая/тёмная/системная)
- Уровень детализации эскизов (текстовый вайрфрейм vs. псевдокод компонента)

### Шаг 2 — Составить документ

Использовать шаблон из `references/template.md`. Заполнить каждый раздел. Если раздел неприменим — написать одну строку с обоснованием вместо удаления.

**Раздел «Экраны»** — один подраздел на экран или крупный компонент:
- Текстовый вайрфрейм с ASCII-разметкой или описание структуры
- Список UI-элементов и их назначение
- Навигация: откуда попадает пользователь и куда может уйти

**Раздел «Состояния интерфейса»** — обязательные состояния для каждого экрана:
- `loading` — что видит пользователь в ожидании
- `success` — штатный вид с данными
- `empty` — экран без данных (первый запуск, пустой список)
- `error` — сообщение об ошибке, возможность повтора
- Дополнительные состояния: `offline`, `partial`, `disabled` — по необходимости

**Раздел «Доступность и локализация»** — таблица требований:
| Аспект | Требование | Приоритет |
|--------|-----------|-----------|
Строки: клавиатурная навигация, контрастность, скринридеры, языки интерфейса, формат даты/числа.

**Раздел «Трассировка к сценариям»** — таблица:
| Сценарий (из Feature Spec) | Экраны / компоненты | Состояния |
|---------------------------|--------------------|-----------| 

### Шаг 3 — Ревью перед записью

Представить пользователю краткое резюме: сколько экранов, какие ключевые состояния, есть ли сделанные допущения. Пригласить к правкам перед записью файла.

### Шаг 4 — Записать файл

Записать `ui-spec.md` в корень проекта (или путь, указанный пользователем). Использовать Markdown; ASCII-вайрфреймы оборачивать в блок ` ```text `.

После записи вывести путь к файлу и два предложения о зафиксированных решениях.

## Язык

Общаться с пользователем на русском. Документ писать на русском. Технические термины, идентификаторы и код внутри блоков кода остаются в оригинальном виде (английский).

## Правила стиля

- Настоящее время: «Кнопка показывает…», а не «будет показывать»
- Вайрфреймы — текстовые, ASCII; никаких внешних изображений без прямой ссылки от пользователя
- Каждый ASCII-вайрфрейм должен иметь подпись (`// Название экрана`)
- Документ не должен превышать 500 строк; при превышении — разбить по экранам и дать оглавление
- Не описывать реализацию (CSS-классы, имена компонентов); только поведение и внешний вид

## Дополнительные ресурсы

- **`references/template.md`** — пустой шаблон документа для заполнения

From YamiHilik/SDLCRoom, Apache-2.0.

More from YamiHilik/SDLCRoom