@struq/skill 0.4.3 → 0.5.1

package/README.md

@@ -1,8 +1,8 @@
 <h1 align="center">
-  <a href="https://struq.nl/skill">
+  <a href="https://struq.app/skill">
     <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqnl/struq-design@main/assets/readme/banner-dark.svg">
-      <img alt="Struq skill: studio-grade sites from the AI you already use." src="https://cdn.jsdelivr.net/gh/struqnl/struq-design@main/assets/readme/banner-light.svg" width="100%">
+      <source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@main/assets/readme/banner-dark.svg">
+      <img alt="Struq skill: studio-grade sites from the AI you already use." src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@main/assets/readme/banner-light.svg" width="100%">
     </picture>
   </a>
 </h1>
@@ -12,13 +12,13 @@
 </p>
 
 <p align="center">
-  <a href="https://struq.nl/skill">Website</a>
+  <a href="https://struq.app/skill">Website</a>
   &nbsp;&middot;&nbsp;
   <a href="https://www.npmjs.com/package/@struq/skill">npm</a>
   &nbsp;&middot;&nbsp;
   <a href="skills/struq/blocks/CATALOG.md">The blocks</a>
   &nbsp;&middot;&nbsp;
-  <a href="https://struq.nl/iconen">Struq Icons</a>
+  <a href="https://struq.app/icons">Struq Icons</a>
   &nbsp;&middot;&nbsp;
   <a href="CHANGELOG.md">Changelog</a>
 </p>
@@ -45,7 +45,7 @@ It plans the site, stops once to show you the plan, and builds only after you sa
 
 <br>
 
-## <picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqnl/struq-design@main/assets/readme/h/agents-dark.svg"><img src="https://cdn.jsdelivr.net/gh/struqnl/struq-design@main/assets/readme/h/agents-light.svg" width="26" height="26" alt=""></picture> Same brief, two agents
+## <picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@main/assets/readme/h/agents-dark.svg"><img src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@main/assets/readme/h/agents-light.svg" width="26" height="26" alt=""></picture> Same brief, two agents
 
 Three briefs, each built twice by the same model with the same materials: once as a plain coding agent, once with `/struq`. Look at the left column first.
 
@@ -53,7 +53,7 @@ Three briefs, each built twice by the same model with the same materials: once a
 
 | Plain agent | With the Struq skill |
 |---|---|
