agentsclimarketplace

Dec motion animation

Skill jpoindexter/design-engineering-canon/skills/dec-motion-animation

20 agent-agnostic skills encoding the foundational canon of design engineering — usability heuristics, UX laws, product strategy, accessibility, performance, motion, software principles, design systems, AI-native patterns. Installs globally for Claude Code and any SKILL.md-aware agent.

Install
npx -y skills add jpoindexter/design-engineering-canon --skill dec-motion-animation

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.

What its author says it does

Copied from the file, not written here

Interface motion and animation — the 12 principles of animation applied to UI, easing and spring physics (ease-out entrances / ease-in exits), the FLIP technique for performant layout animation, and motion as feedback not decoration. Use when animating a transition, choosing easing/duration, building layout animations, or deciding whether motion is communicating or just decorating.

SKILL.md

1.8 KB, 303 tokens by cl100k_base, as published. Nobody here has run it

Motion & Animation

Motion should communicate state and spatial relationships — never decorate.

  • 12 Principles of Animation (Disney → UI): Especially easing, anticipation, follow-through, and staging applied to interface transitions. Motion should feel physical and intentional.
  • Easing & Spring Physics: Natural motion uses ease-out for entrances (decelerate in) and ease-in for exits (accelerate out). Spring-based motion (stiffness/damping) reads more physical than fixed-duration curves.
  • FLIP Technique: First, Last, Invert, Play — performant layout animations by measuring start/end and animating transforms, not layout-triggering properties (width/height/top/left).
  • Motion as Feedback: Animation should communicate state change and spatial relationships, never decorate. If it doesn't clarify, cut it.

How to apply

  • Entrances ease-out, exits ease-in; asymmetric durations read more natural than symmetric.
  • Animate only transform and opacity to stay on the compositor and hold 60fps — use FLIP for layout moves.
  • Prefer springs for interactive, gesture-driven motion; fixed curves for deterministic state transitions.
  • Respect prefers-reduced-motion — provide a reduced/instant fallback for every non-essential animation.
  • Before adding motion, ask what it communicates. No answer → don't animate.

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.