К основному содержанию
скилл CX Codex

enterprise-b2b — скилл для Claude Code: что делает и как установить

Скилл задаёт правила анимации для B2B-интерфейсов и панелей управления. Помогает выстроить переходы и тайминги без лишней декоративности.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add dylantarre/animation-principles --skill enterprise-b2b -a claude-code
Открыть на GitHub

Что делает enterprise-b2b

Скилл адаптирует классические принципы анимации под B2B-сервисы и панели мониторинга. Движение интерфейса призвано подтверждать действия и показывать смену состояний. Пользователи пришли работать, поэтому время на анимацию сведено к минимуму.

Спецификация задаёт чёткие стандарты длительности. Отклик кнопки занимает 100ms с кривой ease-out, а раскрытие панелей длится 300ms с ease-in-out. Большинство рядовых переходов укладывается в интервал от 150ms до 250ms. Медленные эффекты здесь запрещены.

Любое преувеличение исключено, кроме редких критических предупреждений. Когда интерфейс обновляет строку в таблице данных, скилл предписывает сначала подсветить строку, а затем обновить данные за 200ms.

Какие задачи решает

  • настроить тайминги и кривые сглаживания для кнопок и модальных окон
  • упорядочить анимацию загрузки данных при обновлении таблиц
  • устранить декоративные искажения в элементах интерфейса
  • выстроить последовательные шаги в визардах и генераторах отчётов

Примеры запросов агенту

  • Подбери тайминги и кривую сглаживания для раскрытия боковой панели в админке
  • Опиши анимацию обновления строк таблицы по принципам enterprise-b2b
  • Как настроить появление модального окна в B2B-сервисе?

Как установить enterprise-b2b

1Через Skills CLI (Vercel)

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

2Вручную: положить файлы

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

Папка скилла целиком; для одного проекта — .claude/skills/enterprise-b2b/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о enterprise-b2b

Как установить enterprise-b2b в Claude Code?

Выполните команду npx skills add dylantarre/animation-principles --skill enterprise-b2b -a claude-code в терминале.

Для каких интерфейсов подходит скилл enterprise-b2b?

Он рассчитан на корпоративное ПО, B2B-платформы, панели администратора и рабочие панели мониторинга, где важна скорость работы.

Какие тайминги рекомендуются для стандартных действий?

Отклик на нажатие кнопки занимает 100ms с кривой ease-out, обновление строки таблицы длится 200ms, а открытие модального окна — 250ms.

Исходный текст

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

Похожие скиллы

Всё по теме «Дизайн» →
operational-enterprise-ai MengTo Скилл для вёрстки и переделки страниц enterprise-продуктов: границы системы, согласования, аудит, исключения и откат. CX Codex +1 1 300установок enterprise-sales-motion RefoundAI Скилл разбирает переход от продаж руками основателя к повторяемому enterprise-процессу: квалификация сделок, закупочные циклы, требования к governance. CX Codex +1 394установок event-b2b-matchmaking Samuel Berthe Проектирует программу встреч 1:1 для конференций: форматы мэтчинга, сетку слотов, квоты спонсоров и риски неявок. Помогает понять, нужны ли такие встречи вообще. CX Codex +1 4 900установок commerce-b2b-store-create forcedotcom Ведёт по шагам к созданию B2B-магазина Commerce в Salesforce и выгружает метаданные витрины в репозиторий. Пригодится, когда нужно развернуть витрину из уже готового магазина. CX Codex +1 4 700установок building-b2b celigo Помогает агенту собирать B2B/EDI-интеграции в Celigo B2B Manager: онбординг партнёров, профили, файловые определения, мониторинг обмена. CX Codex +1 2 900установок b2b-brand-marketing arnabbagxd Скилл разворачивает бренд-маркетинг для компаний, которые продают другим компаниям: позиционирование, работа с закупочным комитетом, доверие и LinkedIn. CX Codex +1 1 600установок

Из того же набора142

anticipation-payoff Скилл учит ИИ-агента выстраивать фазы подготовки и отдачи в анимации. Пригодится при проектировании динамичных сцен, гэгов и акцентных движений в интерфейсе или играх. CX Codex +1 519установок performance-optimization Помогает находить и устранять просадки FPS и рывки в анимациях интерфейса по принципам Диснея. CX Codex +1 516установок react-spring Скилл показывает, как собрать все 12 принципов анимации Disney на физике пружин React Spring — с готовыми примерами под каждый принцип. CX Codex +1 516установок anticipation-mastery Скилл объясняет принцип anticipation и подсказывает агенту, где добавить подготовительное движение, чтобы анимация не выглядела резкой. CX Codex +1 516установок follow-through-overlapping Скилл учит агента принципам инерции и смещения фаз в анимации. Пригодится при вёрстке интерфейсных переходов, раскадровке персонажей и кинетической типографике. CX Codex +1 514установок cards-containers Набор правил анимации карточек, плиток и контейнеров по 12 принципам Диснея. Помогает настроить физику перетаскивания, подъём при наведении и раскрытие списков. CX Codex +1 513установок universal-emotion Скилл переводит заданную эмоцию в параметры анимации: тайминги, изинг, деформацию. Пригодится, когда нужно, чтобы интерфейс ощущался спокойным, резким или игривым. CX Codex +1 511установок timing-principle-mastery Скилл обучает ассистента подбирать точную длительность и ритм анимаций в интерфейсах или играх. Помогает настроить переходы, когда движение кажется слишком резким или затянутым. CX Codex +1 510установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой