Skip to main content
affpapa.org
RU EN
skill CX Codex

brand-strategist · dylantarre — Claude Code skill: motion as brand expression

Turns the 12 animation principles into brand decisions: timing, easing, how much stretch fits your character. Useful when motion has to match the rest of the identity.

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

What brand-strategist does

The skill walks through Disney's 12 principles and reframes each as a brand question. Squash and stretch sets elasticity — playful brands stretch further, premium ones stay rigid. Anticipation signals energy: a long wind-up reads as confidence, a short one as efficiency. Timing carries tempo, exaggeration carries boldness.

What you get out of it: a motion manifesto, timing and easing specifications, do/don't examples with rationale, platform-specific adaptations, and a reduced motion variant. Everything inside is prose — principles plus audit questions, no scripts or generators. So it behaves like a checklist you talk through with the agent rather than an automated animation linter.

The catch is that the skill knows nothing about your brand until you describe it. Feed it a vague prompt and the answers come back generic. Have a brand book ready, or at least three adjectives about the character, otherwise the audit just restates the principles back at you.

What it helps with

  • define brand character through animation timing and easing
  • write a motion manifesto for a design system
  • check whether users recognize the animation style across touchpoints
  • add a reduced motion variant that still reads as the brand
  • explain to the team why some easing curves fit and others do not

Example prompts for the agent

  • Help me define our brand motion identity: calm and premium, give me timing and easing specs
  • Write a motion manifesto and a do/don't list for our design system
  • Audit our animation: would customers recognize the brand across platforms?

How to install brand-strategist

1Skills CLI (Vercel)

npx skills add dylantarre/animation-principles --skill brand-strategist -a claude-code

2Manually: put the files in place

~/.claude/skills/brand-strategist/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/brand-strategist/

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

Questions about brand-strategist

How do I install brand-strategist in Claude?

Run npx skills add dylantarre/animation-principles --skill brand-strategist -a claude-code. The skill lands at ~/.claude/skills/brand-strategist/SKILL.md.

What does brand-strategist do?

It maps the 12 animation principles onto brand traits — which timing, elasticity and amplitude match your character. The output is a motion manifesto plus rules for a design system.

Which platforms can run this skill?

Besides Claude there are installs for Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode. Copilot uses a different command: gh skill install dylantarre/animation-principles brand-strategist.

Source text

SKILL.md · MIT 
---
name: brand-strategist
description: Use when defining brand motion identity, creating animation guidelines for brand expression, or aligning animation with brand personality.
---

# Brand Strategist: Motion as Brand Expression

You are a brand strategist defining how motion expresses brand identity. Apply Disney's 12 principles to create distinctive, consistent brand animation.

## The 12 Principles for Brand Identity

### 1. Squash and Stretch
**Brand Expression**: Elasticity defines personality. Playful brands stretch more. Premium brands stay rigid. Tech brands use precise, minimal deformation.
**Brand Examples**: Nickelodeon (hyper-elastic), Apple (minimal stretch), Slack (friendly bounce).

### 2. Anticipation
**Brand Expression**: Wind-up style signals brand energy. Long anticipation = dramatic, confident. Quick anticipation = efficient, modern. No anticipation = urgent, direct.
**Brand Examples**: Luxury brands savor anticipation. Startups skip straight to action.

### 3. Staging
**Brand Expression**: How the brand presents information reflects values. Clean staging = minimal brand. Layered staging = rich, complex brand. Bold staging = confident brand.
**Brand Examples**: Muji stages minimally. Disney stages theatrically.

### 4. Straight Ahead vs Pose to Pose
**Brand Expression**: Creative process as brand value. Straight ahead signals spontaneity, authenticity. Pose to pose signals precision, reliability.
**Brand Examples**: Art brands embrace organic flow. Financial brands use precise keyframes.

### 5. Follow Through and Overlapping Action
**Brand Expression**: Attention to detail. Brands that invest in follow-through signal quality. Minimal follow-through = efficient, no-nonsense. Rich follow-through = luxurious, crafted.
**Brand Examples**: Luxury fashion shows fabric physics. SaaS tools keep it simple.

### 6. Slow In and Slow Out
**Brand Expression**: Easing curves are brand signatures. Sharp easing = energetic, young. Gentle easing = sophisticated, mature. Linear = industrial, functional.
**Brand Examples**: Gaming brands use aggressive curves. Wellness brands ease gently.

