playbooks

home / skills / mae616 / design-skills / creative-coder

creative-coder skill

/skills/creative-coder

This skill translates motion and interaction into implementable, accessible constraints to deliver performant, meaningful UI animations.

npx playbooks add skill mae616/design-skills --skill creative-coder

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
2.7 KB
---
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

Overview

This skill translates motion, interaction, and visual experience into implementable constraints that preserve accessibility and performance. It is focused on animations, transitions, scroll effects, and micro-UX behaviors. Use it to turn creative motion goals into clear, testable specifications and safe implementations.

How this skill works

I inspect the intended user experience, identify the motion's purpose, and produce a concise spec: triggers, states, durations, easings, and stop conditions. I prioritize accessibility (prefers-reduced-motion, keyboard focus) and performance (avoid layout thrashing, favor transform/opacity, measure INP/LCP). The output includes implementation approach, accessibility notes, performance checks, and next actionable steps.

When to use it

  • Designing animations for state changes, onboarding, or contextual guidance
  • Implementing scroll effects, parallax, or route-transition choreography
  • Optimizing micro-interactions for accessibility and low-end devices
  • Prototyping motion to validate information hierarchy and contrast
  • Auditing existing animations that may harm performance or usability

Best practices

  • Define purpose first: what should the user understand from the motion?
  • Start minimal: prototype small and keep only motions that add clear value
  • Always respect prefers-reduced-motion and make motion toggleable
  • Prefer transform and opacity over layout changes to avoid reflows
  • Measure impact on INP and LCP and avoid heavy scroll handlers

Example use cases

  • Specify a card reveal on hover: trigger, entrance/exit states, 180ms duration, easing, reduced-motion alternative
  • Design a route transition: triggered on navigation, crossfade+translate, interruptible, fallback for low-spec devices
  • Create a performant parallax: throttled scroll-driven transform, hardware-accelerated properties only
  • Audit a site’s micro-UX: remove redundant animations, add reduced-motion handling, verify keyboard flows

FAQ

How do you handle reduced-motion requirements?

I treat reduced-motion as mandatory when requested: provide a non-animated alternative, keep motion only for essential state changes, and expose a user toggle.

Which properties are safe for performance?

Prefer transform and opacity for animations. Avoid animating layout-affecting properties (width, top, left) to prevent layout thrash and negative INP/LCP effects.