Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/mblode/agent-skills/ui-animationnpx skills add mblode/agent-skills --skill ui-animationgit clone --depth 1 https://github.com/mblode/agent-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/mblode/agent-skills/ui-animation)<a href="https://agentmods.dev/skills/mblode/agent-skills/ui-animation"><img src="https://agentmods.dev/badge/skills/mblode/agent-skills/ui-animation.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00065 | $0.04910 |
| Opus 5 | $0.00032 | $0.02455 |
| Sonnet 5 | $0.00013 | $0.00982 |
| Haiku 4.5 | $0.00006 | $0.00491 |
Grade A, and why
ui-animation scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 229 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI Animation
- IS: designing, implementing, reviewing, debugging UI motion (springs, gestures, drag, easing, CSS transitions, keyframes, Motion), sweeping an interface for the moments that would genuinely benefit from motion, measuring motion from a recording (extract frames, track, fit curves) to emit code plus a handoff spec, and naming a described motion effect (reverse-lookup vocabulary).
- IS NOT: choosing overall visual direction, palettes, or typography (use
ui-designDirection mode), auditing a whole page's UI quality (useui-designAudit mode), or named text-effect specs (use the externalanimate-textskill where installed).
Routing boundary
product-design owns action semantics, scope, reversibility, and contested state choices. ui-design builds and styles those states. ui-animation owns timing, gestures, and measured motion. A routine missing loading or error state stays with the UI build; a gesture replacing a control needs a product decision and an accessible alternative before its physics.
Reference files
| File | Read when |
|---|---|
| references/discovery-workflow.md | Finding worthwhile opportunities for motion in an existing interface |
| references/decision-framework.md | Default: deciding whether/why to animate, picking easing character; also the seam list for a Discovery sweep |
| references/spring-animations.md | Spring physics, Motion useSpring, configuring spring params, Apple damping/response values, asymmetric open/close character, interruption mechanics |
| references/component-patterns.md | Buttons, popovers, tooltips, drawers, modals, toasts with animation |
| references/clip-path-techniques.md | clip-path for reveals, tabs, hold-to-delete, comparison sliders |
| references/gesture-drag.md | Drag, swipe-to-dismiss, momentum, pointer capture, velocity handoff, momentum projection, rotary/knob drag, detents, carousel touch-action |
| references/scroll-animations.md | Scroll-triggered reveals, scrubbed/scroll-driven animation (animation-timeline, useScroll), parallax, sticky scrollytelling, and when a scroll animation shouldn't exist |
| references/performance-deep-dive.md | Jank, CSS vs JS, WAAPI, CSS variables trap, Framer Motion caveats |
| references/debugging-symptoms.md | An animation feels off and the cause isn't named: symptom-indexed tables for sluggish, robotic, cheap, jumpy, and misfiring motion |
| references/svg-animation.md | Animating vector art: line drawing (stroke-dashoffset), SVG transform-origin traps, path morphing, shakes, ambient life |
| references/review-format.md | Reviewing animation code: ten standards (each with flag-on-sight triggers), Before/After/Why table, Block/Approve verdict |
| references/contextual-animations.md | Contextual icon swaps, word-level stagger entrances, peripheral de-emphasis, fixed-offset exits |
| references/transition-recipes.md | Installing a CSS transition: container morph, card resize, badge, dropdown, modal, panel, page slide, icon swap, number pop-in, odometer roll, text swap, success, avatar hover, error shake |
| references/measurement-guide.md | Reverse-engineer: what to measure, eye vs script, reading metrics.json, choosing an ROI |
| references/curve-fitting.md | Reverse-engineer: reading fit_curves.py output, spring vs bezier, judging fit error, asymmetric open/close |
| references/code-output.md | Reverse-engineer: emitting code for CSS, Motion/Framer Motion, SwiftUI, React Native, UIKit |
| references/choreography.md | Reverse-engineer: multi-element/multi-phase motion: staggers, blur-before-move, per-edge settling |
| references/vocabulary.md | Naming a motion effect the user describes vaguely ("what's it called when...") |
What ships with it
24 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- evals/evals.json 1.6 KB
- evaluations/discovery-mode.json 1.7 KB
- evaluations/fixtures/settings-panel.tsx 1.3 KB
- references/choreography.md 2.5 KB
- references/clip-path-techniques.md 2.9 KB
- references/code-output.md 4.2 KB
- references/component-patterns.md 11 KB
- references/contextual-animations.md 5.7 KB
- references/curve-fitting.md 4.6 KB
- references/debugging-symptoms.md 7.0 KB
- references/decision-framework.md 5.4 KB
- references/discovery-workflow.md 1.7 KB
- references/gesture-drag.md 9.1 KB
- references/measurement-guide.md 4.1 KB
- references/performance-deep-dive.md 5.9 KB
- references/review-format.md 8.8 KB
- references/scroll-animations.md 7.1 KB
- references/spring-animations.md 6.7 KB
- references/svg-animation.md 5.4 KB
- references/transition-recipes.md 24 KB
- references/vocabulary.md 12 KB
- scripts/extract_frames.py 4.3 KB runs code
- scripts/fit_curves.py 7.6 KB runs code
- scripts/track_motion.py 7.6 KB runs code
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- yesterday Changed · -33 lines · -104 tokens per session 6961131441fb
- 6d ago First seen · 262 lines · 169 tokens per session scan A 568352cf7d34
ui-animation is a skill published in the GitHub repository mblode/agent-skills (102 stars, last pushed yesterday), licensed MIT. It adds 65 tokens to every session and 4,910 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
claude-design
Design one-off HTML artifacts (landing, deck, prototype).
pretext
Build creative browser demos with DOM-free text layout.
sketch
Throwaway HTML mockups: 2-3 design variants to compare.
popular-web-designs
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
impeccable
Frontend design guidance, upstream-maintained (impeccable).
web-design
Penguin visual language for generated web pages and app UIs — GitHub-style simplicity with a single blue accent, light and pure-black dark themes, design tokens, component and chat-interface recipes, plus an opt-in warm paper editorial theme.