Micro-Interaction Specby Owl-Listener

Micro-Interaction Spec Skill.

Give engineering the behavior behind a small interaction, not just an animation reference.

Interaction Design
UI Handoff

Source Review · Micro-Interaction SpecSKILL.md

Task Interaction Design Produces • A trigger-and-rules specification for one interaction. • A feedback sequence with timing and easing notes. • Repeat, first-use, and accessibility behavior. Before You Start No particular motion library is required; target-device testing is still necessary.

Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Specify One Interaction Completely

A focused interaction handoff format built around triggers, rules, feedback, and loops or modes.

Source-based workflowNot an execution benchmark

The Working Approach

Micro-Interaction Spec describes one small interaction as a complete behavioral unit. A trigger starts it, rules determine what follows, feedback communicates the result, and loops or modes explain repetition and changes over time. The structure works for a toggle, favorite action, pull-to-refresh, validation cue, or long press.

Motion is only one part of the output. Visual changes, audio, and haptics are possible feedback channels, not guaranteed capabilities of every platform. The source asks for duration, easing, and accessibility considerations alongside the logic, which helps prevent a polished animation from concealing an undefined failure or repeat state.

Expected Deliverables

A trigger-and-rules specification for one interaction.
A feedback sequence with timing and easing notes.
Repeat, first-use, and accessibility behavior.

See the Example Brief

From Brief to Review

01
Define the Trigger
State whether the interaction begins with a gesture, system event, or condition.
02
Write the Rules
Describe the sequence, conditions, and branches before selecting the feedback treatment.
03
Specify Perception and Repetition
Explain what the user sees or feels, how long it lasts, and what changes on later attempts.

02 When to Use It

When to Use It

No particular motion library is required; target-device testing is still necessary.

A Good Fit

Engineering HandoffsUseful when a short interaction looks clear in a prototype but lacks written behavior.
Feedback RefinementHelps separate purposeful confirmation from decoration that adds no useful information.

Limits to Check

One Interaction at a TimeA component with many interdependent states needs a broader state-machine model.
No Device GuaranteeHaptic or audio feedback must be supported and tested on the target platform.

Bring These Inputs

Action and ContextIdentify the exact control, gesture, or event being specified.
Logic and ConditionsProvide successful, rejected, and repeated-action behavior.
Platform ConstraintsState motion preferences, supported feedback channels, and performance limits.

03 Decisions That Matter

Decisions That Matter

Loops Are Explicit
Repeated actions may need a different response from first use instead of replaying the same feedback every time.
Logic Comes Before Easing
The specification remains useful even if the animation is removed for accessibility.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Use the repository's documented installation route and retain any referenced companion files. This entry describes a focused design method rather than an executable application.

Upstream Source File

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/micro-interaction-spec/SKILL.md

No particular motion library is required; target-device testing is still necessary.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief

Use micro-interaction-spec for saving an article to a reading list. Define the click trigger, pending and failed-save rules, visual confirmation, repeat-click behavior, and reduced-motion alternative. Keep it to this interaction and do not assume haptic support on the web.

Inspect the Result

Check the actual output against these observable criteria.

Trigger and resulting state are unambiguous.
Repeated activation has a defined outcome.
Essential feedback survives reduced motion.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesign Read the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner: Owl-Listener
Repository: Owl-Listener/designer-skills
Skill File: interaction-design/skills/micro-interaction-spec/SKILL.md
License: MIT
Reviewed Snapshot: 2026-10-07 · 9a6930cf84a8

Editorial Source Summary

A focused interaction handoff format built around triggers, rules, feedback, and loops or modes.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Is it only for animation?

No. The framework includes triggers, logic, feedback, and repetition. Animation is one feedback option.

How does it differ from a state machine?

It specifies the experience of a focused interaction. A state machine models a larger set of states and valid transitions exhaustively.

Must every interaction use sound or vibration?

No. The source lists channels to consider; the product context and platform determine which are appropriate.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesign Browse Design Skills