micro-interaction-spec — скилл для Claude Code: спецификация
Описывает одну микромикровзаимодействие целиком: триггер, правила, отклик, циклы и режимы. Пригодится, когда пора передать её в разработку.
npx skills add Owl-Listener/designer-skills --skill micro-interaction-spec -a claude-codeЧто делает micro-interaction-spec
Скилл ведёт вас по каркасу из четырёх частей. Сначала триггер: что запускает взаимодействие — действие пользователя вроде клика или свайпа, системное событие или условие по времени и порогу. Дальше правила: логика и последовательность, ветвления и условия. Потом отклик: как человек видит результат — смена цвета или размера, анимация, звук, вибрация. И наконец циклы с режимами: повторяется ли взаимодействие, меняется ли со временем, чем отличается первый раз от последующих.
На выходе — спецификация по единому формату: имя, триггер, последовательность правил, отклик по каналам, длительность и easing, поведение цикла, доступность. Внутри скилла есть список типовых случаев: переключатели с анимацией состояния, pull-to-refresh с прогрессом, лайк с праздничной анимацией, валидация формы с инлайн-подсказкой, отклик кнопки на нажатие, свайп-действия с порогом, долгое нажатие с радиальным прогрессом.
Скилл советует держать длительность в пределах 100–500 мс для большинства случаев, давать отклик сразу и уважать настройку reduced-motion. Тестировать стоит на целевых устройствах — иначе анимация просядет там, где вы её не проверяли. Если нужна только работа с движением, берите animation-principles; для компонентов с несколькими состояниями — state-machine.
Какие задачи решает
- описать триггер и правила одного взаимодействия перед передачей в разработку
- разложить отклик по визуальному, звуковому и haptic-каналу
- определить поведение при первом запуске и при повторе
- учесть reduced-motion и доступность в спецификации
- задать длительность и easing для анимации состояния
Примеры запросов агенту
- Опиши микровзаимодействие для переключателя темы: триггер, правила, отклик, циклы
- Сделай спецификацию pull-to-refresh с индикацией прогресса по формату скилла
- Разложи лайк с анимацией на триггер, правила и отклик, добавь reduced-motion
Как установить micro-interaction-spec
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill micro-interaction-spec -a claude-code2Вручную: положить файлы
~/.claude/skills/micro-interaction-spec/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/micro-interaction-spec/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill micro-interaction-spec -a codex2Вручную: положить файлы
.agents/skills/micro-interaction-spec/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill micro-interaction-spec -a cursor2Вручную: положить файлы
.cursor/skills/micro-interaction-spec/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills micro-interaction-spec2Вручную: положить файлы
.github/skills/micro-interaction-spec/SKILL.md1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill micro-interaction-spec -a gemini-cli2Командой платформы
gemini skills install https://github.com/Owl-Listener/designer-skills --path interaction-design/skills/micro-interaction-specВручную: положить файлы
.devin/skills/micro-interaction-spec/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill micro-interaction-spec -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о micro-interaction-spec
Как установить micro-interaction-spec в Claude?
Выполните npx skills add Owl-Listener/designer-skills --skill micro-interaction-spec -a claude-code. Скилл окажется в ~/.claude/skills/micro-interaction-spec/SKILL.md.
Что делает micro-interaction-spec?
Проводит одно микровзаимодействие через каркас из триггера, правил, отклика и циклов с режимами, а затем сводит всё в спецификацию для разработчика.
Чем отличается от animation-principles и state-machine?
animation-principles нужен, когда важна только работа с движением. state-machine берут для компонентов с несколькими состояниями. Этот скилл описывает одно взаимодействие целиком.
Исходный текст
SKILL.md · MIT
--- name: micro-interaction-spec description: Specify one micro-interaction completely — trigger, rules, feedback, loops, and modes. Use when handing a single interaction to engineering. For motion craft alone use `animation-principles`; for multi-state components use `state-machine`. --- # Micro-Interaction Spec You are an expert in designing micro-interactions that make interfaces feel alive and intuitive. ## What You Do You specify micro-interactions using a structured framework covering trigger, rules, feedback, and loops. ## Micro-Interaction Framework ### 1. Trigger What initiates the interaction: user action (click, hover, swipe), system event (notification, completion), or conditional (time-based, threshold). ### 2. Rules What happens once triggered: the logic and sequence of the interaction, conditions and branching. ### 3. Feedback How the user perceives the result: visual change (color, size, position), motion (animation, transition), audio (click, chime), haptic (vibration patterns). ### 4. Loops and Modes Does the interaction repeat? Does it change over time? First-time vs repeat behavior, progressive disclosure. ## Common Micro-Interactions - Toggle switches with state animation - Pull-to-refresh with progress indication - Like/favorite with celebratory animation - Form validation with inline feedback - Button press with depth/scale response - Swipe actions with threshold feedback - Long-press with radial progress ## Specification Format For each micro-interaction: name, trigger, rules (sequence), feedback (visual/audio/haptic), duration/easing, loop behavior, accessibility considerations. ## Best Practices - Every micro-interaction should have a purpose - Keep durations short (100-500ms for most) - Provide immediate feedback for user actions - Respect reduced-motion preferences - Test on target devices for performance
© Owl-Listener · MIT · Owl-Listener/designer-skills