How to Create Cohesive Animation Experiences that Match Component Personality

Use a layered standards system that maps animation properties to predefined component personalities, ensuring motion aligns with user expectations and interaction frequency.

The Skills repository by emilkowalski provides an opinionated workflow for crafting cohesive animation experiences in web interfaces. Through a collection of Markdown-based skill files, it establishes concrete standards for easing curves, durations, and physical rules that ensure animations respect both component personality and performance constraints.

Understanding the Animation Standards Architecture

The repository organizes animation knowledge into four interconnected layers. According to the source code in emilkowalski/skills, this architecture ensures every animation decision traces back to documented rules.

Core Standards and Easing Definitions

The canonical source of truth resides in skills/review-animations/STANDARDS.md. This file defines concrete values for easing curves, durations, and spring configurations that govern all motion decisions.

Key specifications include:

• Easing tokens defined as CSS custom properties (lines 31-35):

  :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);
  }

• Duration hierarchies based on interaction type, with button feedback targeted at 100-160ms (lines 43-44)

• Physical constraints prohibiting animations like scale(0) and enforcing GPU-friendly properties (transform and opacity only)

Component Personality Categories

The standards recognize two primary personality archetypes that drive cohesion (lines 85-88 in STANDARDS.md):

• Playful: Used for onboarding toasts and celebratory interactions, characterized by slightly longer durations (200ms+) and subtle bounce in easing curves
• Crisp: Reserved for dashboard elements and high-frequency actions, utilizing fast feedback (120ms) and linear precision

Mapping Frequency to Animation Delight

Before implementing any animation, consult the frequency matrix defined in STANDARDS.md (lines 5-12). This matrix determines whether an interaction merits visible motion:

• Low-frequency or first-time interactions: Full animation permitted to create delight
• High-frequency actions: Must remain invisible or extremely subtle to avoid fatigue

This frequency-based approach ensures that cohesive animation experiences do not hinder usability in high-throughput interfaces.

Implementing Personality-Driven Motion

Selecting Easing and Duration by Context

The standards prescribe a strict hierarchy for easing selection:

1. Enter/exit animations: Use ease-out (--ease-out)
2. Moving elements: Use ease-in-out
3. Hover states: Use standard ease

Apply these patterns through personality-aware CSS:

/* Base button with standard easing */
.button {
  transition: transform 160ms var(--ease-out), 
              opacity 160ms var(--ease-out);
}

/* Playful variant for onboarding */
.button.playful {
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.23, 1, 0.45, 1.2);
}

/* Crisp variant for data dashboards */
.button.crisp {
  transition-duration: 120ms;
}

Enforcing Interruptibility

For rapidly-triggered UI elements, prefer CSS transitions or the Web Animations API (WAAPI) over keyframe-only animations. The Interruptibility section in STANDARDS.md (lines 77-86) mandates that animations must re-target their current state when interrupted, preventing jarring resets.

Implement interruptible toasts using CSS transitions:

.toast {
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 400ms var(--ease-out),
              transform 400ms var(--ease-out);
}

.toast[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
}

When the toast is dismissed, the transition reverses smoothly from its current position rather than jumping.

Physical Correctness with WAAPI

For complex gestures like drag-to-dismiss, use WAAPI with the standard easing curves defined in lines 65-71 of STANDARDS.md:

const animation = element.animate(
  [{ transform: 'translateX(0)' }, 
   { transform: 'translateX(100%)' }],
  {
    duration: 500,
    easing: 'cubic-bezier(0.23, 1, 0.32, 1)',
    fill: 'forwards'
  }
);

This ensures spring configurations match the repository's physical rules while maintaining GPU acceleration.

Audit and Review Workflow

The Review Process

The skills/review-animations/SKILL.md file defines a structured review process that evaluates code diffs against ten non-negotiable standards. When reviewing animations, the skill outputs a markdown table of findings referencing specific violations in STANDARDS.md.

For larger codebases, skills/improve-animations/SKILL.md conducts comprehensive audits using the checklist in skills/improve-animations/AUDIT.md. This audit evaluates:

• Consistency with personality categories
• Adherence to frequency guidelines
• Physical correctness of transforms
• Reduced motion compliance

Creating Implementation Plans

Follow the skills/improve-animations/PLAN-TEMPLATE.md format when documenting animation improvements. Each plan must contain:

• Exact file paths for modification
• Code snippets with specific cubic-bezier values from STANDARDS.md
• Spring configurations for physics-based motion
• Accessibility considerations including prefers-reduced-motion handling

Respecting Accessibility Constraints

All animation plans must include reduced-motion fallbacks as specified in lines 61-67 of STANDARDS.md:

@media (prefers-reduced-motion: reduce) {
  .animated {
    transition: none;
    animation: none;
    opacity: 1;
  }
}

This ensures cohesive animation experiences remain accessible to users with vestibular disorders.

Summary

• Define personality first: Classify components as playful or crisp before selecting animation parameters, referencing the cohesion standards in STANDARDS.md (lines 85-88)
• Check interaction frequency: Consult the frequency matrix (lines 5-12) to determine if animation should be visible or suppressed
• Use tokenized easing: Implement CSS custom properties for --ease-out, --ease-in-out, and --ease-drawer as defined in lines 31-35
• Prioritize interruptibility: Choose CSS transitions or WAAPI over keyframes for dynamic UI elements (lines 77-86)
• Follow the audit workflow: Use review-animations/SKILL.md for diff reviews and improve-animations/SKILL.md with AUDIT.md for full codebase assessments
• Include accessibility: Always implement prefers-reduced-motion media queries (lines 61-67) and avoid animating non-GPU properties

Frequently Asked Questions

How do I choose between playful and crisp animation personalities?

Classify the component based on user context and interaction frequency. Playful personalities suit low-frequency, celebratory moments like onboarding toasts, utilizing bouncier easing (200ms duration). Crisp personalities fit high-frequency dashboard interactions requiring immediate feedback (120ms duration). The STANDARDS.md file (lines 85-88) defines these categories specifically to maintain cohesion across your interface.

Why does the Skills repository prohibit animating scale(0)?

Physical correctness prevents visual discontinuities and performance issues. Animating to scale(0) causes elements to vanish abruptly, breaking the user's spatial model. The standards in STANDARDS.md require maintaining visibility through opacity transitions or using scale(0.01) minimums, ensuring transforms remain GPU-accelerated and mathematically continuous.

What is the difference between the review-animations and improve-animations skills?

The scope and depth of analysis differ significantly. The review-animations skill (defined in skills/review-animations/SKILL.md) evaluates specific code diffs against the ten non-negotiable standards, outputting immediate findings. The improve-animations skill (defined in skills/improve-animations/SKILL.md) conducts comprehensive codebase audits using AUDIT.md and generates prioritized implementation plans via PLAN-TEMPLATE.md for systematic refactoring.

How do I handle animations for users with motion sensitivity?

Implement reduced-motion fallbacks using the patterns in STANDARDS.md (lines 61-67). Wrap all animation properties in @media (prefers-reduced-motion: reduce) queries that disable transitions and animations while preserving static visual cues. This ensures your cohesive animation experiences degrade gracefully without sacrificing functionality for users requiring minimal motion.

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