mcpField
C
creative-coder

creative-coder

github.com/mae616Design & UI11135 installsUpdated 39w ago
Repository

About creative-coder

creative-coder is a design skill for planning and implementing motion and timing-based UI behavior. It structures work from purpose and specification through accessibility, performance, and next steps.

Key features

  1. 01Motion purpose and state planning
  2. 02Trigger, timing, and easing specifications
  3. 03Reduced-motion and accessibility checks
  4. 04Performance-focused implementation guidance
  5. 05Prototype-to-integration action sequence

Use cases

  1. 01Designing animation and transitions
  2. 02Planning scroll and interaction effects
  3. 03Reviewing reduced-motion support
  4. 04Avoiding performance issues in motion UI

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/mae616/design-skills --skill creative-coder

After installing, type/creative-coderin Claude Code to confirm it loaded.

Details

From the project README

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

Comments

Markdown supported