frontend-developer

Savant verdict: Pending analysis

Imported from the source hub; Savant's analysis is still running.

Live evaluation

Not evaluated yet. Workspaces can request a live evaluation.

Security assessment

Scan pending.

Structure

• No license declaredConfirm you may reuse this skill before importing it into your repository.

SKILL.md

---
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