enterprise-b2b — скилл для Claude Code: что делает и как установить
Скилл задаёт правила анимации для B2B-интерфейсов и панелей управления. Помогает выстроить переходы и тайминги без лишней декоративности.
npx skills add dylantarre/animation-principles --skill enterprise-b2b -a claude-codeЧто делает 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-code2Вручную: положить файлы
~/.claude/skills/enterprise-b2b/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/enterprise-b2b/
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill enterprise-b2b -a codex2Вручную: положить файлы
.agents/skills/enterprise-b2b/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill enterprise-b2b -a cursor2Вручную: положить файлы
.cursor/skills/enterprise-b2b/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install dylantarre/animation-principles enterprise-b2b2Вручную: положить файлы
.github/skills/enterprise-b2b/SKILL.md1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill enterprise-b2b -a gemini-cli2Командой платформы
gemini skills install https://github.com/dylantarre/animation-principles --path skills/08-by-industry/enterprise-b2bВручную: положить файлы
.devin/skills/enterprise-b2b/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill enterprise-b2b -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в 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