# Coollanding

> Compose, redesign, polish, audit, and optimize distinctive brand-specific landing pages by diagnosing the brief, selecting one of 9 lead style worlds, optionally attaching one research-backed motion/WebGL technique pack, and mixing 2-4 interaction mechanics. Use for new or existing immersive/WebGL/3D, multi-world, data-driven scroll, shader-tool, data-monument, luxury, editorial, craft, kinetic, papercraft, or spatial pages; also trigger for contrast/readability collisions, scroll smoothness, motion quality, asset fidelity, and pixel-level reference parity. Chinese triggers include 前端重构、深度优化、视觉审计、WebGL 动效、滚动性能、文字可读性、素材质量 and 像素级复刻. The workflow requires an auditable world decision and brand-owned combination instead of defaulting to cinematic-dark.

- Skill: `veithly/coollanding` (Agent Skill, multi-file: 20 files)
- Install (CLI): `npx skillmds@latest add veithly/coollanding`
- Raw SKILL.md: https://api.skillmd.com/api/skills/veithly/coollanding/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Security
- Author: veithly (https://skillmd.com/u/veithly)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/veithly/coollanding

---


# CoolLanding

## Premise

This skill does not define one look. It prevents catalog order and past demos
from becoming a default by requiring the agent to:

1. Diagnose the brand, audience, and emotional target.
2. Select one **Style World** from `references/style-worlds.md` using the diagnosed brief and `scripts/select_world.py`.
3. Optionally attach one **Technique Pack** from `references/motion-lab.md` §13 (living archive, elastic media, physical playground, data monument, visual instrument, rule decomposition, or retro signal).
4. Compose 2–4 **Mechanics** from `references/mechanics-library.md` that *fit* that world (not the same combo used last time).
5. Invent one **Signature Mechanic** that nobody else has — the one thing this brand owns.
6. Verify the result is unique, readable, and on-brand.

The output is never "the CoolLanding style". The output is a page only that brand could ship.

When the request targets an existing page, enter **redesign mode**: inspect the
current route and user-visible contract first, preserve substantive content and
brand facts unless a change is requested, and turn each reported defect (for
example contrast collision, unexplained geometry, janky scroll, or weak asset
silhouette) into an acceptance check. Measure the current motion/rendering path
before changing it, then re-run the same checks after the edit.

> Start with `references/world-selection.md`, then read the committed world's chapter in `references/style-worlds.md` and the matching mechanics in `references/mechanics-library.md`. For `medium`/`low` confidence, read both top candidate chapters before committing; for `high` confidence, read the selected chapter before implementation. Read `references/composition-strategy.md` and `references/anti-template-rules.md` before shipping. Read `references/motion-lab.md` when the brief involves WebGL media, kinetic type, physics, page transitions, data portraits, shader tools, decomposition, or retro post-FX. When the user asks for reference-grade parity or "as close as possible" animation, also read `references/kinetic-parity.md` (the entrance + pointer + scroll + local-state + renderer proof ladder). When you generate illustrations, also read `references/asset-isolation.md` and the `$imagegen` skill instructions. Use `scripts/asset_prompt.py` for world-specific prompt direction, the imagegen skill's installed chroma-key helper for generated transparent assets, and `scripts/preview_cutouts.py` for halo review. Reserve `scripts/chroma_cut.py` for supplied/pre-existing chroma sources or explicitly adopted project-local tuning. When you build a WebGL/3D/particle hero, read `references/webgl-animation.md` (the GPU-particle + bloom + smooth-scroll recipe distilled from the reference sites' shipped code). When researching new references or assets, read `references/reference-sites.md` and `references/inspiration-sources.md`, then use `scripts/site_motion_probe.py`.

## Workflow

### 1. Ground the brief

- Read local repo instructions, `AGENTS.md`, `README.md`, nearby docs.
- Inspect current stack, file structure, existing UI patterns.
- If the user provides reference sites, capture real screenshots or DOM/style signals before designing.
- If external libraries are needed, verify current official docs.

### 1.5 Harvest the reference websites before designing

When the user asks for reference-grade parity, do **not** design from memory. Build an evidence folder first.

- Start with `scripts/site_motion_probe.py`. Run
  `python3 scripts/site_motion_probe.py <urls> --screenshots --out <evidence-dir>`;
  it records response hashes, technique signatures, shader uniform names,
  runtime library/canvas facts, DOM/CSS signals, and initial/after-scroll
  screenshots **without storing source bodies**.
- Scan for rendering and choreography signals: `THREE`, OGL, WebGPU/TSL, `WebGLRenderTarget`, bloom/postprocessing, curl/noise/raymarch, DataTextures/FBO, instancing, GLTF/Draco, Lenis, GSAP/Flip/ScrollTrigger, Barba/View Transitions, Matter, Howler/Web Audio, Rive/Lottie, clip/mask/blend/filter, and native scroll timelines.
- If line-level diagnosis of a publicly shipped bundle is genuinely required, keep that capture inside a private evidence workspace and extract only transferable algorithms/state names into the skill. Never vendor a reference site's source into the target project or this skill.
- Probe behavior, not just files: screenshot at load, after pointer movement, after 5s, and after scroll. Record whether motion changes, scroll changes, canvas count, video count, fixed layers, font stack, and dominant layout grammar.
- Classify every result as `runtime-verified`, `DOM-verified`, `visual-only`, or `unavailable`. If a site blocks or serves no public assets, mark it `visual-only`; do not invent a tech stack.
- Convert evidence into a mechanism inventory: hero anchor object, renderer, scroll clock, post-FX, typography scale, cursor behavior, asset strategy, and mobile fallback.
- Use the inventory as source material only. Do not copy proprietary markup, minified code, branded copy, product objects, or trademarked visual signatures.

The implementation target is **90% perceived effect parity**, not code parity. Judge against:

- first-viewport impact and single anchor object,
- actual render layer parity (WebGL/canvas/DOM/SVG as appropriate),
- scroll and pointer cause/effect,
- typography scale and crop behavior,
- material/texture quality,
- entrance ritual,
- mobile fallback,
- console cleanliness and nonblank canvas checks.

### 2. Diagnose the brand

Answer these out loud before touching code; ask the user once when a required
field is unclear instead of guessing:

- **Product category**: physical product, SaaS, event, portfolio, real estate, agency, service, manifesto, etc.
- **Brand archetype**: heritage / challenger / playful / operational / luxury / artisan / system / studio.
- **Audience temperature**: cold/skeptical, warm/curious, hot/converted, technical, mainstream.
- **Emotion target**: awe, intrigue, joy, exclusivity, trust, energy, calm, momentum.
- **One-sentence promise**: what the first viewport must communicate before the user scrolls.
- **Performance ceiling**: heavy WebGL OK, or must stay lean?
- **Reference vibe**: which 1–2 worlds from the catalog feel closest? (Do not pick more than 2.)
- **Technique pack**: does the brand benefit from one legible transformation system, or is the lead world already enough?

### 2.5 Select the Style World from evidence

- Run `python3 scripts/select_world.py` with the diagnosed product, audience,
  emotion, promise, and constraints. Keep its JSON ranking beside the
  composition brief. The helper is a deterministic lexical aid, not an oracle.
- Use `--require-high-confidence` in an automated build or handoff gate. It
  fails closed when the brief has only one signal category or the top two
  worlds are too close; interactive work may omit it only while recording the
  required human review.
- Never choose a world because it is listed first, because it was used in the
  demo, or because it is the easiest renderer. A blank or signal-free brief
  must stop for clarification; a `medium` or `low` result must be reviewed
  against the top two world chapters.
- Pass `--recent-world` or `--avoid-world` when prior outputs are available.
  Use `--world` only for an explicit user/brand override; the helper requires
  `--override-reason` so the decision cannot lose its audit trail.
- Write an `ANCHOR` sentence before generating assets: name the concrete subject,
  its placement, and the brief job it performs. Use the selected world's asset
  strategy and `scripts/asset_prompt.py`; never inherit the first world's object
  or a generic center ring. See `references/world-selection.md` for the gate.
- Keep the selection packet together: `world`, `confidence`, `evidence`,
  `review_reasons`, top two candidates, `ANCHOR`, asset mode, semantic parts,
  and mobile fallback. Do not start image generation before this packet exists.
  When using `scripts/asset_prompt.py`, pass its JSON path with
  `--selection-json ... --require-selection`; the helper rejects a mismatched
  world or an unconfirmed scored packet.

### 3. Pick exactly one Style World per scope

For a new single-world page, pick the **lead** world. The lead world controls
color logic, type system, layout grammar, motion grammar, asset strategy, and
the dominant feeling. You may borrow at most one minor accent from a second
world, but the page must read as one world.

For an existing multi-world switcher or catalog, do not collapse the site into
one lead world. Treat each requested world as its own selection scope: preserve
the existing world IDs, write one selector packet and one `ANCHOR` per world,
and read that world's chapter/mechanics before editing it. Split a mixed brief
into per-theme briefs (for example, data records and a luxury watch) and run
`select_world.py` separately for each. The global one-world rule applies to a
new page scope, not to a catalog whose product is the contrast between worlds.

If two worlds tie, run the **uniqueness check**:

- Which world has the agent used least recently in this codebase / chat?
- Which world creates the strongest contrast with what competitors do?
- Which world rewards the brand's one-sentence promise best?

Then commit. Do not blend three worlds into a "safe average".

Optionally pick **one** Technique Pack from `references/motion-lab.md` §13 after
the world is locked. The pack changes the hero's material and interaction, while
the lead world keeps ownership of color, type, layout, and emotional pacing.

### 4. Compose 2–4 Mechanics

From `references/mechanics-library.md`, pick 2–4 mechanics that *amplify* the world.

- Worlds suggest a default mechanic shortlist — read them.
- One mechanic must be the **hero mechanic** (carries the first viewport).
- The others are **supporting mechanics** (used in 2nd / 3rd / footer sections).
- If a Technique Pack is active, its hero and supports count toward the same 2–4 limit.
- Never copy the exact combination listed as a reference site's signature. Re-arrange. Re-time. Re-color.

### 5. Invent one Signature Mechanic

The page must have one thing no reference has. Examples:

- A custom cursor that becomes the product's icon when hovered.
- A scroll bar that is the product itself (e.g., a knife blade, a bracelet link).
- A loader that types out the user's location/IP city.
- A 3D hero where the camera follows the actual time of day at the user's locale.
- A footer that prints a generated postcard the user can save.

Write the Signature Mechanic in one sentence before implementing.

### 6. Generate or create assets

- Bitmap visuals: when the user requests generated imagery, load and follow the
  `$imagegen` skill first and use its built-in `image_gen` path by default.
  Generate only 1–3 assets that have a documented job, copy the final files
  into the project, and never leave them only in the generator's output folder.
  Include the selected world in every image prompt (use
  `scripts/asset_prompt.py`) so an editorial brief does not receive a luxury or
  cinematic object by accident.
- Choose the asset mode before prompting. Use `--mode hero-plate` when complete
  product identity, realistic materials, and an authored text plane matter; use
  `--mode cutout` only when the layout needs an isolated object. The prompt
  script chooses a different imagegen use case, scene, placement, and avoid list
  for every world. Never reuse a successful World 1 prompt as a universal style.
- For `generative-system`, run `python3 scripts/asset_prompt.py <subject>
  --world generative-system --mode procedural`; this is a code-native handoff,
  not an imagegen request. A raster exception requires both `--allow-raster`
  and `--override-reason`, and must be limited to a named logo or texture. For
  `data-monument`, attach a documented `--data-source` plus repeated structured
  `--data-map field:type[unit]=channel` entries before creating any visual
  asset. Include one stable `=identity` mapping and at least one visible channel.
- If the image-generation endpoint or skill is unavailable, say so plainly and
  do not silently switch models or invoke a CLI. The imagegen CLI fallback
  requires an explicit user choice and `OPENAI_API_KEY`. Otherwise use
  supplied/licensed or procedural assets only when they fit the brief. Mark the
  provenance in the project notes; never describe a local procedural image as
  AI-generated or imply that an unavailable model was called.
- If the user explicitly asks to use a supplied compatible endpoint, follow
  the explicit provider procedure in `references/asset-isolation.md` Step 0.
  This remains `$imagegen`'s explicit API/CLI fallback configuration, not a
  third default mode, and it never bypasses world selection, semantic review,
  or the no-generic-ring rule.
- Run a **five-second semantic gate** on every hero asset: an uninformed reviewer
  must name the intended object and see its identity-bearing parts. A watch needs
  a readable dial, hands, crown, strap and clasp; a fictional instrument needs a
  credible function, chassis and controls. If it reads as a bottle, thermos,
  generic gadget or abstract ornament, regenerate with that exact misread in the
  avoid list. CSS, bloom and copy cannot repair a failed silhouette.
- **Isolate every cutout illustration.** A cutout inside a visible rectangle, a halo, or a fake "transparency checkerboard" reads as a cheap template. Full-bleed photoreal hero plates are a separate mode: blend their backdrop into the page, reserve copy space in the generated composition, and do not key them out.
- **Never matte a subject out of a busy scene** (rembg/SAM on a full studio shot halos and eats into the subject — 误伤). Instead, **generate the asset on a uniform high-contrast chroma backdrop, then key that one color out.** Pick the backdrop hue to be *absent from the subject* (green by default; magenta/violet when the subject contains green or many bright colors). Follow `references/asset-isolation.md` for the backdrop table, prompt template, the color-distance + gated-despill keyer, and the CSS to present cutouts as floating objects.
- Use `scripts/asset_prompt.py` to produce the world-specific prompt. For a
  generated transparent asset, follow `$imagegen` and run its installed
  `remove_chroma_key.py` helper. Use `scripts/chroma_cut.py` only for
  supplied/pre-existing chroma sources or explicit local tuning, then use
  `scripts/preview_cutouts.py` to review over dark/cream/kraft backgrounds.
- 3D assets: use Blender exports (.glb), keep file size low (texture atlas, draco compression).
- Avoid external stock unless the user explicitly allows them.
- Prefer 1–3 strong assets over many weak decorations.

### 7. Build the first screen as the experience

- Make the first viewport the actual product/brand signal, not a marketing preamble.
- Full-bleed or unframed layouts; do not put the hero inside a decorative card.
- Let a hint of the next section appear on common desktop and mobile viewports.
- Keep nav and CTAs usable even when the visual layer is intense.

### 8. Implement kinetic systems

- Use CSS variables for color, spacing, type scale, motion timings — switching worlds should be possible by swapping a `data-world` attribute and a variable bundle.
- For reference-grade work, install a **kinetic director** before polishing visuals: one scoped loop that writes normalized pointer, local scroll, chapter, and entry values into each world. Follow `references/kinetic-parity.md`; a static lookalike is not enough.
- Add canvas/WebGL/procedural layer only when the world demands it. If you add one, it must carry data via uniforms (mouse, scroll, time, pulse).
- For media formations, sticky image planes, physics, route Flip, velocity type, retro post-FX, data portraits, shader tool surfaces, and scroll decomposition, use the implementation/failure/verification recipes in `references/motion-lab.md` and the matching named mechanics. Do not combine them as an effect checklist.
- **A flat full-screen fragment-shader gradient is not a hero.** Pick one
  semantic owner for the anchor: an inspected glTF, a product-specific SDF whose
  silhouette passes the five-second gate, or a supplied/generated hero plate.
  When a hero plate owns product detail, WebGL should add atmosphere, light,
  particles, reflection and post-FX behind it; do not raymarch a second,
  approximate product over the image. Use the portable recipes in
  `references/webgl-animation.md` only when the chosen world and performance
  budget justify them. Feature-detect WebGL, detect weak renderers, cap quality,
  and provide a legible DOM/static fallback.
- Custom cursor, magnetic buttons, parallax, scroll progress, ticker text, hover distortion: each must have a purpose tied to the world's grammar.
- Respect `prefers-reduced-motion`; always cap DPR and pause the loop when offscreen.
- For scroll-heavy pages, follow the **Scroll performance contract** in
  `references/webgl-animation.md` §5–6: one rAF owner, scroll callbacks that only
  sample, cached geometry with reads-before-writes, active-world-only rendering,
  Lenis `animatedScroll` for wheel smoothing, `actualScroll` for divergent native
  scrollbar/restoration state, and an event-driven/static reduced-motion mode.
  Keep DOM/compositor writes per-frame; stride or hold the last complete frame
  of the expensive full-screen renderer during an active gesture, then restore
  full cadence. Do not
  tune damping until a real wheel/trackpad trace shows the frame budget and p95
  interval.

### 9. Verify visually

- Run the app in a browser.
- Capture desktop and mobile screenshots for every section.
- Check that generated images load, canvas pixels are nonblank, text does not overlap, buttons fit, scrolling works, no console errors.
- For the CoolLanding demo, run the repository's pixel-level contrast probe in
  addition to the motion probe:
  `python3 tools/verify_spatial_contrast.py`. It resizes the live route across
  desktop/mobile viewports, waits for the runtime frame-ready marker, captures
  the visible frame, temporarily hides only the target canvas, and uses the
  screenshot delta to prove that the WebGL layer contributed real pixels before
  checking WCAG ratios for visible copy. A default-framebuffer `readPixels`
  result is diagnostic only (with `preserveDrawingBuffer: false` it may be all
  zeroes after buffer swap); it is never the nonblank verdict. For another repo,
  build an equivalent rendered-background check; CSS token contrast alone is
  insufficient.
- For each hero plate, capture desktop and mobile product crops and compare the
  actual copy/product stage rectangles. The intended object must remain
  identifiable, the copy must stay on its reserved plane, and neither may be
  rescued by hiding the product under a dark overlay.
- For isolated assets, composite each cutout over its real world background
  (dark/cream/kraft) and render in **real headless Chromium** — the IDE preview
  caches images and hides fringes. Use 90% separation quality as a review target,
  not a claim that a reference has been numerically reproduced. See
  `references/asset-isolation.md` §5.
- Inspect the output yourself before claiming success.
- Run the **anti-template audit** in `references/anti-template-rules.md`.
- If the brief compared the page to reference sites, run a motion proof:
  screenshot before/after pointer, before/after scroll, active-state DOM
  assertions, nonblank canvas checks, console capture, and a real scroll frame
  trace (the reusable probe accepts `--performance`). In the CoolFE demo this is
  `python3 tools/verify_motion.py`; in other repos, build equivalent checks
  locally. Report the evidence level and remaining gaps; never claim
  "reference-grade" from static screenshots alone.
- Treat `site_motion_probe.py` evidence as `runtime-verified` only when it
  observed a live canvas context; bundle signatures alone are `dom-verified`.
  With `--screenshots`, retain the initial, after-pointer, after-5s, and
  after-scroll captures, plus console/page-error output.

## Reference Lineages

The nine lead Style Worlds are anchored by these references. The agent must
**not** copy any of them—only inherit mechanisms.

| # | Site | World | Signature mechanism |
|---|------|-------|---------------------|
| 1 | Sidewave | cinematic-dark | WebGL2 black void, single luminous origin, loading ritual |
| 2 | Active Theory | cinematic-dark | Sparse DOM, ASCII/data texture, runtime asset stage |
| 3 | Blit Studio | editorial-interference | Huge cropped wordmark, white field, custom cursor, media collisions |
| 4 | Remote Rituals | ritual-craft | Saturated panels, sticker UI, calendar/desktop metaphors |
| 5 | AIR Center | spatial-architecture | 2D↔3D↔2D RenderTarget transitions, water reflector, panoramic glass |
| 6 | Razorpay Sprint 26 | festival-kinetic | 100+ scroll/click triggers, chapter index (01/A…), B2B-as-consumer storytelling |
| 7 | Aimee's Papercraft | papercraft-tactile | Character-led scrollytelling, baked 2D illustrations on 3D geometry |
| 8 | Cartier Watches & Wonders | luxury-alcove | Six dreamlike 3D rooms per product, hidden gestures, Web Audio score |
| 9 | WC 2026 Data Portraits | data-monument | Stable event records mapped into comparable spatial portraits |

Each row maps to a chapter in `references/style-worlds.md` and tested mechanisms
in `references/mechanics-library.md`. Historical rendering evidence for the
original eight rows is in `references/webgl-animation.md` §1. The later
`data-monument`/WC26 evidence is documented in `references/reference-sites.md`
§11 and `references/motion-lab.md` §§10–11; do not cite the historical bundle
table as WC26 runtime evidence.

The motion catalog adds Obys Experiment, TRIONN, 21 Hrs, Made With GSAP, Glitch
& Grit, Normal Is Boring, Artem, IZANAMI, Daoism Systems, Grainient v2, WC 2026
Data Portraits, Spotify Wrapped Party, and Mondrian Tribute. Their evidence,
transferable boundaries, and failure modes live in `references/motion-lab.md`
and `references/reference-sites.md`. Inherit mechanisms, not markup, branded
objects, copy, palettes, or proprietary/minified code.

## Quality Bar

- Every visual asset must have a job.
- Motion must clarify state, depth, or rhythm — never decoration alone.
- The page must remain readable at mobile widths.
- Avoid generic AI aesthetics: stock gradients, vague glassmorphism, repeated rounded cards, filler badges, decorative purple/blue blobs.
- Report generated asset paths, implementation files, and verification commands.
- Report reference evidence level and the do-not-copy boundary for each borrowed mechanism.
- The result must pass the **uniqueness test**: a critic should not be able to say "this is the CoolLanding skill output". They should say "this is the brand".