-| ![Tidewater, built by a plain agent](https://cdn.jsdelivr.net/gh/struqnl/struq-design@main/docs/compare/saas-plain.webp) | ![Tidewater, built with the Struq skill](https://cdn.jsdelivr.net/gh/struqnl/struq-design@main/docs/compare/saas-struq.webp) |
+| ![Tidewater, built by a plain agent](https://cdn.jsdelivr.net/gh/struqapp/struq-design@main/docs/compare/saas-plain.webp) | ![Tidewater, built with the Struq skill](https://cdn.jsdelivr.net/gh/struqapp/struq-design@main/docs/compare/saas-struq.webp) |
 
 <details>
 <summary><b>Seen the left one before?</b></summary>
@@ -67,7 +67,7 @@ You have. It is the dark developer-tool template, item for item: the green glow,
 
 | Plain agent | With the Struq skill |
 |---|---|
-| ![Ana Ferreira, built by a plain agent](https://cdn.jsdelivr.net/gh/struqnl/struq-design@main/docs/compare/ceramics-plain.webp) | ![Ana Ferreira, built with the Struq skill](https://cdn.jsdelivr.net/gh/struqnl/struq-design@main/docs/compare/ceramics-struq.webp) |
+| ![Ana Ferreira, built by a plain agent](https://cdn.jsdelivr.net/gh/struqapp/struq-design@main/docs/compare/ceramics-plain.webp) | ![Ana Ferreira, built with the Struq skill](https://cdn.jsdelivr.net/gh/struqapp/struq-design@main/docs/compare/ceramics-struq.webp) |
 
 <details>
 <summary><b>Where did "12 restaurants" come from?</b></summary>
@@ -81,7 +81,7 @@ Nowhere. The brief gave no figures, no quote and no bio, and the plain agent wro
 
 | Plain agent | With the Struq skill |
 |---|---|
-| ![Vela Mono, built by a plain agent](https://cdn.jsdelivr.net/gh/struqnl/struq-design@main/docs/compare/ebike-plain.webp) | ![Vela Mono, built with the Struq skill](https://cdn.jsdelivr.net/gh/struqnl/struq-design@main/docs/compare/ebike-struq.webp) |
+| ![Vela Mono, built by a plain agent](https://cdn.jsdelivr.net/gh/struqapp/struq-design@main/docs/compare/ebike-plain.webp) | ![Vela Mono, built with the Struq skill](https://cdn.jsdelivr.net/gh/struqapp/struq-design@main/docs/compare/ebike-struq.webp) |
 
 <details>
 <summary><b>Both built a pinned 3D bike. So what is the difference?</b></summary>
@@ -95,13 +95,13 @@ Where the Struq skill still loses: craft. The plain builds aim lower and break l
 
 <br>
 
-## <picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqnl/struq-design@main/assets/readme/h/layers-dark.svg"><img src="https://cdn.jsdelivr.net/gh/struqnl/struq-design@main/assets/readme/h/layers-light.svg" width="26" height="26" alt=""></picture> The blocks carry the motion
+## <picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@main/assets/readme/h/layers-dark.svg"><img src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@main/assets/readme/h/layers-light.svg" width="26" height="26" alt=""></picture> The blocks carry the motion
 
 Your agent picks the direction, sets the order and writes the copy. The motion comes from Struq's own catalogue: 44 admitted blocks, each a real React file with three variants, working in light and dark.
 
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqnl/struq-design@main/assets/readme/blocks-dark.webp">
-  <img alt="Six Struq blocks playing at once: a preloader, a hero, a page transition, a manifesto scrub, an image growing to full bleed and a WebGL background." src="https://cdn.jsdelivr.net/gh/struqnl/struq-design@main/assets/readme/blocks-light.webp" width="100%">
+  <source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@main/assets/readme/blocks-dark.webp">
+  <img alt="Six Struq blocks playing at once: a preloader, a hero, a page transition, a manifesto scrub, an image growing to full bleed and a WebGL background." src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@main/assets/readme/blocks-light.webp" width="100%">
 </picture>
 
 <details>
@@ -126,11 +126,11 @@ Each one with its files, packages, props and variants: [the catalogue](skills/st
 
 <br>
 
-## <picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqnl/struq-design@main/assets/readme/h/brush-dark.svg"><img src="https://cdn.jsdelivr.net/gh/struqnl/struq-design@main/assets/readme/h/brush-light.svg" width="26" height="26" alt=""></picture> What is in the skill
+## <picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@main/assets/readme/h/brush-dark.svg"><img src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@main/assets/readme/h/brush-light.svg" width="26" height="26" alt=""></picture> What is in the skill
 
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqnl/struq-design@main/assets/readme/kit-dark.svg">
-  <img alt="Six parts: blocks, direction, photos, craft, a check, and the Struq MCP." src="https://cdn.jsdelivr.net/gh/struqnl/struq-design@main/assets/readme/kit-light.svg" width="100%">
+  <source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@main/assets/readme/kit-dark.svg">
+  <img alt="Six parts: blocks, direction, photos, craft, a check, and the Struq MCP." src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@main/assets/readme/kit-light.svg" width="100%">
 </picture>
 
 <details>
@@ -152,9 +152,9 @@ Stack: Next.js App Router and Tailwind v4 (Vite by hand, see `references/stack-t
 
 <br>
 
-## <picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqnl/struq-design@main/assets/readme/h/compass-dark.svg"><img src="https://cdn.jsdelivr.net/gh/struqnl/struq-design@main/assets/readme/h/compass-light.svg" width="26" height="26" alt=""></picture> How a build runs
+## <picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@main/assets/readme/h/compass-dark.svg"><img src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@main/assets/readme/h/compass-light.svg" width="26" height="26" alt=""></picture> How a build runs
 
-- **Direction.** A palette, a type pairing and a photo pack from Struq's canon, and the order of the site from the catalogue: arrival, header, hero, manifesto, about, approach, work, closing call to action, footer. All of it in one `STRUQ.md`.
+- **Direction.** The site is planned as one film: a motion language (weight, cut or curtain), one idea, one motif, and a storyboard of scenes with the handovers between them. Then a palette, a type pairing and a photo pack from Struq's canon. All of it in one `STRUQ.md`, and no block goes in until that plan passes its own check.
 - **One stop.** It shows you that plan and asks once: approve it, and send a logo, photos or real numbers if you have them. It does not ask again.
 - **Blocks.** It installs each block with everything it imports, writes the tokens and fonts, and composes the page with your real copy.
 - **Check.** `check.mjs` runs until the page passes. With a browser tool it also looks at the page at phone and desktop width and fixes what it sees.
@@ -170,7 +170,7 @@ In Codex the command is `$struq`; as a Claude Code plugin it is `/struq:struq`.
 
 <br>
 
-## <picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqnl/struq-design@main/assets/readme/h/download-dark.svg"><img src="https://cdn.jsdelivr.net/gh/struqnl/struq-design@main/assets/readme/h/download-light.svg" width="26" height="26" alt=""></picture> Install
+## <picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@main/assets/readme/h/download-dark.svg"><img src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@main/assets/readme/h/download-light.svg" width="26" height="26" alt=""></picture> Install
 
 ```bash
 npx @struq/skill@latest
@@ -188,13 +188,13 @@ npx @struq/skill@latest --claude
 npx @struq/skill@latest --project
 
 # with the open skills CLI, which knows 70+ agents
-npx skills add struqnl/struq-design -g
+npx skills add struqapp/struq-design -g
 ```
 
 As a Claude Code plugin (the command is then `/struq:struq`):
 
 ```text
-/plugin marketplace add struqnl/struq-design
+/plugin marketplace add struqapp/struq-design
 /plugin install struq@struq
 ```
 
@@ -204,11 +204,11 @@ The screenshot step uses whatever browser tool your agent has (Playwright or sim
 
 <br>
 
-## <picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqnl/struq-design@main/assets/readme/h/palette-dark.svg"><img src="https://cdn.jsdelivr.net/gh/struqnl/struq-design@main/assets/readme/h/palette-light.svg" width="26" height="26" alt=""></picture> The icons it reaches for
+## <picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@main/assets/readme/h/palette-dark.svg"><img src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@main/assets/readme/h/palette-light.svg" width="26" height="26" alt=""></picture> The icons it reaches for
 
-Struq builds use [Struq Icons](https://struq.nl/iconen) by default: 182 icons in two tones, and each of the 118 full icons makes one small move under the cursor that says what it does. Every icon on this page is one of them.
+Struq builds use [Struq Icons](https://struq.app/icons) by default: 182 icons in two tones, and each of the 118 full icons makes one small move under the cursor that says what it does. Every icon on this page is one of them.
 
-<a href="https://struq.nl/iconen">
+<a href="https://struq.app/icons">
   <picture>
     <source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/npm/@struq/icons@1/readme/motion-dark.svg">
     <img alt="Eight Struq icons playing their hover motion: lock, delete, settings, mail, history, sound, hint, bug." src="https://cdn.jsdelivr.net/npm/@struq/icons@1/readme/motion-light.svg" width="100%">
@@ -221,18 +221,18 @@ npm install @struq/icons
 
 <br>
 
-## <picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqnl/struq-design@main/assets/readme/h/shield-dark.svg"><img src="https://cdn.jsdelivr.net/gh/struqnl/struq-design@main/assets/readme/h/shield-light.svg" width="26" height="26" alt=""></picture> What it fetches and sends
+## <picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@main/assets/readme/h/shield-dark.svg"><img src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@main/assets/readme/h/shield-light.svg" width="26" height="26" alt=""></picture> What it fetches and sends
 
 The Struq skill is instructions, the block files and five small Node scripts (`blocks.mjs`, `canon.mjs`, `images.mjs`, `check.mjs`, `log.mjs`) that your agent runs in your project. They read and write files there, including a build log, `STRUQ-LOG.md`.
 
 - **Blocks and canon** ship inside the skill. Nothing is fetched to install a block or write the tokens.
 - **Fonts** load from Google Fonts (or Fontshare, for a face that lives there) in the visitor's browser, as on any site with web fonts.
-- **Photos**, for every slot your own photos do not fill: `images.mjs` reads the public pack list at `https://struq.nl/api/media/packs` and downloads the chosen images from `https://struq.nl/media/packs/`. Offline it writes plates graded to your palette instead.
-- **The MCP**, if you connect it: your agent calls Struq's tools with your brief. Nothing else leaves your machine.
+- **Photos**, for every slot your own photos do not fill: `images.mjs` reads the public pack list at `https://struq.app/api/media/packs` and downloads the chosen images from `https://struq.app/media/packs/`, or from the same paths on the old domain when struq.app does not answer. Offline it writes plates graded to your palette instead.
+- **The MCP** (`https://struq.app/api/mcp`), if you connect it: your agent calls Struq's tools with your brief. Nothing else leaves your machine.
 - **The installer** downloads the package from npm, looks for your AI tools' folders in your home folder and copies the skill into them. It sends nothing.
 
 <br>
 
 ## License
 
-MIT. Made by [Struq](https://struq.nl).
+MIT. Made by [Struq](https://struq.app).

package/cli/struq.mjs

@@ -34,7 +34,7 @@ Usage
   npx @struq/skill@latest remove       remove the skill again (takes the same flags)
   npx @struq/skill@latest --help       show this
 
-Run it again at any time to update. More: https://struq.nl/skill
+Run it again at any time to update. More: https://struq.app/skill
 `;
 
 function parse(argv) {
@@ -119,7 +119,7 @@ function run(argv) {
     for (const tool of new Map(list.map(({ tool }) => [tool.label, tool])).values()) {
       out.push(`  ${tool.label.padEnd(15)}${tool.use}`);
     }
-    out.push('', 'Run this again at any time to update. More: https://struq.nl/skill');
+    out.push('', 'Run this again at any time to update. More: https://struq.app/skill');
   }
   process.stdout.write(`${out.join('\n')}\n`);
 }

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@struq/skill",
-  "version": "0.4.3",
+  "version": "0.5.1",
   "description": "Install the free Struq skill into Claude Code, Cursor, Codex and other AI coding tools: websites at the level of a design studio, built by your own AI.",
   "license": "MIT",
-  "author": "Struq (https://struq.nl)",
-  "homepage": "https://struq.nl/skill",
+  "author": "Struq (https://struq.app)",
+  "homepage": "https://struq.app/skill",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/struqnl/struq-design.git"
+    "url": "git+https://github.com/struqapp/struq-design.git"
   },
-  "bugs": "https://github.com/struqnl/struq-design/issues",
+  "bugs": "https://github.com/struqapp/struq-design/issues",
   "keywords": [
     "agent-skill",
     "skills",
@@ -35,7 +35,7 @@
     "node": ">=18"
   },
   "scripts": {
-    "test": "node --test test/install.test.mjs test/check.test.mjs test/packs.test.mjs test/tokens.test.mjs test/blocks.test.mjs test/plugin.test.mjs",
+    "test": "node --test test/install.test.mjs test/check.test.mjs test/packs.test.mjs test/tokens.test.mjs test/blocks.test.mjs test/gate.test.mjs test/arc.test.mjs test/plugin.test.mjs",
     "release:blocks": "node scripts/release-blocks.mjs",
     "release:plugin": "node scripts/build-plugin.mjs"
   },

package/skills/struq/SKILL.md

@@ -1,23 +1,20 @@
 ---
 name: struq
-description: "Award-tier studio websites for coding agents, built from Struq's catalogue of admitted blocks: preloaders, page transitions, headers, heroes, WebGL backgrounds, showpieces, sections and footers, each with three real variants, judged at FWA level and shipped as files. Struq's palettes and type pairings as one token block, art-directed CC0 photos from the Struq beeldbank, Lenis on one GSAP clock, and a self-check against the AI tells. Works offline from its own copy; uses the Struq MCP (struq_richting, struq_blokken, struq_blok, struq_controle) when connected. Use when designing, building, redesigning, animating or auditing a marketing, studio, agency or portfolio site that must feel cinematic and custom instead of templated. Stack: Next.js App Router + Tailwind v4."
+description: "Award-tier studio websites for coding agents, built from Struq's catalogue of admitted blocks and directed as one film: one idea, one motion language, one motif and one centerpiece, cast into a storyboard before a block is installed. Preloaders, page transitions, headers, heroes, WebGL backgrounds, showpieces, sections and footers, each with real variants, judged at FWA level and shipped as files. Struq's palettes and type pairings as one token block, art-directed CC0 photos from the Struq beeldbank, Lenis on one GSAP clock, and a self-check against the AI tells. Works offline from its own copy; uses the Struq MCP (struq_richting, struq_blokken, struq_blok, struq_controle) when connected. Use when designing, building, redesigning, animating or auditing a marketing, studio, agency or portfolio site that must feel cinematic and custom instead of templated. Stack: Next.js App Router + Tailwind v4."
 argument-hint: "[brief] | redesign <path> | audit <path-or-url> | direct <brief>"
 ---
 
 # Struq
 
-A site looks like a template because every choice in it is the likeliest one. Struq replaces those choices with
-blocks a studio would ship: each one built, reviewed against a named award-tier reference and admitted by hand. Your
-job is the direction, the order, the copy and the seams between blocks. Do not rebuild what a block already does.
-
-`<skill-dir>` is the folder this file is in. The catalogue is [blocks/CATALOG.md](blocks/CATALOG.md); the craft that
-makes the blocks feel high end is [references/craft.md](references/craft.md); the tell list is
-[references/tells.md](references/tells.md).
+A site looks like a template when every choice is the likeliest one, and like a showreel when every slot gets the
+loudest block. Struq casts studio blocks into one film; your job is the treatment, the copy and the seams, never a
+rebuild of what a block does. `<skill-dir>` is this file's folder; the catalogue is [blocks/CATALOG.md](blocks/CATALOG.md),
+a worked treatment per language [references/film.md](references/film.md), the craft [references/craft.md](references/craft.md).
 
 | Invocation | Mode |
 |---|---|
 | `/struq <brief>` | **Build**: the checklist below, start to finish. |
-| `/struq redesign <path>` | Keep the brand, copy and components ([references/triage.md](references/triage.md)); swap in blocks where the page is weakest, then run the checklist from step 3. |
+| `/struq redesign <path>` | Keep the brand, copy and components ([references/triage.md](references/triage.md)); write a treatment of the page as it will be (kept sections as own scenes) and stop once as in step 2, then swap in blocks where the page is weakest and run the checklist from step 3. |
 | `/struq audit <path-or-url>` | Change nothing. Run `check.mjs` (and `struq_controle` when connected), report every FAIL and WARN and the three fixes with the most visual payoff. Never a numeric score. |
 | `/struq direct <brief>` | One continuous WebGL experience across chapters: steps 1 to 4, then [cinematic/README.md](cinematic/README.md). |
 
@@ -36,8 +33,7 @@ For a dashboard or product UI keep the tokens, faces and tells; drop the preload
 
 ## The MCP, or the skill's own copy
 
-The Struq MCP and this skill serve the same blocks and the same derivation. Use the tool when it is connected; the
-offline column does the same from the skill's copy.
+Same blocks, same derivation: use the MCP tool when it is connected, else the offline column from the skill's copy.
 
 | Need | MCP connected | Offline |
 |---|---|---|
@@ -46,8 +42,8 @@ offline column does the same from the skill's copy.
 | A block as files | `struq_blok(slug, variant?)` | `blocks.mjs add <slug>` |
 | The tell check | `struq_controle()`: run its detectors on your own files | `check.mjs` |
 
-Put `struq_richting`'s token block in `app/globals.css` in place of the STRUQ TOKENS block and its font URLs in
-`app/fonts.ts`; drop `struq_blok`'s files into `components/struq/` at the paths it gives. Log each tool call:
+`struq_richting`'s token block replaces STRUQ TOKENS in `app/globals.css`, its font URLs go in `app/fonts.ts`;
+`struq_blok`'s files go into `components/struq/` at their paths. Log each call:
 `node <skill-dir>/scripts/log.mjs mcp <tool> --note "<what you took>"`. Run `check.mjs` either way.
 
 ## Build checklist
@@ -59,107 +55,168 @@ their own). `check.mjs` fails while a line is open or a ticked step has no entry
 ```
 ## Build checklist
 - [ ] 1 Project: Next.js App Router + Tailwind v4; blocks.mjs init printed OK
-- [ ] 2 Direction and approval: palette, pairing, pack and the block order in STRUQ.md; the one stop sent and answered
+- [ ] 2 Treatment and approval: the treatment in STRUQ.md, the plan check at PLAN: PASS; the one stop sent and answered
 - [ ] 3 Canon: the token block and fonts written (canon.mjs palette and type, or struq_richting)
 - [ ] 4 Images: images.mjs --brief printed OK; only photos whose alt fits the client
-- [ ] 5 Blocks: every block on the order installed and composed in app/page.tsx with real copy
+- [ ] 5 Scenes: frames and the centerpiece installed, every other scene built as the storyboard says, composed in app/page.tsx with real copy
 - [ ] 6 Build: npm run build passes
 - [ ] 7 Look: 390 and 1440 screenshots and one full scroll, fixes made (or "Verify: not seen, no browser")
 - [ ] 8 Check: check.mjs prints RESULT: PASS
 ```
 
 **1 Project.** Empty folder: `npx create-next-app@latest . --ts --tailwind --app --eslint --yes`, then
-`node <skill-dir>/scripts/blocks.mjs init`. It copies the kit to `components/struq/kit/`, writes the layout (the
-`sq-js` script before paint, the font links, `data-blocks` on `<body>`, `SmoothScroll`), `globals.css` (the kit
-import, the theme names, the STRUQ TOKENS block) and `fonts.ts` over a starter, and installs gsap, @gsap/react and
-lenis. Your own layout or stylesheet is never overwritten: merge from `recipes/app/`.
-
-**2 Direction and the one stop.** Pick from the canon, never invent a palette or pairing while one fits. Palette by
-the brief's mood, then its sector; a palette marked "kept out" (blue, purple, teal) only for a brand that is that
-colour, declared as `Cool hue: declared because <brand colour>`. The brand's own colours and faces beat the canon:
-write them into the same token names. Pairing by temperament: Fraunces (serif-editorial) warm and premium, Newsreader
-literate, Sora calm and architectural, Urbanist soft and current, Bodoni Moda for fashion, Big Shoulders
-(condensed-poster) for a campaign at poster scale, Unbounded for a wide agency voice. Then choose the order (below)
-and write the top of STRUQ.md:
+`node <skill-dir>/scripts/blocks.mjs init`: the kit in `components/struq/kit/`, the layout (`sq-js` before paint,
+font links, `data-blocks` on `<body>`, `SmoothScroll`), `globals.css` (kit import, theme names, STRUQ TOKENS),
+`fonts.ts`, gsap, @gsap/react and lenis. It never overwrites your layout or stylesheet: merge from `recipes/app/`.
+
+**2 Treatment and the one stop.** Pick from the canon, never invent a palette or pairing while one fits: palette by
+mood, then sector; a "kept out" palette (blue, purple, teal) only for a brand of that colour, declared as `Cool hue:
+declared because <brand colour>`; the brand's own colours and faces beat the canon, in the same token names. Pairing
+by temperament: Fraunces (serif-editorial) warm and premium, Newsreader literate, Sora calm and architectural,
+Urbanist soft and current, Bodoni Moda for fashion, Big Shoulders (condensed-poster) for a campaign at poster scale,
+Unbounded for a wide agency voice. Pick the language (The film, below), then run
+`node <skill-dir>/scripts/blocks.mjs arc <language>` and paste the Tone arc and Storyboard it prints into the
+treatment at the top of STRUQ.md. Fill every `<...>`, one pick per line (`or:` lists what else fits; swap at most one
+scene; a block the user names goes in first):
 
 ```
 # STRUQ.md: <name>
 Brief: <one line: what, for whom, where>
-Idea: <the one idea the site is about>
+Idea: <a point of view in one sentence, never a description of the client: what a visitor believes when they leave>
+Language: <weight | cut | curtain> (<the client's sector, or the brief's own words for another feel>)
+Motif: <line | frame | aperture | cut | word | field>: <what it is in this client's world and how it changes down the page>
+Lexicon: <three to five working words of the client's trade (a material, a part, a tool, a unit), never the brief repeated; every label, counter and caption uses these, no film or studio jargon the client does not own>
 Palette: <id> (<mood>)
 Type: <pairing id>: <display> + <body>
 Images: pack <slug> (or the client's photos, then pack <slug>)
-Order: <block slug:variant>, <block slug:variant>, ...
+Centerpiece: <block>: <why this is this site's one moment>
+Tone arc: <as blocks.mjs arc printed it>
+Storyboard:
+1. Arrival   (frame)  <preloader of the language> | lands on: <what>
+2. Opening   (loud)   <block:variant> | on screen: <...> | enters: <...> | hands over: <...>
+3. <scene>   (quiet)  <block:variant or kit scene> | on screen: <...> | enters: <...> | hands over: <...>
+...
+N. Close     (quiet)  <block or kit scene> | echoes the opening: <how> | footer: <block>
 Assumptions: <every drafted line and every fact left out>
 Verify: <filled in at step 7>
 ```
 
-Then **stop once**, in the user's language: the plan in five lines (idea, palette, type, pack, order) and
-"Akkoord? Heb je een logo, foto's of echte cijfers, stuur ze nu." (English: "Approve? If you have a logo, photos or
-real numbers, send them now."). The build request is not the approval. Log the reply word for word:
-`log.mjs "Step 2 Approval" "Asked: ..." "Reply: \"<their words>\""`. Any yes builds the plan; what they send replaces
-the matching pick; a veto changes only what it names. Never ask a second time. When no pack shows the client's own
-product, add: "Ik heb geen foto's van je <product>: stuur ze, dan komen ze in de hero."
-
-**3 Canon.** `canon.mjs palette <id>` and `canon.mjs type <id>` rewrite the one STRUQ TOKENS block and `app/fonts.ts`:
-the surface ladder, the field and inverse roles, `--photo-ground`, the accent's ink, the pairing's display weight and
-faces, and each Google face asked for its real weights. It is the block Struq's lab judged every block in.
-
-**4 Images.** `node <skill-dir>/scripts/images.mjs --brief "<the brief, in the user's words>"` picks the pack, keeps
-only the photos whose alt fits the client, downloads and verifies them to `public/images/` and writes
-`lib/struq-images.ts` (`images.hero`, `.band`, `.card`, `.column`, `.detail`, `.backdrop`, `imageCredit`, `imageFit`).
-`images.mjs --list` shows every pack. Read the alts before you place a photo; with `imageFit` "none" use no photos and
-let a background block carry the hero. Offline it writes plates graded to the palette. Set the title, description and
-`lang` in the layout.
-
-**5 Blocks.** Install the order with `blocks.mjs add <slug> ...` (or `struq_blok`), read each block's file header for
-its props, variants and how it mounts, and compose `app/page.tsx` with the brief's real copy. Glue between blocks uses
-the kit (`Reveal`, `MediaFrame`, `SplitHeadline`, `MagneticButton`) and the craft rules, never a fresh motion system.
-
-**6 to 8.** `npm run build` passes (fix your code, never delete a block to get green). Look at the production build
-(`npx next start -p 4321`) at 390 and 1440 and scroll it once: the preloader lands on the hero, every frame fills, each
-pin engages and releases without a jump, nothing overflows at 390, scrolling back reverses. Never claim you saw what
-you did not. Then `check.mjs` until `RESULT: PASS`.
-
-## The order of a studio site
-
-Read top to bottom; each line is a slot with the blocks that fill it. Seven to nine slots, not all of them every time.
-
-1. **Arrival, once:** a preloader on the first visit (`preloader-wordmark`, `-slices`, `-gate`, `-stack`) and the
-   page transition of the same language on every navigation (`page-transition-slices`, `-gate`, `-stack`; mount it in
-   the layout). Slices with slices, gate with gate, stack with stack: they share one handover.
-2. **Header:** `header-bar` (quiet, settle, split) or `menu-curtain` for a full-screen menu. Sections under it say
-   their ground with `data-bar-tone`.
-3. **Hero:** `hero-still` (one photo, calm side measured), `hero-framed` (the print on the wall), `hero-split` (a
-   seam), `hero-index` (the work list as the first screen), `hero-poster` (type as poster), `hero-opener` (full bleed
-   with the WebGL layer), or a background block (`background-aurora`, `-silk`, `-facets`) when the hero is type on a
-   live field.
-4. **Manifesto:** `manifesto`, `manifesto-scrub`, `velocity-type` or `reveals`: the one statement, given a screen.
-5. **About:** `about-studio` or `split-pair`.
-6. **Approach:** `approach`, `sticky-chapters`, `panel-accordion` or `fill-rows`. Never numbered steps.
-7. **Work:** `project-stack`, `hover-list`, `image-trail`, `film-strip`, `grid-assembly`, `fanned-cards`, or a scene
-   move (`image-to-fullbleed`, `panel-wipe`, `zoom-through`, `scrub-connector`, `pixel-resolve`) between two slots.
-8. **Closing call to action:** `cta-closing`, with `contact-form` when the site asks for input.
-9. **Footer:** `footer-reveal`, `footer-contact` or `wordmark-finale`.
-
-**Picking.** One lead move per page, the hero or a work piece, and the rest quieter around it. Never two pinned
-pieces back to back: a plain slot breathes between them. One contrast scene, at most two: wrap a slot in
-`scene-inverse` or `scene-field`. Choose the variant by the brief and the photos, not by novelty: a variant is a
-different composition of the same idea, and every variant works light and dark. Name a block the user asks for first.
-A studio with real project photos leads with work (`hero-index`, `project-stack`); a studio without them leads with
-type and one photo (`hero-poster`, `hero-still`, `manifesto`).
+Run `node <skill-dir>/scripts/check.mjs --plan` and fix every FAIL and every `quiet-is-quiet`, `loud-adjacent` and
+`quiet-share` warning until it prints `PLAN: PASS` without them. `canon.mjs` and `blocks.mjs add` refuse until the
+plan passes and the reply is logged. Then **stop once**, in the user's language, and show the treatment, never block
+slugs: idea, language, motif and centerpiece in plain words; the storyboard as numbered lines, one sentence each of
+what the visitor sees; palette, type and pack on one line; then "Akkoord? Heb je een logo, foto's of echte cijfers,
+stuur ze nu." (English: "Approve? If you have a logo, photos or real numbers, send them now."). The build request is
+not the approval. Log the reply word for word: `log.mjs "Step 2 Approval" "Asked: ..." "Reply: \"<their words>\""`.
+Any yes builds the treatment; what they send replaces the matching pick; a veto changes only what it names. Never
+ask twice. No pack shows the client's product? Add: "Ik heb geen foto's van je <product>: stuur ze, dan komen ze in de hero."
+
+**3 Canon.** `canon.mjs palette <id>` and `canon.mjs type <id>` rewrite the one STRUQ TOKENS block and `app/fonts.ts`.
+
+**4 Images.** `node <skill-dir>/scripts/images.mjs --brief "<the brief, in the user's words>"` keeps only the pack's
+photos whose alt fits the client, verifies them into `public/images/` and writes `lib/struq-images.ts` (`images.hero`,
+`.band`, `.card`, `.column`, `.detail`, `.backdrop`, `imageCredit`, `imageFit`). Read the alts before you place a
+photo; with `imageFit` "none" a background block carries the hero. Title and `lang` go in the layout.
+
+**5 Scenes.** Install the frames and the centerpiece first (`blocks.mjs add <slug>:<variant>` or `struq_blok`), then
+each scene as its storyboard line says, the quiet ones with the kit's four (The film, below). Read each file header
+for its props and how it mounts; fill every label, counter and caption from the lexicon; wrap the tone arc's ink or
+field scenes in `scene-inverse` or `scene-field` (a kit scene takes it as `className`). Glue and an own scene use
+`Reveal`, `MediaFrame` and `SplitHeadline`, and an own scene's root carries `data-scene="<name>"`.
+
+**6 to 8.** `npm run build` passes (fix your code; never delete a block for green). View `npx next start -p 4321` at
+390 and 1440, scroll once: the preloader lands on the hero, every frame fills, each pin engages and lets go without a
+jump, nothing overflows, scrolling back reverses. Never claim what you did not see. Then `check.mjs` to `RESULT: PASS`.
+
+## The film
+
+One film, not a showreel: every frame from one language, one arc, one centerpiece, one motif seen at the arrival,
+the opening, the centerpiece and the close. A loud scene moves with the scroll (a pin, a scrub, a reveal to full
+bleed); a quiet scene is type and a photo that enter once and sit still. Two tags only: `(loud)` when the block's
+energy in the catalogue is 2 or more, `(quiet)` at 1 or less, for a kit scene or for an own scene.
+
+| Language | For | Feel | Frames: preloader, page transition, menu | Motif |
+|---|---|---|---|---|
+| weight | architecture, hotels, craft, interiors | photographic and slow; a print grows into place; long holds | `preloader-stack`, `page-transition-stack`, `menu-curtain:stack` | frame |
+| cut | fashion, agencies, portfolios, music | hard cuts, short masks, no fades, short holds | `preloader-slices`, `page-transition-slices`, `menu-curtain:slices` | cut or word |
+| curtain | campaigns, launches, events, culture | a light line, panels part, a long hold before the reveal | `preloader-gate` or `preloader-wordmark:split`, `page-transition-gate`, `menu-curtain:gate` | line or aperture |
+
+Pick the language by the client's sector in the For column. Another language only when the brief asks for that feel
+in its own words; then quote those words on the `Language:` line. The idea may pick another motif of the six.
+`preloader-gate` and `page-transition-gate` show a neutral hairline ring; the film leader (a dial counting 3, 2, 1)
+only for a film client, through `dial="leader"` and `marks`. The header is `header-bar:quiet` or `:settle`; sections
+say their ground with `data-bar-tone`. Each arc is loud only at the opening, the centerpiece and at most one gentle
+scene with a quiet scene on each side. The arcs below are the printed arcs in short; the first pick is the default.
+
+**Quiet scenes** are the kit's four, imported from `@/components/struq/kit/quiet` (props in each file's header):
+- `Statement`: the one sentence and the page's first type moment, with an `accent` word and a margin `label` or a
+  small `image`, so it is composed, never a lone line.
+- `PhotoText`: a photo and a short text side by side on the grid.
+- `Rows`: three to six hairline rows, a term and one sentence each, never numbered.
+- `Close`: the closing line and its one link, echoing the opening; `frame` when the motif is the frame.
+- An own scene only when none of the four fits: your type beside a photo with `SplitHeadline`, `MediaFrame` and
+  `Reveal`, entering once, its root marked `data-scene="<name>"` (the check warns `own-scene-unmarked` without it).
+
+**weight.** Paper throughout, ink at the centerpiece.
+1. Arrival (frame): `preloader-stack`; the print lands on the hero photo.
+2. Opening (loud, short hold): `hero-framed:wand`, `hero-framed:portret` or `hero-still:frame`; calmer, `hero-still:still` (quiet).
+3. Statement (quiet): `Statement`.
+4. About (loud, the gentle one): `about-studio:wandeling` or `about-studio:plaat` (a full-bleed reveal); quiet, `PhotoText`.
+5. Approach (quiet): `approach:schuif` or `Rows`.
+6. Centerpiece (loud, ink): `image-to-fullbleed`, `grid-assembly`, `zoom-through` or `project-stack` (real projects).
+7. Release (quiet): `PhotoText`.
+8. Close (quiet): `Close`, type only after a full-bleed centerpiece. Footer: `wordmark-finale`.
+
+**cut.** Paper and ink in hard alternation, never a fade.
+1. Arrival (frame): `preloader-slices`, its caption from the lexicon.
+2. Opening (loud): `hero-poster`; quiet, `hero-index:lijst`, `hero-index:venster`, `hero-split:naad` or `hero-split:liggend`.
+3. Work (quiet): `hover-list` or `image-trail`; after `hero-index`, already a list, `reveals:clip`.
+4. Statement (quiet): `Statement`.
+5. Centerpiece (loud, ink): `split-pair`, `panel-wipe`, `project-stack`, `fanned-cards` or `film-strip` (film clients).
+6. Release (quiet): `fill-rows` or `Rows`.
+7. Close (quiet): `Close`, type only, or `cta-closing:pointer`. Footer: `footer-contact`.
+
+**curtain.** Field or ink at the opening, paper between, ink at the centerpiece.
+1. Arrival (frame): `preloader-gate`, the ring fills and the gate parts; or `preloader-wordmark:split`.
+2. Opening (loud): `hero-opener`, `background-aurora`, `background-silk` or `background-facets`, the line at poster scale; calmer, `hero-still:horizon` (quiet).
+3. Statement (quiet): `Statement`.
+4. Details (loud, the gentle one): `sticky-chapters`, or quiet `panel-accordion`: the programme, places and dates given.
+5. Build (quiet): `PhotoText`, who makes it.
+6. Centerpiece (loud, ink): `scrub-connector`, `zoom-through`, `manifesto-scrub` or `panel-wipe`.
+7. Release (quiet): `PhotoText`.
+8. Close (quiet): `cta-closing:pointer`, the line returning. Footer: `footer-reveal`, the curtain closing.
+
+**Budgets.** Hard rules: a storyboard that breaks one is rewritten before the stop.
+- Exactly one centerpiece; nothing pins after it. The opening holds at most 1.5 screens, all pins together about 4.5.
+  Screens pinned: `hero-opener` 1, `hero-framed` and `hero-poster` 1.5, `manifesto-scrub` 2, `image-to-fullbleed`
+  2.2, `grid-assembly` 2.5, `panel-wipe` 1.7 (2.6 when it closes), `film-strip` up to 3, `fanned-cards`, `split-pair`,
+  `zoom-through` and `scrub-connector` 3, `project-stack` 1.1 per project after the first. Pinned in one variant, so
+  never quiet: `hero-still:frame`, `hero-split:opening`, `hero-index:doorlopen`, `about-studio:doorkijk`,
+  `approach:zin`, `manifesto:writes` and `:split`.
+- Never two loud scenes side by side. At least four in ten scenes are quiet.
+- Every frame from the site's language. A page transition only when the site has more than one route.
+- Install only what the storyboard names, plus the header and the language's menu.
+- One motif on the page. At most two full-bleed photo reveals, built the same way: `hero-framed:wand` and `:portret`,
+  `hero-poster`, `hero-still:frame`, `image-to-fullbleed`, `zoom-through`, `grid-assembly`, `about-studio:plaat` and
+  `cta-closing:photo` each count one.
+- At most one marquee (`cta-closing:marquee`, `velocity-type`) and one custom cursor. One accent word, set in the
+  accent face through the `accent` prop: in the opening's headline, in `Statement` and again in `Close`.
+- No clock unless the lexicon is about time; then one, turned on by its prop (`clock`, `timeZone` on `wordmark-finale`).
+- Two or three type moments at poster scale (12 to 20vw) on the page; everything else from the scale.
+- Labels: no eyebrows above headings, no mono, no uppercase labels, no numbered steps. A small sentence-case label in
+  the body face may sit beside a headline in the margin column or under a photo, in words from the lexicon.
 
 ## What makes it feel high end
 
 The blocks hold this already; your glue must too. Detail in [references/craft.md](references/craft.md).
 
-- Reveals clip from numbers (inset values tweened as numbers), never scale a box; positions in whole pixels.
-- Photos are decoded before they show, cut or swap.
+- Reveals clip from numbers, never scale a box; whole pixels; photos decoded before they show, cut or swap.
 - Scroll effects are scroll-tied and reverse when the visitor scrolls back; key frames hold.
 - The gate: `sq-js` on `<html>` before paint hides only what will animate, and shows it anyway after 3 s.
 - Type on a photo sits on the measured calm side over the lightest flat veil that reaches 3:1.
-- Display faces run light (300, or the poster pairing's own weight); fitted lines are measured with the real face
-  after `document.fonts.ready`.
+- Display runs light (300, or the poster pairing's weight); fitted lines measured after `document.fonts.ready`.
+- Never clip a descender: the kit's masks already keep them; never `overflow-hidden` on a heading of your own, and
+  look at a line with a g and a j before calling type done.
 - Tokens only, mixes in oklab, a surface step and a hairline instead of a shadow, one accent.
 - Icons: Struq Icons (`@struq/icons`), functional only ([references/iconography.md](references/iconography.md)).
 
@@ -167,7 +224,6 @@ The blocks hold this already; your glue must too. Detail in [references/craft.md
 
 - **Nothing scrolls:** an overlay called `getLenis()?.stop()` without `start()`, or `SmoothScroll` is not mounted.
 - **Content stays invisible for 3 s:** the block never set `data-ready`; usually it threw. Read the console.
-- **Blocks render in the wrong colours or faces:** `data-blocks` is missing on `<body>`, or the STRUQ TOKENS block
-  sits before the kit import in `globals.css`.
+- **Wrong colours or faces:** `data-blocks` is missing on `<body>`, or STRUQ TOKENS sits before the kit import.
 - **A fitted line overflows or jumps:** the face did not load (check `app/fonts.ts` and the links in the layout).
 - **Vite:** [references/stack-targets.md](references/stack-targets.md).