@bongos/core 1.20.40 → 1.20.42

package/tests/ui_design_skills.mjs

@@ -14,7 +14,11 @@
 // face, and keeps the translations that ADR fixed (the archetype that still ships both modes,
 // the deterministic selection, the transcribed colour contract). Since task 1003475 (ADR
 // 0231) a module skill declares one of TWO origins - a rebuild from a spec, or first party -
-// and the origin pins branch on which; the /style session is the first original. DB-free.
+// and the origin pins branch on which; the /style session is the first original. Since
+// task 1004470 those skills are the opt-in `design-styles` module (default: false), split
+// out of ui-design, which keeps /design, the sync skills, the kit and the style library
+// (modules/ui-design/styles/) the skills still name as their palette source. The file
+// keeps its name because the preamble's own marker line points here. DB-free.
 import assert from 'node:assert/strict';
 import { test } from 'node:test';
 import { createRequire } from 'node:module';
@@ -25,7 +29,8 @@ import { fileURLToPath } from 'node:url';
 
 const require = createRequire(import.meta.url);
 const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
-const MODULE = path.join(ROOT, 'modules', 'ui-design');
+const MODULE = path.join(ROOT, 'modules', 'design-styles');
+const UI_DESIGN = path.join(ROOT, 'modules', 'ui-design'); // keeps the style library + /design
 const SKILLS = path.join(MODULE, 'skills');
 const VENDOR = path.join(SKILLS, 'vendor');
 const read = (p) => fs.readFileSync(p, 'utf8').replace(/\r\n/g, '\n');
@@ -114,9 +119,11 @@ test('every vendored SKILL.md opens with the PLATFORM PREAMBLE, byte-identical t
 });
 
 // ── every in-house rebuild: the preamble, the Rebuilt-from section, no sidecar (ADR 0220) ──
-const TASTE_CORE = ['design-taste-frontend', 'design-taste-frontend-v1', 'high-end-visual-design', 'redesign-existing-projects'];
+// design-taste-frontend-v1 was the fourth until task 1004470 deleted it (owner: "v1 can go").
+const TASTE_CORE = ['design-taste-frontend', 'high-end-visual-design', 'redesign-existing-projects'];
 