### 7. Arc
**Brand Expression**: Movement paths reflect brand character. Organic arcs = natural, human. Geometric paths = precise, engineered. Irregular paths = creative, unpredictable.
**Brand Examples**: Outdoor brands use natural arcs. Automotive brands use engineered precision.

### 8. Secondary Action
**Brand Expression**: Layer of delight investment. Brands with rich secondary action signal they care about details. Creates emotional connection.
**Brand Examples**: Mailchimp's high-five hand. Slack's celebratory confetti. Small touches, big brand love.

### 9. Timing
**Brand Expression**: Tempo defines brand energy. Fast = energetic, young, urgent. Medium = balanced, reliable. Slow = premium, thoughtful, luxurious.
**Brand Examples**: Energy drinks animate fast. Swiss watches animate slowly.

### 10. Exaggeration
**Brand Expression**: Boldness scale. Conservative brands use subtle exaggeration. Bold brands push extremes. Match exaggeration to brand confidence.
**Brand Examples**: Financial institutions: minimal. Entertainment brands: maximum.

### 11. Solid Drawing
**Brand Expression**: Spatial consistency builds trust. Predictable motion behavior signals reliable brand. Consistent = trustworthy. Inconsistent = unstable.
**Brand Examples**: Enterprise software maintains rigid spatial rules. Artistic brands can break them intentionally.

### 12. Appeal
**Brand Expression**: Overall motion aesthetic. Is the brand's movement charming, impressive, calming, exciting? Appeal is the emotional residue of all principles combined.
**Brand Examples**: Pixar animates with warmth. Nike animates with power.

## Brand Motion Guidelines Deliverables

- Motion manifesto (brand personality in motion)
- Timing and easing specifications
- Do/don't examples with rationale
- Platform-specific adaptations
- Reduced motion brand expression

## Audit Questions

- Does motion feel like our brand sounds?
- Would customers recognize our animation style?
- Is motion consistent across touchpoints?

© dylantarre · MIT · dylantarre/animation-principles

Similar skills

Everything for Design →

brand-strategist by other authors comes first.

brand-strategist borghei Builds brand positioning, messaging frameworks, and brand architecture models. Useful for product launches and rebrands. CX Codex +1 774installs motion-prompt-writer charlie947 Writes an 8-part prompt brief for Claude Motion to produce short looping motion graphics in your brand style. CX Codex +1 851installs brand-identity arnabbagxd Translates brand strategy into an actionable visual identity brief for designers. Sets logo direction, hex colors, typography, and imagery rules. CX Codex +1 2,100installs brand-analyzer ailabs-393 Runs brand audits, identifies Jungian personality archetypes, and generates markdown guidelines or action reports. Useful when launching a brand or standardizing design across channels. CX Codex +1 1,100installs brand-designer daffy0208 Walks you through building a brand identity: logo concepts, color palette, typography and guidelines. Useful when the visual system has to live in your codebase. CX Codex +1 1,300installs brand-visual-language dembrandt A skill that ties border radius, type and icon style to your brand's personality. Useful when you start a design system or spot visual drift across components. CX Codex +1 907installs generate-ui-from-brand dembrandt Turns a site URL or a DESIGN.md file into design tokens, UX decisions and a UI spec you can paste into a project. CX Codex +1 870installs

From the same set86

forms-inputs A skill that tells your agent how to animate inputs, textareas and selects: timings, field states and CSS for clear feedback. CX Codex +1 507installs orchestrated-sequences A skill for multi-part animation: it tells you how to set delays, easing curves and element roles so a reveal reads as one composed moment. CX Codex +1 505installs social-media A skill for animation in social apps, messengers and community features: it suggests timings and interaction behaviour. CX Codex +1 504installs exaggeration-mastery A skill that helps you decide how far to push motion past realism so key moments land on screen. CX Codex +1 502installs exit-animations A skill that tells the agent how to animate elements leaving the screen: closing modals, dismissing notifications, removing list items. CX Codex +1 500installs Animation Principles - Expert A skill for animators who already know the classic principles and want to break them deliberately: anti-squash, omitted anticipation, broken arcs. CX Codex +1 499installs timing-calibration A skill that diagnoses animations that feel too fast, too slow or inconsistent, then hands back concrete durations and easing. CX Codex +1 497installs Animation Principles - Teaching Others Walks you through teaching the 12 animation principles to students, mentees or teammates: what to show first and where they usually get stuck. CX Codex +1 495installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

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