# Coordinate Interface Animations With Clear Timelines

Independent animations can create delays, competing movement, and broken transitions. Choreograph guides coordinated timing, reduced-motion alternatives, and interruption handling through CSS and Motion recipes.

## Install

```bash
npx skillstore add emilkowalski/choreograph
```

## Metadata

- Status: approved
- Slug: emilkowalski-choreograph
- Skillstore revision: r1
- Version status: missing
- Tree hash: 93afe81c1d5dc53aaa8dfd7f5aad11f6c26cf369ad65515ed22e72256b8b855e
- Author: emilkowalski
- GitHub username: emilkowalski
- Repository: https://github.com/emilkowalski/skills/tree/c8a79627b59d72d764d6ab6f2c87c09a48169833/skills/choreograph
- Ref: 1afe00777fa9e67d811c340994d2c28df1bfa7ee
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands
- Quality score: 72
- Public page: https://skillstore.pages.dev/skills/emilkowalski-choreograph
- Manifest: https://skillstore.pages.dev/api/skills/emilkowalski-choreograph/manifest

## Capabilities

- Assign lead, support, decoration, and static roles to elements involved in an interaction.
- Produce timelines showing each element's start, duration, motion, and relationship to other elements.
- Provide CSS and Motion recipes for staggered entrances, simultaneous exits, crossfades, and direction-aware steps.
- Coordinate container resizing with content transitions and adapt fade duration to height changes.
- Guide cancellation, completion tracking, and idle-loop coordination for interrupted animation sequences.
- Define reduced-motion alternatives that remove movement and delays while preserving visible state changes.

## Use Cases

- Simplify Repeated Product Interactions: Remove nested entrances and unnecessary staggering from menus, drawers, and frequently opened panels.
- Plan First-Visit Entrances: Assign visual roles and overlapping timing to titles, supporting text, and actions without moving every element.
- Coordinate Multi-Step Transitions: Align navigation direction, container resizing, content exits, and interruption checks across a multi-step interface.

## Prompt Templates

### Review a Panel Entrance

```
Review the entrance animation in [component]. Identify redundant movement and provide a timeline, static elements, and recording checks.
```

### Plan an Overlapping Entrance

```
Choreograph the first-visit entrance in [page]. Assign element roles, vary support timing, and include reduced-motion behavior without animating the parent entrance.
```

### Implement Direction-Aware Steps

```
Update [step component] with Motion transitions that follow Next and Back direction. Coordinate resizing, preserve stable keys, and check rapid repeated navigation.
```

### Orchestrate Interruptible Interaction States

```
Review [interactive component] across hover, click, reset, and idle states. Coordinate animation cancellation, await reset completion, and specify reduced-motion behavior and interruption tests.
```

## Limitations

- Contains written guidance and illustrative recipes, not a standalone animation runtime or automated testing tool.
- Motion recipes require a compatible React setup; the resizing example also uses react-use-measure.
- Visual quality requires recordings and manual inspection; source code alone cannot establish the final result.
- Focuses on relationships between animations, not comprehensive tuning of individual animation easing or duration.

## Best Practices

- Inventory moving elements and assign roles before selecting timing or implementation tools.
- Use the lightest animation approach and remove staggering from frequently used or keyboard-triggered interfaces.
- Inspect recordings, test rapid interruptions, and verify reduced-motion behavior before accepting the choreography.

## Anti Patterns

- Animating a container entrance and then separately staggering all its children.
- Applying identical timing and movement to every element, including decorative details.
- Starting new sequences without stopping existing animations or waiting for resets to finish.

## Security Audit

- Audited at: 2026-11-04T15:55:31.808\+00:00
- Summary: All 28 static findings are false positives after reviewing both source files. Backticks mark documentation or TypeScript strings; reconnaissance matches describe UI behavior, and the injection phrase appears in defensive guidance. No evidence found of malicious instructions, shell execution, credential access, or data exfiltration.

## Stats

- Views: 0
- Downloads: 0
- Favorites: 0
- Popularity score: 0