The structure axis

1. The template trap

Four sites were built with this skill: a protein coffee brand, a personal brand, a landscape design-build firm, and an agent observability product. Four industries, four worlds, one light canvas and three dark. The owner looked at them side by side and said they felt like a template. He was right, and the evidence is in the files.

All four open with a full-bleed scrub under a fixed minimal top bar carrying a wordmark and one CTA. All four anchor the hero headline in the lead corner with a greet cue and kinetic lines. All four run a pinned type act where lines crossfade. All four hand off to a flow section, pan a card rail with a data-sc-tilt="6" on each card, and close on data-sc-act="pin" with data-sc-span="1.15", data-sc-spotlight on the stage and data-sc-magnet="0.26" on the CTA. All four land between 13.6 and 13.8 viewport-heights across 6 or 7 acts with exactly one accent colour.

What actually varied was the order of the middle acts and the palette.

The device kit is an aesthetic axis. It changes how a page looks. It has no opinion on what a page is, so every build reached for the same shape, because the shape was never a decision anybody made.

The world changes how a page LOOKS. The grammar changes what a page IS. A build that only changes world is a re-skin.

This file is the structure axis. Read it after the interview and before the score table. It has three parts that are not optional: pick a grammar, invent a signature move, and pass the fingerprint gate.

---

2. Page grammars

A grammar is the page's organising logic: what a section is, what the chrome is for, how the visitor knows where they are, and what the ending is. Two pages in the same grammar will feel related no matter how far apart their palettes are. That is the whole finding above.

Each grammar below names what it forbids. The forbids are the point. They are what stops a build drifting back to the filmic default halfway through, which is what happens when a grammar is a preference instead of a constraint.

Pick one. Do not blend two: a chaptered page with a continuous world underneath is a filmic one-shot with extra headings.

---

2.1 Filmic one-shot

The original skeleton, and now one choice among eight rather than the house style.

Fits: a single linear argument with one emotional arc. Consumer products, launches, anything where the visitor should feel carried rather than navigating.

The scroll feels like: a film you are pushing through. Continuous, no seams, each act handing off before the last has left.

Forbids: visible sequence (chapter numbers, an index, a progress readout); hard cuts between grounds; any chrome that implies the page is a tool; more than one entry point. If the visitor can jump, it is not one shot.

Nav, hero, close: fixed minimal bar, wordmark and one CTA. Full-bleed scrub hero, corner-anchored kinetic headline on a greet cue. Pinned close with a spotlight and a magnetic CTA.

Leans on: scrub, pin, drift, kinetic. Bans: nothing structural, which is exactly why it is the default drift and why four builds landed here.

Use it when the interview earns it, and say in the report why the other seven did not fit. This grammar now carries a burden of proof the others do not.

---

2.2 Chaptered editorial

The page is a printed feature. Chapters are the unit, not acts.

Fits: long-form substance. A method, a manifesto, a founder story, a research-backed product, anything where the visitor should feel they read something rather than watched something.

The scroll feels like: turning pages. Full-stop intertitles between chapters, then dense asymmetric spreads. Hard cuts, not crossfades. Each chapter lands on its own ground and stays there.

Forbids: drift as a continuous gradient (each chapter is a hard change of ground, not an interpolation); the full-bleed scrub hero; pinned crossfade type acts; a magnetic CTA; centred hero copy. Media never bleeds under type here, it sits in its own column with a caption.

Nav, hero, close: no fixed bar. A folio in the margin, chapter number and title, updating as chapters pass. The hero is a title page: type on the paper ground, no media above the fold, the media starts in chapter one. The close is a colophon or masthead plate, small type, the CTA set as a line of running text rather than a button island.

Leans on: flow + in, reveal at chapter boundaries, parallax inside a media column, count for real figures inside prose. Bans: scrub beyond one chapter, spotlight, magnet.

---

2.3 Live surface

The page behaves like the product. Not a screenshot of it, and not a div-built fake: the actual surface, running, with scroll driving its state.

Fits: software, tools, dashboards, editors, anything where the demo is the argument. If the honest pitch is "watch what it does", this is the grammar.

The scroll feels like: operating something. Panels populate, a log fills, a graph advances, a selection moves. The visitor is inside the thing.

Forbids: marketing chrome of any kind. No wordmark-plus-CTA bar, no scrims, no full-bleed photography, no kinetic headline stacks, no hero claim laid over footage. Copy lives in the surface's own idiom: labels, tooltips, empty states, status lines, a help panel. A section heading in 6rem display type breaks this grammar instantly.

