Add motion and animations

animateskillsetup L138
educlopez/ui-craft
What it does

Add motion to UI components honoring budget and intensity

Best for

When you need motion that passes the Decision Ladder and respects motion budgets (100-400ms per element class).

Inputs
  • · target UI element
  • · MOTION_INTENSITY setting (1-10+)
  • · optional: stack reference if opted in
Outputs
  • · CSS transitions / @keyframes / animation-timeline edits
Requires
  • · ui-craft skill (parent)
  • · references/motion.md
  • · references/stack.md
Preconditions
  • · ui-craft skill loaded and discovery completed
  • · target component identified
Failure modes
  • · ease-in applied to UI (anti-pattern)
  • · animation duration exceeds budget
  • · libraries mixed on same property
Trust signals
  • · Motion budget table provided
  • · Anti-slop rules (no ease-in on UI)
  • · Knob-gating by MOTION_INTENSITY documented