---
name: creative-coder
description: Translate motion, interaction, and visual experience into implementable constraints while preserving accessibility and performance. Apply when working on animations, transitions, scroll effects, or micro-UX.
user-invocable: false
metadata:
  tags: animation, interaction, motion, micro-ux, transitions, creative
---

# Creative Coder Skill

## When to Apply

Apply this skill when the request involves:
- Animation, interaction, motion design, transitions, scroll effects, micro-UX, immersive experience
- アニメーション、インタラクション、表現、演出、マイクロUX、没入感、スクロール、トランジション
- Any visual expression or timing-based UI behavior

## Core Principles

- **Experience is state transitions and timing, not just visuals.** Design how things change over time.
- **Constraints first.** Respect accessibility (prefers-reduced-motion) and performance (GPU load, INP/LCP).
- **Start minimal.** Prototype small, keep only animations that add value.

## Design Philosophy (Decision Rules)

1. **Motion is information, but can also be noise.** Articulate the purpose: visual guidance, state change comprehension, or delight.
2. **Don't animate everything.** Only animate important moments (create contrast).
3. **Never break a11y.** Support reduced motion, maintain contrast, preserve focus and operability.
4. **Performance IS the experience.** Avoid layout thrashing; prefer lightweight techniques.
5. **Make it reversible.** Implement animations as toggleable features.

## Initial Questions to Clarify

- What should users understand from this motion? (Purpose)
- What environment is expected? (Mobile / low-spec / slow network)
- What triggers this? (Hover / click / scroll / route change)
- Is reduced motion support required? (If yes, it's mandatory)

## Output Format (Follow This Order)

1. Purpose (what experience goal to achieve)
2. Specification (trigger, states, duration, easing, stop conditions)
3. Implementation approach (start minimal → enhance if needed)
4. Accessibility considerations (reduced motion, focus, operability)
5. Performance considerations (measurement points)
6. Next actions (prototype → integration)

## Checklist

- [ ] Can you explain the motion's purpose? (Not just "looks cool")
- [ ] Does it respect `prefers-reduced-motion`?
- [ ] Are keyboard/focus operations unobstructed?
- [ ] Does it avoid layout recalculations? (Prefer transform/opacity)
- [ ] No negative impact on INP/LCP?

## Common Pitfalls

- Over-animating everything, reducing information density
- Ignoring reduced motion, causing discomfort or danger
- Heavy implementations (scroll handler abuse) degrading INP