AI Agent Skills for UI Animation in the emilkowalski/skills Repository

The emilkowalski/skills repository provides seven specialized AI agent skills for UI animation—animate, review-animations, improve-animations, find-animation-opportunities, pick-ui-library, animation-vocabulary, and prototype—that automate the complete motion design workflow from generating production-ready code to conducting quality audits.

These AI agent skills for UI animation are implemented as deterministic markdown files that encode decision trees and output templates. Located in the skills/ directory, each file defines a single, well-scoped capability allowing an orchestrating AI agent to chain them together without side effects to build, review, and refine web animations.

Available AI Agent Skills for UI Animation

The repository contains seven distinct skills covering the full lifecycle of UI motion design. Each skill resides in its own subdirectory under skills/ with a SKILL.md file defining its logic.

animate

The animate skill constructs complete UI animations from natural language requests. Located at skills/animate/SKILL.md, it executes a seven-step deterministic workflow: it gates animation by frequency tier (how often the element appears), determines purpose (feedback, spatial consistency, or state indication), selects the cheapest viable tool (CSS transition → WAAPI → Motion library), restricts properties to GPU-friendly options (transform, opacity), applies correct easing/duration or spring configurations, adds reduced-motion and hover gating, and outputs production-ready implementation code with a summary.

review-animations

The review-animations skill evaluates existing motion code against a high-craft bar derived from Emil Kowalski’s design philosophy. Defined in skills/review-animations/SKILL.md, it runs a checklist of ten non-negotiable standards—including justified motion, frequency-appropriateness, and GPU-only properties—and produces a markdown findings table with a verdict.

improve-animations

The improve-animations skill performs repository-wide animation audits. As implemented in skills/improve-animations/SKILL.md, it loads the full standards catalog from skills/review-animations/STANDARDS.md, scans all UI components, groups findings by impact tier, and returns a prioritized remediation plan with batch-fix capabilities.

find-animation-opportunities

The find-animation-opportunities skill detects locations where motion would add value. According to skills/find-animation-opportunities/SKILL.md, it traverses component files to identify UI patterns lacking motion—such as buttons without press feedback or sidebars without entrance animations—and returns candidate elements with suggested purposes.

pick-ui-library

The pick-ui-library skill selects appropriate UI component libraries when requests involve entire widgets rather than raw animations. Defined in skills/pick-ui-library/SKILL.md, it checks for component-level needs (toasts, modals, drawers) and returns recommendations like Headless UI or Radix with specific justification.

animation-vocabulary

The animation-vocabulary skill maps vague natural-language descriptions to precise terminology. Located at skills/animation-vocabulary/SKILL.md, it performs reverse-lookups in a curated glossary to translate descriptions like "bouncy popover" into canonical terms such as Pop in.

prototype

The prototype skill provides quick scaffolding for UI prototypes that include motion. As defined in skills/prototype/SKILL.md, it wires together the animate or pick-ui-library skills based on the prototype brief and emits minimal demo components.

How the Animation Skills Interact

The AI agent skills for UI animation follow a choreographed workflow that mirrors professional motion design pipelines.

1. Discovery – find-animation-opportunities surfaces candidate elements lacking motion.
2. Decision – The agent evaluates purpose and frequency via the gates in animate. For full components, pick-ui-library triggers first.
3. Implementation – animate creates concrete animation code adhering to standards enforced by review-animations.
4. Quality Assurance – review-animations validates generated or existing code against the ten-point craft checklist.
5. Scale – improve-animations runs repository-wide audits aggregating findings from previous steps.
6. Communication – animation-vocabulary supplies exact terminology when designers request specific effects by description.

Practical Code Examples

The repository uses double curly brace syntax to invoke skills at runtime. Below are practical patterns for leveraging these AI agent skills for UI animation.

Building a Dropdown Animation

To generate a dropdown animation with specific constraints:

{{animate}}
frequency: occasional
purpose: state indication
tool: css transition
properties: transform, opacity
easing: ease-out
duration: 200ms

