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/lukedj78/dev-flow/transitionsnpx skills add lukedj78/dev-flow --skill transitionsgit clone --depth 1 https://github.com/lukedj78/dev-flowWhat 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 | $0.00221 | $0.03115 |
| Opus 5 | $0.00111 | $0.01558 |
| Sonnet 5 | $0.00044 | $0.00623 |
| Haiku 4.5 | $0.00022 | $0.00312 |
Grade A, and why
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 — 142 lines — stays where its author put it; the contents beside it link to each section on GitHub.
transitions — one tokenized motion system for a Next.js 16 app
This skill governs how a web app moves. Like state-discipline for state and forms for forms, it routes every animation through one shared, token-driven system so the product has a single, consistent motion feel — instead of scattered duration-[237ms] magic numbers and hand-tuned cubic-beziers that drift page to page.
Inspired by transitions.dev (Jakub Antalík) — a curated library that teaches agents about product motion. This is our own take: token-driven, wired to the DESIGN.md contract and our Next.js 16 + Motion +
tw-animate-cssstack. Not a fork, not an install of their package — we credit the idea and build our own.
When this skill applies
- The user says "add a transition / animation", "animate this", "aggiungi una transizione", "make the modal open nicely", "stagger these cards", "page transition between routes".
- You're about to write an inline
transition:/animate={{…}}/@keyframes/ a Tailwindduration-[Xms]arbitrary value. - The user asks to audit a codebase for ad-hoc motion.
- A component needs entrance/exit, hover, feedback, layout, or route motion.
If the effect genuinely needs JS physics (spring, layout/shared-element, drag/gesture, scroll choreography) and the Motion runtime isn't wired, this skill routes to module-add motion first, then applies the tokenized pattern on top.
Contract
Follows the dev-flow contract — see references/contracts.md. Key facts:
- Reads
meta.json#stack.framework,stack.nextjs_version,stack.motion. For monorepo, readsstack.monorepo.web.*and operates inapps/web/. - Refuses if
stack.framework ∉ {"next", "monorepo"}orstack.nextjs_version != "16". Principles transfer to other React setups but the View-Transitions/RSC rungs don't — refuse rather than mis-apply. - Records
meta.json#stack.motion(see block below) + appendshistoryper run. - Does not bump
phase. Horizontal capability — invoke any time.
What ships with it
6 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 First seen · 142 lines · 221 tokens per session scan A 78f38f69ce44
transitions is a skill published in the GitHub repository lukedj78/dev-flow (5 stars, last pushed 4d ago), licensed MIT. It adds 221 tokens to every session and 3,115 once invoked, about $0.0011 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-31.
Other skills, from other repositories
make-store-assets
로고 · 썸네일 · IAP 아이콘을 규격대로 만든다.
animate-expo
Build animation and gestures in React Native and Expo with Reanimated worklets on the UI thread — sheets, drawers, screen transitions, swipe, drag, press feedback, haptics. Use when adding gestures to an Expo app, or when motion stutters, janks or drops frames on a real Android or iOS device.
react-native-core
React Native core components, layout, styling, animations, lists, platform APIs, and best practices. Use when building iOS/Android UIs with native components.
react-native-ecosystem
React Native ecosystem — navigation, state, data fetching, Reanimated, storage, TypeScript patterns, accessibility, and deep linking. Use when building production React Native apps with React Navigation, Zustand, TanStack Query, or Reanimated v3.
vulk
Use VULK to generate, edit, inspect, and deploy immersive web projects from Codex.
native-ui
Building native mobile UIs with Expo Router and React Native. Covers routing, navigation, styling, native controls, animations, and platform conventions following Apple Human Interface Guidelines.