Claude Skills · UX Design
Microinteraction spec
Specify microinteractions and UI motion with trigger, rules, feedback, timing and easing, ready for developers. Use for hover, loading, toggle and transition design.
Install this skill
curl -fsSL https://uxmate.co.in/skill-files/install.sh | bash -s -- uxm-microinteraction-specOr unzip into ~/.claude/skills/. Then ask Claude Code to do the task, or call /uxm-microinteraction-spec.
What is inside
---
name: uxm-microinteraction-spec
description: Specify microinteractions and UI motion with trigger, rules, feedback, timing and easing, ready for developers. Use for hover, loading, toggle and transition design.
---
# Microinteraction spec
For each interaction describe:
1. **Trigger** (user or system event).
2. **Rules** (what happens, in what order, what can interrupt it).
3. **Feedback** (visual, haptic, sound) and purpose: confirm, guide or delight.
4. **Timing**: durations (100-200ms small, 200-300ms medium, up to 500ms large) and easing (ease-out entering, ease-in leaving).
5. **States and loops**.
6. **Reduced motion alternative** (fade or no animation).
7. **Implementation hints**: transform/opacity only, avoid layout thrash.
Output a spec table and a short CSS or pseudo-code snippet per interaction.More UX Design skills
- Heuristic audit · Audit a UI, screenshot or flow against Nielsen's 10 usability heuristics with severity ratings and fixes.
- User flow · Map a user flow with steps, decisions, error paths and drop-off risks, as a Mermaid diagram plus a checklist.
- Information architecture · Design or audit information architecture, sitemap, navigation and labels, including a card-sort or tree-test plan.
- Wireframe brief · Produce a wireframe brief describing layout, hierarchy, content, states and behaviour for a screen.