What is the impeccable animate skill?
Impeccable animate is a command of the impeccable skill by Paul Bakaus. It makes an AI coding agent plan motion before coding it: a short thesis, duration bands from 100ms to 800ms, an exit-faster-than-entrance rule, no layout-property animation, and a reduced-motion path for every effect.
Impeccable animate is a command inside the impeccable skill. You run it as /impeccable animate plus a target. It adds motion to a screen or component, with rules about when motion helps and when it gets in the way.
It begins by asking about constraints such as performance, then separates visitors who are persuaded or exploring from visitors who are operating a tool. That split decides how much motion the page deserves.
What changes in your agent's output
- The agent writes a short motion thesis covering the focal moment, continuity, feedback and a motion budget before it writes code.
- Durations follow bands: 100 to 150ms for feedback, 150 to 300ms for routine changes, 300 to 500ms for layout and overlays, and 500 to 800ms for authored entrances.
- Exits are faster than entrances, and the suggested curve is an ease-out rather than a bounce.
- Layout properties are not animated, and
will-changeis applied only during the animation.
Who the impeccable animate skill is for
Best for
- Landing pages and product screens that need one or two authored motion moments.
- Interfaces where the agent keeps adding generic fades and bounces.
- Teams that need every animation to have a reduced-motion version.
Not for
- Auditing existing motion. Use improve-animations for a codebase audit.
- Naming an effect you cannot describe. animation-vocabulary covers that.
- Native mobile motion rules, which the command does not specialize in.
Use it with UiChemy
UiChemy Composer writes real HTML, CSS and JS inside Elementor or Gutenberg, so motion you design here ships as plain code. Describe the effect to your agent, review it, and click Get Started on uichemy.com to build the page.
How to install Impeccable Animate Skill: Purposeful Motion for AI Agents
npx impeccable installRun the installer
From your project root, run
npx impeccable install. It sets up the impeccable skill for the AI coding agents you pick. Flags such as--providersand--scope=projector--scope=globalnarrow the targets.Create project context
Run
/impeccable initonce. It writes a PRODUCT.md that the commands read, so the output matches your audience and brand.Run the command
Open your agent in the project and run
/impeccable animatefollowed by a target, for example/impeccable animate hero. Answer its question about performance constraints so it can set a motion budget.
Check that it loaded
Run /impeccable animate on one section. The agent should ask about constraints, state a motion thesis, and then add motion with a matching prefers-reduced-motion rule. Check that layout properties are not animated.
Key features
- Context firstThe command asks for performance constraints before it adds anything, so motion fits the device budget.
- Visitor modesIt separates persuade-and-experience visitors from operate-and-read visitors and scales motion to match.
- Motion thesisA short plan names the focal moment, continuity, feedback and budget, which keeps motion from spreading everywhere.
- Timing bandsFour duration bands from 100ms feedback to 800ms authored entrances replace guesswork.
- Exit faster than entranceLeaving elements move quicker than arriving ones, so the interface feels responsive.
- Easing guidanceIt suggests an ease-out curve such as
cubic-bezier(0.16, 1, 0.3, 1)and warns against reflexive bounce. - Cheap properties onlyIt avoids animating layout properties and limits
will-changeto the animation window. - Reduced-motion pathEvery animation gets a
prefers-reduced-motionvariant that is fewer and gentler, not simply removed. - Verify and hand offA checklist closes the command and hands the result to polish.
Frequently asked questions
What is impeccable animate?
It is the animate command of the impeccable skill by Paul Bakaus. It makes an AI coding agent plan and add motion with a thesis, timing bands, easing rules and a reduced-motion path for each effect.
How do I install impeccable animate?
Run npx impeccable install from your project root, then /impeccable init for PRODUCT.md. Animate ships inside the impeccable skill. Call it with /impeccable animate and a target such as a hero section.
What durations does it recommend?
Feedback runs 100 to 150ms, routine changes 150 to 300ms, layout and overlay changes 300 to 500ms, and authored entrances 500 to 800ms. Exits should be faster than entrances, so the interface feels quick when things leave.
Does it respect reduced motion?
Yes. The command requires a prefers-reduced-motion path for every animation. The rule for those users is fewer and gentler motion rather than necessarily none at all, so the interface still communicates state changes without large movement.
How is it different from Emil Kowalski's animate skill?
Impeccable animate works inside the impeccable workflow with PRODUCT.md context and visitor modes. Emil's animate skill builds from a frequency test and ships twelve recipes. Pick by whether you already use impeccable.
Which AI agents can use it?
The impeccable project lists Claude Code, Cursor, Gemini CLI, Codex CLI, Grok Build, Hermes and Veto among supported agents. The installer lets you choose providers and project or global scope.
Will it add heavy animation libraries?
The command guidance focuses on timing, easing and cheap properties rather than a specific library. It avoids layout-property animation, so a CSS-first result is the typical outcome, but check the code it writes.
What should I run after animate?
Run impeccable polish for the final pass, since the command hands off to it. If motion feels slow or janky once it ships, fixing-motion-performance covers compositor and layout cost in detail.