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.

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