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 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/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<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="Reviewed on agentmods" width="80" height="20"></a>- Socket pass
- Snyk pass
- NVIDIA SkillSpector pass
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.00061 | $0.05200 |
| Opus 5.5 | $0.00024 | $0.02080 |
| Sonnet 5.5 | $0.00012 | $0.01040 |
| Haiku 4.5 | $0.00006 | $0.00520 |
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 16d ago.
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 — 226 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, naming a described motion effect (reverse-lookup vocabulary), and gating sparse interface sound.
- 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).
Reference files
| File | Read when |
|---|---|
| references/decision-framework.md | Default: deciding whether/why to animate, picking easing character; also the Discovery sweep ("where should this animate") |
| 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, toasts, crossfades, list stagger and removal, hover, step forms, Motion layout morphs and auto height, 3D |
| 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 and tooltip (with library origin variables), modal (with @starting-style entry), panel and drawer, 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...") |
| references/interface-sfx.md | Click sounds, interface audio, UI SFX, haptic-plus-sound, or "why is the web afraid of sound" |
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/discovery-mode.json 1.7 KB
- evals/evals.json 2.2 KB
- evals/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 9.0 KB
- references/contextual-animations.md 5.6 KB
- references/curve-fitting.md 4.6 KB
- references/debugging-symptoms.md 7.4 KB
- references/decision-framework.md 6.7 KB
- references/gesture-drag.md 12 KB
- references/interface-sfx.md 2.0 KB
- references/measurement-guide.md 4.1 KB
- references/performance-deep-dive.md 8.5 KB
- references/review-format.md 9.3 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 26 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.
- 16d ago Changed · -11 lines · -14 tokens per session 25b09d6fb5eb
- 1mo ago Changed · +6 lines · +10 tokens per session f9b54b08bfb7
- 1mo ago Changed · +1 lines b2c953c6328d
- 1mo ago Changed · +1 lines b8f3eca4033c
- 1mo ago Changed · -33 lines · -104 tokens per session 6961131441fb
- 1mo 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 (151 stars, last pushed today), licensed MIT. It adds 61 tokens to every session and 5,200 once invoked, about $0.0002 per session on Opus 5.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).
sketch
Throwaway HTML mockups: 2-3 design variants to compare.
popular-web-designs
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
scrollcraft
Premium scroll-driven landing pages; scroll = timeline.
impeccable
Frontend design guidance, upstream-maintained (impeccable).
auteur
Design and build cinematic, award-level web pages.