Frontend Developer

What it does

This skill enables AI agents to generate clean, responsive HTML, CSS, and JavaScript code focused on implementing performant and maintainable animations. It leverages Disney's 12 principles of animation to guide the coding process, ensuring visually appealing and engaging user experiences. The skill provides guidance for both simple state changes using CSS transitions and more complex sequences utilizing JavaScript animation libraries like GSAP or Framer Motion.

When to use it

• You need to implement a button that compresses on press and stretches during movement.
• You want to create a card that lifts before expanding, with a preparation state beforehand.
• You're building a modal window and need to dim the background to focus attention on the content.
• You require complex animation sequences beyond what CSS transitions can easily provide.

Key capabilities

• Implementation of Disney’s 12 principles of animation through code (Squash & Stretch, Anticipation, Staging, etc.).
• Guidance on using transform: scale() for impact and elastic feedback.
• Recommendations for utilizing transition-delay to sequence movements.
• Advice on choosing between CSS @keyframes and JavaScript libraries (GSAP, Framer Motion) based on animation complexity.
• Best practices for performance optimization, including the use of will-change and avoiding animating properties like width, height, or margin.

Example prompts

• "Create a button that compresses when pressed using CSS scale transformations."
• "Generate code to make a card lift before expanding, with a brief anticipation phase."
• "Implement a modal window animation where the background dims and focuses on the content."

Tips & gotchas

• Prioritize CSS transitions for simple state changes.
• Always consider accessibility by using the prefers-reduced-motion media query.
• Batch DOM reads/writes to prevent layout thrashing and optimize performance.