Borrowing it
Nothing to install: this file belongs to Everyone-Needs-A-Copilot/claude-copilot. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/Everyone-Needs-A-Copilot/claude-copilot/main/.claude/skills/design/motion-choreography/SKILL.mdgit clone --depth 1 https://github.com/Everyone-Needs-A-Copilot/claude-copilotWrote 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/everyone-needs-a-copilot/claude-copilot/motion-choreography)<a href="https://agentmods.dev/skills/everyone-needs-a-copilot/claude-copilot/motion-choreography"><img src="https://agentmods.dev/badge/skills/everyone-needs-a-copilot/claude-copilot/motion-choreography/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/everyone-needs-a-copilot/claude-copilot/motion-choreography"><img src="https://agentmods.dev/badge/skills/everyone-needs-a-copilot/claude-copilot/motion-choreography.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- 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.00095 | $0.02676 |
| Opus 5 | $0.00048 | $0.01338 |
| Sonnet 5 | $0.00019 | $0.00535 |
| Haiku 4.5 | $0.00010 | $0.00268 |
Grade A, and why
motion-choreography 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 3d 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 — 246 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Motion Choreography
Motion as a design language. Not decoration — communication. These patterns define how elements enter, behave, and exit as a coherent system.
Purpose
- Establish motion grammar before implementing individual animations
- Provide a named easing library with personality profiles
- Define choreography patterns for multi-element sequences
- Encode restraint philosophy to prevent over-animation
- Apply classic animation principles to UI context
1. Motion as Language
Motion has grammar. Learn it before using it.
Vocabulary: fade, slide, scale, rotate, morph, spring, stagger, clip, blur
Syntax: entrance → interaction → exit. Breaking this sequence disorients users.
Rhythm: Consistent timing across a flow creates expectation. Breaking rhythm creates emphasis — use this sparingly and intentionally.
Tone:
| Motion Quality | Message Sent |
|---|---|
| Fast + snappy | Energetic, playful, responsive |
| Slow + smooth | Premium, confident, considered |
| Springy | Friendly, organic, alive |
| Abrupt | Urgent, alarming, decisive |
Silence: No-motion is a choice. Stillness after movement creates contrast. Not everything should move — the absence of motion is part of the composition.
2. Choreography Patterns for Multi-Element Sequences
| Pattern | Description | Best For |
|---|---|---|
| Cascade (top-down) | Header → hero → cards → footer. Natural reading order. | Default choice, content pages |
| Wave (center-out) | Central element first, radiating outward. | Focus + context reveal |
| Random (organic) | Elements enter at varied delays (not uniform). | Creative, editorial, energetic |
| Reverse cascade (coordinated exit) | Elements leave in reverse order of entry. | Page transitions, modal close |
| Shared axis | Related elements move along the same axis (all slide-left, or all scale-center). | Grouped families, related content |
| Focal | Secondary elements animate AFTER primary element settles. | Hero sections, feature showcases |
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.
- 3d ago First seen · 246 lines · 95 tokens per session scan A bc75b8cf701e
motion-choreography is a skill published in the GitHub repository Everyone-Needs-A-Copilot/claude-copilot (13 stars, last pushed 3d ago), licensed MIT. It adds 95 tokens to every session and 2,676 once invoked, about $0.0005 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-04.
Other skills, from other repositories
animation-motion-design
Animation and motion design patterns using Motion library (formerly Framer Motion) and View Transitions API. Use when implementing component animations, page transitions, micro-interactions, gesture-driven UIs, or ensuring motion accessibility with prefers-reduced-motion.
motion-craft
Use when an interface moves and the movement has to feel right — durations and easing, what must never animate, fixing motion that reads sluggish, cheap or janky, and reduced-motion. Web and native. NOT the visual system (that is design), NOT the graded critique (that is design-loop).
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…
motion-dev
Use when React animation library — spring physics, gesture animations, layout animations, scroll effects, SVG path drawing. Successor to Framer Motion. Use when building UI animations, micro-interactions, page transitions, shared element transitions, parallax effects.
universal-designer
UniversalDesigner is the single entry point for ALL frontend design, animation, and 3D work. It understands the project architecture (stack, existing design infra, constraints), sets a design direction, then routes execution to the right specialist skill(s) among 24 design skills: 3D engines (Three.js, R3F, Babylon…
modern-frontend-design
How to design and build modern, premium-quality frontend interfaces that look like high-end SaaS products, modern AI tools, and award-winning design websites — not generic templates. Use this skill whenever the user asks to build a frontend, create a landing page, design a dashboard, scaffold a web app UI, build a…