GitHub

An agent skill for Claude Code & Codex

Agree first.
Then build.

A skill that teaches an AI agent to make a single-page site the way Louvre After Dark was made: brainstorm, prototype one piece, build, verify, deploy, then promote it.

Install View source

The making-of

Ten Louvre paintings, 1483 to 1830, hung on a curved wall in a dark 3D gallery. It took six stages, a few rollbacks and one long list of rules. This skill is that list.

  1. 01 Brainstorm

    A preference is not a go-ahead.

    Ask what the page is for, who it is for, and the one feeling it should leave. Read the references for what actually works. Then offer two or three directions with a recommendation, and wait for a clear yes.

    Niki

    我觉得 b 好

    I think B is good.
    Agent

    要现在开始做吗？

    Shall I start now?
    The rule that came from a rollback.

  2. 02 Prototype

    One painting before ten.

    Build the hero and a single item first, show it, and get a “满意” (satisfied). Anything that moves gets a short video sample on a branch, so nothing unapproved reaches the live site.

    Liberty Leading the People in the site's depth view, lit by a lamp
    Liberty Leading the People, in depth.

  3. 03 Build

    No build step. Nothing borrowed at runtime.

    • Plain HTML, CSS and ES modules on any static host
    • three.js and the fonts are copied into the repo
    • WebP images; the first few load, the rest stream in
    • Resolution steps down when frames run long
    • A ?static fallback, and reduced motion respected
    The 3D gallery: paintings on a curved wall above a reflective grid floor
    The curved timeline and its reflective floor.

  4. 04 Verify

    Look before you say it works.

    After every change, reload and read the page, take a screenshot, then check it on a phone. For video, a fake clock steps the page frame by frame, so captures stay smooth even in a hidden tab.

    • Console0 errors
    • Rendered textmatches
    • Phone, 375 pxno side scroll
    • Reduced motioncalm
    • No WebGLstatic page
    • Sound on entryoff

  5. 05 Deploy

    Live means the hashes match.

    Push to GitHub Pages and wait for the build. Then compare every live file with the local one, byte for byte. Only then does the agent say it is live.

    # bump ?v=N, commit, push with retries
$ git push
$ gh api repos/…/pages/builds/latest
built  8af849d
$ verify_deploy.sh https://…/louvre-after-dark/ \
    index.html js/app.js css/style.css
ok    index.html
ok    js/app.js
ok    css/style.css

  6. 06 Promote

    Then make people look closer.

    A share image, a landscape trailer with titles in two languages, and short films that each reveal one hidden detail. Inside the page, small living details: the raft of the Medusa rocks on the swell.

    A trailer frame: The Cheat with the Ace of Diamonds with English and Chinese titles
    The living Medusa, and a frame from the bilingual trailer.

Written into the skill

Nine rules for working with a person

  1. Brainstorm before code.
  2. Analyse references; don't copy them.
  3. “Just look” means look, and change nothing.
  4. A preference is not a go-ahead.
  5. Prototype one piece first.
  6. Anything that moves gets a video sample.
  7. Never break the live site with an experiment.
  8. Big rewrites need permission.
  9. When something is removed, it stays removed.

Design defaults

Taste, written down

One page

No sub-pages. Deep views are in-page modes with their own links.

A quiet frame

A logo and the switches people need. Taglines and bylines all went.

A light serif

Cormorant at 300, with gold italics for emphasis.

Sound off

Never on by itself. The button names what it will do.

Detail over chrome

Once the frame is set, the delight goes inside each item.

One signature

The owner's name appears once, where it means something.

From the bug log

Every pitfall, labelled

Reflections

Invisible floor reflections

Mirrored meshes were culled. Fix: render both sides.

Caching

Yesterday's JavaScript

The browser kept old files. Fix: a no-cache dev server and ?v=N.

Video

A 208 MB trailer

Film grain defeats compression. Fix: leave it out of the render (31 MB).

Capture

Frozen animation

Hidden tabs throttle frames. Fix: a fake clock injected for recording.

CSS

A drifting hotspot

Scale fought the JS translate. Fix: highlight with a glow.

Sound

Music that played itself

Fix: off by default; entering never turns it on.

What's inside

One folder, two agents

The same skill comes in two copies. The Claude Code copy names Claude's own preview and file tools. The Codex copy uses general wording and adds its own metadata file.

landing-page/
├── SKILL.md               the workflow
├── references/
│   ├── design-playbook.md taste, and why
│   ├── tech-recipes.md    depth parallax, audio, palettes
│   ├── deploy-github-pages.md
│   ├── promo-video.md     capture + ffmpeg
│   └── pitfalls.md        bugs and fixes
└── scripts/
    ├── nocache_server.py
    ├── recorder.py + capture.js
    └── verify_deploy.sh

Install

Two lines, then ask for a page.

git clone https://github.com/Nikihu-a/landing-page-skill.git
cp -R landing-page-skill/claude/landing-page ~/.claude/skills/

Restart Claude Code, then say “make me a one-page site”, or type /landing-page.