К основному содержанию
скилл CX Codex

micro-interaction-spec — скилл для Claude Code: спецификация

Описывает одну микромикровзаимодействие целиком: триггер, правила, отклик, циклы и режимы. Пригодится, когда пора передать её в разработку.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add Owl-Listener/designer-skills --skill micro-interaction-spec -a claude-code
Открыть на GitHub

Что делает 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-code

2Вручную: положить файлы

~/.claude/skills/micro-interaction-spec/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/micro-interaction-spec/

По шагам, с командами для каждой платформы: Как установить скилл в 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

Похожие скиллы

Всё по теме «Дизайн» →
animation-micro-interaction-pack patricio0312rev Набор готовых паттернов движения для интерфейса: ховеры, входы и выходы элементов, отклик на жесты. Пригодится, когда UI выглядит статично и хочется оживить его без ручного подбора таймингов. CX Codex +1 499установок micro-interactions dylantarre Скилл для ИИ-агента, который подсказывает, как анимировать кнопки, тумблеры, чекбоксы, индикаторы загрузки и бейджи уведомлений. CX Codex +1 1 400установок micro-100-200ms dylantarre Скилл для микроанимаций длительностью 100–200 мс: подсказки, выпадающие меню, мелкая обратная связь. Помогает подобрать тайминг и кривые. CX Codex +1 518установок micro-interaction iart-ai Скилл для мелкой анимации интерфейса: ховеры, тоглы, тосты, шторки, перестановка списков. Пригодится, когда UI нужно оживить, а не украсить. CX Codex +1 2 500установок emilkowalski-motion nexu-io Добавляет микровзаимодействия, переходы состояний и анимацию к готовому интерфейсу. Работает после того, как макет или компонент уже собран. CX Codex +1 2 300установок interaction-design aj-geddes Скилл для проектирования взаимодействий: анимации, состояния загрузки и ошибок, отклик на нажатия. Пригодится, когда интерфейс работает, но ощущается сухим. CX Codex +1 505установок

Из того же набора109

state-machine Скилл помогает спроектировать поведение интерфейса через конечные автоматы: состояния, переходы, события и гарды. Пригодится, когда в компоненте слишком много флагов. CX Codex +1 2 200установок design-token-audit Проверяет, где в проекте обходят дизайн-токены: находит захардкоженные значения, дубли и пробелы в наборе токенов. CX Codex +1 2 200установок animation-principles Скилл для настройки одной конкретной анимации в интерфейсе: подбирает easing, длительность и порядок движения элементов. CX Codex +1 2 200установок wireframe-spec Составляет текстовые спецификации вайрфреймов с приоритетами контента и заметками о поведении элементов. Пригодится при проектировании структуры интерфейса до начала работы с визуалом. CX Codex +1 2 300установок accessibility-test-plan Помогает спланировать тестирование доступности интерфейса с ассистивными технологиями и реальными пользователями. Пригодится перед релизом для покрытия критериев WCAG. CX Codex +1 2 100установок interview-script Создаёт сценарий пользовательского интервью с открытыми вопросами и заметками ведущему. Нужен перед качественным исследованием. CX Codex +1 2 100установок design-rationale Помогает написать письменное обоснование дизайн-решения: что выбрали, почему и какие были альтернативы. Пригодится перед ревью или хендоффом. CX Codex +1 2 100установок card-sort-analysis Анализирует результаты открытой и закрытой карточной сортировки, строит матрицу сходства и предлагает категории для навигации. CX Codex +1 2 100установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой