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

> Explore the emilkowalski/skills repository for AI agent skills in UI animation. Automate motion design, generate code, and conduct audits with these seven specialized tools.

- Repository: [Emil Kowalski/skills](https://github.com/emilkowalski/skills)
- Tags: deep-dive
- Published: 2026-08-09

---

**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`](https://github.com/emilkowalski/skills/blob/main/SKILL.md) file defining its logic.

### animate

The **`animate`** skill constructs complete UI animations from natural language requests. Located at [`skills/animate/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/SKILL.md), it loads the full standards catalog from [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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:

```markdown
{{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`](https://github.com/emilkowalski/skills/blob/main/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:

```markdown
{{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:

```markdown
{{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:

```markdown
{{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:

```markdown
{{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`](https://github.com/emilkowalski/skills/blob/main/skills/animate/SKILL.md)** – Core animation-building logic with the seven-step workflow
- **[`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md)** – Ten-point quality checklist and verification logic
- **[`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/SKILL.md)** – Repository-wide audit orchestration
- **[`skills/find-animation-opportunities/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/find-animation-opportunities/SKILL.md)** – Pattern detection algorithms for missing motion
- **[`skills/pick-ui-library/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/pick-ui-library/SKILL.md)** – Component library selection logic
- **[`skills/animation-vocabulary/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/animation-vocabulary/SKILL.md)** – Curated glossary of motion terminology
- **[`skills/prototype/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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.