creative-web

---
name: creative-web
description: Builds, redesigns and audits websites with three.js scenes and GSAP motion that look designed, not generated. Deals a design world so consecutive sites differ, plans the page, builds the hero first, lints motion and WebGL, and sends the result to fresh-context reviewers. Use when the user asks for a new landing page, product site, portfolio or marketing page with 3D or scroll animation, says creative-web, or runs /creative-web build, deal, redesign, audit, hero, scene, motion or review. Do not use for backend work, data dashboards without a marketing surface, or small edits to an existing design unless the user names creative-web.
license: MIT
compatibility: Node 18+ for the scripts. Works in Claude Code, Codex, Cursor, OpenCode, Gemini CLI and Copilot. Pages need three and gsap (with @gsap/react for React). Browser checks need Playwright and Chrome.
argument-hint: "<prompt> | deal <prompt> | custom <prompt> | redesign <path> | audit <path> | hero <path> | scene <path> | motion <path> | review <path>"
metadata:
  author: afkanozdemir
  version: 1.0.1
  suite: creative-web
---

# creative-web

A web page with a 3D scene and scroll motion is the easiest thing for a model to make look generic:
a star field, a spinning blob, everything fading up 20px. creative-web holds a Floor the build never
goes under, deals a design world so two sites in a row do not converge, ties every scene to a
metaphor the copy explains, and gets the last word from reviewers who never saw the build.

Sibling skills, loaded when their step comes: `creative-web-worlds` (20 design worlds),
`creative-web-pages` (page anatomy and section layouts), `creative-web-webgl` (14 scene recipes and a
test harness), `creative-web-motion` (34 GSAP patterns), `creative-web-widgets` (48 animated product
widgets), `creative-web-app` (signed-in screens), `creative-web-qa` (screenshots, axe, console).
`<dir>` below is this skill's folder; siblings sit next to it.

## Critical

The Floor. It binds every output and is never waived. Rule ids match `scripts/motionlint.mjs`.

1. Every colour and font comes from a token in one `:root` block, taken from the dealt world.
2. Animate only transform, opacity, clip-path and filter. Never `transition: all` (CW01, CW35).
3. Every animation has a reduced-motion path that shows the final state (CW02). Content is
   readable with JavaScript off.
4. Every WebGL scene caps the pixel ratio (CW04), pauses off-screen (CW21), disposes everything on
   unmount (CW03), loads client-only, and has a static fallback.
5. Every ScrollTrigger lives in `useGSAP()` or `gsap.context()` and is reverted (CW05). No
   `markers: true` (CW06).
6. No purple-to-blue gradient (CW07), no star field or sparkles (CW22), no object spinning by
   itself as the hero (CW32), no frosted glass over a blob unless the world is about glass.
7. No invented metric, quote, logo or customer (CW34). No placeholder copy (CW08). A fact not
   given is absent; a picture not given is a visibly empty slot.
8. Focus is always visible (CW09). Text keeps WCAG AA contrast at rest, including over a scene at
   every progress value.
9. No horizontal scroll at any width from 320 to 1920 (`overflow-x: clip`, never `100vw` widths).
10. The hero's headline, one sentence and primary action are visible without scrolling at
    1280 × 800 and 390 × 844.
11. One world per page and one signature move; every screen has a set-piece, never two competing
    in one viewport. The default intensity is **showcase**: three or more WebGL moments and five or
    more GSAP set-pieces ([`references/spectacle.md`](references/spectacle.md)). A 3D hero followed by
    a static page is a failure. The scene's metaphor fits
    in one sentence and the copy beside it explains each scroll stop.
12. Before handoff run `node <dir>/scripts/motionlint.mjs <changed paths>`. Fix every FAIL; fix
    or waive (with a reason) every REFLEX.

Details and examples for each rule: [`references/floor.md`](references/floor.md). The catalogue
of generated-page tells for motion and 3D: [`references/tells.md`](references/tells.md).

## Workflow

0. **Pre-flight.** Read before asking: `DESIGN.md` / `PRODUCT.md` (a locked system wins over any
   world), `package.json` (framework, three, gsap, @gsap/react, @react-three/fiber, Tailwind),
   existing tokens and fonts, `.creative-web/log.json`. Output one short block: what is preserved,
   what is introduced. Format in [`references/flow.md`](references/flow.md) § Pre-flight.
1. **Ask once.** One message: material (screenshots, photos, real numbers, quotes with names),
   audience, the one job the page drives, tone as an extreme. If the prompt answers them or the
   user says go ahead, infer and state the inferences in one line. Never ask twice.
2. **Deal.** `node <dir>/scripts/deal.mjs deal --prompt "<brief>"` returns three contrasting
   worlds clear of the last six builds. Offer them in three lines; on go ahead take the first.
   `custom` skips the catalogue: design from the prompt under the Floor alone.
