Frontend Developer
- 354 installs
- 68 repo stars
- Updated December 30, 2025
- dylantarre/animation-principles
frontend-developer is an animation implementation skill that helps frontend engineers apply Disney's 12 principles through performant, accessible CSS and component motion patterns in production UIs.
About
frontend-developer is a dylantarre/animation-principles guide for coding UI motion with performance, accessibility, and maintainable components. It translates Disney's 12 principles—such as squash and stretch via transform scale, anticipation states before actions, and elastic feedback—into practical web and mobile patterns. Developers reach for frontend-developer when implementing animations in code, building UI transitions, or needing concrete guidance instead of abstract design theory. The skill triggers on animation implementation tasks and favors transform-based motion over layout-thrashing properties for production applications.
- Component motion patterns
- Performance guardrails
- Accessible animations
- Reduced-motion support
- Implementation checklists
Frontend Developer by the numbers
- 354 all-time installs (skills.sh)
- Ranked #697 of 2,245 Frontend Development skills by installs in the Skillselion catalog
- Data as of Aug 3, 2026 (Skillselion catalog sync)
npx skills add https://github.com/dylantarre/animation-principles --skill frontend-developerAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 354 |
|---|---|
| repo stars | ★ 68 |
| Last updated | December 30, 2025 |
| Repository | dylantarre/animation-principles ↗ |
How do you implement performant UI animations in code?
Help frontend engineers implement animation systems with performance, accessibility, and maintainable component patterns in production UIs.
Who is it for?
Frontend engineers implementing web or mobile UI transitions who need principle-driven, maintainable animation code.
Skip if: Motion design in After Effects only, backend services, or projects banning UI motion for accessibility policy reasons.
When should I use this skill?
A developer implements animations in code, builds UI transitions, or needs practical animation guidance for web or mobile apps.
What you get
Production-ready animation patterns with transform-based motion, anticipation states, and accessible transition components.
- Animation component patterns
- Transform-based transition CSS
By the numbers
- Applies Disney's 12 animation principles to code implementation
Files
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-motionmedia query for accessibility - Batch DOM reads/writes to prevent layout thrashing
- Profile animations in DevTools Performance tab
- Consider animation libraries for complex sequences
Related skills
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6kVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4kImage To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4kFAQ
What principles does frontend-developer cover?
frontend-developer covers Disney's 12 animation principles applied in code, including squash and stretch with transform scale, anticipation before actions, and performant transition patterns for web and mobile UIs.
When should frontend-developer be used?
frontend-developer should be used when implementing animations in code, building UI transitions, or when a developer needs practical motion guidance with performance and accessibility constraints.