Nav, hero, close: app chrome replaces nav. A sidebar, a tab strip, a status bar, a breadcrumb, whatever the real product would have, and it is real enough to be the navigation. The hero is the surface already in a state, not a title. The close is an actual input: a command line, a field, a first-run step, something the visitor puts a cursor in. A magnetic button is the wrong ending for a page that spent its whole length being a tool.

Leans on: pin (the surface holds while state advances), count on real telemetry, pointer devices where the real product would have them, and --sc-p driven CSS for anything the kit does not cover. Bans: scrub, kinetic, spotlight, drift past two stops.

The honesty rule. taste.md forbids fake dashboards and fake terminals, and that rule is not suspended here. The surface has to be real markup running real logic on real or clearly-labelled sample data. That labelled-sample escape is how a concept product can still use this grammar: every panel is operable markup computing its state from data arrays in the page, and the page says on its face that the scenario is a demo. What stays banned is the painting of a surface, an image or dummy divs posing as something that runs. If the panels cannot actually compute, the grammar is unavailable. Pick another.

---

2.4 Continuous world

One canvas, fixed for the entire scroll, and the page travels through it. Waypoints, not sections.

This grammar REQUIRES worldflight mode. data-sc-mode="worldflight", one fixed stage, one spacer, legs that crossfade. See references/worldflight.md.

Building it out of pinned acts is not a lesser version of this grammar, it is a different and worse page, and it has already been tried. The owner's verdict on the act-based attempt: "awful... you're literally going from scrolling down to static page and then you start scrolling down again... weird clear page lines scrolling up... very cheap looking." Every one of those is the same defect. A pinned act is a block in the document; a document made of blocks has seams; and a world with seams is not a world. Do not reach for scrub acts here, however long you make the spans.

Fits: a journey with real geography. A supply chain, a process with physical stages, a place, a build, anything where "where you are" is meaningful.

The scroll feels like: moving through a single space that never cuts. The visitor never leaves the frame.

Forbids: section boundaries of any kind. No sc-section blocks, no acts at all, no second stage, no drift steps (one continuous grade across the whole travel, authored into the world, not interpolated between legs). Nothing may scroll over the canvas: copy arrives inside it, at waypoints, in the fixed copy layer. The only element in document flow is the spacer.

Nav, hero, close: the nav is a map. A waypoint list, a depth readout, a position marker, and it is clickable, because a world you cannot skip around in is a video. The hero is an establishing position inside the world, not a separate title stage. The close is arrival at a place in the same canvas, and the CTA is an object in that place.

Leans on: worldflight legs with data-sc-linger, copy windows against the whole track, the sc:waypoint event driving a rail the page draws itself. Bans: every act device, flow, pan, hard cuts, src swapping.

This is the expensive one. The chain warning in SKILL.md applies: a single unbroken flight is the most fragile thing you can build, and the seam law in worldflight.md section 6 is not optional. Choose this grammar only when the brief is literally about travel through a place, and budget for the reroll.

---

2.5 Typographic poster

Type is the imagery. Media is minimal or entirely absent, and scale contrast does every job that photography would have done.

Fits: a brand whose asset is a sentence. Manifestos, agencies with strong verbal identity, launches with one claim, anything where a stock-looking image would weaken the page rather than support it. Also the right answer when there are no good assets and generating them would produce eight plausible, forgettable frames.

The scroll feels like: words arriving at wildly different weights. A word at 40vw, then a paragraph at 16px, then silence. Rhythm comes from scale, not motion.

Forbids: photographic ground, scrub, scrims (nothing to scrim), cards of any kind, and decorative motion. If a device is doing the work instead of the typography, the grammar has already failed.

Nav, hero, close: the wordmark is set as part of the composition, at composition scale, not as a 14px bar item. There may be no persistent nav at all. The hero is a single word or one line at extreme scale, filling the viewport, with a real <h1> behind it. The close inverts the whole page: the smallest type on the site, the CTA as a plain underlined link, quiet after all that volume.

Leans on: kinetic (this is the one grammar where character splitting can be right), pin with scale driven from --sc-p, reveal as a wipe across letterforms, drift doing heavy lifting because the ground is most of the frame. Bans: scrub, pan rails of cards, tilt, parallax on text.

The typography floor doubles here. taste.md caps display at ~6rem outside a hero moment. This grammar is one continuous hero moment, so the cap lifts, but the tracking, measure and optical-correction rules tighten: at 40vw, default tracking is a visible defect and one bad kern is the whole page.

---

2.6 Gallery / catalog

Objects in a walkable collection. Museum labels, not marketing copy.

