agentsclimarketplace

Cami design interaction

Skill PawlakCamille/cami-design/skills/cami-design-interaction

Catch what's off before you ship. A Claude Code skill that audits UI and routes each issue to layout, interaction, copy, or engineering.

Install
npx -y skills add PawlakCamille/cami-design --skill cami-design-interaction

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
  • 2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Hover, press, animations, motion. Use when interactions feel sluggish, flat, robotic, or lifeless.

SKILL.md

4.6 KB, as published. Nobody here has run it

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 than 0.95
  • Focus states visible and accessible
  • Haptic-feeling transitions (short, specific)
  • Stacked clickable rows (sidebar, dropdown, settings sub-nav) use the cursor-continuity pattern — see ../cami-design/references/interaction.md → Pointer Continuity in Stacked Rows

Enter / Exit

  • Split and stagger enter animations (see motion.md → Enter Animations for the delay value)
  • Exits are subtler than enters (small translateY, not full-height)
  • Exits are faster than enters — use ~75% of the enter duration
  • initial={false} on AnimatePresence to skip page-load animations

Specificity

  • Never transition: all — specify properties (transition-property: scale, opacity)
  • will-change only on transform, opacity, filter — never will-change: all
  • Only add will-change when you notice first-frame stutter

Icons

  • Animate with opacity, scale, blur — never toggle visibility
  • Standard values: scale 0.25 → 1, opacity 0 → 1, blur 4px → 0

Interruptibility

  • Use CSS transitions for interactive state changes (interruptible mid-animation)
  • Reserve keyframes for staged sequences that run once

Missed Opportunities (additive)

The dimensions above are corrective. Also flag places that don't animate but should:

  • A state change that teleports (content swap, layout jump) where a brief transition would prevent the jar
  • Spatially-connected UI (a panel opening from a trigger) with no motion explaining where it came from
  • Rare, high-emotion moments (first-run, success) using none of the delight budget they're allowed

Report these in their own output section, a handful at most, grounded in seams you actually observed. Not a wishlist.

Accessibility

Reduced-motion fallback is mandatory — see ../cami-design/references/accessibility.md → Motion for the canonical snippet, the rationale (vestibular disorders, what to keep vs. remove), and the application rule.

Output

Findings as tables with columns # | Severity | Before | After | Why, grouped by dimension. Severity is 🔴 (Important) or 🟡 (Nit); see ../cami-design/references/review-protocol.md → Severity scale for calibration. Skip dimensions with no issues.

Close with the walkthrough offer and (after fixes) the Verify pass. See ../cami-design/references/review-protocol.md → Closing / Walkthrough mode / Verify pass.

References

  • ../cami-design/references/motion.md — Animation Decision Framework, performance, scroll-linked motion, advanced techniques
  • ../cami-design/references/interaction.md — press feedback, hover, focus, tooltips, drag & drop, mobile/touch
  • ../cami-design/references/accessibility.md — reduced-motion fallback, vestibular safety
  • ../cami-design/references/anti-patterns.md — sweep last for motion-related "AI slop" tells (bounce easing, glow effects, gratuitous reveals)
  • ../cami-design/libraries/easing-curves.json — canonical easing values consumed by motion.md

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.