agentsclimarketplace
Sign in

Motion and interaction

Skill thanhaq/interface-compass-skills/skills/motion-and-interaction

Design and implement purposeful frontend motion and interaction details. Use when Codex needs to add hover states, pressed states, page transitions, layout transitions, scroll choreography, gestures, loading states, or reduced-motion behavior to a product UI.From its SKILL.md

Install
npx -y skills add thanhaq/interface-compass-skills --skill motion-and-interaction

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

One thing to look at

  • 0 stars0 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.

SKILL.md

1.5 KB, 264 tokens by cl100k_base, as published. Nobody here has run it

Motion And Interaction

Rule

Motion must explain cause, state, continuity, progress, or affordance. Remove animation that only announces itself.

Workflow

  1. Identify the state changes users need to understand.
  2. Choose the smallest motion vocabulary that covers those changes.
  3. Prefer CSS transitions for local state and the existing animation library for complex choreography.
  4. Add focus-visible, keyboard, pointer, and touch behavior together.
  5. Respect prefers-reduced-motion and keep the reduced path useful.
  6. Verify motion on at least one desktop and one mobile viewport when possible.

Motion Roles

  • Feedback: button press, control selection, validation.
  • Orientation: navigation changes, panel open or close, route change.
  • Continuity: item reordering, drag, layout changes.
  • Progress: loading, streaming, upload, save.
  • Attention: urgent status or new content.

Timing Defaults

  • 80ms to 140ms for direct feedback.
  • 160ms to 240ms for panels, tabs, and small layout shifts.
  • 280ms to 420ms for route transitions or staged reveals.
  • Use shorter exit motion than entrance motion.

Resources

  • Read references/motion-recipes.md for implementation recipes and reduced-motion patterns.

What ships with it: 2 files

1.3 KB alongside SKILL.md

agents/

references/

Keep looking

Skills are one crate of 325,949. 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.