← ClaudeAtlas

cami-design-interactionlisted

Hover, press, animations, motion. Use when interactions feel sluggish, flat, robotic, or lifeless.
PawlakCamille/cami-design · ★ 2 · Web & Frontend · score 68
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