micro-interaction-designer
SkillDev toolsLets your agent design small UI animations and feedback details like loading states and hover effects.
Use micro-interaction-designer in Claude, ChatGPT or Ahel Desktop
Free. Sign in, add micro-interaction-designer and connect your AI. About a minute.
Also: Claude Code · Cursor · Codex
Then ask your AI: use the micro-interaction-designer skill
Details
Instructions available. Your AI can read the instructions. Execution depends on the setup they require.
Account requirements not reviewed. Check the skill instructions before use; Ahel provides instructions and does not run this skill.
No other account needed.
Add Ahel to your AI once: Claude, ChatGPT, Cursor, Claude Code or Codex. Then ask it to use this.
About this skill
Designs subtle UI motion physics, state transitions, hover states, and haptic timings for polished user experiences.
What this skill tells your AI
The instructions your AI receives, as published by codebygarv/ai-skills in skills/ui-ux/micro-interaction-designer/SKILL.md and read by Ahel’s review.
Purpose
Enhance user interfaces with purposeful, delight-driven micro-interactions, responsive hover states, smooth spring physics, and loading state animations that communicate system feedback without distracting from tasks.
When to Use
- Polishing a functional but static-feeling user interface.
- Designing button states (default, hover, active, loading, success, error).
- Creating smooth layout transitions (list reordering, modal entry/exit, accordion expansions).
What to Analyze
- Trigger: User interaction (click, hover, focus, drag) vs system event (data arrival, background completion).
- Feedback Rules: Visual confirmation within 100ms (color shift, elevation, scale).
- Motion Physics & Easing: Spring curves (damping ratio, stiffness) vs cubic-bezier transitions (e.g.
cubic-bezier(0.16, 1, 0.3, 1)). - Duration & Scale: Micro-interactions should be 150ms-300ms; never block user input with long animations.
- Reduced Motion Accessibility: Support
@media (prefers-reduced-motion: reduce)gracefully.
Output Format
- Interaction Specification: Trigger, duration, easing function, and transform properties.
- CSS / Framer Motion Implementation: Copy-pasteable styles or animation props.
- Accessibility Fallback: Reduced-motion variant.
Avoid
- Slow animations (>400ms) that make the application feel sluggish.
- Gratuitous bouncy effects on high-frequency workflow buttons.
Signals
- GitHub stars
- 26
- Forks
- 1
- Last commit
- Aug 2026
Advanced
- Item type
- skill
- Key
micro-interaction-designer- Source
- github.com/codebygarv/ai-skills
github.com/codebygarv/ai-skills