# designing-user-experience

Скилл для проектирования поведения интерфейса: потоки, формы, пустые, загрузочные и ошибочные состояния. Пригодится, когда вёрстка готова, а на плохих данных всё ломается.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 458 установок · ★ 15
- Автор: osmontero
- Лицензия: MIT · policy=mirror · лицензия открытая, файл — в исходнике
- Исходник: https://github.com/osmontero/opencode-skills/tree/HEAD/skills/designing-user-experience/SKILL.md
- Обновлён: 2026-10-23
- HTML: https://affpapa.org/nevibecode/skills/designing-user-experience

## Что делает

Скилл разбирает интерфейс не по экранам, а по состояниям. Главное правило: компонент не готов, пока у него нет пустого, загрузочного, ошибочного и частичного состояния. Список, который рисуется только при наличии элементов, — это демо, а не компонент.

Внутри чек-лист из восьми шагов: карта потока с ответвлениями, матрица состояний, пути отказа, тексты кнопок и ошибок, бюджет отклика на 100 мс, 1 с и 10 с, подтверждение и отмена для необратимых действий, проверка на тач-экране и проход по потоку от лица нового пользователя. Отдельный шаг — формы: одна колонка, подписи над полями, требования показываются до ввода, а не после. Валидация на каждый третий символ письма раздражает, поэтому проверка идёт по потере фокуса, а после показанной ошибки — уже на лету.

Скилл ссылается на соседние: `designing-frontend-interfaces` про визуал, `building-accessible-interfaces` про доступность, `reviewing-interface-quality` для аудита готового интерфейса. Текст обрезан, так что про остальные разделы судить не берусь. Ставить есть смысл, если вы генерируете UI агентом и уже устали ловить пустые таблицы и баннеры вместо ошибок у конкретного поля.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add osmontero/opencode-skills --skill designing-user-experience -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/designing-user-experience/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/designing-user-experience/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add osmontero/opencode-skills --skill designing-user-experience -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/designing-user-experience/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add osmontero/opencode-skills --skill designing-user-experience -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/designing-user-experience/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install osmontero/opencode-skills designing-user-experience
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/designing-user-experience/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add osmontero/opencode-skills --skill designing-user-experience -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/osmontero/opencode-skills --path skills/designing-user-experience
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/designing-user-experience/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add osmontero/opencode-skills --skill designing-user-experience -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/osmontero/opencode-skills/tree/HEAD/skills/designing-user-experience/SKILL.md

## Когда брать
- разложить поток по шагам и ответвлениям до отрисовки макетов
- заполнить матрицу состояний для каждого компонента с данными
- развести четыре разных пустых состояния вместо одного «Ничего не найдено»
- написать тексты ошибок и кнопок так, чтобы пользователь понимал следующий шаг
- настроить момент валидации формы, чтобы ошибка не выскакивала на третьем символе

## Примеры запросов агенту
- пройди по чек-листу скилла для формы оформления заказа
- составь матрицу состояний для списка заявок: пусто, загрузка, ошибка, частичная загрузка
- проверь поток подтверждения удаления аккаунта на необратимость

## Похожие
- [user-flows-and-guided-paths](https://affpapa.org/nevibecode/skills/user-flows-and-guided-paths.md) — скилл · 879 установок
- [form-design](https://affpapa.org/nevibecode/skills/form-design.md) — скилл · 1900 установок
- [user-flow-diagram](https://affpapa.org/nevibecode/skills/user-flow-diagram.md) — скилл · 2400 установок
- [ui-design-patterns](https://affpapa.org/nevibecode/skills/ui-design-patterns.md) — скилл · 853 установки
- [renaissance-architecture](https://affpapa.org/nevibecode/skills/renaissance-architecture.md) — скилл · 3300 установок
- [ui-design](https://affpapa.org/nevibecode/skills/frappe-ui-design.md) — скилл · 832 установки

Из того же набора: [osmontero/opencode-skills](https://affpapa.org/nevibecode/by/osmontero/opencode-skills.md) — 2 карточки

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md