CoolLanding Skill

CoolLanding Skill is an anti-template framework. It teaches an agent to compose a unique cinematic landing page every time, by picking one Style World + a handful of Mechanics + one Signature Mechanic — never the same combination twice.

This is the reusable process behind CoolLanding: diagnose the brand, pick the right visual language from a catalog of eight, mix mechanics that amplify it, invent the signature moment, generate project-bound assets, ship a real implementation, and audit against the anti-template checklist before claiming done.

If this helps you ship a launch page that doesn't look like every other launch page, please star the repo. It makes the signal easier for other builders to find.

Live demo (multi-world switcher) · Website repo · 中文 README

What This Skill Replaces

A common failure mode of "AI builds a landing page" is that every output looks the same: gradient blob hero, three feature cards, "Trusted by [logos]", "Get Started for Free" pill button, AI-rendered abstract illustration.

The CoolLanding skill replaces that loop with:

1. Diagnose the brand — emotion target, audience temperature, one-line promise.
2. Pick exactly one Style World from a catalog of eight (cinematic-dark, editorial-interference, ritual-craft, spatial-architecture, festival-kinetic, papercraft-tactile, luxury-alcove, generative-system).
3. Compose 2–4 Mechanics from a library of ~40 interaction recipes that fit that world.
4. Invent a Signature Mechanic — one thing nobody else has, on-brand, appearing in 2+ moments of the page.
5. Verify uniqueness with the anti-template audit before shipping.

Two outputs of the skill should never look 80%+ similar. If they do, the skill failed.

The Eight Style Worlds

World	Inspired by	Use when
cinematic-dark	Sidewave, Active Theory	AI / agents / infra / generative tools
editorial-interference	Blit Studio	Design studios, agencies, fashion, manifestos
ritual-craft	Remote Rituals	Community, remote work, kids/education, lifestyle
spatial-architecture	AIR Center	Real estate, hotels, hardware, premium campuses
festival-kinetic	Razorpay Sprint 26	Annual recaps, launches, conferences, "Sprint" pages
papercraft-tactile	Aimee's Papercraft World	Personal portfolios, storytelling, charity, indie tools
luxury-alcove	Cartier Watches & Wonders	Watches, jewelry, perfume, exclusive launches
generative-system	Custom	Generative art, music tools, data viz, AI inference

Each world has its own color logic, type system, motion grammar, layout grammar, asset strategy, and recommended mechanic shortlist. Full breakdowns are in skill/coollanding/references/style-worlds.md.

Install With skills

Install the skill through the Skills CLI so it is registered in the right agent directory and can be updated later:

npx skills add https://github.com/veithly/CoolLanding-Skill --skill coollanding --agent codex -g -y

Notes:

• -g installs it globally for your user. Omit -g if you want a project-local install.
• --agent codex installs it for Codex. Use --all if you want every supported agent.
• Add --copy if your environment does not handle symlinked skill folders well.
• Update later with:

npx skills update coollanding -g

Manual fallback:

cp -R skill/coollanding ~/.codex/skills/coollanding

On Windows PowerShell:

Copy-Item -Recurse -Force .\skill\coollanding "$env:USERPROFILE\.codex\skills\coollanding"

Then start a new Codex session or reload skills.

Use

Use CoolLanding to build a launch page for <brand>. 
Diagnose the brand, pick one Style World, compose mechanics that fit it,
invent a Signature Mechanic, generate project-bound visuals, implement the page,
and run the anti-template audit before finishing.

The skill will push the agent to:

• Read local repo rules and inspect the current codebase first.
• Ask clarifying questions about emotion target, audience, and one-sentence promise.
• Pick exactly one Style World — not blend three into a templated average.
• Compose 2–4 Mechanics from the library; one is the hero, others are supporting.
• Invent a Signature Mechanic and articulate it in one sentence.
• Generate or create local assets, never hotlink stock.
• Implement real kinetic systems when the world demands it (WebGL, Three.js, Lenis, GSAP, R3F, Rive, Web Audio).
• Run the anti-template audit in references/anti-template-rules.md before claiming success.

Inside the Skill

skill/coollanding/
├── SKILL.md                          # framework + workflow
├── agents/
│   └── openai.yaml                   # entry metadata
├── scripts/
│   ├── asset_prompt.py               # chroma-backdrop image prompt helper
│   ├── chroma_cut.py                 # color-distance keying + autocrop
│   └── preview_cutouts.py            # halo/spill contact sheet
└── references/
    ├── reference-sites.md            # 8 reference sites as mechanism inventories
    ├── style-worlds.md               # 8 distinct visual languages
    ├── mechanics-library.md          # ~40 mixable interaction recipes
    ├── composition-strategy.md       # how to pick + combine
    ├── kinetic-parity.md             # motion proof ladder
    ├── asset-isolation.md            # image generation + cutout workflow
    ├── webgl-animation.md            # WebGL/GPGPU/bloom methodology
    └── anti-template-rules.md        # final audit checklist

Reference Sites

The catalog inherits mechanisms (never visuals) from:

• Sidewave — WebGL2 black-void loading ritual.
• Active Theory — sparse DOM, WebGL2/video stage, runtime assets.
• Blit Studio — editorial white space, custom cursor, media collisions.
• Remote Rituals — Framer/SVG toy world, pinned horizontal scenes.
• AIR Center — 2D↔3D↔2D RenderTarget transitions, water reflector, panoramic glass.
• Razorpay Sprint 26 — 100+ scroll/click triggers, chapter index, B2B-as-consumer storytelling.
• Aimee's Papercraft World — scrollytelling along a character path through baked 2D-on-3D scenes.
• Cartier Watches & Wonders — six dreamlike 3D alcoves, hidden gestures, Web Audio score.

Deep breakdowns: skill/coollanding/references/reference-sites.md.

The Anti-Template Promise

The skill is built so that two invocations cannot produce the same page. Every output must:

• Use a different Style World or the same world with a totally different mechanic combination.
• Have a different Signature Mechanic articulated in one sentence in the project README.
• Pass the 10-section audit in references/anti-template-rules.md.

If you build two landing pages with the skill and they look 80% similar, the skill failed. File an issue.

Companion Website

The companion demo at CoolLanding is a multi-world switcher that lets visitors preview the same page rendered in eight different Style Worlds — cinematic-dark, editorial-interference, ritual-craft, luxury-alcove, spatial-architecture, festival-kinetic, papercraft-tactile, and generative-system. It exists to prove the skill is not a template; the demo is a runtime showcase of variety.

License

MIT.