# Creative Coder

> 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.

- **Type:** Skill
- **Install:** `agentstack add skill-mae616-design-skills-creative-coder`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [mae616](https://agentstack.voostack.com/s/mae616)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [mae616](https://github.com/mae616)
- **Source:** https://github.com/mae616/design-skills/tree/main/skills/creative-coder

## Install

```sh
agentstack add skill-mae616-design-skills-creative-coder
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [mae616](https://github.com/mae616)
- **Source:** [mae616/design-skills](https://github.com/mae616/design-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-mae616-design-skills-creative-coder
- Seller: https://agentstack.voostack.com/s/mae616
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.