frontend-developer · dylantarre — Claude Code skill: what it does, how to install
Translates Disney's 12 animation principles into code for UI transitions and micro-interactions. Helpful when building accessible, performant web animations.
npx skills add dylantarre/animation-principles --skill frontend-developer -a claude-codeWhat frontend-developer does
This skill guides the agent in writing maintainable animations based on 12 classic principles adapted for code. It provides concrete rules for visual states: squash and stretch using transform: scale(), anticipation delays before navigation, or subtle secondary movements. Precise intervals govern UI pacing: 100-150ms for hover states, 200-300ms for element feedback, and 400-600ms for full-page transitions.
Performance is strictly enforced through GPU-accelerated styling. The rules forbid animating layout triggers like width, height, or margin, requiring transform and opacity to preserve 60fps on low-powered devices. Simple transitions use CSS, while complex sequences rely on JavaScript libraries like GSAP or Framer Motion.
Layout thrashing is prevented by batching DOM reads and writes. Accessible interactions remain mandatory, requiring the prefers-reduced-motion query on motion setups.
What it helps with
- implement button press squash and stretch with transform: scale()
- sequence staggered card entries using transition-delay
- configure cubic-bezier timing curves for snappy hover states
- add prefers-reduced-motion media queries for accessibility
Example prompts for the agent
- Build an interactive card hover effect with subtle scale bounce and shadow shift
- Create a page transition that staggers header and body content using CSS variables
- Implement an accessible modal dialog with backdrop blur and reduced motion fallbacks
How to install frontend-developer
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill frontend-developer -a claude-code2Manually: put the files in place
~/.claude/skills/frontend-developer/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/frontend-developer/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill frontend-developer -a codex2Manually: put the files in place
.agents/skills/frontend-developer/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill frontend-developer -a cursor2Manually: put the files in place
.cursor/skills/frontend-developer/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install dylantarre/animation-principles frontend-developer2Manually: put the files in place
.github/skills/frontend-developer/SKILL.md1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill frontend-developer -a gemini-cli2Platform CLI
gemini skills install https://github.com/dylantarre/animation-principles --path skills/03-by-role-persona/frontend-developerManually: put the files in place
.devin/skills/frontend-developer/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill frontend-developer -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 frontend-developer
How do I install frontend-developer in Claude Code?
Run npx skills add dylantarre/animation-principles --skill frontend-developer -a claude-code. The skill file will be placed in ~/.claude/skills/frontend-developer/SKILL.md.
What does frontend-developer do?
It instructs your coding assistant to apply 12 animation principles to UI elements. The agent chooses appropriate timing ranges, spring physics, and easing curves for transitions.
Which CSS properties does the skill allow for 60fps animations?
It restricts animations to GPU-accelerated properties: transform and opacity. Animating width, height, or margin is prohibited to prevent layout thrashing.
Source text
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
Similar skills
Everything for Frontend and UI →frontend-developer by other authors comes first.