Fits: a range. Products with variants, a portfolio, a menu, a materials library, case studies, anything where the visitor's real question is "what are the options" rather than "should I believe you".

The scroll feels like: walking a room. Lateral drift with vertical scroll, objects entering and leaving at their own pace, each one labelled with fact rather than pitch.

Forbids: the argument-shaped pinned type act; a single hero claim; scrim copy over media; persuasion in the object labels. A label reads Cedar. Air-dried 18 months. Kiln-finished. and not Craftsmanship you can feel. Every object gets the same label schema, no exceptions, because the schema is what makes it a collection instead of a grid.

Nav, hero, close: the nav is an index of objects, and it jumps. The hero is object one, already in view, already labelled, with no separate title treatment: the collection starts at the top of the page. The close is either the last object or an inquiry plate typeset exactly like a label, so the ask reads as part of the collection.

Leans on: pan as the spine rather than as one act, reveal per object, tilt on objects the visitor would pick up, count for real specs. Bans: kinetic headlines, spotlight, magnet, more than one scrub.

The rail copy constraint from devices.md §3 becomes structural here, not a caveat. Labels are read cropped for most of their life, so the schema has to survive being half-visible.

---

2.7 Split stage

Two columns held in tension for the whole page, resolved by scroll.

Fits: any argument with two sides. Before and after, cost and saving, manual and automated, what you have and what you would have. The comparison is the product.

The scroll feels like: watching a balance tip. Both halves are always present, both move, and the page is going somewhere specific: the moment one side wins.

Forbids: full-bleed anything before the resolve; centred copy; the corner-anchored hero; a symmetric close. Neither column may be decorative, both carry real content the whole way down. The instant one side becomes a caption for the other, this collapses into a zigzag layout with extra steps.

Nav, hero, close: no bar. The divider is the chrome, and it carries the labels for both sides plus the progress of the argument. The hero establishes the split at 50/50 on the first screen, with both headlines readable at once, so the visitor understands the format before they scroll. The close is the collapse: the divider travels to one edge, one column takes the full width, and the CTA lives in the winning column. That collapse is the ending, and it should be the single most satisfying moment on the page.

Leans on: pin with divider position driven from --sc-p, reveal per side, count for the comparison figures if they are real. Bans: pan, spotlight, magnet, more than one scrub, drift (two grounds, one per side, and they hold).

---

2.8 Rhythmic cutlist

Short hard-cut acts at speed. No pinning, no dwell, no crossfades.

Fits: energy brands. Streetwear, sport, events, music, drinks, youth products, anything where the visitor should feel a pulse rather than follow an argument.

The scroll feels like: a cut every second. Twelve to twenty short sections rather than six long ones, each one landing whole and gone. Total page length stays inside the 8 to 14 viewport-height budget precisely because nothing is held.

Forbids: any act over ~1.4 viewport-heights; data-sc-dwell above 0.1; pin entirely; overlapping cue windows; slow easing. This grammar is the exact inverse of the filmic one-shot: where that one hides its seams, this one is made of them.

Nav, hero, close: the bar is loud, not minimal. Full-width, high-contrast, possibly a marquee, possibly the CTA at the same weight as the wordmark. The hero is one screen that cuts to the next in under a viewport, so there is no settling shot and no greet-and-hold. The close is abrupt: the last cut is the CTA, at full bleed, no spotlight, no drift-down.

Leans on: flow + in at short stagger, reveal on nearly every section, count if the figures are real, hard drift steps between adjacent grounds. Bans: pin, spotlight, magnet, dwell, parallax.

The taste floor still applies at speed. Fast is not an excuse for a 1.2 second entrance that the reader outruns. Cue windows here are short and front-loaded, so a section is fully legible within the first third of its own span.

The peak problem, and how to resolve it. This grammar bans pin and dwell outright while feel.md insists the peak gets the most scroll room and the biggest hold. Those pull in opposite directions, and the quiet failure is a build that reaches for pin at its peak and still calls itself a cutlist.

Hold in the fixed chrome layer, and keep every act short and unpinned. The loud bar this grammar already asks for is a persistent element that does not belong to any act, so it can unfurl, run a long choreography and hold as long as the peak needs while the acts underneath keep cutting at full speed. Drive it from page scroll rather than from an act's --sc-p, since the whole point is that it outlives the act it started in. The airfield build's departures board runs its entire peak (unfurl, populate, cascade, reveal, hold, collapse) in the chrome, with no pinned act anywhere on the page and nothing over 1.3vh.

