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 agents-inc/skills --skill web-animation-view-transitionsgit clone --depth 1 https://github.com/agents-inc/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/agents-inc/skills/web-animation-view-transitions)<a href="https://agentmods.dev/skills/agents-inc/skills/web-animation-view-transitions"><img src="https://agentmods.dev/badge/skills/agents-inc/skills/web-animation-view-transitions/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/agents-inc/skills/web-animation-view-transitions"><img src="https://agentmods.dev/badge/skills/agents-inc/skills/web-animation-view-transitions.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector warn
SkillSpector: 1 finding, up to medium
These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →
- medium Excessive Agency · line 308 Skill enables autonomous high-impact decisions without human-in-the-loop verification. Critical operations (destructive commands, financial transactions, data deletion) should require explicit user confirmation.Fix: Add human-in-the-loop confirmation for destructive, irreversible, or high-impact operations. Never auto-execute commands that modify files, send data, or alter system state.
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.00034 | $0.03092 |
| Opus 5 | $0.00017 | $0.01546 |
| Sonnet 5 | $0.00007 | $0.00618 |
| Haiku 4.5 | $0.00003 | $0.00309 |
Grade A, and why
web-animation-view-transitions 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 2d 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 — 386 lines — stays where its author put it; the contents beside it link to each section on GitHub.
View Transitions API Patterns
Quick Guide: The browser screenshots the old state, holds the new one live, and animates between them as a tree of pseudo-elements.
document.startViewTransition()drives a same-document change;@view-transition { navigation: auto }on both pages drives a cross-document one.view-transition-namepulls an element out of the root snapshot so it can travel on its own, and the whole animation is customised in CSS rather than in script.
Detailed Resources:
- examples/core.md — feature detection, state transitions, the three promises, skipping, CSS overrides
- examples/spa.md — theme reveal, form steps, tab panels, accordions, list reordering, reduced motion
- examples/shared-elements.md — hero animations, multi-element cards, cross-document pairs, modals
- reference.md — naming rules, pseudo-element tree, browser support, API tables
Which path applies
- Client routing or in-page state, with the DOM updated by script —
startViewTransition()takes the update as a callback and captures around it; follow examples/spa.md. - Server-rendered pages navigating to each other — no script at all: both documents opt in with
@view-transition { navigation: auto }, and names are set through thepageswapandpagerevealevents; follow examples/shared-elements.md. - One element has to travel between the two states rather than cross-fade with everything else —
it needs a
view-transition-namematched on both sides; follow examples/shared-elements.md.
<critical_requirements>
Before writing View Transitions code
Guard startViewTransition behind a support check, and run the update either way. The call is
absent rather than inert where the API is unimplemented, so an unguarded call throws and the DOM
change never happens at all.
What ships with it
5 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.
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.
- 2d ago Changed · +31 lines · +3 tokens per session 2f8fa47c48d8
- 5d ago First seen · 355 lines · 31 tokens per session scan A 1dc703ea7dce
web-animation-view-transitions is a skill published in the GitHub repository agents-inc/skills (24 stars, last pushed 3d ago), licensed MIT. It adds 34 tokens to every session and 3,092 once invoked, about $0.0002 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-09-05.
Other skills, from other repositories
moai-design-tools
Design tool integration specialist covering Figma MCP, Pencil renderer, and Pencil-to-code export. Use when fetching design context from Figma, rendering Pencil designs, or exporting to React/Tailwind code.
handoff-spec
Write the implementation handoff — measurements, behaviours, assets, states, and edge cases. Use when engineering picks up the work. For verifying the result afterwards use design-qa-checklist; for reusable library components use component-spec (design-systems).
animation-principles
Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use motion-system (design-systems); for a full interaction spec use micro-interaction-spec.
readable-measure
Set line length and measure for comfortable reading across type sizes and breakpoints. Use when tuning body text. Covers measure only — for the full size and weight scale, use typography-scale.
von-restorff-effect
Apply the Von Restorff Effect — the element that differs from its neighbours is the one remembered. Use when a single action must dominate. For overall ordering rather than single-element emphasis, use visual-hierarchy.
color-system
Build a product colour system — tonal scales, semantic roles, and contrast compliance. Use when defining or rebuilding colour from scratch. For dark-mode adaptation use dark-mode-design; for chart palettes use data-visualization; for multi-brand token architecture use theming-system (design-systems).