just-vibeUI and frontend · apply by default
/ui-motion
Add purposeful transitions with reduced-motion behavior
Use for purposeful transitions and animation behavior; polish addresses static hierarchy and spacing.
Make it your own.
In Claude Code, use the slash command and add your context. In Codex, select ui-motion from the just-vibe skill picker, then send the same brief.
Version 0.11.0 also supports /jv ui-motion, /just-vibe ui-motion and /jv:ui-motion in Claude. See shortcut setup and context examples.
/just-vibe:ui-motion Add restrained disclosure transitions with reduced-motion support./just-vibe:ui-motion Animate a drawer that users can rapidly open and close./just-vibe:ui-motion Review motion design without rendered timing evidence or installing an animation library.What the agent does
- Define the state change the motion communicates and select minimal properties and timing.
- Implement interruption, cancellation and reduced-motion behavior.
- Inspect rapid and repeated input under normal and reduced-motion preferences.
Inputs
- interaction purpose, existing motion language, performance constraints, and reduced-motion requirements.
Optional context: scope, references, constraints, successCriteria, environment, mode, budget.
Scope
- Reads
- Purposeful transitions and feedback, not decorative animation across unrelated screens.
- Writes
- Apply: only the requested local changes and relevant isolated verification. Inspect/plan requests remain inspection/planning. External actions require their exact action and target in session authorization.
- Mode
- Apply; interaction purpose, existing motion language, performance constraints, and reduced-motion requirements.
- Prerequisites
- Target screens/flows, existing design conventions, and runnable UI or supplied references. Visual claims require actual renders; accessibility claims distinguish automated, keyboard, and assistive-technology evidence.
Expected output
- Motion implementation with its state purpose and interruption rules, and normal, reduced-motion and performance checks.
How the work is checked
- Reduced-motion users retain all information and actions; interrupted transitions do not strand the interface.
When to stop or clarify
- Avoid adding a large animation dependency for trivial effects. No motion should delay an essential action or conceal loading failures.
Handling missing context
- Infer
- Inspect the target flow, existing components/tokens, actual renders or supplied references and current responsive behavior.
- Assume
- Reuse established visual conventions and preserve keyboard behavior; label unrendered changes as visually unverified.
- Ask
- Ask about an unresolved interaction or visual direction only when plausible choices materially differ; do not make a missing screenshot block source inspection.
Technical guidance
- Evidence
- Identify the change motion should explain, animation properties, interruption behavior and reduced-motion preference.
- Method
- Keep state transitions functional without animation; favor composited properties where appropriate and cancel obsolete animations.
- Pitfall
- A smooth animation can still hide focus, block input or cause discomfort; reduced motion must preserve outcome and feedback.
- Check
- Interrupt/reverse transitions, test reduced motion and keyboard focus, and profile the target device interaction for jank.
Situational decisions
When reduced motion removes information conveyed only by animation: Supply a static equivalent while preserving action timing and feedback.
The coding agent follows this workflow using its available tools. Installation does not grant service access or guarantee an outcome. Read the compatibility notes.