micro-interaction-spec
CommunityDesign precise, engaging micro-interactions.
Design & Creative#feedback#accessibility#interaction-design#state-machine#ui-animation#micro-interaction
AuthorOwl-Listener
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Systems for consistent, communicative micro-interactions are often ad-hoc and hard to reuse across interfaces. This Skill provides a structured framework to specify trigger, rules, feedback, and loop/mode definitions so designers and developers can align on interaction behavior.
Core Features & Use Cases
- Structured specification: Trigger, rules (sequence), feedback (visual/audio/haptic), and loop behavior.
- Documentation of examples: Common micro-interactions like toggle switches, pull-to-refresh, and form validation with inline feedback.
- Use Case: Define a button hover that subtly grows and lightens on time-based hover release, providing immediate feedback and accessibility considerations.
Quick Start
Describe a simple micro-interaction using the Trigger-Rules-Feedback framework for a button hover.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: micro-interaction-spec Download link: https://github.com/Owl-Listener/designer-skills/archive/main.zip#micro-interaction-spec Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.