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 agentmods add skills/ronmkr/promptbook/motion-patternsnpx skills add ronmkr/PromptBook --skill motion-patternsgit clone --depth 1 https://github.com/ronmkr/PromptBookWrote 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/ronmkr/promptbook/motion-patterns)<a href="https://agentmods.dev/skills/ronmkr/promptbook/motion-patterns"><img src="https://agentmods.dev/badge/skills/ronmkr/promptbook/motion-patterns.svg" alt="Measured on agentmods" 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.00042 | $0.03229 |
| Opus 5 | $0.00021 | $0.01614 |
| Sonnet 5 | $0.00008 | $0.00646 |
| Haiku 4.5 | $0.00004 | $0.00323 |
Grade A, and why
motion-patterns 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.
This is a copy
100% identical to motion-patterns — 3 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 436 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Motion Patterns
Copy-paste patterns for the most common UI animation needs.
Every pattern here is built on motion-foundations tokens and springs.
Do not define new duration or easing values here — import them.
When to Activate
- Animating a button, card, modal, or toast notification
- Building list entrances with stagger
- Setting up page transitions in Next.js App Router
- Adding entrance or exit animations to conditional content
- Implementing scroll-reveal, scroll-linked progress, or sticky story sections
- Building expanding cards, accordions, or shared-element transitions
Outputs
This skill produces:
- Accessible, SSR-safe animation for all standard UI components
AnimatePresence-wrapped conditional renders with correct exit behavior- Page transition wrapper component for Next.js App Router
- Scroll-reveal and scroll-linked patterns using
useScroll+useTransform - Layout animation patterns (
layout,layoutId) for expanding and crossfading elements
Principles
- Every pattern imports from
motion-foundations. No raw numbers. - Every conditional render is wrapped in
AnimatePresencewith akey. - Exit animations are always defined alongside enter animations — never as an afterthought.
layoutis used only for small, isolated shifts. Large subtrees get explicit transforms.
Rules
- Always wrap conditional renders in
AnimatePresencewith akeyon the direct child. Without a key, exit animations never fire. - Always define
exitwhen defininginitial+animate. An animation without an exit is incomplete. - Use
mode="wait"on page transitions. Enter must not start until exit completes. - Never use
layouton subtrees with more than ~5 children or deeply nested DOM. Use explicitx/ytransforms instead. - Stagger interval must stay between
0.05sand0.10s. Below feels mechanical; above feels sluggish. - Modals must always include: focus trap, Escape-key close, scroll lock,
role="dialog",aria-modal="true". - Scroll reveals use
viewport={{ once: true }}. Repeating on scroll-out is distracting, not informative. - All token values are imported from
motion-foundations. No inline numbers.
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 First seen · 436 lines · 42 tokens per session scan A d6a358e87f17
motion-patterns is a skill published in the GitHub repository ronmkr/PromptBook (2 stars, last pushed 3mo ago), licensed Apache-2.0. It adds 42 tokens to every session and 3,229 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. It is 100% identical to motion-patterns, differing in 3 lines, and is treated as a copy.
Other skills, from other repositories
motion-patterns
Production-ready animation patterns for React / Next.js — button, modal, toast, stagger, page transitions, exit animations, scroll, and layout — built on motion-foundations tokens and springs. Use when animating a specific UI element in React or Next.js — button, modal, toast, stagger, page transition, or scroll.
motion-patterns
Production-ready animation patterns for React / Next.js — button, modal, toast, stagger, page transitions, exit animations, scroll, and layout — built on motion-foundations tokens and springs. Use when animating a specific UI element in React or Next.js — button, modal, toast, stagger, page transition, or scroll.
motion-lexicon
Design, build, compose, implement, review, and contribute polished product interfaces with Motion Lexicon components and motion primitives. Use this skill when a user asks for a complete React page, landing page, dashboard, settings screen, or product surface in the Motion Lexicon visual language; asks what 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).
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.
motion-patterns
Production-ready animation patterns for React / Next.js — button, modal, toast, stagger, page transitions, exit animations, scroll, and layout — built on motion-foundations tokens and springs.