frontend-developer · dylantarre — скилл для Claude Code
Скилл помогает реализовать интерфейсные анимации и переходы по 12 классическим принципам в веб- и мобильных приложениях. Пригодится при настройке микроанимаций кнопок и карточек.
npx skills add dylantarre/animation-principles --skill frontend-developer -a claude-codeЧто делает frontend-developer
Скилл задаёт агенту правила вёрстки плавных интерфейсов на основе 12 принципов анимации Диснея. Он раскладывает принципы на практические приёмы: сжатие и растяжение через transform: scale(), упреждение перед переходами или акцент на активных элементах через z-index и размытие. Для длительности переходов установлены чёткие рамки: 100–150 мс для ховеров, 200–300 мс для обратной связи и 400–600 мс для смены страниц.
Инструкции требуют анимировать только аппаратные свойства: transform и opacity. Изменение width, height или margin запрещено, чтобы исключить перерасчёт геометрии на слабых устройствах. Простые переходы описываются на чистом CSS, а сложные траектории скилл рекомендует отдавать библиотекам вроде GSAP или Framer Motion.
Для доступности в чеклист заложена обязательная поддержка правила prefers-reduced-motion и ARIA-атрибутов. Без профилирования во вкладке Performance в DevTools агент считает работу незавершённой.
Какие задачи решает
- подобрать тайминги и кривые Безье для микроанимаций
- настроить сжатие кнопок при нажатии через transform: scale()
- добавить каскадное появление списков с задержкой transition-delay
- отключить движение через медиа-запрос prefers-reduced-motion
Примеры запросов агенту
- Сделай кнопку с эффектом сжатия при нажатии и отскоком через CSS
- Настрой появление элементов карточки каскадом с задержкой через transition-delay
- Добавь модальное окно с затемнением фона и поддержкой prefers-reduced-motion
Как установить frontend-developer
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill frontend-developer -a claude-code2Вручную: положить файлы
~/.claude/skills/frontend-developer/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/frontend-developer/
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill frontend-developer -a codex2Вручную: положить файлы
.agents/skills/frontend-developer/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill frontend-developer -a cursor2Вручную: положить файлы
.cursor/skills/frontend-developer/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install dylantarre/animation-principles frontend-developer2Вручную: положить файлы
.github/skills/frontend-developer/SKILL.md1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill frontend-developer -a gemini-cli2Командой платформы
gemini skills install https://github.com/dylantarre/animation-principles --path skills/03-by-role-persona/frontend-developerВручную: положить файлы
.devin/skills/frontend-developer/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill frontend-developer -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о frontend-developer
Как установить frontend-developer в Claude Code?
Выполните команду npx skills add dylantarre/animation-principles --skill frontend-developer -a claude-code. Файл навыка сохранится по пути ~/.claude/skills/frontend-developer/SKILL.md.
Что делает скилл frontend-developer?
Он переводит классические принципы анимации в код фронтенда. Ассистент начинает применять проверенные тайминги, пружинную физику и кривые сглаживания вместо стандартных линейных переходов.
Какие свойства скилл запрещает анимировать?
Правила исключают анимацию width, height и margin, поскольку они вызывают перерисовку макета. Для 60 кадров в секунду разрешено анимировать только transform и opacity.
Исходный текст
SKILL.md · MIT
--- name: frontend-developer description: Use when implementing animations in code, building UI transitions, or when a developer needs practical animation guidance for web/mobile applications. --- # Frontend Developer: Animation Implementation Guide You are a frontend developer focused on implementing performant, maintainable animations. Apply Disney's 12 principles through code. ## The 12 Principles for Code Implementation ### 1. Squash and Stretch Use `transform: scale()` to convey impact. Buttons compress on press, elements stretch during fast movement. Animate scale properties for elastic feedback. ### 2. Anticipation Add preparation states before actions. Buttons pull back before navigation, cards lift before expanding. Use `transition-delay` to sequence setup movements. ### 3. Staging Control `z-index`, opacity, and blur to direct focus. Dim backgrounds during modals, spotlight active elements. Use `focus-visible` and ARIA for accessibility. ### 4. Straight Ahead vs Pose to Pose Straight ahead: CSS `@keyframes` for organic movement. Pose to pose: JavaScript animation libraries (GSAP, Framer Motion) for precise control between states. ### 5. Follow Through and Overlapping Action Stagger child animations with `transition-delay`. Headers arrive before body content, icons follow buttons. Use `will-change` sparingly for performance. ### 6. Slow In and Slow Out Replace `linear` timing with `ease-in-out`, `cubic-bezier()` curves. Quick starts feel snappy, gradual stops feel natural. Match easing to action type. ### 7. Arc Use `motion-path` or transform sequences for curved movement. Avoid purely horizontal/vertical transitions. Bezier curves in JavaScript for complex paths. ### 8. Secondary Action Layer subtle animations: shadows shift during hover, gradients pulse during loading, micro-movements during idle. Don't distract from primary action. ### 9. Timing Standard: 200-300ms for UI feedback. Fast: 100-150ms for hover states. Slow: 400-600ms for page transitions. Use CSS custom properties for consistent timing. ### 10. Exaggeration Scale transforms 10-20% beyond target, then settle. Overshoot animations feel energetic. Use spring physics in JavaScript libraries for bounce effects. ### 11. Solid Drawing Maintain consistent transform origins. Respect element boundaries during animation. Use `transform-box` and `transform-origin` for predictable behavior. ### 12. Appeal Smooth 60fps animations using GPU-accelerated properties (`transform`, `opacity`). Avoid animating `width`, `height`, `margin`. Test on low-powered devices. ## Implementation Checklist - Prefer CSS transitions for simple state changes - Use `prefers-reduced-motion` media query for accessibility - Batch DOM reads/writes to prevent layout thrashing - Profile animations in DevTools Performance tab - Consider animation libraries for complex sequences
© dylantarre · MIT · dylantarre/animation-principles
Похожие скиллы
Все скиллы по теме «Фронтенд и UI» →Сначала — frontend-developer от других авторов.
