Skip to main content
skill CX Codex

enterprise-b2b — Claude Code skill: what it does, how to install

Provides animation rules for B2B platforms and admin dashboards. It guides transition timing and states to keep motion fast and functional.

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

What enterprise-b2b does

The skill adapts classic animation principles for dashboards and enterprise software. Motion exists only to confirm actions and signal state changes. Enterprise users are working, not playing. Speed is respect for their time.

The guidelines establish strict duration standards. Button feedback takes 100ms with ease-out, while table row updates run for 200ms with ease-in-out. Most interface transitions stay within 150ms to 250ms. Deliberate delays are banned.

Exaggeration is completely avoided except for critical alerts. When updating data tables, the container adjusts first, and data loads next.

What it helps with

  • set duration and easing curves for buttons and modals
  • sequence data loading states when updating tables
  • remove decorative distortion from corporate interface elements
  • organize sequential progression in wizards and report generators

Example prompts for the agent

  • Suggest timing and easing curves for an admin dashboard panel transition
  • Apply enterprise-b2b motion rules to our data table row updates
  • How should a confirmation modal open in our B2B application?

How to install enterprise-b2b

1Skills CLI (Vercel)

npx skills add dylantarre/animation-principles --skill enterprise-b2b -a claude-code

2Manually: put the files in place

~/.claude/skills/enterprise-b2b/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/enterprise-b2b/

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

Questions about enterprise-b2b

How to install enterprise-b2b in Claude Code?

Run npx skills add dylantarre/animation-principles --skill enterprise-b2b -a claude-code in your terminal.

What kinds of interfaces is enterprise-b2b designed for?

It targets enterprise software, B2B platforms, admin dashboards, and corporate tools where speed and utility matter most.

What timing standards does enterprise-b2b recommend?

Button feedback takes 100ms with ease-out, table row updates require 200ms, and modal dialogs open in 250ms.

Source text

SKILL.md · MIT
---
name: enterprise-b2b
description: Use when designing animations for enterprise software, B2B platforms, admin dashboards, or corporate applications
---

# Enterprise & B2B Animation Principles

Apply Disney's 12 principles to create trustworthy, efficient experiences that prioritize clarity and professional credibility.

## The 12 Principles Applied

### 1. Squash & Stretch
- **Almost Never**: Enterprise requires utmost professionalism
- **Data Points**: Subtle pulse for live updates
- **Buttons**: Minimal, if any, deformation

### 2. Anticipation
- **Form Submissions**: Brief processing indication
- **Data Actions**: Moment before confirmation
- **Navigation Changes**: Subtle preparation cues

### 3. Staging
- **Data Tables**: Primary content focus
- **Action Buttons**: Clear but not flashy
- **Notifications**: Non-disruptive placement

### 4. Straight Ahead & Pose to Pose
- **Dashboards**: Real-time data streams (straight ahead)
- **Wizards/Flows**: Explicit step progression (pose to pose)
- **Report Generation**: Sequential build

### 5. Follow Through & Overlapping Action
- **Table Updates**: Row highlights, then data refreshes
- **Panel Expansions**: Container opens, content follows
- **Filter Applications**: UI adjusts, then data loads

### 6. Slow In & Slow Out
- **All Transitions**: Smooth, professional easing
- **Modal Opens**: Confident 250-300ms
- **State Changes**: Deliberate, measured motion

### 7. Arc
- **Minimal Use**: Straight lines suggest efficiency
- **Drag Operations**: Slight natural curve
- **Data Flow Diagrams**: Curved connection lines

### 8. Secondary Action
- **Save Indicator**: Subtle spinner while processing
- **Sync Status**: Background activity indication
- **Validation**: Inline feedback during input

### 9. Timing
- **Efficient**: 150-250ms for most interactions
- **Never Delay Work**: Speed is respect for user time
- **Instant Feedback**: 100ms for input responses

### 10. Exaggeration
- **Avoid Completely**: Enterprise must be understated
- **Exception**: Critical alerts warrant attention
- **Milestone Only**: Major achievements, sparingly

### 11. Solid Drawing
- **Data Accuracy**: Charts must be precise
- **Typography**: Clear, readable business fonts
- **Icon System**: Consistent, professional set

### 12. Appeal
- **Professional Trust**: Motion builds credibility
- **Invisible Polish**: Refined but not flashy
- **Reliability Signal**: Consistent, predictable behavior

## Industry Timing Standards

| Action | Duration | Easing |
|--------|----------|--------|
| Button Feedback | 100ms | ease-out |
| Modal Open | 250ms | ease-out |
| Table Row Update | 200ms | ease-in-out |
| Panel Transition | 300ms | ease-in-out |
| Toast Message | 200ms | ease-out |

## Key Principle
Enterprise users are working, not playing. Animation exists solely to provide feedback, maintain orientation, and signal state changes. Every millisecond of animation must earn its place through utility.

© dylantarre · MIT · dylantarre/animation-principles

Similar skills

Everything for Design →

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