/fd-animate

Trigger the frontend-design skill in animate mode.

Use this command when you want to:

• Add purposeful motion to static interactions
• Create entrance and exit animations for UI elements
• Improve hover states and loading transitions
• Ensure reduced-motion support for accessibility

How to Use

/fd-animate

Examples:

• /fd-animate on a card grid that appears without any transition
• /fd-animate on a modal that pops in abruptly with no entrance animation

What Happens

1. The frontend-design skill activates in animate mode
2. The motion-design reference is loaded for animation best practices
3. Entrance and exit animations are added with proper easing curves
4. Hover states and interactive feedback are implemented
5. Loading transitions and skeleton states are added where needed
6. prefers-reduced-motion support is included for all animations
7. Changes are applied and verified

Output

Purposeful, accessible motion added throughout the UI with proper easing, timing, and reduced-motion fallbacks.

Skill Reference

See skills/frontend-design/SKILL.md for the full protocol.