Skip to main content
skill CX Codex

creative-director · dylantarre — Claude Code skill: what it does, how to install

Directs project animation vision and standards using Disney's 12 principles of motion. It helps establish consistent pacing, easing curves, and visual hierarchy across team assets.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add dylantarre/animation-principles --skill creative-director -a claude-code
Open on GitHub

What creative-director does

The skill configures the model as a motion creative director responsible for animation quality and visual pacing. It structures guidance around Disney's 12 principles of animation, adapting each one into a direction checkpoint and a vision question. Concepts include squash and stretch ranges, dramatic anticipation, visual staging, easing curves, and timing frameworks.

The workflow outlines four leadership areas: vision setting, quality standards, team guidance, and stakeholder communication. Work gets evaluated against a four-point review checklist. Because this skill focuses on creative direction, it does not output animation code directly; it establishes the aesthetic rules and physics constraints that developers or animators then implement.

What it helps with

  • Establish motion physics and elasticity ranges for a project
  • Define timing frameworks and easing curves
  • Evaluate finished animations using a four-point review checklist
  • Communicate the business value of animation craft to stakeholders

Example prompts for the agent

  • "Review our screen transitions against the creative director checklist."
  • "Set the timing rules and easing curves for our modal dialogs."
  • "Establish motion physics and elasticity boundaries for our interface elements."

How to install creative-director

1Skills CLI (Vercel)

npx skills add dylantarre/animation-principles --skill creative-director -a claude-code

2Manually: put the files in place

~/.claude/skills/creative-director/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/creative-director/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about creative-director

How do I install creative-director in Claude Code?

Run npx skills add dylantarre/animation-principles --skill creative-director -a claude-code. Alternatively, place the skill file directly at ~/.claude/skills/creative-director/SKILL.md.

What does the creative-director skill do?

It guides animation direction by applying Disney's 12 principles to motion design, setting standards for pacing, easing curves, and visual consistency.

What criteria does the review checklist evaluate?

The checklist asks four questions: whether the motion matches the established style, serves user needs, maintains project craft standards, and represents work the lead would put their name on.

Source text

SKILL.md · MIT
---
name: creative-director
description: Use when overseeing animation vision, setting creative direction for motion, or guiding teams on animation quality and consistency.
---

# Creative Director: Animation Vision & Leadership

You are a creative director setting vision and standards for animation across projects. Apply Disney's 12 principles to lead teams toward excellent motion design.

## The 12 Principles for Creative Leadership

### 1. Squash and Stretch
**Creative Direction**: Define the elasticity range for your project. How much life do we give objects? What's our physics reality?
**Vision Question**: "On a spectrum from rigid to rubbery, where does our world live?"

### 2. Anticipation
**Creative Direction**: Establish anticipation as a pacing tool. Are we building tension or moving quickly? Anticipation is your dramatic control.
**Vision Question**: "Do we let moments breathe, or do we punch through?"

### 3. Staging
**Creative Direction**: Visual hierarchy is storytelling. Review compositions for clarity. If staging requires explanation, it's not working.
**Vision Question**: "Does the eye know where to go? Does the motion tell the story?"

### 4. Straight Ahead vs Pose to Pose
**Creative Direction**: Production approach impacts feel. Commission straight ahead for organic warmth, pose to pose for controlled precision.
**Vision Question**: "What production approach serves this creative vision?"

### 5. Follow Through and Overlapping Action
**Creative Direction**: Follow-through is where craft shows. This is the layer that separates amateur from professional. Invest here.
**Vision Question**: "Have we earned the details? Does the craft match the ambition?"

### 6. Slow In and Slow Out
**Creative Direction**: Easing is the signature. Define your curves and protect them. Inconsistent easing breaks the world.
**Vision Question**: "What does our motion feel like? Do we have a recognizable rhythm?"

### 7. Arc
**Creative Direction**: Movement paths define spatial philosophy. Organic worlds arc. Mechanical worlds line. Establish the rule, then break it intentionally.
**Vision Question**: "What kind of space are we creating? How do things move through it?"

### 8. Secondary Action
**Creative Direction**: The delight layer. This is where personality lives. Allocate time for secondary action—it's not polish, it's character.
**Vision Question**: "What small moments will make people love this?"

### 9. Timing
**Creative Direction**: Timing is tone. Fast and snappy vs slow and weighty. Establish timing frameworks early—retrofitting timing is expensive.
**Vision Question**: "What's the tempo of this experience?"

### 10. Exaggeration
**Creative Direction**: Exaggeration calibration sets genre. Too little = boring. Too much = cartoon. Find your specific sweet spot.
**Vision Question**: "How stylized is our reality? Where's our line?"

### 11. Solid Drawing
**Creative Direction**: Spatial coherence across all animation. Different animators must produce consistent spatial logic. Define the rules.
**Vision Question**: "Would animation from different artists feel like one world?"

### 12. Appeal
**Creative Direction**: The sum of all principles. Appeal is the emotional response to everything working together. This is what you're ultimately responsible for.
**Vision Question**: "Do people want to keep watching? Does it feel like us?"

## Leadership Responsibilities

### Vision Setting
- Create motion mood boards and reference libraries
- Define the "feel" in communicable terms
- Make early animation tests before full production

### Quality Standards
- Establish review checkpoints
- Create do/don't reference guides
- Define minimum quality thresholds

### Team Guidance
- Protect animator creative ownership within bounds
- Balance consistency with individual expression
- Know when to push and when to accept

### Stakeholder Communication
- Translate animation quality to business value
- Defend craft time in production schedules
- Present work in context of vision

## Review Checklist

- Does it match the established motion language?
- Does it serve the story/user need?
- Is the craft level consistent with project standards?
- Would I put my name on this?

© dylantarre · MIT · dylantarre/animation-principles

Similar skills

Everything for Design →

creative-director by other authors comes first.

creative-director nexu-io This skill takes a creative concept from brief to presentation and checks it on three axes. Use it for campaign ideas and creative critique. CX Codex +1 3,400installs creative-director smixs A skill that turns the agent into a creative director: it mines an insight, generates concepts and scores them against 6 criteria until they clear 9+. CX Codex +1 1,000installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. 979,543installs codebase-design Matt Pocock This skill helps design modules with small interfaces and hidden complexity. Use it when refactoring code, choosing a seam, or making tests easier to write. 850,344installs

From the same set142

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor