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 sutchan/Agent-Skills-Hub --skill ui-animationgit clone --depth 1 https://github.com/sutchan/Agent-Skills-HubWrote 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/sutchan/agent-skills-hub/ui-animation)<a href="https://agentmods.dev/skills/sutchan/agent-skills-hub/ui-animation"><img src="https://agentmods.dev/badge/skills/sutchan/agent-skills-hub/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/sutchan/agent-skills-hub/ui-animation"><img src="https://agentmods.dev/badge/skills/sutchan/agent-skills-hub/ui-animation.svg" alt="Reviewed on agentmods" width="80" 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.00015 | $0.05241 |
| Opus 5.5 | $0.00006 | $0.02096 |
| Sonnet 5.5 | $0.00003 | $0.01048 |
| Haiku 4.5 | $0.00002 | $0.00524 |
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 10d 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 — 230 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.
- 10d ago Changed ace594d449d3
- 21d ago Changed · -11 lines 52100470f90d
- 27d ago First seen · 241 lines · 15 tokens per session scan A fc067ee1442a
ui-animation is a skill published in the GitHub repository sutchan/Agent-Skills-Hub (2 stars, last pushed 5d ago), licensed MIT. It adds 15 tokens to every session and 5,241 once invoked, about $0.0001 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-10-02.
Other skills, from other repositories
test-driven-development
Use when implementing any feature or bugfix, before writing implementation code.
testing-patterns
Plan, write, and maintain automated tests in any language, with worked examples in Python and JavaScript/TypeScript. Use this skill whenever the user wants to write or plan tests, apply TDD (red-green-refactor), structure unit tests with arrange-act-assert and given-when-then naming, choose between fakes, stubs, and…
laravel-tdd
Drives Laravel feature development with Pest or PHPUnit — factories, RefreshDatabase, fakes for queues/mail/notifications, Sanctum auth, and Inertia assertions. Use when writing or fixing a Laravel controller, Eloquent model, policy, job, or notification, when the project uses Pest/PHPUnit, or when asked to test an…
php-codeigniter-tdd
Drives CodeIgniter 4 test development — CIUnitTestCase, DatabaseTestTrait's migrate/refresh/seed lifecycle, the dedicated tests database group, and FeatureTestTrait for HTTP-level assertions. Use when writing or fixing a CodeIgniter 4 test, when a test touches the database, or when a test suite is unexpectedly slow or…
test-driven-development
Drives development with tests written before implementation code, in Go, TypeScript, PHP, or any language. Use when implementing new logic or behavior, fixing a reported bug (write the reproduction test first), modifying existing functionality, or when asked to "add a test," "TDD this," or "prove this works." Use even…
test-driven
A test-driven development guide. TDD means writing a test for the desired behaviour first, seeing it fail, then writing the smallest implementation that makes it pass.