This invocation triggers the seven-step workflow in skills/animate/SKILL.md, emitting CSS that respects reduced-motion media queries while using GPU-optimized properties.

Reviewing Existing Motion Code

To audit a specific file against animation standards:

{{review-animations}}
file: src/components/Toast.jsx

The skill outputs a findings table comparing "Before" and "After" states, such as flagging transition: all 300ms for replacement with transition: transform, opacity 200ms ease-out to limit animations to GPU-friendly properties.

Finding Missing Animation Opportunities

To scan a project for animation gaps:

{{find-animation-opportunities}}
project: web-app

The skill returns specific recommendations like adding transform: scale(0.97) on :active for Button components or implementing slide-in animations for SidebarToggle elements to improve spatial consistency.

Selecting UI Libraries

When the request involves complete widgets rather than raw animation:

{{pick-ui-library}}
component: toast
requirements: auto-dismiss, accessible focus management

The skill returns "Use Radix UI’s Toast primitive because it provides built-in focus-trap and ARIA attributes."

Naming Animation Effects

To translate vague descriptions into precise terminology:

{{animation-vocabulary}}
description: "the thing that makes a modal pop out from the center with a slight bounce"

The skill returns Pop in — defined as an element appearing with slight overshoot, like it bounces into place.

Key Files and Standards

The AI agent skills for UI animation rely on specific configuration files that define implementation standards:

• skills/animate/SKILL.md – Core animation-building logic with the seven-step workflow
• skills/review-animations/SKILL.md – Ten-point quality checklist and verification logic
• skills/review-animations/STANDARDS.md – Reference table of easing curves, durations, and spring configurations used by both animate and improve-animations
• skills/improve-animations/SKILL.md – Repository-wide audit orchestration
• skills/find-animation-opportunities/SKILL.md – Pattern detection algorithms for missing motion
• skills/pick-ui-library/SKILL.md – Component library selection logic
• skills/animation-vocabulary/SKILL.md – Curated glossary of motion terminology
• skills/prototype/SKILL.md – Skill chaining and demo scaffolding logic

Summary

• The emilkowalski/skills repository contains seven specialized AI agent skills for UI animation covering implementation, review, audit, discovery, library selection, terminology, and prototyping.
• Each skill is a single-responsibility markdown file (SKILL.md) that encodes deterministic decision trees without side effects.
• The animate skill follows a rigorous seven-step process from frequency gating to reduced-motion compliance.
• Quality assurance is enforced through review-animations against ten non-negotiable standards defined in STANDARDS.md.
• Skills communicate via double curly brace invocation syntax and can be chained to automate complete motion design workflows.

Frequently Asked Questions

What distinguishes these AI agent skills from standard animation libraries?

Standard animation libraries provide motion primitives, whereas these AI agent skills for UI animation encode design decision-making logic. The animate skill determines whether an element should animate based on frequency and purpose gates before selecting tools, while review-animations enforces craft standards that generic libraries do not include.

How does the animate skill choose between CSS transitions and JavaScript libraries?

According to skills/animate/SKILL.md, the skill follows a cost-based hierarchy: it attempts CSS transitions first as the cheapest option, escalates to the Web Animations API (WAAPI) for complex sequences, and reserves Motion libraries (like Framer Motion) only when necessary for spring physics or gesture handling.

Can these skills handle accessibility requirements like reduced motion?

Yes. The animate skill explicitly includes reduced-motion gating as step six of its workflow. Generated code automatically respects prefers-reduced-motion media queries, and review-animations verifies that implementations do not animate properties beyond transform and opacity which could cause vestibular issues.

Where are the animation easing and duration standards defined?

The canonical reference resides in skills/review-animations/STANDARDS.md, which contains the full table of easing curves, duration guidelines, and spring configurations. Both the animate skill (for implementation) and improve-animations skill (for auditing) reference this file to ensure consistency across the codebase.

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