motion-brief

Interviews users through animation decisions to produce a complete motion brief before implementation.

1|1|Updated May 11, 2026
One-click install
npx skills add https://github.com/taxmaxi/taxmaxi --skill motion-brief-taxmaxi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion-brief
Source: https://github.com/taxmaxi/taxmaxi/tree/main/.codex/skills/motion-brief
Command: npx skills add https://github.com/taxmaxi/taxmaxi --skill motion-brief-taxmaxi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animations get rebuilt repeatedly because nobody decided what the motion was for before writing code. This Skill front-loads that decision by interviewing the user one question at a time until every aspect of an animation — trigger, purpose, easing, duration, interruption behavior, reduced-motion fallback — is settled in a written brief. ## Core Features & Use Cases - Structured interview workflow: Asks one question at a time with a recommended answer for each, covering frequency, purpose, choreography, feel, and edge cases. - Codebase recon first: Reads the component, trigger, animation stack (motion/react, Tailwind, CSS, WAAPI), and existing easing tokens before asking anything, so questions are grounded in the actual code. - Cut-friendly outcomes: Can conclude that an animation should not exist at all (e.g., keyboard-triggered or seen 100+ times per day) and records that as a valid brief. - Use Case: A drawer component has been rebuilt three times and still feels wrong. Run this Skill to decide its enter/exit properties, origin, spring vs. transition behavior, and reduced-motion fallback before touching code again. ## Quick Start Ask the assistant to grill you on how the drawer component should animate and produce a motion brief before writing any code.

Frequently Asked Questions about motion-brief

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I decide how a UI component should animate before coding it?▼

Run a structured interview that settles trigger, frequency, purpose, enter/exit properties, origin, easing, duration, and interruption behavior one question at a time. The output is a motion brief with no blanks, which implementation follows only after confirmation.

What should a motion design brief for UI animation include?▼

A complete brief records the verdict (animate or cut), trigger, frequency, purpose, enter and exit properties, transform origin, easing curve, duration, interrupt behavior, reduced-motion fallback, and the animation stack such as CSS transitions or springs.

When should a UI animation be cut instead of built?▼

Cut animations that are keyboard-triggered or seen more than 100 times per day, since motion makes repeated actions feel slow. Also cut when the motion communicates nothing the static change does not already convey.

Does this work with motion/react, Tailwind, and plain CSS animations?▼

Yes. The recon step detects the available stack — motion/react in package.json, Tailwind, plain CSS, or WAAPI — plus existing easing tokens, and grounds every question and recommendation in what the codebase actually uses.

Why do animations keep getting rebuilt and still feel wrong?▼

The cause is usually undecided motion intent, not wrong code. Deciding purpose, choreography, interruption behavior, and easing-duration pairing upfront prevents the rebuild cycle that comes from implementing before deciding.

How should reduced motion be handled for UI animations?▼

Keep the opacity or color change that aids comprehension and drop the travel or movement. Purely decorative motion is disabled entirely, so the state change remains perceptible without animation.