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.
npx skills add dylantarre/animation-principles --skill enterprise-b2b -a claude-codeWhat 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-code2Manually: put the files in place
~/.claude/skills/enterprise-b2b/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/enterprise-b2b/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill enterprise-b2b -a codex2Manually: put the files in place
.agents/skills/enterprise-b2b/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill enterprise-b2b -a cursor2Manually: put the files in place
.cursor/skills/enterprise-b2b/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install dylantarre/animation-principles enterprise-b2b2Manually: put the files in place
.github/skills/enterprise-b2b/SKILL.md1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill enterprise-b2b -a gemini-cli2Platform CLI
gemini skills install https://github.com/dylantarre/animation-principles --path skills/08-by-industry/enterprise-b2bManually: put the files in place
.devin/skills/enterprise-b2b/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill enterprise-b2b -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
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