-test('the taste core of task 1003325 exists as four in-house skills and every one is declared', () => {
+test('the taste core of task 1003325 exists as three in-house skills, every one declared, and the deleted v1 stays gone', () => {
+  assert.ok(!ownDirs.includes('design-taste-frontend-v1') && !manifest.contributes.skills.includes('design-taste-frontend-v1'), 'design-taste-frontend-v1 is neither on disk nor declared (task 1004470)');
   for (const name of TASTE_CORE) {
     assert.ok(ownDirs.includes(name), `${name}: skills/${name}/SKILL.md exists`);
     assert.ok(manifest.contributes.skills.includes(name), `${name}: declared in contributes.skills`);
@@ -208,7 +215,7 @@ test('no image-family skill carries the directives the panel flagged: no eagerne
 });
 
 test('the worked example of the image family is the grove specimen: the pair with a sidecar beside every raster, referenced as tokens on the mock body', () => {
-  const grove = path.join(MODULE, 'styles', 'grove');
+  const grove = path.join(UI_DESIGN, 'styles', 'grove');
   for (const f of ['grove-pod.jpg', 'grove-pod-cut.webp']) {
     assert.ok(fs.existsSync(path.join(grove, 'assets', f)), `styles/grove/assets/${f} exists`);
     const side = path.join(grove, 'assets', `${f}.json`);
@@ -360,7 +367,7 @@ test('every in-house skill works inside the world: the style library is the pale
 
 test('the preamble copies are policy, not doc-entropy debt: the scanner skips the block and still flags a plain duplicate', () => {
   const de = require(path.join(ROOT, 'scripts', 'gds', 'docs-entropy.js'));
-  const carriers = ['modules/ui-design/skills/PREAMBLE.md', ...ownDirs.map((n) => `modules/ui-design/skills/${n}/SKILL.md`)];
+  const carriers = ['modules/design-styles/skills/PREAMBLE.md', ...ownDirs.map((n) => `modules/design-styles/skills/${n}/SKILL.md`)];
   assert.ok(carriers.length >= 2, 'at least one own skill carries the block beside PREAMBLE.md');
   for (const rel of carriers) assert.ok(read(path.join(ROOT, rel)).includes(policy.preamble.begin), `${rel} carries the block`);
   const dupes = de.scanDuplicateProse(carriers);
@@ -388,41 +395,42 @@ test('every skill the manifest contributes resolves to a skill dir (core .claude
     assert.ok(homes.some((h) => fs.existsSync(path.join(h, 'SKILL.md'))), `${name}: declared but no SKILL.md in any home`);
   }
   for (const name of [...ownDirs, ...vendoredDirs]) assert.ok(declared.includes(name), `${name}: on disk under the module but not declared in contributes.skills`);
-  const sources = materialize.moduleSkillSources({ coreRoot: ROOT, instanceDir: ROOT });
+  const sources = materialize.moduleSkillSources({ coreRoot: ROOT, instanceDir: ROOT }).filter((s) => s.module === 'design-styles');
   assert.deepEqual(sources.map((s) => s.name).sort(), [...ownDirs, ...vendoredDirs].sort(), 'the materialiser resolves exactly the module skill dirs on disk');
 });
 
 // ── materialisation: the builder's .claude/skills carries the set, sidecar included ─
-test('a module-owned skill lands in a materialised .claude/skills with its sidecar when the module is on, and not when it is off', () => {
+// The module ships default: false (task 1004470), so the shape under test is the real one:
+// ON only when the instance's config/modules.json says so, OFF with no config at all.
+test('a module-owned skill lands in a materialised .claude/skills with its sidecar when the instance turns the module on, and not by default', () => {
   const core = fs.mkdtempSync(path.join(os.tmpdir(), 'ui-skills-core-'));
-  const mod = path.join(core, 'modules', 'ui-design');
+  const mod = path.join(core, 'modules', 'design-styles');
   fs.mkdirSync(path.join(mod, 'skills', 'vendor', 'sample'), { recursive: true });
   fs.mkdirSync(path.join(core, '.claude', 'skills'), { recursive: true });
-  fs.writeFileSync(path.join(mod, 'module.json'), JSON.stringify({ key: 'ui-design', default: true, contributes: { skills: ['sample'] } }));
+  fs.writeFileSync(path.join(mod, 'module.json'), JSON.stringify({ key: 'design-styles', default: false, contributes: { skills: ['sample'] } }));
+  const enable = (dir) => { fs.mkdirSync(path.join(dir, 'config'), { recursive: true }); fs.writeFileSync(path.join(dir, 'config', 'modules.json'), JSON.stringify({ modules: { 'design-styles': true } })); return dir; };
   const pre = read(path.join(SKILLS, 'PREAMBLE.md'));
   fs.writeFileSync(path.join(mod, 'skills', 'vendor', 'sample', 'SKILL.md'), `---\nname: sample\n---\n\n${pre}\nupstream body\n`);
   fs.writeFileSync(path.join(mod, 'skills', 'vendor', 'sample', 'PROVENANCE.md'), '---\nname: sample\nlicence: MIT\nscanVerdict: clean\n---\n');
   fs.writeFileSync(path.join(mod, 'skills', 'vendor', 'sample', 'LICENSE'), 'MIT\n');
 
-  const on = fs.mkdtempSync(path.join(os.tmpdir(), 'ui-skills-inst-'));
+  const on = enable(fs.mkdtempSync(path.join(os.tmpdir(), 'ui-skills-inst-')));
   const resOn = materialize.materializeClaude({ coreRoot: core, instanceDir: on, dryRun: false });
   assert.equal(resOn.moduleSkills, 3);
   for (const f of ['SKILL.md', 'PROVENANCE.md', 'LICENSE']) assert.ok(fs.existsSync(path.join(on, '.claude', 'skills', 'sample', f)), `materialised ${f}`);
   assert.ok(read(path.join(on, '.claude', 'skills', 'sample', 'SKILL.md')).includes(policy.preamble.begin), 'the preamble survives materialisation');
 
-  const off = fs.mkdtempSync(path.join(os.tmpdir(), 'ui-skills-inst-'));
-  fs.mkdirSync(path.join(off, 'config'), { recursive: true });
-  fs.writeFileSync(path.join(off, 'config', 'modules.json'), JSON.stringify({ modules: { 'ui-design': false } }));
+  const off = fs.mkdtempSync(path.join(os.tmpdir(), 'ui-skills-inst-')); // no config/modules.json: the module's own default, off
   const resOff = materialize.materializeClaude({ coreRoot: core, instanceDir: off, dryRun: false });
   assert.equal(resOff.moduleSkills, 0);
-  assert.ok(!fs.existsSync(path.join(off, '.claude', 'skills', 'sample')), 'disabling the module withdraws the skill');
+  assert.ok(!fs.existsSync(path.join(off, '.claude', 'skills', 'sample')), 'a default-config instance never receives the skill');
   assert.deepEqual(resOff.excludedSkills, ['sample']);
 
   // the policy holds at COPY time too, read from this module's own policy.json: a
   // dangerous verdict never lands, whatever the CI test would have said
   fs.copyFileSync(path.join(SKILLS, 'policy.json'), path.join(mod, 'skills', 'policy.json'));
   fs.writeFileSync(path.join(mod, 'skills', 'vendor', 'sample', 'PROVENANCE.md'), '---\nname: sample\nlicence: MIT\nscanVerdict: dangerous\n---\n');
-  const refusedInst = fs.mkdtempSync(path.join(os.tmpdir(), 'ui-skills-inst-'));
+  const refusedInst = enable(fs.mkdtempSync(path.join(os.tmpdir(), 'ui-skills-inst-')));
   const resRefused = materialize.materializeClaude({ coreRoot: core, instanceDir: refusedInst, dryRun: false });
   assert.equal(resRefused.moduleSkills, 0);
   assert.ok(!fs.existsSync(path.join(refusedInst, '.claude', 'skills', 'sample')), 'a dangerous verdict is refused at copy time');
@@ -438,6 +446,10 @@ test('/design lists every module skill (vendored or in-house) by name, one line
     assert.ok(line, `/design names ${name} on a line of its own`);
   }
   assert.match(design, /playwright/i, '/design names the playwright plugin');
+  // task 1004470: the styles are opt-in, so /design must say so plainly when they are absent
+  assert.match(design, /`design-styles` module/, '/design names the module the styles come from');
+  assert.match(design, /"design-styles": true/, '/design gives the one config line that turns them on');
+  assert.match(design, /If `\.claude\/skills\/` has no `impeccable`[^\n]*design-styles[^\n]*off/i, '/design says in plain words that a missing style skill means the module is off');
 });
 
 test('the skills README and the module CLAUDE.md roster every module skill by name', () => {
@@ -445,7 +457,7 @@ test('the skills README and the module CLAUDE.md roster every module skill by na
   const claude = read(path.join(MODULE, 'CLAUDE.md'));
   for (const name of [...vendoredDirs, ...ownDirs]) {
     assert.ok(readme.includes(`\`${name}\``), `README rosters ${name}`);
-    assert.ok(claude.includes(`\`${name}\``), `modules/ui-design/CLAUDE.md names ${name}`);
+    assert.ok(claude.includes(`\`${name}\``), `modules/design-styles/CLAUDE.md names ${name}`);
   }
   assert.ok(readme.includes('policy.json') && readme.includes('PREAMBLE.md') && readme.includes('PROVENANCE.md'));
   assert.ok(readme.includes('Rebuilt from'), 'the README says what a rebuild carries instead of a sidecar');

package/modules/ui-design/skills/design-taste-frontend-v1/SKILL.md

@@ -1,135 +0,0 @@
----
-name: design-taste-frontend-v1
-description: >-
-  The earlier generation of the taste skill, kept under its own name so a task or builder that asks for it
-  gets exactly this behaviour while the default (design-taste-frontend) evolves separately. A fixed triple of
-  dials, the layout bans, full interaction cycles, and a named vocabulary of premium patterns. Triggers on
-  "design-taste-frontend-v1", "the fixed dials", "the pattern vocabulary".
-plain: >-
-  The earlier version of the landing-page style guide, kept so work that asked for it gets exactly the same results.
-reach-for: >-
-  Only when a task asks for this older version by name.
-cost: >-
-  Uses your session. It changes the page, and you check it on a preview.
----
-
-<!-- BEGIN PLATFORM PREAMBLE · ui-design module · one block, byte-identical in every skill the module ships (vendored or rebuilt in-house) so an upstream refresh is a three-way merge; the source is modules/ui-design/skills/PREAMBLE.md and tests/ui_design_skills.mjs fails on drift -->
-> **Platform preamble — read before any rule below.** This skill ships with the `ui-design` module (vendored from a scanned origin, or rebuilt in-house from a spec) and runs INSIDE an instance's world, which it reads first and never overrides.
->
-> 1. **Load the world before any taste rule.** `config/branding.json` over `config/branding.neutral.json` (`theme.ui` is the fifteen tokens: <redacted> colours and two font stacks), `config/design-tokens.json` over `config/design-tokens.neutral.json`, and `DESIGN.md` at the repo root: the instance's palette and derived tiers, faces, materials, motion grammar, components, and its Do's and Don'ts. Where an instance has no `DESIGN.md`, the neutral pack is the world and the platform floors in item 6 are the whole rulebook; say so and build to them. Never invent a palette.
-> 2. **The fifteen-token contract is the only colour source.** Every colour is a `var()` or a `color-mix()` of the fifteen; the only legal literal is pure black or white with alpha as a scrim, mask or halo. No page `:root` (page tokens live on `body`), and every dark rule is written twice: `:root[data-mode="dark"]` and its `prefers-color-scheme` twin.
-> 3. **A style skill produces variants INSIDE that world, never a second world.** The look this skill carries (its palette, faces, materials, mood boards) is a reference for composition and craft; the instance's tokens and faces replace it. Changing the world is the owner's decision and an ADR, not a session's taste.
-> 4. **Images are for hero plates and hero objects only.** UI is built from templates and the instance's world, not painted; any image-generation step below applies to text-free plates and hero objects, never to controls, cards, text, or a screenshot of a screen.
-> 5. **The instance's taste bans apply and win.** Read them from its `DESIGN.md`. Cloud Bongos's own (no em dash or en dash in visible copy, no emoji, no gradient text, no three-equal-card row, no fake screenshot built from divs) are that instance's, not the module's; where this skill's rules conflict with an instance's bans, the instance wins.
-> 6. **The platform floors hold on every instance** and a `DESIGN.md` may tighten them, never loosen them: every control clears 24px on both sides (primary pills 46–48px); AA in both modes (4.5:1 body text, 3:1 large text and non-text) measured from the real stylesheet; and the Kill Switch, `@media (prefers-reduced-motion: reduce)` at the foot of the token layer killing every animation and transition, no motion authored in JavaScript, and a rest frame that is a complete composition on its own.
-> 7. **Look before you ship.** Render the real surface through the module's kit before and after (`/design` Step 2 and `docs/recipes/ui-look-before-you-ship.md`: every state at 1440 / 390 / 320 in dark and light, audited against the floors); a page with no states file gets one first, and new interactive code ships with a pin in the page's own test file.
->
-> The rules below are the skill's own. A vendored copy carries a `PROVENANCE.md` beside this file naming the origin, the pinned commit, the licence and the scan verdict it was vendored under; an in-house rebuild names its rebuild spec and its ADR in the section right after this block.
-<!-- END PLATFORM PREAMBLE -->
-
-## Rebuilt from
-
-This skill is an **in-house rebuild**, not a vendored copy. Its documented functionality comes from `Leonxlnx/taste-skill` @ `<redacted>` (MIT; the `taste-skill-v1` entry), which `/scan-before-install` reduced to `dangerous` at the default tier on 2026-08-28, so under [ADR 0198](../../../../docs/adr/0198-third-party-skill-vendoring-policy.md) it could land only as a REBUILD-SPEC. The spec is the body of [task 1003325](https://cloudbongos.com/builders#/task/1003325); this file implements its requirements from scratch, **no upstream bytes consulted or copied**; the landing shape is [ADR 0220](../../../../docs/adr/0220-an-in-house-rebuilt-skill-is-a-first-party-skill.md).
-
-What changed in translation, on purpose: the upstream generation was written for a component framework with a motion library; a platform surface here is static markup, one sheet and the instance's transforms, so the stack conventions are restated for that and **every motion rule lives inside the Kill Switch** (the spring, the magnetic hover and the shared-element transition, which need script, are named as not available rather than quietly kept). The typography and colour rules are read **against the instance's pack**: the pack's faces are the faces and the pack's accent is the accent, whatever this skill would have preferred. Imagery follows the owner's rule (hero plates and hero objects only).
-
-## Why v1 is kept
-
-The default skill (`design-taste-frontend`) reads the brief, states a design read and sets its dials from presets. This generation does something narrower and more predictable: it starts from a **fixed baseline** and adapts it in conversation, and it carries a **vocabulary** the default folded into its steps. A task that says "v1" means this file, and this file does not change when the default does. If both are in front of you and the task names neither, use the default.
-
-## The baseline triple
-
-Variance **6**, motion **4**, density **5**. Fixed. Adapt them **conversationally**: when the person you are working with says "calmer", motion drops one; "busier" raises density one; "more editorial" raises variance one. Say the new triple each time it moves. Do not ask anyone to edit this file to change a dial, and do not edit it yourself for a session: the triple is the skill's baseline, the conversation is the override.
-
-The motion value is clamped by the world before the dial applies (the chrome world: ambient loops at 20s or slower, one authored arrival, everything dead under reduced motion), and motion 0 is what every page becomes under `prefers-reduced-motion`, so the rest frame is designed first.
-
-## Stack conventions for a served surface
-
-- **Check the surface's stack before importing anything**: the instance's `package.json`, the directory's nested `CLAUDE.md`, the sheet the page already loads. A platform surface is static HTML served through the instance's transforms, one sheet, and script only for live data (`createElement` / `textContent`, never `innerHTML`). This skill introduces no framework and no library.
-- **If a package is missing, print the install command and stop.** Adding a dependency is a task decision, not a taste decision; the ship notes carry the command, the claim's owner takes it.
-- **Static markup by default; script isolated to leaf behaviour** (a disclosure, a live refresh) and never to motion, because script motion escapes the Kill Switch.
-- **Utility CSS is not assumed.** If a surface already uses one, read its version from the manifest before writing a class; if it does not, write the world's tokens straight.
-- **Breakpoints are the world's** (one, at 900px in the chrome world) and the kit's three widths (1440 / 390 / 320) are the proof; the container is `spacing.container`; a full-height section is the world's floored stage or `100dvh`, never `100vh`.
-
-## Typography rules
-
-- **Display type is large and tight-tracked**: the pack's display face at the world's display weight and tracking (the chrome world: Manrope 300, `-0.042em`, lowercase). A display line is drawing, not a slogan.
-- **Body measure is capped near 65 characters** (`max-width: 62ch` on prose; the chrome world's bands cap at 56 to 62ch).
-- **The pack's body face is the UI face.** A default UI sans is discouraged for premium work only where the pack does not name it; where the pack does, the pack wins.
-- **Serif is not a UI face** on a working surface (a ledger, a settings page, a form). A look from `modules/ui-design/styles/` that carries a serif carries it for display, and the body stack decides the rest.
-- Every real number is `font-variant-numeric: tabular-nums`; a figure that refreshes must not reflow the composition.
-
-## Colour rules
-
-- **One accent, the pack's,** spent only on the pressable and the live (the chrome world's One Warm Thing Rule). Under 80% saturation is the pack author's business, not this page's: the accent is not adjusted per page.
-- **No purple-to-blue glow aesthetic**, no neon-on-near-black HUD, no gradient text. These are bans whichever pack is on.
-- **One palette per project** means the pack, and the pack's neutral ramp is the only ramp: no warm grey on one band and cool grey on the next, because there is only `bg`, `bg-card`, `bg-deep`, `bg-frame` and the inks.
-- Every colour is a `var()` or a `color-mix()` of the fifteen; the dark twin is written twice; a literal is pure black or white with alpha as a scrim, mask or halo, and nothing else.
-
-## Emoji and icons
-
-- **No emoji** in code, markup, copy or alt text. Not as a bullet, not as a status glyph, not in a button label. Cloud Bongos's `DESIGN.md` bans it by name; the default holds on every instance.
-- **Icons come from one small allowed set of families, at one standardised stroke width.** The allowed set on a platform surface is: the world's inline mark (the chrome world's bongo-pair SVG), and one hairline glyph family drawn at a single stroke (`1.5px`, `stroke-linecap: round`) for the few glyphs a page needs (a chevron, an arrow, a magnifier, a close mark). Never two families on one page, never a thick default icon set, never a hand-drawn path introduced for one page. Where a world names its own family, that family is the set.
-- An icon is never the only carrier of meaning: the label is the text, the glyph is the pointer.
-
-## Layout bans
-
-- **No centred hero above variance 5.** At the baseline the hero is asymmetric: the type on one side, the object (a plate, by token) or air on the other.
-- **No three equal feature cards.** Three unequal objects at three sizes read as a constellation; three equal boxes read as a rank, and the chrome world bans the row by name.
-- **No boxed card containers above density 6.** Content is separated by hairlines (`rule-soft`) and negative space; a card is for a surface that carries its own elevation vocabulary, and the chrome world has none.
-
-## Full interaction cycles, not the successful state only
-
-Every interactive component ships all of its states, and the page's states file (`<page>.states.json`) names them so the kit renders each:
-
-- **Loading**: a skeleton shaped like the layout it replaces (the same columns, the same row heights, the ground tone `bg-deep`), never a spinner.
-- **Empty**: a composed empty state that says what will be here and offers the one next action; a feed with nothing collapses its rows, its meter and its sub-line rather than promising six rows that never come.
-- **Error**: inline, beside the thing that failed, in the world's `err` state colour on text, never a modal for a field.
-- **Press**: tactile feedback on `:active` (`transform: scale(.98)` on the state curve); **focus** with the world's two-tone ring; **hover** on anything pressable.
-- Every control clears the 24px floor in both axes, footer links included; primary pills sit at 46 to 48px.
-
-## Motion rules
-
-- **The world's curves are the easing.** Where a world names an entrance curve (the chrome world's exponential ease-out, `cubic-bezier(.16, 1, .3, 1)`) and a state curve, use them; where it names none, a curve with a little overshoot for entrances and a plain ease-out for states. No spring library: a spring is script, and script motion is banned.
-- **Staggered list reveals** are CSS: `animation-delay` from an `--i` custom property set in the markup (`style="--i: 3"`), never a script loop.
-- **Shared-element layout transitions and magnetic hover are not available on this platform.** Both need script driving continuous values; the first is replaced by an instant state change under a 200ms crossfade, the second by the world's hover lift (a 6 to 8px `translateY` over 400ms).
-- Everything is dead under the Kill Switch and the rest frame is the composition.
-
-## Performance guardrails
-
-- Animate **`transform` and `opacity` only** (and `filter` on a plate where the world does). Never a layout property.
-- **Grain and noise overlays** exist only where the world has that material (the expedition look's halftone screen is a look's material, not a default); when they do, they sit on a fixed, `pointer-events: none` pseudo-element.
-- **No arbitrary `z-index`.** A named scale on `body` (`--z-bar`, `--z-band`, `--z-dialog`), reserved for systemic layers.
-- **Full-height sections use dynamic viewport height** (`100dvh`, or the world's floored stage `max(100dvh, 900px)`), never `100vh`.
-- `backdrop-filter` only on a fixed or sticky layer, and only where the world's glass has a blur (light glass over paper is a tint, blur 0).
-
-## The vocabulary of premium patterns
-
-Named so a brief can ask for one and a review can name what is missing. Each is a pattern inside the world, not a component to import:
-
-- **The two-line display**: the h1 as two lines, the second indented, lowercase where the world's display voice is.
-- **The tabular figure**: a real number from the ledger at display weight, tabular, with a caption.
-- **The hairline ledger**: rows built from 1px top rules, baseline-aligned columns, no borders, no boxes.
-- **The door pill**: two equal actions joined in one glass bar, the primary carrying the accent with the world's `accent-on` ink.
-- **The lit rail step**: one step of a pipeline lit in the accent (hairline, dot, name), the rest in ink; exactly one is live.
-- **The leader-line callout**: a 1px diagonal line, a figure, a caption; real numbers only, at most two per surface.
-- **The feathered patch**: a soft patch of the ground behind glyphs that sit on art, so a ground never cuts a hard-edged box out of a plate.
-- **The contact shadow**: the one shadow in a world, and it belongs to the object, not to a component.
-- **The hairline band menu**: a disclosure that unfolds as a full-width band under the bar, over the page, closed by one hairline.
-- **The poster card**: a modal on the card ground closed by one hairline, its regions flat children in the brief's order, every region hiding on null.
-- **Pill or nothing**: every control a full pill (999px), and the one exception the world names.
-
-## The tile-grid archetypes
-
-Motion-first tile grids, each with its collapse under the world's breakpoint:
-
-- **The constellation**: three different objects at deliberately unequal sizes and baseline drops; hover lifts one. Collapses to a vertical stack at unequal sizes, never to three equal circles.
-- **The dense auto-flow**: `grid-auto-flow: dense` with interlocking spans and **zero empty cells**, three to five intentional tiles over eight cluttered ones. Collapses to one column; spans reset.
-- **The hairline ledger grid**: fixed columns (`88px 1fr 152px 96px` in the chrome world), 1px top rules, tabular ids. Collapses to one column per row, the id and the title first.
-- **The five-column rail**: five beats on one rail, one lit; collapses to one column with the hairlines kept.
-
-## Pre-flight (short)
-
-- [ ] **Mobile collapse** looked at in the 390 and 320 shots; nothing scrolls sideways; every archetype collapsed the way its entry says.
-- [ ] **Effect cleanup**: nothing to clean, because nothing moves in script; any live-refresh timer is cleared on navigation.
-- [ ] **State coverage**: every state in the page's states file rendered by `node modules/ui-design/kit/render.js --page <path>` and ALL CLEAN; the interaction contract PASS under `probe.js`.