Performance Optimization

When your animations are janky or dropping frames, this walks you through diagnosing the bottleneck and fixing it. It maps common performance issues to Disney's 12 animation principles, which is an interesting lens but really it's about the practical stuff: switching from expensive properties like top and left to transform and opacity, staggering animations to reduce concurrent load, and using Intersection Observer to pause offscreen work. The troubleshooting checklist is solid, covering DevTools profiling and device testing. Best for when you've got smooth animations on your dev machine but they stutter on actual devices or lower-end hardware.

Install to Claude Code

npx -y skills add dylantarre/animation-principles --skill performance-optimization --agent claude-code