Animate
Choose whether to animate, then implement timing, interruption, and reduced motion.
The field guide
One moment.
Loading the selection…
The field guide
Loading the selection…
A closer look / 7 skills
Choose AI skills for web animation, motion reviews, performance fixes, and React video compositions. Match the workflow to an interaction or a video.
Choose whether to animate, then implement timing, interruption, and reduced motion.
Product-interface polish with attention to motion and component behavior.
Find layout thrashing, costly animated properties, and scroll-linked bottlenecks.
Guide route, state, and shared-element transitions with React’s transition APIs.
Official guidance for composing, previewing, and rendering video with React.
A strict review of timing, purpose, interruption, and animation implementation.
Add reusable CSS transitions and align UI motion to a shared token scale.
Choosing a skill
Motion skills support web interactions and video compositions. For interface work, choose whether you need a new transition, an animation review, or a performance fix, then describe the trigger and state change. For video, bring a creative brief, intended duration, and output format so the agent can plan the composition and timing.
Start with implementation guidance that considers timing, interruption, and reduced-motion preferences. This skill asks whether animation serves the interaction before choosing how to build it. Its scope is web interfaces, so check the review before using it elsewhere.
Read the Animate reviewUse a focused review when animation code already exists. It examines purpose, timing, and implementation and produces concrete findings. Give it the relevant change rather than expecting a general review of the whole interface.
Read the Review Animations reviewLook at layout, paint, and scroll-related work within your current animation library. This repair workflow points to possible performance costs; confirm the cause and the effect of a fix with browser profiling.
Read the Fixing Motion Performance reviewBuild a Remotion composition with guidance for timing, captions, media, and maps. Preview in Remotion Studio as you work, then request an export when you need a rendered file.
Read the Remotion Best Practices reviewFor web interfaces, repeat and interrupt interactions, check reduced-motion behavior, and test supported devices. For video, inspect timing, text legibility, and media in Studio, then check the rendered file if you export it. Verify framework requirements, installation notes, and documented agent support for your chosen workflow.