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

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) 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 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) to validate that your chosen term satisfies ten non-negotiable craft standards documented in 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) 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:

// 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 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:

# 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 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:

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:

npx skills@latest add emilkowalski/skills

The top-level 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 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 enforces non-negotiable craft standards including sub-300ms durations and GPU-only properties.
• Opportunity surfacing through 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. 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 and the vocabulary in 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 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.

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