Decide what an animation is communicating, then give it a duration, an easing curve, an interruption behaviour and a reduced-motion fallback. Use when adding or reviewing transitions, when a screen feels sluggish or jumpy, when implementing motion specified in a design, or when animation needs to survive users who ask for less of it. Not for static visual design, and not for general performance profiling of code that has no animation.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# Motion design
Motion is a sentence about what just changed. An animation that does not say where something came
from, that input registered, or that work is under way is decoration the user waits through.
## When this fires
Transitions, animated state changes, gesture-driven movement or loading indicators are being
added, changed or reviewed — or an interface reads as janky, slow, or unexplained.
## Procedure
1. **Give each motion a job, in one sentence.** The honest jobs are: continuity (this came from
there), feedback (your input registered), status (something is still happening), and attention
(this changed and you would have missed it). Motion with no job gets cut — that is the cheapest
improvement available here.
2. **Set duration from the size of the change, not from taste.** Small local feedback is nearly
instant (around a tenth of a second); ordinary component transitions sit in the low hundreds of
milliseconds; large or full-screen surfaces take somewhat longer. Past roughly half a second
the user is waiting on you, and it must buy something. Shorter is the safer error.
…
The line at the top of this page pins the label git:20260919.a0d4f55, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
GET https://markdownregistry.com/api/v1/artifacts/art_mkd4adww7kbvmfq2
GET https://markdownregistry.com/api/v1/resolve?ref=nahid-sparktales/agent-dispatcher/motion-design
GET https://markdownregistry.com/api/v1/blob/a103b15bd613cfe3274f115a88b3463e8c9f5f7a6890c36a52bd36c3e4e2993a
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
nahid-sparktales/agent-dispatcher · skills/agent-dispatcher/SKILL.md · Handle requested Agent Dispatcher work with direct execution or prepared specialist guidance. Includes named roles…
nahid-sparktales/agent-dispatcher · skills/ai/agent-design/SKILL.md · Scope an agent or subagent before it is built — the one job it owns, the smallest tool set that closes that job, what…
nahid-sparktales/agent-dispatcher · skills/ai/agent-evals/SKILL.md · Build an eval suite that can actually detect a regression — cases pulled from real traffic, graders that check…
nahid-sparktales/agent-dispatcher · skills/ai/context-engineering/SKILL.md · Decide what actually occupies the model's window — progressive disclosure through an index, retrieval versus inlining…
nahid-sparktales/agent-dispatcher · skills/ai/llm-observability/SKILL.md · See what an agent actually did — one trace per run with nested model, tool and retrieval spans, token and latency…
nahid-sparktales/agent-dispatcher · skills/ai/mcp-design/SKILL.md · Build an MCP server, or bring an existing one into a project — choosing the transport, deciding which tools, resources…
nahid-sparktales/agent-dispatcher · skills/ai/memory-design/SKILL.md · Decide what an agent should remember, which layer holds it, who it is scoped to, and how a stale or contradicted memory…
nahid-sparktales/agent-dispatcher · skills/ai/model-routing/SKILL.md · Pick a model per job and degrade sensibly when one fails — a quality bar per call site, candidates compared on the same…
nahid-sparktales/agent-dispatcher · skills/ai/prompt-engineering/SKILL.md · Write or revise a prompt so it holds up — output contract, instruction placement, examples that earn their place, an…
nahid-sparktales/agent-dispatcher · skills/ai/prompt-injection-defense/SKILL.md · Treat everything an agent reads but did not author as data rather than instructions — an explicit trust boundary, a…
nahid-sparktales/agent-dispatcher · skills/ai/retrieval-rag/SKILL.md · Build and fix retrieval that actually returns the right passage — structure-aware chunking, one pinned embedding model…
nahid-sparktales/agent-dispatcher · skills/ai/structured-output/SKILL.md · Get parseable, trustworthy structured results out of a model — schema design, the enforcement mechanism the provider…
scorp1o117/dsh-motion-ui · skills/motion-design/SKILL.md · Apply motion craft to an active task: refine a brief, beat map, visual continuity, typography, pacing, and timeline…
adityareddy-dev/deskstudio · skills/motion-design/SKILL.md · A 6 to 10 second motion clip built in CSS and the Web Animations API and recorded in Chrome: a brand sting, a product…
littlpinguin/marketing-cockpit-template · .claude/skills/motion-design/SKILL.md · Passerelle entre la marque de {{COMPANY_NAME}} et HyperFrames pour ce qui s'anime dans une vidéo : titres, chiffres…
blixvip/skills · motion-design/SKILL.md · Design the actual frames for motion graphics and generated UI — palette derived from the footage, type pairing, one of…
