cami-design-interactionlisted
Install: claude install-skill PawlakCamille/cami-design
# Cami — Interaction
## Required reading
Before proceeding, load `../cami-design/references/review-protocol.md` for the shared **Context Gathering Protocol**, **Design System Protocol**, severity scale, and **Review Output Format**. Then load `../cami-design/references/motion.md` — the **Animation Decision Framework** lives there and is the canonical source for the rules below.
---
Tune the parts of an interface that respond to the user: hover, focus, press, enter/exit, feedback. Every motion needs a reason.
## When to Use This Mode
- Animations feel sluggish, janky, or excessive
- Buttons don't feel responsive to press
- Hover states missing or heavy-handed
- Enter/exit transitions are jarring or plays on page load
- User says "make it feel better"
- Adding delight or personality to a flow
## Preparation
1. Check `package.json` for motion libraries (`motion`, `framer-motion`, React Spring, etc.).
2. Identify existing easing and duration conventions in the codebase.
3. Read `../cami-design/references/motion.md` (Animation Decision Framework, performance, scroll-linked motion) and `../cami-design/references/interaction.md` (press, hover, focus, tooltips, mobile/touch).
The Animation Decision Framework — "should this animate? what's the purpose? what easing?" — is documented once, in `references/motion.md`. Apply it as a gate before flagging any motion-related finding.
## Review Dimensions
### Press & Feedback
- Buttons use `scale(0.96)` on `:active` — never smaller