animate

animate is a skill for Claude Code, Codex from ericrisco/rsc-harness. It costs 75 tokens per session (8,741 once invoked), scanned A, original, MIT.

A web-animation guide helps decide whether and how interface elements should move, including dropdowns, dialogs, notifications, tooltips, accordions, and scroll effects.

In plain words
What is it for?
Use it to build CSS or Motion animations for web interfaces, or to choose the right animation approach for a new interaction.
Why use it?
It removes guesswork about animation purpose, timing, easing, interruption, and exit behavior. It also helps avoid motion that harms usability or ignores reduced-motion preferences.

Skill for Claude CodeCodex

Install

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.

agentmods
npx agentmods add skills/ericrisco/rsc-harness/animate
Any agent
npx skills add ericrisco/rsc-harness --skill animate
Clone the repo
git clone --depth 1 https://github.com/ericrisco/rsc-harness

Made for: Claude Code, Codex.

Wrote 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.

agentmods badge for animate

README.md
[![agentmods](https://agentmods.dev/badge/skills/ericrisco/rsc-harness/animate.svg)](https://agentmods.dev/skills/ericrisco/rsc-harness/animate)
Your own site
<a href="https://agentmods.dev/skills/ericrisco/rsc-harness/animate"><img src="https://agentmods.dev/badge/skills/ericrisco/rsc-harness/animate.svg" alt="Measured on agentmods" height="20"></a>
Per session 75 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 8,741 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5 $0.00075 $0.08741
Opus 5 $0.00037 $0.04371
Sonnet 5 $0.00015 $0.01748
Haiku 4.5 $0.00007 $0.00874

Measured 5d ago against content hash 1f96f029cedd, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

animate 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 5d 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.

skills/animate/SKILL.md · 852 lines

How it starts

The opening of the file, as written. The whole thing — 852 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Building Animations

SDD gate. If this fired on a new, non-trivial feature or behaviour change and there is no approved spec + plan under 02-DOCS/wiki/sdd/, hand off to ../specify/SKILL.md first — it runs brainstorm → spec → plan → tasks before any code, then routes back here once the plan is approved. Build straight from here only for a genuinely one-line / low-risk change, or a bug fix restoring intended behaviour. Method: ../sdd/SKILL.md.

Hand-offs. The visual system — palette, type scale, spacing, brand grounding, landing composition — is ../design/SKILL.md's; this skill only sets motion. React Native / Expo motion is ../animate-expo/SKILL.md's: no hover, two runtimes, gestures as the baseline. Gesture physics — velocity handoff, momentum projection, rubber-banding, translucent materials — is ../apple-design/SKILL.md's. Reviewing motion someone else wrote is ../review-animations/SKILL.md's. The countable half of the bar below is executable: ../review-animations/scripts/verify.sh flags transition: all, a scale(0) entrance, ease-in on UI, a centered popover origin, and motion with no reduced-motion guard. Run it before you claim the animation is done.

A construction skill. It does ONE thing: turn a request for motion into an implementation that would survive a strict review. It does not audit a codebase (that's improve-animations), critique a diff (that's review-animations), hunt for places that could animate (that's find-animation-opportunities), or build for React Native (that's animate-expo).

Operating Posture

You are a senior design engineer building the animation yourself. The bar is Emil Kowalski's animation philosophy — the same bar review-animations enforces. Write it so it passes that review the first time.

Two failure modes, and the first is worse:

  1. Animating something that shouldn't animate. The gate below exists to produce zero lines of code sometimes. That's a success, not a dodge.
  2. Animating the right thing with the wrong ingredientsease-in on an entrance, scale(0), keyframes on a toast, a duration that makes a dropdown feel sluggish.

Read the full file on GitHub · 852 lines

Files

What ships with it

2 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.

Changes

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.

  1. 5d ago First seen · 852 lines · 75 tokens per session scan A 1f96f029cedd

Subscribe to this mod's changes

animate is a skill published in the GitHub repository ericrisco/rsc-harness (60 stars, last pushed 2d ago), licensed MIT. It adds 75 tokens to every session and 8,741 once invoked, about $0.0004 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.

Related

Other skills, from other repositories

emil-design-skills

Use when collection of 8 design engineering skills by Emil Kowalski (Vercel, Linear) — animation standards, UI craft, Apple design principles, library selection, and prototyping. Based on years of production experience. Use when the user asks about UI polish, animation decisions, or wants to audit/improve interface…

oyi77/1ai-skills · 73 tokens

animation-engineer

Build smooth, accessible web animations using CSS, Framer Motion, and GSAP.

AtulPurohit/Antigravity-Awesome-Skills · 21 tokens

baseline-ui

Skill "baseline-ui" from humanerd-drew/opencode-drewgent, covering baseline ui, when to apply, rule categories by priority, 1. stack defaults and 2. html semantics.

humanerd-drew/opencode-drewgent · 52 tokens

refactoring-ui

Apply UI design principles from Refactoring UI by Adam Wathan & Steve Schoger. Covers visual hierarchy (size, weight, color, spacing), layout systems (spacing scales, grids), typography (type scales, line-height, alignment), color (HSL palettes, shade systems, accessible contrast), depth (shadow elevation, overlap)…

booklib-ai/booklib · 159 tokens

animation-at-work

Apply web animation principles from Animation at Work by Rachel Nabors. Covers human perception of motion, 12 principles of animation, animation patterns (transitions, supplements, feedback, demonstrations, decorations), CSS transitions, CSS animations, Web Animations API, SVG/Canvas/WebGL, communicating animation…

booklib-ai/booklib · 154 tokens

dark-mode-master

Professional Dark Mode Master skill. Build accessible, performance-tuned, responsive UI components with clean design standards.

AtulPurohit/Antigravity-Awesome-Skills · 25 tokens