The general form: when a grammar bans the device your peak wants, move the peak out of the act stack rather than breaking the grammar. The bans are on what the acts do, not on what the page can do.

---

3. The signature move

Every build must invent one bespoke interaction that exists on that site alone. Not in the device kit, not in any prior build, not a parameter change. Coded in the page, with data-sc-* attributes of your own naming or plain inline JS reading --sc-p. The engine stays untouched, always.

This is the thing that makes a page memorable after the visitor closes the tab, and it is the only part of a build that cannot be arrived at by following rules.

What counts

• Scroll-as-playhead over a persistent trace rail. A thin horizontal trace fixed at the bottom edge, present the whole page, drawing a real waveform or route or timeline. Scroll position is the playhead. Passing an act stamps a marker on the trace that stays. By the footer the trace is a complete record of what the visitor just went through, and it doubles as navigation.
• A wordmark the pointer can pull apart. The letters follow the cursor with different masses, separate under a drag, and settle back into perfect lockup when released. Only on the hero, only once, and the settle has to be exact.
• A line drawing that builds itself. An SVG technical illustration whose stroke-dashoffset is driven from --sc-p, so scrolling literally draws the object, then the dimension lines arrive, then the callouts. Pairs with the technical-drawing world in worlds.md.
• A running receipt. A small fixed panel that accumulates a line every time the visitor passes a claim, with real numbers, so the close arrives with a totalled ledger of the argument they just read. Only works with real figures, which is the check on it.
• One control that regrades the whole page. A time-of-day handle, a temperature, a load level: one input, and every image, ground and accent on the page shifts together. It has to affect everything at once or it is a widget.

What does not count

• A recoloured spotlight. A spotlight at a different radius. Two spotlights.
• data-sc-tilt="9" instead of 6. Any parameter change to any kit device.
• A different easing curve on kinetic lines.
• Five cards in the rail instead of three, or the rail scrolling the other way.
• A third scrub act. More of a device is not a new device.
• Something the engine already does, given a project-specific class name.

The test: describe the move to someone who has seen the other builds. If they cannot tell it apart from something the kit already does, it is not a signature move. Reaching for a kit parameter here is the same failure as reaching for the filmic default in §2, one level down.

---

4. The fingerprint gate

The registry lives at <workspace>/FINGERPRINTS.md, where <workspace> is whatever node <skill>/scripts/workspace.mjs prints. It is per-user and it starts empty: the gate is about not repeating yourself, so your first build has nothing to clear and every build after it does.

A worked twelve-row registry ships as EXAMPLES.md in the upstream scroll-craft repository (upstream repo — not vendored in this port). Read it to see what a filled table looks like and which shapes tend to collide. It is illustration, not constraint: those are somebody else's builds and they do not gate yours.

Before building: read it. Every row is a shape that is now taken.

Before writing markup: check the planned build against every existing row on these six dimensions.

The gate: a new build must differ from EVERY existing row on at least 4 of the 6. Not 4 of 6 on average across the table. Four against each row, individually.

Dimension 6 is free, because a signature move is unique by definition. So the gate really asks for three more out of the remaining five, against each row, and a build that changes only grammar and world will fail it.

If the planned build fails the gate, change the plan, not the log. Rewriting a fingerprint row to make a new build fit is the one thing that makes this file worthless. It is a record of what exists, not a description of what you wish existed.

After shipping: append one row. Fill all six dimensions plus world and port. Say plainly what it shares with prior rows, because the shared columns are what the next build has to avoid.

---

5. Aesthetic range

Premium-minimal is a choice. It is not the costume this skill wears by default, and four dark-or-paper pages with one accent each is what happens when nobody decides otherwise.

The full range is available when the brand's vibe asks for it:

Go where the interview points. If the human says "loud" and the page comes back in charcoal with one accent, the interview was decorative.

What does not flex: the taste floor. Spacing scale and rhythm, type metrics and measure, contrast ratios measured on the render, motion built from transform and opacity, focus-visible on everything, reduced motion that keeps meaning, real copy and real numbers. Every item in taste.md holds in every aesthetic family.

A brutalist page still needs 4.5:1 body contrast. A maximalist page still needs a spacing scale, and needs it more, because density without rhythm is just noise. A playful page still cannot animate top. The floor is what separates a chosen aesthetic from a sloppy one, and it is the reason range is safe to offer at all.

Two specific traps stay banned in every family, because they are not aesthetics, they are defaults with a look: the cream-and-brass artisan palette (taste.md, Colour) and violet-to-blue AI gradients. Both are what a page reaches for when nobody chose.