# microinteractions

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

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

## Что делает

Скилл разбирает мелкие интерфейсные моменты по схеме Дэна Саффера. Триггер запускает действие, правила решают, что произойдёт дальше, отклик показывает процесс, а циклы и режимы описывают поведение во времени. Внутри — работа с триггерами, правилами состояния и механикой отклика, плюс справочники `references/case-studies.md`, `trigger-design.md` и `rules-and-state.md`: там разобраны отправка формы, переключатели, pull-to-refresh, состояния загрузки и уведомления.

Оценка формализована. Восемь строк быстрой диагностики, счёт считается как `round(passed / 8 × 10)`, и скилл обязан назвать текущий балл, проваленные строки и исправление для каждой. На выходе получается отчёт: балл, что не проходит, что менять.

Инструмент узкий, и это скорее плюс. За общей полировкой интерфейса он отправляет к `refactoring-ui`, за аффордансами к `design-everyday-things`. Так что ждать от него перестройки макета не нужно: его дело — отклик и состояния отдельных элементов.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add wondelai/skills --skill microinteractions -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add wondelai/skills --skill microinteractions -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add wondelai/skills --skill microinteractions -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install wondelai/skills microinteractions
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add wondelai/skills --skill microinteractions -a gemini-cli
```

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

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add wondelai/skills --skill microinteractions -a opencode
```

### Claude.ai

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

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

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

## Примеры запросов агенту
- Разбери состояние кнопки «Оформить заказ» по схеме микровзаимодействий и поставь оценку по восьми строкам диагностики.
- У переключателя тёмной темы не видно состояний. Покажи, какие нужны, и что исправить в первую очередь.
- Проверь отклик на ошибку в поле email: хватит подсветки самого поля или нужен отдельный индикатор?

## Похожие
- [interaction-design](https://affpapa.org/nevibecode/skills/aj-geddes-interaction-design.md) — скилл · 505 установок
- [social-media](https://affpapa.org/nevibecode/skills/social-media.md) — скилл · 504 установки
- [comfort-safety](https://affpapa.org/nevibecode/skills/comfort-safety.md) — скилл · 486 установок
- [impeccable](https://affpapa.org/nevibecode/skills/impeccable.md) — скилл · 361300 установок
- [uizze-ui](https://affpapa.org/nevibecode/skills/uizze-ui.md) — скилл · 144000 установок
- [bencium-controlled-ux-designer](https://affpapa.org/nevibecode/skills/bencium-controlled-ux-designer.md) — скилл · 4600 установок

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

_Часть страницы не вошла по размеру — она есть в HTML-версии._

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