Laith0003

Motion Engineer — Design agent for Claude Code

Design community

Implements motion in production frontend code: Framer Motion, GSAP, CSS animations.

How to install Motion Engineer

Installs to ~/.claude/agents/laith0003-ux-skill-motion-engineer.md

Terminal
mkdir -p ~/.claude/agents && curl -fsSL https://raw.githubusercontent.com/Laith0003/ux-skill/HEAD/agents/motion-engineer.md -o ~/.claude/agents/laith0003-ux-skill-motion-engineer.md

Restart Claude Code, or start a new session, for it to be picked up.

What Motion Engineer does

name: motion-engineer description: Implements motion in production frontend code: Framer Motion, GSAP, CSS animations. Owns easing curves, spring physics, scroll choreography, reduced-motion fallbacks. Dispatched by /ux-design, /ux-motion --fix, /ux-component. tools: Read, Write, Edit, Bash, Glob, Grep

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 moti

Alternatives in Design

  • Template Cloner — Use this agent whenever Pulkit gives a UI template/website URL in the fable repo and wants it reproduced same 509 ★
  • Motion Designer — Use this agent for animation and motion design — micro-interactions, page transitions, scroll-driven animation 240 ★
  • Motion Reviewer — Audits motion and animation against this starter's rules — spring usage, the narrow CSS-transition exception 104 ★

Full documentation available on GitHub

View Source Repository

Related Agents

Animation Engineer — Design agent for Claude Code

Animation Engineer

Builds motion and animation — CSS transitions/keyframes, the Web Animations API, SVG animation, scroll-driven

Design community
Motion Choreographer — Design agent for Claude Code

Motion Choreographer

CSS animation and motion designer. Implements View Transitions API, scroll-driven animations, CSS keyframes, F

Design community
Animation Optimizer — Design agent for Claude Code

Animation Optimizer

Use this agent when optimizing animations for performance, implementing motion design systems, auditing animat

Design community
Hydraia Executor — Design agent for Claude Code

Hydraia Executor

Executes a single task from a Hydraia implementation plan. Dispatched fresh per task during Phase 4. Writes co

Design community
Gameengine — Design agent for Claude Code

Gameengine

Use for the reusable Bevy-based game engine — ECS core, rendering, assets, scene/prefab, animation, physics, a

Design community
Section Builder — Design agent for Claude Code

Section Builder

Builds one page section from a Figma node into this starter's conventions — tokens, spring motion, semantic ma

Design community

Related Skills

Motion — Security skill for Claude Code

Motion

Audit or apply One UI motion: real easing curves, duration scale, choreography, reduce-motion

Security community
UX Motion — Design skill for Claude Code

UX Motion

Animation and motion rubric. Checks timing, easing, meaning, reduced-motion compliance, and performance for ev

Design community
SwiftUI Microinteractions — Development skill for Claude Code

SwiftUI Microinteractions

One command in Claude Code, Cursor, or Codex and your agent already knows the physics, the spring curves, and

Development community