# How to Communicate Animation Intent Precisely with AI Using the Skills Framework

> Learn how to communicate animation intent precisely with AI. Map descriptions to structured terms, validate against standards, and eliminate prompt ambiguity using gated checklists from Emil Kowalski's skills framework.

- Repository: [Emil Kowalski/skills](https://github.com/emilkowalski/skills)
- Tags: how-to-guide
- Published: 2026-07-28

---

**To communicate animation intent precisely with AI, map vague descriptions to canonical terms from a structured glossary, validate them against deterministic craft standards, and surface opportunities through gated checklists that eliminate ambiguity from prompts.**

The `emilkowalski/skills` repository provides a curated toolbox that transforms how designers and developers describe motion to AI systems. Instead of relying on subjective descriptions like "a little bounce," you use a repeatable workflow built on shared vocabulary, strict validation rules, and concrete search utilities. This approach ensures that when you ask an AI to implement an animation, it receives tokens that map directly to specific CSS properties, timing functions, and hardware-accelerated transforms.

## The Problem with Verbose Descriptions

When you tell an AI to add "a smooth entrance animation," the interpretation varies wildly between models and contexts. One generation might emit `transition: all 0.3s ease`, while another applies a physics-based spring with conflicting parameters. This ambiguity stems from natural language lacking the precision required for motion design, where milliseconds and easing curves determine whether an interface feels responsive or sluggish.

## A Standardized Framework for Animation Communication

The Skills framework, installable via `npx skills@latest add emilkowalski/skills`, establishes three deterministic layers that sit between your intent and the AI's output. Each layer references files from the repository's `skills/` directory, creating a knowledge base that constrains the AI to craft-compliant decisions.

According to the source code, the framework chains four discrete steps: normalizing language through a canonical glossary, validating proposals against non-negotiable standards, surfacing opportunities with exact specifications, and finally generating implementation-ready code.

## Structured Animation Vocabulary

The **animation vocabulary** skill ([`skills/animation-vocabulary/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/animation-vocabulary/SKILL.md)) eliminates synonym drift by mapping every motion sensation to a single, canonical term. The glossary organizes entries by category—entrances, exits, sequencing, and easing—each with precise definitions quoted verbatim to prevent AI hallucination.

When you describe "the overshoot when a modal appears," the skill returns **"Pop in"** as the canonical token. This token carries implicit constraints: it implies a scale transform with an overshoot easing, GPU-only properties, and a duration budget under 300ms. Because the definitions in [`SKILL.md`](https://github.com/emilkowalski/skills/blob/main/SKILL.md) must be quoted verbatim, the AI cannot substitute synonyms like "bounce" or "elastic" that might trigger incorrect physics implementations.

## Validation Through Craft Standards

Before accepting a proposal, run the **review** skill ([`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md)) to validate that your chosen term satisfies ten non-negotiable craft standards documented in [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md). These standards enforce justified motion, sub-300ms UI animations, and GPU-only properties (transform and opacity).

The review process outputs a pass/fail verdict with citations. For example, proposing **"Stagger"** for a high-frequency toolbar button triggers a failure because the frequency gate in the standards prohibits complex choreography on frequently-triggered elements. The AI receives not just a rejection, but the rationale: "Stagger violates the high-frequency restraint per rule 4."

## Surfacing Missing Animations

The **finder** skill ([`skills/find-animation-opportunities/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/find-animation-opportunities/SKILL.md)) runs a gated checklist against your codebase to identify locations lacking motion. It evaluates four axes: frequency (how often the element appears), purpose (state change vs. attention), speed (interaction criticality), and function (feedback vs. decoration).

When scanning `src/**/*.tsx`, the skill returns a table of suggestions paired with exact CSS values drawn from the shared vocabulary. For instance, it might flag `Toast.tsx:41` as needing an entrance, prescribing `@starting-style: opacity:0; translateY:100%` with `transition: 400ms var(--ease-out)`. These values come verbatim from the glossary, ensuring the AI can copy-paste them directly into production code without interpretation.

## Practical Examples

### Mapping Vague Requests to Canonical Terms

When you need to identify the exact name for a motion pattern, reference the vocabulary skill to retrieve the canonical token:

```javascript
// Human query: "What do you call the effect where a modal appears from the button that opened it?"
const term = await ai.run(`
  Use the animation-vocabulary skill to find the exact name.
`);
console.log(term); // → "Origin-aware animation"

```

The AI consults [`skills/animation-vocabulary/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/animation-vocabulary/SKILL.md) and returns **"Origin-aware animation"**, a specific term that implies both the transform origin and the scaling behavior required for spatial continuity.

### Validating Implementation Proposals

Validate a proposed animation against craft standards before generating code:

```bash

# Propose a "Pop in" entrance for a tooltip at line 12

skills review-animations --file src/Tooltip.tsx:12 \
  --animation "Pop in" --duration 200ms

```

The CLI references [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) and returns specific corrections:

| Before | After | Citation |
|--------|-------|----------|
| `transform: scale(0)` | `transform: scale(0.95); opacity: 0` | Scale-from-0 violates Origin & Physical Correctness (rule 5) |

### Generating Opportunity Reports

Scan your codebase for missing animations with precise prescriptions:

```bash
skills find-animation-opportunities --path src/**/*.tsx

```

Results include exact values from the vocabulary:

| Location | Purpose | Frequency | Suggested Motion |
|----------|---------|-----------|------------------|
| `Toast.tsx:41` | State change | Occasional | `@starting-style: opacity:0; translateY:100%` → `transition: 400ms var(--ease-out)` |

## Installation and Setup

Install the complete skill set to enable precise animation communication in your project:

```bash
npx skills@latest add emilkowalski/skills

```

The top-level [`README.md`](https://github.com/emilkowalski/skills/blob/main/README.md) provides quick links to each skill and explains how the deterministic artifacts chain together. Once installed, the AI can reference the local `skills/` directory to resolve terms, validate proposals, and generate compliant code.

## Summary

- **Canonical vocabulary** in [`skills/animation-vocabulary/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/animation-vocabulary/SKILL.md) maps subjective descriptions to precise tokens like **"Pop in"** or **"Slide in"** that carry implicit technical constraints.
- **Deterministic validation** via [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md) enforces non-negotiable craft standards including sub-300ms durations and GPU-only properties.
- **Opportunity surfacing** through [`skills/find-animation-opportunities/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/find-animation-opportunities/SKILL.md) returns concrete CSS values drawn verbatim from the glossary, eliminating interpretation errors.
- **Verbatim quoting rules** prevent AI synonym substitution, ensuring that "ease-out" never becomes "spring" or "smooth" in the generated output.

## Frequently Asked Questions

### What makes animation intent ambiguous to AI systems?

Natural language lacks the precision required for motion parameters. When you request "a quick fade," an AI cannot determine whether you mean 150ms or 400ms, or whether the easing should be linear or `cubic-bezier(0.4, 0, 0.2, 1)`. This ambiguity leads to implementations that violate performance budgets or feel inconsistent with your design system.

### How does theSkills framework prevent prompt drift?

The framework requires the AI to quote definitions verbatim from [`skills/animation-vocabulary/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/animation-vocabulary/SKILL.md). By constraining the model to a closed vocabulary of canonical terms—each linked to specific CSS properties and timing functions—you eliminate the tendency of LLMs to substitute synonyms or invent parameters that deviate from your craft standards.

### Can I use these validation rules without the CLI tools?

Yes. The standards documented in [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) and the vocabulary in [`skills/animation-vocabulary/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/animation-vocabulary/SKILL.md) are plain text files that you can include directly in your AI context window. You can manually reference these files when writing prompts, asking the AI to validate its proposals against the specific rules listed in those documents.

### What are the non-negotiable craft standards mentioned in the review skill?

The [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) file lists ten non-negotiable rules, including: motion must be justified (not decorative), UI animations must complete in under 300ms, only GPU-accelerated properties (transform, opacity) may be animated, and entrances must respect `prefers-reduced-motion`. Each rule includes specific citations that the AI uses to explain pass/fail verdicts.