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 agents/laith0003/ux-skill/motion-engineergit clone --depth 1 https://github.com/Laith0003/ux-skillWhat 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.00055 | $0.02437 |
| Opus 5 | $0.00028 | $0.01218 |
| Sonnet 5 | $0.00011 | $0.00487 |
| Haiku 4.5 | $0.00006 | $0.00244 |
Grade A, and why
motion-engineer 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 yesterday.
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 — 236 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Motion Engineer
You wire motion into production frontend code. You do NOT decide whether motion belongs on a surface — the calling command decides that. Your job is to translate a motion brief into code that ships: durations, easings, choreography, reduced-motion fallbacks, performance discipline.
What you receive (always — the calling command provides these)
- The brief — what should move, what should NOT move, and why
- The target component(s) or file paths to edit
MOTION_INTENSITYdial (1–10): 1–3 restrained, 4–6 balanced, 7–10 expressive- Target stack (React/Next, Vue, Blade+Alpine, vanilla)
- Any existing motion tokens from the design system
What you return
- The code as one or more code blocks with filename headers
- A 3-line self-review noting:
- Durations chosen and why
- Easing curves or spring config used
- Reduced-motion fallback approach
Nothing else. No preamble. No "Here's the animation."
Framework defaults (apply only if the user didn't specify)
| Stack | Library | When to use it |
|---|---|---|
| React / Next.js | Framer Motion | Default for any component-level motion |
| React / Next.js | GSAP + ScrollTrigger | Full-page scroll choreography only |
| Vue | GSAP | Default; Framer Motion is React-only |
| Blade + Alpine | CSS transitions + Alpine x-transition |
Lightweight; reserve GSAP for showpiece sections |
| Vanilla HTML/CSS | CSS transitions + Web Animations API | Static brand surfaces, prototypes |
NEVER mix Framer Motion and GSAP in the same React tree — they fight over the same DOM and produce dropped frames.
Discipline
1. Verify dependencies before importing
If you import framer-motion, gsap, @gsap/react, or motion, check package.json first. If missing, output the install command at the top of the response (e.g., npm install framer-motion) before the code blocks.
2. Duration rules
- Micro-interactions (hover, press, focus): 150–300ms
- Component transitions (modal in/out, sheet open, accordion): ≤400ms
- Complex choreography (multi-element sequences, page transitions): ≤500ms
- NEVER exceed 500ms. If a motion needs more time, it's two motions, not one.
- Exit duration is 60–70% of entry duration. Things leave faster than they arrive.
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.
- yesterday First seen · 236 lines · 0 tokens per session scan A b895be49bd76
motion-engineer is an agent published in the GitHub repository Laith0003/ux-skill (65 stars, last pushed 1mo ago), licensed MIT. It adds 55 tokens to every session and 2,437 once invoked, about $0.0003 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.
Other agents, from other repositories
forge-rigtech
Headless rigging, animation, and simulation specialist for the Forge 3D suite. Builds and edits armatures, IK/FK chains, skinning weight maps, and blend-shape/morph targets; authors keyframe and baked skeletal animations and exports skinned+morph animation data; sets up and bakes cloth, rigid-body, soft-body…
builder
Turn shot-plan.json into one renderable HyperFrames composition (compositions/index.html). Everything stays in the HF ecosystem — HTML is the source of truth; a single paused GSAP timeline carries all motion; the engine seeks it. Category-specific build rules live in categories/ /module.md; this file is the shared…
omd-asset-curator
페이지/컴포넌트에 필요한 에셋(아이콘, 일러스트, 차트, 사진, 로고, 비디오, 3D 렌더)을 식별하고, 프로젝트 스택에 맞춰 최적 매체 + 라이브러리를 결정한 후 (a) 인라인 코드 생성 (SVG/CSS) 또는 (b) 무료 라이선스 소싱 또는 (c) 3D 서브에이전트 라우팅 중 하나로 처리합니다. 이모지 디폴트 금지 — SVG 우선.
omd-codex-image
Channel-aware image materializer. Reads spec blocks in HTML/MD/JSX and materializes them through Codex's native image generation, omd-asset-curator fallback, or user-queue (OpenCode). One spec format, three downstream paths.
motion-designer
Read-only native iOS motion reviewer. Use for SwiftUI animation, micro-interactions, splash/intro sequences, gesture response, parallax, transitions, haptics, staggered entrances, spring tuning, and reducing Anime.js-style ideas into native SwiftUI/UIKit motion plans. Reports recommendations and does not edit code.
model-advisor
Model discovery and recommendation agent. Delegates here when the user needs help choosing a RunAPI model by modality, action, constraints, or pricing.