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.
git clone --depth 1 https://github.com/Laith0003/ux-skillWrote 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/agents/laith0003/ux-skill/motion-engineer)<a href="https://agentmods.dev/agents/laith0003/ux-skill/motion-engineer"><img src="https://agentmods.dev/badge/agents/laith0003/ux-skill/motion-engineer/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/agents/laith0003/ux-skill/motion-engineer"><img src="https://agentmods.dev/badge/agents/laith0003/ux-skill/motion-engineer.svg" alt="Reviewed on agentmods" width="80" 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.00000 | $0.02437 |
| Opus 5.5 | $0.00000 | $0.00975 |
| Sonnet 5.5 | $0.00000 | $0.00487 |
| Haiku 4.5 | $0.00000 | $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 1mo 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 — 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.
- 1mo ago First seen · 236 lines · 0 tokens per session scan A b895be49bd76
motion-engineer is an agent published in the GitHub repository Laith0003/ux-skill (84 stars, last pushed 18d ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 2,437 tokens. 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
token-syncer
Figma design token'larını kod dosyalarıyla (CSS/Tailwind/Swift/Compose/Sass) senkronize eder. Diff preview + onay + write zorunlu akış. "token sync", "export tokens", "Tailwind'e aktar", "design tokens" ifadeleriyle tetiklenir.
screen-builder
DS-compliant Figma ekran üretim agent'ı. Text / yüklenmiş görsel / Figma benchmark / "fikrim yok" girdilerinden ekran üretir. "ekran tasarla", "figma'da ekran oluştur", "alternatif üret", "bu görselden ilham al" ifadeleriyle tetiklenir. Claude Code sub-agent isolation avantajıyla ana conversation context'ini temiz…
frontend-ui-component-agent
/ui-component-agent or @ui-component-agent.
metago-ux-designer
UI/UX Designer - specializes in information architecture, interaction design, visual design, design systems, and accessibility.
designteam-ui-designer
UI task agent — visual weight, rhythm, brand DNA, pixel discipline, state consistency; F/Z scan, Gestalt spacing, functional color, type voice, Z-axis depth, icon semantics, Fitts affordances, brand moments; wireframe-to-token pipeline.
Demonstrate
Agent for demonstrating VS Code features.