3. **Read one world.** Open exactly one file from `creative-web-worlds/references/worlds/`. Then
   `node <dir>/scripts/deal.mjs draw --world <slug> --job "<job>" --intensity showcase` deals the hero
   posture, the scenes, the intro, the set-pieces, nav, footer, sections and two reflexes to leave
   out. Use `--intensity calm` only when the user asks for calm or the page is for reading.
4. **Picks block, once.** Intensity, world, scenes and their metaphor sentence, hero posture, signature move,
   moment, sections, leave-outs, nav, footer, and every swap from the draw with its reason.
5. **Hero first.** Build only the hero with its scene (`creative-web-webgl`, colours fed from the
   world's tokens) and its motion (`creative-web-motion`). Render it at 1280 × 800 and 390 × 844,
   then send the screenshots to the `creative-web-slop-critic` reviewer. Fix before going on.
6. **The page.** Lay out the rest with `creative-web-pages`, product moments with
   `creative-web-widgets`. Keep every section inside the world's grammar.
7. **Sweep.** `motionlint` on the changed paths; `creative-web-qa` stage screenshots, axe in both
   motion modes, console clean. Then the four reviewers in parallel with fresh context
   (slop, motion, scene, world): [`references/review.md`](references/review.md). Fix every
   ship-blocker; fix or waive reflexes.
8. **Log and hand off.** `node <dir>/scripts/deal.mjs log --world <slug> --scene <recipe>
   --hero "<posture>" --moment "<pattern>" --page <path>`. Hand off with the picks, what each
   reviewer said and what changed, and the material still missing.

**Commands.** `deal <prompt>` runs steps 0 to 4 only. `hero <path>` rebuilds just the hero.
`scene <path>` adds or replaces one scene in an existing page. `motion <path>` adds a motion pass
to a static page in its own system. `review <path>` runs step 7 only. `redesign <path>` and
`audit <path>` follow [`references/redesign.md`](references/redesign.md): never start on an
existing design unless the user names creative-web.

## Examples

**"Build a landing page for a ceramics studio's online shop."**
Pre-flight finds Next.js, Tailwind, no three. Ask once; the user says go ahead. Deal returns
kiln, maison, primary. Kiln is read; draw gives `scene: blob` as a glazed vessel turning under
scroll, hero `split: copy on one side, scene in a framed plate`, moment `13 Flip grid ↔ list` for
the catalogue, leave out `logo strip` and `stats row`. Hero built and reviewed, page built,
motionlint clean, reviewers' two ship-blockers fixed, build logged.

**"/creative-web deal a developer tool for tracing network requests"**
Returns three worlds (for example drafting, telemetry, phosphor) with one line each and stops.

**"/creative-web audit ./src/app/page.tsx"**
Runs motionlint, stage screenshots and the four reviewers, and reports. Changes nothing.

## Troubleshooting

- **deal.mjs says no worlds folder.** Only the `creative-web` skill was installed. Install the
  whole suite (`npx creative-web-skills install` or `npx skills add afkanozdemir/creative-web-skills`) or set
  `CREATIVE_WEB_WORLDS` to a `creative-web-worlds/references` folder.
- **Every deal returns the same three.** The log is missing or not written; run step 8, or pass
  `--log` to a shared path. `--seed` changes the tie-breaks.
- **motionlint flags something correct.** Waive it where it lives with
  `creative-web-disable-next-line CW23` plus a reason, or in `.creative-web/waivers.json` for a path.
- **No subagents in this harness.** Run each reviewer file in `<dir>/agents/` as a checklist in a clean
  pass over screenshots and source only, and say in the handoff that the review was not isolated.
- **The scene is slow on phones.** Lower the recipe's density opts, drop post-processing, cap dpr
  at 1.5 under 768px, or render a still frame on mobile. See `creative-web-webgl` § Troubleshooting.
- **The user's project has a design system.** Map it onto the world schema and use it as the
  world. Never restyle a shipped system as a side effect.

• SKILL.md 9 KB
• agents/creative-web-motion-critic.md 2 KB
• agents/creative-web-scene-critic.md 2 KB
• agents/creative-web-slop-critic.md 2 KB
• agents/creative-web-world-critic.md 1 KB
• agents/openai.yaml 1 KB
• references/floor.md 4 KB
• references/flow.md 2 KB
• references/redesign.md 1 KB
• references/review.md 1 KB
• references/spectacle.md 4 KB
• references/tells.md 3 KB
• scripts/deal.mjs 14 KB
• scripts/lint-hook.mjs 1 KB
• scripts/motionlint.mjs 15 KB
• scripts/lib/worlds.mjs 4 KB