Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →educlopez/animate
Motion design pass — adds purposeful animations or removes excessive ones, respecting MOTION_INTENSITY and the project's animation stack.
Passed 6 of 14 test cases with the skill, and 7 of 14 without it.
and 3 more in the full report
6 fixed3 passed either way5 still failing8 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 6 test cases the skill fixed. Same model, same prompt, with and without the skill.
In `components/Button.tsx`, refine the hover state transitions for background-color and opacity.
| Checked | Without skill | With skill |
|---|---|---|
| Sets the color transition duration within 100ms to 150ms. | Missed | Passed |
The instructions your model reads when the skill loads.
Context: this sub-skill is one lens of the broader ui-craft skill. If the ui-craft skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.
Add or fix animations in $ARGUMENTS. Load the ui-craft skill.
Step 1 — Decision Ladder: run the Decision Ladder from references/motion.md first. Anything that fails it gets removed, not improved.
Step 2 — Pick the library:
references/stack.md. Use the matching section (Motion, GSAP, or Three.js). Never mix libraries on the same property.@keyframes / animation-timeline: view() only.Step 3 — Apply motion budget:
| Element | Budget |
|---|---|
| Color/opacity | 100-150ms |
| Small UI (tooltips, dropdowns) | 150-200ms |
| Medium UI (modals, panels) | 200-300ms |
| Large UI (page transitions, drawers) | 300-400ms |
Exit ≈ 75% of entrance duration (shorter, same ease-out — or a flatter tail like cubic-bezier(0.4, 0, 1, 1) for a softer exit). Never ease-in on UI (see references/motion.md). cubic-bezier(0.22, 1, 0.36, 1) is a safe spring-like default.
Step 4 — Multi-stage sequences → read ../examples/animation-storyboard.md. Stagger 30-80ms, not 200ms.
Step 5 — Respect the knobs:
MOTION_INTENSITY ≤ 3 → hover states only, no entrances, no scroll-triggered.MOTION_INTENSITY 4-7 → standard entrances + hover, one scroll reveal max per section.MOTION_INTENSITY 8+ → scroll-linked, page transitions, magnetic cursor OK (still honor reduced-motion).Output: edit code directly. After each file, print the Review Format table. Flag any animation you removed and why.
Next step: /polish — the compound details around the motion you just added (rung 1).
test cases passed, vs 7 / 14 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.