How to Define Custom Animation Parameters for AI Agents: The emilkowalski/skills Standards

The emilkowalski/skills repository provides a strict specification in skills/review-animations/STANDARDS.md that dictates when AI agents should omit animations entirely, which custom cubic-bezier curves to use instead of CSS defaults, and how to budget durations under 300ms for optimal perceived performance.

When building AI-driven UI generation tools, establishing custom animation parameters ensures that motion feels intentional rather than arbitrary. The emilkowalski/skills repository encodes Emil Kowalski’s animation philosophy into concrete, machine-readable standards that agents can reference when generating CSS, Web Animations API code, or React motion components. These rules govern everything from frequency-based motion limits to precise cubic-bezier values that replace generic CSS easings.

The Animation Standards Foundation

All animation logic centers on skills/review-animations/STANDARDS.md, which serves as the canonical reference for AI agents. This file establishes the when, how, and what of motion, providing concrete thresholds that eliminate subjective decisions. According to the source code, agents must treat this file as the single source of truth for validating animation proposals, ensuring consistency across generated codebases.

Defining Core Animation Parameters

The repository breaks down custom animation parameters into four quantifiable categories that agents must evaluate before writing motion code.

Frequency-Based Motion Rules

The most critical rule governs when not to animate. As defined in the frequency table section of skills/review-animations/STANDARDS.md, any action occurring more than 100 times per day must have no animation. This applies to keyboard-initiated shortcuts, rapid toggles, and high-frequency UI updates. AI agents should validate usage patterns against this threshold first, emitting a "no-animation" finding for elements that exceed the limit.

Easing Hierarchy and Custom Curves

Built-in CSS easings are explicitly considered too weak for professional interfaces. The repository prescribes a strict easing hierarchy mapped to interaction types:

• UI entry/exit: Use ease-out (deceleration)
• On-screen movement: Use ease-in-out (symmetrical)
• Hover and color changes: Use ease
• Constant motion: Use linear

Instead of generic keywords, agents must reference three named cubic-bezier curves defined as CSS variables. Line 31 of skills/review-animations/STANDARDS.md provides these concrete values:

• --ease-out: cubic-bezier(0.23, 1, 0.32, 1)
• --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1)
• --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1)

The skills/emil-design-eng/SKILL.md file at line 123 explains the rationale for these specific curves, linking them to external curve libraries for additional context.

Duration Budget Constraints

Animation duration impacts perceived performance. The standards enforce a hard ceiling of 300ms for all UI animations, with granular budgets per element type:

• Buttons: 100-160ms
• Tooltips: 125-200ms
• Drawers/modals: 200-300ms

As documented near line 41 of skills/review-animations/STANDARDS.md, agents must clamp any generated transition or animation durations to these ranges, falling back to the nearest bucket for custom components.

Spring Physics for Gesture-Driven Motion

For interruptible, physics-based interactions, the repository provides specific spring parameters. Located near line 65 of skills/review-animations/STANDARDS.md, the recommended preset uses stiffness and damping values optimized for gesture-driven UI. When implementing drag interactions or swipeable elements, agents should prefer these physics-based values over duration-based easings to maintain continuity during interruption.

Implementation Workflow for AI Agents

When proposing animation code, AI agents must execute this validation sequence:

1. Validate the frequency rule – Check if the element appears more than 100 times daily; if so, emit a "no-animation" finding.
2. Select the proper easing – Map the interaction type to the hierarchy above, defaulting to the custom curves defined in the CSS variables.
3. Apply the correct duration – Use the table-based budget; for custom components, fall back to the nearest bucket (buttons, tooltips, or drawers).
4. Choose CSS variables – Reference --ease-out, --ease-in-out, or --ease-drawer directly instead of raw cubic-bezier literals, ensuring consistency across the codebase.
5. Prefer CSS transitions or WAAPI – For rapidly triggered UI (toasts, toggles) use interruptible CSS transitions; for complex, physics-driven motion use the spring objects or the Web Animations API as recommended at line 81 of skills/review-animations/STANDARDS.md.

Practical Code Examples

Define global custom curves in your CSS architecture:

/* core animation tokens – import wherever needed */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

Apply a custom easing to a button press, respecting the 100-160ms duration budget:

button:active {
  transform: scale(0.97);
  transition: transform 160ms var(--ease-out);
}

Implement a tooltip using the specified duration range and easing:

.tooltip {
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 150ms var(--ease-out),
    transform 150ms var(--ease-out);
}

For React-based agents using Framer Motion, implement the recommended spring physics:

import { motion } from "framer-motion";

const dragSpring = { type: "spring", duration: 0.5, bounce: 0.2 };

<motion.div drag dragTransition={dragSpring} />

When using the Web Animations API directly, reference the custom cubic-bezier values explicitly:

element.animate(
  [{ clipPath: "inset(0 0 100% 0)" }, { clipPath: "inset(0 0 0 0)" }],
  { duration: 400, easing: "cubic-bezier(0.23,1,0.32,1)" }
);

Key Reference Files

AI agents should index these files when generating or reviewing animation code:

• skills/review-animations/STANDARDS.md – The central authority containing frequency tables, easing hierarchy, custom curves, duration budgets, and spring specifications.
• skills/emil-design-eng/SKILL.md – Explains the design rationale for custom easing curves and provides links to external curve generation resources.
• skills/improve-animations/AUDIT.md – Demonstrates how findings reference the standards when flagging improper easing or excessive durations.
• skills/pick-ui-library/SKILL.md – Guides agents in choosing between plain CSS transitions and the motion library for complex scenarios.
• skills/animate/SKILL.md – Provides the foundational animation vocabulary (e.g., cubic-bezier syntax) used throughout the repository.

Summary

• Frequency rule: Actions occurring >100 times daily require zero animation according to skills/review-animations/STANDARDS.md.
• Custom curves: Replace CSS defaults with --ease-out, --ease-in-out, and --ease-drawer variables using specific cubic-bezier values.
• Duration ceiling: Never exceed 300ms; use 100-160ms for buttons and 125-200ms for tooltips.
• Physics: Use spring presets for gesture-driven motion to ensure interruptibility.
• Validation: AI agents must check frequency, easing, duration, and variable usage before finalizing code.

Frequently Asked Questions

Where does emilkowalski/skills define its animation standards?

The canonical specification lives in skills/review-animations/STANDARDS.md. This file contains the frequency table, easing hierarchy, custom cubic-bezier definitions, duration budgets, and spring physics recommendations that AI agents must reference when generating animation code.

When should an AI agent specify no animation for a UI element?

When the element triggers more than 100 times per day, such as keyboard shortcuts, rapid toggles, or frequent data updates. The frequency table in skills/review-animations/STANDARDS.md mandates zero motion for high-frequency interactions to prevent motion fatigue and conserve computational resources.

What are the specific custom cubic-bezier values AI agents should use?

Instead of CSS defaults like ease or ease-in-out, agents should use: --ease-out: cubic-bezier(0.23, 1, 0.32, 1), --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1), and --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1). These values are defined at line 31 of skills/review-animations/STANDARDS.md and provide stronger, more intentional motion than built-in easings.

How should AI agents handle interruptible animations like drag gestures?

For gesture-driven motion, agents should implement the spring physics preset defined near line 65 of skills/review-animations/STANDARDS.md. In React environments, this translates to Framer Motion spring objects with specific stiffness and bounce values; in vanilla JavaScript, agents should use the Web Animations API with physics-based timing functions rather than fixed durations.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}