skill v4.0.0-alpha.8: four visitor modes replace the brand/product bifurcation

Field report: impeccable SaaS-ified a developer docs page; the Opus
galleries showed the same on an album page. Root cause: two registers
force every surface into persuade-or-operate grammar. The register
section now names the visitor's mode first (Persuade / Operate / Read /
Experience) with mode-borrowing called out as the canonical failure,
and PRODUCT.md's register field maps as family (brand = Persuade +
Experience, product = Operate + Read) for compatibility. Read mode:
comprehension deliverable, navigable structure, chrome out of the way.
Experience mode: the artifact leads at every screen size.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

.agents/skills/impeccable/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: impeccable
 description: Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
-version: 4.0.0-alpha.7
+version: 4.0.0-alpha.8
 ---
 
 Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft.
@@ -31,7 +31,7 @@ Approach every design task as the design lead at a small studio known for giving
 
 **Prove, don't claim.** A page earns belief by showing the product doing its job: the interface at work, the mechanism dramatized, numbers and specifics a competitor couldn't copy-paste. A reader should understand what it does by looking, before reading a word. Sections that restate the hero's claim in different words add length, not substance.
 
-**Commit.** Pick a color strategy before picking colors: Restrained (neutrals + one accent, the product-register default) / Committed (one saturated color carries 30-60% of the surface) / Full palette (3-4 named roles) / Drenched (the surface IS the color). Brand surfaces have permission for the bolder strategies; take them when the brief allows. Dark vs. light is never a default: write one sentence of physical scene (who uses this, where, under what light, in what mood) and let it force the answer. The warm cream near-white body background is the saturated AI default; where the axis is free, pick a background that is a choice.
+**Commit.** Pick a color strategy before picking colors: Restrained (neutrals + one accent; the default when the visitor came to operate or read) / Committed (one saturated color carries 30-60% of the surface) / Full palette (3-4 named roles) / Drenched (the surface IS the color). Persuade and Experience surfaces have permission for the bolder strategies; take them when the brief allows. Dark vs. light is never a default: write one sentence of physical scene (who uses this, where, under what light, in what mood) and let it force the answer. The warm cream near-white body background is the saturated AI default; where the axis is free, pick a background that is a choice.
 
 **Calibration.** AI-generated interfaces cluster around a few looks regardless of subject: warm cream + high-contrast serif + terracotta accent; near-black + one neon accent (acid green, cyan) + glowing edges; broadsheet-editorial hairlines + italic display serif + small tracked mono labels. All are legitimate when the brief calls for them; the brief always wins. Where the brief leaves the aesthetic free, landing in one of them means your self-check failed. Same one tier deeper: if someone could guess your aesthetic from the category alone, or from category-plus-avoidance, rework until neither answer is obvious.
 
@@ -55,9 +55,15 @@ Calibration for this provider:
 
 ## Registers
 
-**Brand** (design IS the product: landing pages, marketing, campaigns, portfolios). The deliverable is the impression, in the form the surface demands. A product or service page stops the scroll, earns the click, converts. A cultural surface (an album, a portfolio, a publication, a body of work) IS the work: the artifact leads, the interface recedes, and conversion grammar (benefit copy, feature sections, a sales arc) is a category error there; the visitor should meet the work itself in the first viewport, at every screen size. Brand spans every genre (tech, luxury, consumer, culture); don't collapse them into one look. Imagery-implying briefs (food, travel, place, product, fashion) must ship real, verified imagery, searched for the brand's physical object rather than the category; a colored rectangle where a photo belongs reads as incomplete, and one decisive photo beats five mediocre ones. Choose faces like objects from the brand's world; these training-data defaults mean you stopped looking: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, Space Grotesk, Space Mono, IBM Plex, Inter-as-display, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans. Read `reference/brand.md` for extended depth on substantial brand work.
+Name the visitor's mode before designing; the page's grammar follows from it, and most ruined pages are one mode wearing another mode's grammar. The brief and the surface decide the mode. PRODUCT.md's `register` field names the family (`brand` covers Persuade and Experience; `product` covers Operate and Read), and `reference/brand.md` / `reference/product.md` carry extended depth for the two families.
 
-**Product** (design SERVES the product: app UI, dashboards, admin, tools). A person getting something done: density, scanability, and consistency outrank expressiveness. Product surfaces earn trust by feeling native to their platform: system font stacks and workhorse UI faces are legitimate and often correct here (the brand reject list does not apply). The brand lives in the details: focus states, empty states, microcopy, one owned accent. Read `reference/product.md` for extended depth on substantial product work.
+**Persuade** (landing pages, marketing, campaigns; design IS the product). The deliverable is an impression that stops the scroll, earns the click, converts. Spans every genre (tech, luxury, consumer); don't collapse them into one look. Imagery-implying briefs (food, travel, place, product, fashion) must ship real, verified imagery, searched for the brand's physical object rather than the category; a colored rectangle where a photo belongs reads as incomplete, and one decisive photo beats five mediocre ones. Choose faces like objects from the brand's world; these training-data defaults mean you stopped looking: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, Space Grotesk, Space Mono, IBM Plex, Inter-as-display, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans.
+
+**Operate** (app UI, dashboards, admin, tools; design SERVES the task). A person getting something done: density, scanability, and consistency outrank expressiveness. These surfaces earn trust by feeling native to their platform: system font stacks and workhorse UI faces are legitimate and often correct here (the Persuade reject list does not apply). The brand lives in the details: focus states, empty states, microcopy, one owned accent.
+
+**Read** (documentation, guides, editorial, long-form). The deliverable is comprehension: typographic rigor, a navigable structure the reader can hold in their head, hierarchy built for scanning, chrome that stays out of the way. Density follows the reader's task, not atmosphere, and nothing stands between the reader and the answer. The brand lives in type, spacing, and small accents.
+
+**Experience** (an album, a portfolio, a publication, a body of work). The page IS the work: the artifact leads, the interface recedes, and the visitor meets the work itself in the first viewport at every screen size. Boldness here means trusting the work.
 
 ## Commands
 

.claude-plugin/marketplace.json

@@ -12,7 +12,7 @@
     {
       "name": "impeccable",
       "description": "Design fluency for frontend development. 1 skill with 23 commands (/impeccable polish, /impeccable audit, /impeccable critique, etc.) and curated anti-pattern detection.",
-      "version": "4.0.0-alpha.7",
+      "version": "4.0.0-alpha.8",
       "author": {
         "name": "Paul Bakaus",
         "email": "paul@paulbakaus.com"

.claude-plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "impeccable",
   "description": "Design fluency for frontend development. 1 skill with 23 commands (/impeccable polish, /impeccable audit, /impeccable critique, etc.) and curated anti-pattern detection.",
-  "version": "4.0.0-alpha.7",
+  "version": "4.0.0-alpha.8",
   "author": {
     "name": "Paul Bakaus",
     "email": "paul@paulbakaus.com"

.claude/skills/impeccable/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: impeccable
 description: Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
-version: 4.0.0-alpha.7
+version: 4.0.0-alpha.8
 user-invocable: true
 argument-hint: "[craft|shape · audit|critique · animate|bolder|colorize|delight|layout|overdrive|quieter|typeset · adapt|clarify|distill · harden|onboard|optimize|polish · init|document|extract|live] [target]"
 license: Apache 2.0
@@ -37,7 +37,7 @@ Approach every design task as the design lead at a small studio known for giving
 
 **Prove, don't claim.** A page earns belief by showing the product doing its job: the interface at work, the mechanism dramatized, numbers and specifics a competitor couldn't copy-paste. A reader should understand what it does by looking, before reading a word. Sections that restate the hero's claim in different words add length, not substance.
 
-**Commit.** Pick a color strategy before picking colors: Restrained (neutrals + one accent, the product-register default) / Committed (one saturated color carries 30-60% of the surface) / Full palette (3-4 named roles) / Drenched (the surface IS the color). Brand surfaces have permission for the bolder strategies; take them when the brief allows. Dark vs. light is never a default: write one sentence of physical scene (who uses this, where, under what light, in what mood) and let it force the answer. The warm cream near-white body background is the saturated AI default; where the axis is free, pick a background that is a choice.
+**Commit.** Pick a color strategy before picking colors: Restrained (neutrals + one accent; the default when the visitor came to operate or read) / Committed (one saturated color carries 30-60% of the surface) / Full palette (3-4 named roles) / Drenched (the surface IS the color). Persuade and Experience surfaces have permission for the bolder strategies; take them when the brief allows. Dark vs. light is never a default: write one sentence of physical scene (who uses this, where, under what light, in what mood) and let it force the answer. The warm cream near-white body background is the saturated AI default; where the axis is free, pick a background that is a choice.
 
 **Calibration.** AI-generated interfaces cluster around a few looks regardless of subject: warm cream + high-contrast serif + terracotta accent; near-black + one neon accent (acid green, cyan) + glowing edges; broadsheet-editorial hairlines + italic display serif + small tracked mono labels. All are legitimate when the brief calls for them; the brief always wins. Where the brief leaves the aesthetic free, landing in one of them means your self-check failed. Same one tier deeper: if someone could guess your aesthetic from the category alone, or from category-plus-avoidance, rework until neither answer is obvious.
 
@@ -55,9 +55,15 @@ Build to this floor without announcing it. The design detector (the project hook
 
 ## Registers
 
-**Brand** (design IS the product: landing pages, marketing, campaigns, portfolios). The deliverable is the impression, in the form the surface demands. A product or service page stops the scroll, earns the click, converts. A cultural surface (an album, a portfolio, a publication, a body of work) IS the work: the artifact leads, the interface recedes, and conversion grammar (benefit copy, feature sections, a sales arc) is a category error there; the visitor should meet the work itself in the first viewport, at every screen size. Brand spans every genre (tech, luxury, consumer, culture); don't collapse them into one look. Imagery-implying briefs (food, travel, place, product, fashion) must ship real, verified imagery, searched for the brand's physical object rather than the category; a colored rectangle where a photo belongs reads as incomplete, and one decisive photo beats five mediocre ones. Choose faces like objects from the brand's world; these training-data defaults mean you stopped looking: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, Space Grotesk, Space Mono, IBM Plex, Inter-as-display, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans. Read `reference/brand.md` for extended depth on substantial brand work.
+Name the visitor's mode before designing; the page's grammar follows from it, and most ruined pages are one mode wearing another mode's grammar. The brief and the surface decide the mode. PRODUCT.md's `register` field names the family (`brand` covers Persuade and Experience; `product` covers Operate and Read), and `reference/brand.md` / `reference/product.md` carry extended depth for the two families.
 
-**Product** (design SERVES the product: app UI, dashboards, admin, tools). A person getting something done: density, scanability, and consistency outrank expressiveness. Product surfaces earn trust by feeling native to their platform: system font stacks and workhorse UI faces are legitimate and often correct here (the brand reject list does not apply). The brand lives in the details: focus states, empty states, microcopy, one owned accent. Read `reference/product.md` for extended depth on substantial product work.
+**Persuade** (landing pages, marketing, campaigns; design IS the product). The deliverable is an impression that stops the scroll, earns the click, converts. Spans every genre (tech, luxury, consumer); don't collapse them into one look. Imagery-implying briefs (food, travel, place, product, fashion) must ship real, verified imagery, searched for the brand's physical object rather than the category; a colored rectangle where a photo belongs reads as incomplete, and one decisive photo beats five mediocre ones. Choose faces like objects from the brand's world; these training-data defaults mean you stopped looking: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, Space Grotesk, Space Mono, IBM Plex, Inter-as-display, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans.
+
+**Operate** (app UI, dashboards, admin, tools; design SERVES the task). A person getting something done: density, scanability, and consistency outrank expressiveness. These surfaces earn trust by feeling native to their platform: system font stacks and workhorse UI faces are legitimate and often correct here (the Persuade reject list does not apply). The brand lives in the details: focus states, empty states, microcopy, one owned accent.
+
+**Read** (documentation, guides, editorial, long-form). The deliverable is comprehension: typographic rigor, a navigable structure the reader can hold in their head, hierarchy built for scanning, chrome that stays out of the way. Density follows the reader's task, not atmosphere, and nothing stands between the reader and the answer. The brand lives in type, spacing, and small accents.
+
+**Experience** (an album, a portfolio, a publication, a body of work). The page IS the work: the artifact leads, the interface recedes, and the visitor meets the work itself in the first viewport at every screen size. Boldness here means trusting the work.
 
 ## Commands
 

.cursor/skills/impeccable/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: impeccable
 description: Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
-version: 4.0.0-alpha.7
+version: 4.0.0-alpha.8
 license: Apache 2.0
 ---
 
@@ -32,7 +32,7 @@ Approach every design task as the design lead at a small studio known for giving
 
 **Prove, don't claim.** A page earns belief by showing the product doing its job: the interface at work, the mechanism dramatized, numbers and specifics a competitor couldn't copy-paste. A reader should understand what it does by looking, before reading a word. Sections that restate the hero's claim in different words add length, not substance.
 
-**Commit.** Pick a color strategy before picking colors: Restrained (neutrals + one accent, the product-register default) / Committed (one saturated color carries 30-60% of the surface) / Full palette (3-4 named roles) / Drenched (the surface IS the color). Brand surfaces have permission for the bolder strategies; take them when the brief allows. Dark vs. light is never a default: write one sentence of physical scene (who uses this, where, under what light, in what mood) and let it force the answer. The warm cream near-white body background is the saturated AI default; where the axis is free, pick a background that is a choice.
+**Commit.** Pick a color strategy before picking colors: Restrained (neutrals + one accent; the default when the visitor came to operate or read) / Committed (one saturated color carries 30-60% of the surface) / Full palette (3-4 named roles) / Drenched (the surface IS the color). Persuade and Experience surfaces have permission for the bolder strategies; take them when the brief allows. Dark vs. light is never a default: write one sentence of physical scene (who uses this, where, under what light, in what mood) and let it force the answer. The warm cream near-white body background is the saturated AI default; where the axis is free, pick a background that is a choice.
 
 **Calibration.** AI-generated interfaces cluster around a few looks regardless of subject: warm cream + high-contrast serif + terracotta accent; near-black + one neon accent (acid green, cyan) + glowing edges; broadsheet-editorial hairlines + italic display serif + small tracked mono labels. All are legitimate when the brief calls for them; the brief always wins. Where the brief leaves the aesthetic free, landing in one of them means your self-check failed. Same one tier deeper: if someone could guess your aesthetic from the category alone, or from category-plus-avoidance, rework until neither answer is obvious.
 
@@ -50,9 +50,15 @@ Build to this floor without announcing it. The design detector (the project hook
 
 ## Registers
 
-**Brand** (design IS the product: landing pages, marketing, campaigns, portfolios). The deliverable is the impression, in the form the surface demands. A product or service page stops the scroll, earns the click, converts. A cultural surface (an album, a portfolio, a publication, a body of work) IS the work: the artifact leads, the interface recedes, and conversion grammar (benefit copy, feature sections, a sales arc) is a category error there; the visitor should meet the work itself in the first viewport, at every screen size. Brand spans every genre (tech, luxury, consumer, culture); don't collapse them into one look. Imagery-implying briefs (food, travel, place, product, fashion) must ship real, verified imagery, searched for the brand's physical object rather than the category; a colored rectangle where a photo belongs reads as incomplete, and one decisive photo beats five mediocre ones. Choose faces like objects from the brand's world; these training-data defaults mean you stopped looking: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, Space Grotesk, Space Mono, IBM Plex, Inter-as-display, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans. Read `reference/brand.md` for extended depth on substantial brand work.
+Name the visitor's mode before designing; the page's grammar follows from it, and most ruined pages are one mode wearing another mode's grammar. The brief and the surface decide the mode. PRODUCT.md's `register` field names the family (`brand` covers Persuade and Experience; `product` covers Operate and Read), and `reference/brand.md` / `reference/product.md` carry extended depth for the two families.
 
-**Product** (design SERVES the product: app UI, dashboards, admin, tools). A person getting something done: density, scanability, and consistency outrank expressiveness. Product surfaces earn trust by feeling native to their platform: system font stacks and workhorse UI faces are legitimate and often correct here (the brand reject list does not apply). The brand lives in the details: focus states, empty states, microcopy, one owned accent. Read `reference/product.md` for extended depth on substantial product work.
+**Persuade** (landing pages, marketing, campaigns; design IS the product). The deliverable is an impression that stops the scroll, earns the click, converts. Spans every genre (tech, luxury, consumer); don't collapse them into one look. Imagery-implying briefs (food, travel, place, product, fashion) must ship real, verified imagery, searched for the brand's physical object rather than the category; a colored rectangle where a photo belongs reads as incomplete, and one decisive photo beats five mediocre ones. Choose faces like objects from the brand's world; these training-data defaults mean you stopped looking: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, Space Grotesk, Space Mono, IBM Plex, Inter-as-display, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans.
+
+**Operate** (app UI, dashboards, admin, tools; design SERVES the task). A person getting something done: density, scanability, and consistency outrank expressiveness. These surfaces earn trust by feeling native to their platform: system font stacks and workhorse UI faces are legitimate and often correct here (the Persuade reject list does not apply). The brand lives in the details: focus states, empty states, microcopy, one owned accent.
+
+**Read** (documentation, guides, editorial, long-form). The deliverable is comprehension: typographic rigor, a navigable structure the reader can hold in their head, hierarchy built for scanning, chrome that stays out of the way. Density follows the reader's task, not atmosphere, and nothing stands between the reader and the answer. The brand lives in type, spacing, and small accents.
+
+**Experience** (an album, a portfolio, a publication, a body of work). The page IS the work: the artifact leads, the interface recedes, and the visitor meets the work itself in the first viewport at every screen size. Boldness here means trusting the work.
 
 ## Commands
 

.gemini/skills/impeccable/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: impeccable
 description: Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
-version: 4.0.0-alpha.7
+version: 4.0.0-alpha.8
 ---
 
 Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft.
@@ -31,7 +31,7 @@ Approach every design task as the design lead at a small studio known for giving
 
 **Prove, don't claim.** A page earns belief by showing the product doing its job: the interface at work, the mechanism dramatized, numbers and specifics a competitor couldn't copy-paste. A reader should understand what it does by looking, before reading a word. Sections that restate the hero's claim in different words add length, not substance.
 
-**Commit.** Pick a color strategy before picking colors: Restrained (neutrals + one accent, the product-register default) / Committed (one saturated color carries 30-60% of the surface) / Full palette (3-4 named roles) / Drenched (the surface IS the color). Brand surfaces have permission for the bolder strategies; take them when the brief allows. Dark vs. light is never a default: write one sentence of physical scene (who uses this, where, under what light, in what mood) and let it force the answer. The warm cream near-white body background is the saturated AI default; where the axis is free, pick a background that is a choice.
+**Commit.** Pick a color strategy before picking colors: Restrained (neutrals + one accent; the default when the visitor came to operate or read) / Committed (one saturated color carries 30-60% of the surface) / Full palette (3-4 named roles) / Drenched (the surface IS the color). Persuade and Experience surfaces have permission for the bolder strategies; take them when the brief allows. Dark vs. light is never a default: write one sentence of physical scene (who uses this, where, under what light, in what mood) and let it force the answer. The warm cream near-white body background is the saturated AI default; where the axis is free, pick a background that is a choice.
 
 **Calibration.** AI-generated interfaces cluster around a few looks regardless of subject: warm cream + high-contrast serif + terracotta accent; near-black + one neon accent (acid green, cyan) + glowing edges; broadsheet-editorial hairlines + italic display serif + small tracked mono labels. All are legitimate when the brief calls for them; the brief always wins. Where the brief leaves the aesthetic free, landing in one of them means your self-check failed. Same one tier deeper: if someone could guess your aesthetic from the category alone, or from category-plus-avoidance, rework until neither answer is obvious.
 
@@ -51,9 +51,15 @@ Build to this floor without announcing it. The design detector (the project hook
 
 ## Registers
 
-**Brand** (design IS the product: landing pages, marketing, campaigns, portfolios). The deliverable is the impression, in the form the surface demands. A product or service page stops the scroll, earns the click, converts. A cultural surface (an album, a portfolio, a publication, a body of work) IS the work: the artifact leads, the interface recedes, and conversion grammar (benefit copy, feature sections, a sales arc) is a category error there; the visitor should meet the work itself in the first viewport, at every screen size. Brand spans every genre (tech, luxury, consumer, culture); don't collapse them into one look. Imagery-implying briefs (food, travel, place, product, fashion) must ship real, verified imagery, searched for the brand's physical object rather than the category; a colored rectangle where a photo belongs reads as incomplete, and one decisive photo beats five mediocre ones. Choose faces like objects from the brand's world; these training-data defaults mean you stopped looking: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, Space Grotesk, Space Mono, IBM Plex, Inter-as-display, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans. Read `reference/brand.md` for extended depth on substantial brand work.
+Name the visitor's mode before designing; the page's grammar follows from it, and most ruined pages are one mode wearing another mode's grammar. The brief and the surface decide the mode. PRODUCT.md's `register` field names the family (`brand` covers Persuade and Experience; `product` covers Operate and Read), and `reference/brand.md` / `reference/product.md` carry extended depth for the two families.
 
-**Product** (design SERVES the product: app UI, dashboards, admin, tools). A person getting something done: density, scanability, and consistency outrank expressiveness. Product surfaces earn trust by feeling native to their platform: system font stacks and workhorse UI faces are legitimate and often correct here (the brand reject list does not apply). The brand lives in the details: focus states, empty states, microcopy, one owned accent. Read `reference/product.md` for extended depth on substantial product work.
+**Persuade** (landing pages, marketing, campaigns; design IS the product). The deliverable is an impression that stops the scroll, earns the click, converts. Spans every genre (tech, luxury, consumer); don't collapse them into one look. Imagery-implying briefs (food, travel, place, product, fashion) must ship real, verified imagery, searched for the brand's physical object rather than the category; a colored rectangle where a photo belongs reads as incomplete, and one decisive photo beats five mediocre ones. Choose faces like objects from the brand's world; these training-data defaults mean you stopped looking: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, Space Grotesk, Space Mono, IBM Plex, Inter-as-display, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans.
+
+**Operate** (app UI, dashboards, admin, tools; design SERVES the task). A person getting something done: density, scanability, and consistency outrank expressiveness. These surfaces earn trust by feeling native to their platform: system font stacks and workhorse UI faces are legitimate and often correct here (the Persuade reject list does not apply). The brand lives in the details: focus states, empty states, microcopy, one owned accent.
+
+**Read** (documentation, guides, editorial, long-form). The deliverable is comprehension: typographic rigor, a navigable structure the reader can hold in their head, hierarchy built for scanning, chrome that stays out of the way. Density follows the reader's task, not atmosphere, and nothing stands between the reader and the answer. The brand lives in type, spacing, and small accents.
+
+**Experience** (an album, a portfolio, a publication, a body of work). The page IS the work: the artifact leads, the interface recedes, and the visitor meets the work itself in the first viewport at every screen size. Boldness here means trusting the work.
 
 ## Commands
 

.github/skills/impeccable/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: impeccable
 description: Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
-version: 4.0.0-alpha.7
+version: 4.0.0-alpha.8
 user-invocable: true
 argument-hint: "[craft|shape · audit|critique · animate|bolder|colorize|delight|layout|overdrive|quieter|typeset · adapt|clarify|distill · harden|onboard|optimize|polish · init|document|extract|live] [target]"
 license: Apache 2.0
@@ -34,7 +34,7 @@ Approach every design task as the design lead at a small studio known for giving
 
 **Prove, don't claim.** A page earns belief by showing the product doing its job: the interface at work, the mechanism dramatized, numbers and specifics a competitor couldn't copy-paste. A reader should understand what it does by looking, before reading a word. Sections that restate the hero's claim in different words add length, not substance.
 
-**Commit.** Pick a color strategy before picking colors: Restrained (neutrals + one accent, the product-register default) / Committed (one saturated color carries 30-60% of the surface) / Full palette (3-4 named roles) / Drenched (the surface IS the color). Brand surfaces have permission for the bolder strategies; take them when the brief allows. Dark vs. light is never a default: write one sentence of physical scene (who uses this, where, under what light, in what mood) and let it force the answer. The warm cream near-white body background is the saturated AI default; where the axis is free, pick a background that is a choice.
+**Commit.** Pick a color strategy before picking colors: Restrained (neutrals + one accent; the default when the visitor came to operate or read) / Committed (one saturated color carries 30-60% of the surface) / Full palette (3-4 named roles) / Drenched (the surface IS the color). Persuade and Experience surfaces have permission for the bolder strategies; take them when the brief allows. Dark vs. light is never a default: write one sentence of physical scene (who uses this, where, under what light, in what mood) and let it force the answer. The warm cream near-white body background is the saturated AI default; where the axis is free, pick a background that is a choice.
 
 **Calibration.** AI-generated interfaces cluster around a few looks regardless of subject: warm cream + high-contrast serif + terracotta accent; near-black + one neon accent (acid green, cyan) + glowing edges; broadsheet-editorial hairlines + italic display serif + small tracked mono labels. All are legitimate when the brief calls for them; the brief always wins. Where the brief leaves the aesthetic free, landing in one of them means your self-check failed. Same one tier deeper: if someone could guess your aesthetic from the category alone, or from category-plus-avoidance, rework until neither answer is obvious.
 
@@ -52,9 +52,15 @@ Build to this floor without announcing it. The design detector (the project hook
 
 ## Registers
 
-**Brand** (design IS the product: landing pages, marketing, campaigns, portfolios). The deliverable is the impression, in the form the surface demands. A product or service page stops the scroll, earns the click, converts. A cultural surface (an album, a portfolio, a publication, a body of work) IS the work: the artifact leads, the interface recedes, and conversion grammar (benefit copy, feature sections, a sales arc) is a category error there; the visitor should meet the work itself in the first viewport, at every screen size. Brand spans every genre (tech, luxury, consumer, culture); don't collapse them into one look. Imagery-implying briefs (food, travel, place, product, fashion) must ship real, verified imagery, searched for the brand's physical object rather than the category; a colored rectangle where a photo belongs reads as incomplete, and one decisive photo beats five mediocre ones. Choose faces like objects from the brand's world; these training-data defaults mean you stopped looking: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, Space Grotesk, Space Mono, IBM Plex, Inter-as-display, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans. Read `reference/brand.md` for extended depth on substantial brand work.
+Name the visitor's mode before designing; the page's grammar follows from it, and most ruined pages are one mode wearing another mode's grammar. The brief and the surface decide the mode. PRODUCT.md's `register` field names the family (`brand` covers Persuade and Experience; `product` covers Operate and Read), and `reference/brand.md` / `reference/product.md` carry extended depth for the two families.
 
-**Product** (design SERVES the product: app UI, dashboards, admin, tools). A person getting something done: density, scanability, and consistency outrank expressiveness. Product surfaces earn trust by feeling native to their platform: system font stacks and workhorse UI faces are legitimate and often correct here (the brand reject list does not apply). The brand lives in the details: focus states, empty states, microcopy, one owned accent. Read `reference/product.md` for extended depth on substantial product work.
+**Persuade** (landing pages, marketing, campaigns; design IS the product). The deliverable is an impression that stops the scroll, earns the click, converts. Spans every genre (tech, luxury, consumer); don't collapse them into one look. Imagery-implying briefs (food, travel, place, product, fashion) must ship real, verified imagery, searched for the brand's physical object rather than the category; a colored rectangle where a photo belongs reads as incomplete, and one decisive photo beats five mediocre ones. Choose faces like objects from the brand's world; these training-data defaults mean you stopped looking: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, Space Grotesk, Space Mono, IBM Plex, Inter-as-display, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans.
+
+**Operate** (app UI, dashboards, admin, tools; design SERVES the task). A person getting something done: density, scanability, and consistency outrank expressiveness. These surfaces earn trust by feeling native to their platform: system font stacks and workhorse UI faces are legitimate and often correct here (the Persuade reject list does not apply). The brand lives in the details: focus states, empty states, microcopy, one owned accent.
+
+**Read** (documentation, guides, editorial, long-form). The deliverable is comprehension: typographic rigor, a navigable structure the reader can hold in their head, hierarchy built for scanning, chrome that stays out of the way. Density follows the reader's task, not atmosphere, and nothing stands between the reader and the answer. The brand lives in type, spacing, and small accents.
+
+**Experience** (an album, a portfolio, a publication, a body of work). The page IS the work: the artifact leads, the interface recedes, and the visitor meets the work itself in the first viewport at every screen size. Boldness here means trusting the work.
 
 ## Commands
 

.kiro/skills/impeccable/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: impeccable
 description: Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
-version: 4.0.0-alpha.7
+version: 4.0.0-alpha.8
 license: Apache 2.0
 ---
 
@@ -32,7 +32,7 @@ Approach every design task as the design lead at a small studio known for giving
 
 **Prove, don't claim.** A page earns belief by showing the product doing its job: the interface at work, the mechanism dramatized, numbers and specifics a competitor couldn't copy-paste. A reader should understand what it does by looking, before reading a word. Sections that restate the hero's claim in different words add length, not substance.
 
-**Commit.** Pick a color strategy before picking colors: Restrained (neutrals + one accent, the product-register default) / Committed (one saturated color carries 30-60% of the surface) / Full palette (3-4 named roles) / Drenched (the surface IS the color). Brand surfaces have permission for the bolder strategies; take them when the brief allows. Dark vs. light is never a default: write one sentence of physical scene (who uses this, where, under what light, in what mood) and let it force the answer. The warm cream near-white body background is the saturated AI default; where the axis is free, pick a background that is a choice.
+**Commit.** Pick a color strategy before picking colors: Restrained (neutrals + one accent; the default when the visitor came to operate or read) / Committed (one saturated color carries 30-60% of the surface) / Full palette (3-4 named roles) / Drenched (the surface IS the color). Persuade and Experience surfaces have permission for the bolder strategies; take them when the brief allows. Dark vs. light is never a default: write one sentence of physical scene (who uses this, where, under what light, in what mood) and let it force the answer. The warm cream near-white body background is the saturated AI default; where the axis is free, pick a background that is a choice.
 
 **Calibration.** AI-generated interfaces cluster around a few looks regardless of subject: warm cream + high-contrast serif + terracotta accent; near-black + one neon accent (acid green, cyan) + glowing edges; broadsheet-editorial hairlines + italic display serif + small tracked mono labels. All are legitimate when the brief calls for them; the brief always wins. Where the brief leaves the aesthetic free, landing in one of them means your self-check failed. Same one tier deeper: if someone could guess your aesthetic from the category alone, or from category-plus-avoidance, rework until neither answer is obvious.
 
@@ -50,9 +50,15 @@ Build to this floor without announcing it. The design detector (the project hook
 
 ## Registers
 
-**Brand** (design IS the product: landing pages, marketing, campaigns, portfolios). The deliverable is the impression, in the form the surface demands. A product or service page stops the scroll, earns the click, converts. A cultural surface (an album, a portfolio, a publication, a body of work) IS the work: the artifact leads, the interface recedes, and conversion grammar (benefit copy, feature sections, a sales arc) is a category error there; the visitor should meet the work itself in the first viewport, at every screen size. Brand spans every genre (tech, luxury, consumer, culture); don't collapse them into one look. Imagery-implying briefs (food, travel, place, product, fashion) must ship real, verified imagery, searched for the brand's physical object rather than the category; a colored rectangle where a photo belongs reads as incomplete, and one decisive photo beats five mediocre ones. Choose faces like objects from the brand's world; these training-data defaults mean you stopped looking: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, Space Grotesk, Space Mono, IBM Plex, Inter-as-display, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans. Read `reference/brand.md` for extended depth on substantial brand work.
+Name the visitor's mode before designing; the page's grammar follows from it, and most ruined pages are one mode wearing another mode's grammar. The brief and the surface decide the mode. PRODUCT.md's `register` field names the family (`brand` covers Persuade and Experience; `product` covers Operate and Read), and `reference/brand.md` / `reference/product.md` carry extended depth for the two families.
 
-**Product** (design SERVES the product: app UI, dashboards, admin, tools). A person getting something done: density, scanability, and consistency outrank expressiveness. Product surfaces earn trust by feeling native to their platform: system font stacks and workhorse UI faces are legitimate and often correct here (the brand reject list does not apply). The brand lives in the details: focus states, empty states, microcopy, one owned accent. Read `reference/product.md` for extended depth on substantial product work.
+**Persuade** (landing pages, marketing, campaigns; design IS the product). The deliverable is an impression that stops the scroll, earns the click, converts. Spans every genre (tech, luxury, consumer); don't collapse them into one look. Imagery-implying briefs (food, travel, place, product, fashion) must ship real, verified imagery, searched for the brand's physical object rather than the category; a colored rectangle where a photo belongs reads as incomplete, and one decisive photo beats five mediocre ones. Choose faces like objects from the brand's world; these training-data defaults mean you stopped looking: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, Space Grotesk, Space Mono, IBM Plex, Inter-as-display, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans.
+
+**Operate** (app UI, dashboards, admin, tools; design SERVES the task). A person getting something done: density, scanability, and consistency outrank expressiveness. These surfaces earn trust by feeling native to their platform: system font stacks and workhorse UI faces are legitimate and often correct here (the Persuade reject list does not apply). The brand lives in the details: focus states, empty states, microcopy, one owned accent.
+
+**Read** (documentation, guides, editorial, long-form). The deliverable is comprehension: typographic rigor, a navigable structure the reader can hold in their head, hierarchy built for scanning, chrome that stays out of the way. Density follows the reader's task, not atmosphere, and nothing stands between the reader and the answer. The brand lives in type, spacing, and small accents.
+
+**Experience** (an album, a portfolio, a publication, a body of work). The page IS the work: the artifact leads, the interface recedes, and the visitor meets the work itself in the first viewport at every screen size. Boldness here means trusting the work.
 
 ## Commands
 

.opencode/skills/impeccable/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: impeccable
 description: Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
-version: 4.0.0-alpha.7
+version: 4.0.0-alpha.8
 user-invocable: true
 argument-hint: "[craft|shape · audit|critique · animate|bolder|colorize|delight|layout|overdrive|quieter|typeset · adapt|clarify|distill · harden|onboard|optimize|polish · init|document|extract|live] [target]"
 license: Apache 2.0
@@ -37,7 +37,7 @@ Approach every design task as the design lead at a small studio known for giving
 
 **Prove, don't claim.** A page earns belief by showing the product doing its job: the interface at work, the mechanism dramatized, numbers and specifics a competitor couldn't copy-paste. A reader should understand what it does by looking, before reading a word. Sections that restate the hero's claim in different words add length, not substance.
 
-**Commit.** Pick a color strategy before picking colors: Restrained (neutrals + one accent, the product-register default) / Committed (one saturated color carries 30-60% of the surface) / Full palette (3-4 named roles) / Drenched (the surface IS the color). Brand surfaces have permission for the bolder strategies; take them when the brief allows. Dark vs. light is never a default: write one sentence of physical scene (who uses this, where, under what light, in what mood) and let it force the answer. The warm cream near-white body background is the saturated AI default; where the axis is free, pick a background that is a choice.
+**Commit.** Pick a color strategy before picking colors: Restrained (neutrals + one accent; the default when the visitor came to operate or read) / Committed (one saturated color carries 30-60% of the surface) / Full palette (3-4 named roles) / Drenched (the surface IS the color). Persuade and Experience surfaces have permission for the bolder strategies; take them when the brief allows. Dark vs. light is never a default: write one sentence of physical scene (who uses this, where, under what light, in what mood) and let it force the answer. The warm cream near-white body background is the saturated AI default; where the axis is free, pick a background that is a choice.
 
 **Calibration.** AI-generated interfaces cluster around a few looks regardless of subject: warm cream + high-contrast serif + terracotta accent; near-black + one neon accent (acid green, cyan) + glowing edges; broadsheet-editorial hairlines + italic display serif + small tracked mono labels. All are legitimate when the brief calls for them; the brief always wins. Where the brief leaves the aesthetic free, landing in one of them means your self-check failed. Same one tier deeper: if someone could guess your aesthetic from the category alone, or from category-plus-avoidance, rework until neither answer is obvious.
 
@@ -55,9 +55,15 @@ Build to this floor without announcing it. The design detector (the project hook
 
 ## Registers
 
-**Brand** (design IS the product: landing pages, marketing, campaigns, portfolios). The deliverable is the impression, in the form the surface demands. A product or service page stops the scroll, earns the click, converts. A cultural surface (an album, a portfolio, a publication, a body of work) IS the work: the artifact leads, the interface recedes, and conversion grammar (benefit copy, feature sections, a sales arc) is a category error there; the visitor should meet the work itself in the first viewport, at every screen size. Brand spans every genre (tech, luxury, consumer, culture); don't collapse them into one look. Imagery-implying briefs (food, travel, place, product, fashion) must ship real, verified imagery, searched for the brand's physical object rather than the category; a colored rectangle where a photo belongs reads as incomplete, and one decisive photo beats five mediocre ones. Choose faces like objects from the brand's world; these training-data defaults mean you stopped looking: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, Space Grotesk, Space Mono, IBM Plex, Inter-as-display, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans. Read `reference/brand.md` for extended depth on substantial brand work.
+Name the visitor's mode before designing; the page's grammar follows from it, and most ruined pages are one mode wearing another mode's grammar. The brief and the surface decide the mode. PRODUCT.md's `register` field names the family (`brand` covers Persuade and Experience; `product` covers Operate and Read), and `reference/brand.md` / `reference/product.md` carry extended depth for the two families.
 
-**Product** (design SERVES the product: app UI, dashboards, admin, tools). A person getting something done: density, scanability, and consistency outrank expressiveness. Product surfaces earn trust by feeling native to their platform: system font stacks and workhorse UI faces are legitimate and often correct here (the brand reject list does not apply). The brand lives in the details: focus states, empty states, microcopy, one owned accent. Read `reference/product.md` for extended depth on substantial product work.
+**Persuade** (landing pages, marketing, campaigns; design IS the product). The deliverable is an impression that stops the scroll, earns the click, converts. Spans every genre (tech, luxury, consumer); don't collapse them into one look. Imagery-implying briefs (food, travel, place, product, fashion) must ship real, verified imagery, searched for the brand's physical object rather than the category; a colored rectangle where a photo belongs reads as incomplete, and one decisive photo beats five mediocre ones. Choose faces like objects from the brand's world; these training-data defaults mean you stopped looking: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, Space Grotesk, Space Mono, IBM Plex, Inter-as-display, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans.
+
+**Operate** (app UI, dashboards, admin, tools; design SERVES the task). A person getting something done: density, scanability, and consistency outrank expressiveness. These surfaces earn trust by feeling native to their platform: system font stacks and workhorse UI faces are legitimate and often correct here (the Persuade reject list does not apply). The brand lives in the details: focus states, empty states, microcopy, one owned accent.
+
+**Read** (documentation, guides, editorial, long-form). The deliverable is comprehension: typographic rigor, a navigable structure the reader can hold in their head, hierarchy built for scanning, chrome that stays out of the way. Density follows the reader's task, not atmosphere, and nothing stands between the reader and the answer. The brand lives in type, spacing, and small accents.
+
+**Experience** (an album, a portfolio, a publication, a body of work). The page IS the work: the artifact leads, the interface recedes, and the visitor meets the work itself in the first viewport at every screen size. Boldness here means trusting the work.
 
 ## Commands
 

.pi/skills/impeccable/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: impeccable
 description: Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
-version: 4.0.0-alpha.7
+version: 4.0.0-alpha.8
 license: Apache 2.0
 allowed-tools:
   - Bash(npx impeccable *)
@@ -35,7 +35,7 @@ Approach every design task as the design lead at a small studio known for giving
 
 **Prove, don't claim.** A page earns belief by showing the product doing its job: the interface at work, the mechanism dramatized, numbers and specifics a competitor couldn't copy-paste. A reader should understand what it does by looking, before reading a word. Sections that restate the hero's claim in different words add length, not substance.
 
-**Commit.** Pick a color strategy before picking colors: Restrained (neutrals + one accent, the product-register default) / Committed (one saturated color carries 30-60% of the surface) / Full palette (3-4 named roles) / Drenched (the surface IS the color). Brand surfaces have permission for the bolder strategies; take them when the brief allows. Dark vs. light is never a default: write one sentence of physical scene (who uses this, where, under what light, in what mood) and let it force the answer. The warm cream near-white body background is the saturated AI default; where the axis is free, pick a background that is a choice.
+**Commit.** Pick a color strategy before picking colors: Restrained (neutrals + one accent; the default when the visitor came to operate or read) / Committed (one saturated color carries 30-60% of the surface) / Full palette (3-4 named roles) / Drenched (the surface IS the color). Persuade and Experience surfaces have permission for the bolder strategies; take them when the brief allows. Dark vs. light is never a default: write one sentence of physical scene (who uses this, where, under what light, in what mood) and let it force the answer. The warm cream near-white body background is the saturated AI default; where the axis is free, pick a background that is a choice.
 
 **Calibration.** AI-generated interfaces cluster around a few looks regardless of subject: warm cream + high-contrast serif + terracotta accent; near-black + one neon accent (acid green, cyan) + glowing edges; broadsheet-editorial hairlines + italic display serif + small tracked mono labels. All are legitimate when the brief calls for them; the brief always wins. Where the brief leaves the aesthetic free, landing in one of them means your self-check failed. Same one tier deeper: if someone could guess your aesthetic from the category alone, or from category-plus-avoidance, rework until neither answer is obvious.
 
@@ -53,9 +53,15 @@ Build to this floor without announcing it. The design detector (the project hook
 
 ## Registers
 
-**Brand** (design IS the product: landing pages, marketing, campaigns, portfolios). The deliverable is the impression, in the form the surface demands. A product or service page stops the scroll, earns the click, converts. A cultural surface (an album, a portfolio, a publication, a body of work) IS the work: the artifact leads, the interface recedes, and conversion grammar (benefit copy, feature sections, a sales arc) is a category error there; the visitor should meet the work itself in the first viewport, at every screen size. Brand spans every genre (tech, luxury, consumer, culture); don't collapse them into one look. Imagery-implying briefs (food, travel, place, product, fashion) must ship real, verified imagery, searched for the brand's physical object rather than the category; a colored rectangle where a photo belongs reads as incomplete, and one decisive photo beats five mediocre ones. Choose faces like objects from the brand's world; these training-data defaults mean you stopped looking: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, Space Grotesk, Space Mono, IBM Plex, Inter-as-display, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans. Read `reference/brand.md` for extended depth on substantial brand work.
+Name the visitor's mode before designing; the page's grammar follows from it, and most ruined pages are one mode wearing another mode's grammar. The brief and the surface decide the mode. PRODUCT.md's `register` field names the family (`brand` covers Persuade and Experience; `product` covers Operate and Read), and `reference/brand.md` / `reference/product.md` carry extended depth for the two families.
 
-**Product** (design SERVES the product: app UI, dashboards, admin, tools). A person getting something done: density, scanability, and consistency outrank expressiveness. Product surfaces earn trust by feeling native to their platform: system font stacks and workhorse UI faces are legitimate and often correct here (the brand reject list does not apply). The brand lives in the details: focus states, empty states, microcopy, one owned accent. Read `reference/product.md` for extended depth on substantial product work.
+**Persuade** (landing pages, marketing, campaigns; design IS the product). The deliverable is an impression that stops the scroll, earns the click, converts. Spans every genre (tech, luxury, consumer); don't collapse them into one look. Imagery-implying briefs (food, travel, place, product, fashion) must ship real, verified imagery, searched for the brand's physical object rather than the category; a colored rectangle where a photo belongs reads as incomplete, and one decisive photo beats five mediocre ones. Choose faces like objects from the brand's world; these training-data defaults mean you stopped looking: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, Space Grotesk, Space Mono, IBM Plex, Inter-as-display, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans.
+
+**Operate** (app UI, dashboards, admin, tools; design SERVES the task). A person getting something done: density, scanability, and consistency outrank expressiveness. These surfaces earn trust by feeling native to their platform: system font stacks and workhorse UI faces are legitimate and often correct here (the Persuade reject list does not apply). The brand lives in the details: focus states, empty states, microcopy, one owned accent.
+
+**Read** (documentation, guides, editorial, long-form). The deliverable is comprehension: typographic rigor, a navigable structure the reader can hold in their head, hierarchy built for scanning, chrome that stays out of the way. Density follows the reader's task, not atmosphere, and nothing stands between the reader and the answer. The brand lives in type, spacing, and small accents.
+
+**Experience** (an album, a portfolio, a publication, a body of work). The page IS the work: the artifact leads, the interface recedes, and the visitor meets the work itself in the first viewport at every screen size. Boldness here means trusting the work.
 
 ## Commands
 

.qoder/skills/impeccable/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: impeccable
 description: Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
-version: 4.0.0-alpha.7
+version: 4.0.0-alpha.8
 user-invocable: true
 argument-hint: "[craft|shape · audit|critique · animate|bolder|colorize|delight|layout|overdrive|quieter|typeset · adapt|clarify|distill · harden|onboard|optimize|polish · init|document|extract|live] [target]"
 license: Apache 2.0
@@ -37,7 +37,7 @@ Approach every design task as the design lead at a small studio known for giving
 
 **Prove, don't claim.** A page earns belief by showing the product doing its job: the interface at work, the mechanism dramatized, numbers and specifics a competitor couldn't copy-paste. A reader should understand what it does by looking, before reading a word. Sections that restate the hero's claim in different words add length, not substance.
 
-**Commit.** Pick a color strategy before picking colors: Restrained (neutrals + one accent, the product-register default) / Committed (one saturated color carries 30-60% of the surface) / Full palette (3-4 named roles) / Drenched (the surface IS the color). Brand surfaces have permission for the bolder strategies; take them when the brief allows. Dark vs. light is never a default: write one sentence of physical scene (who uses this, where, under what light, in what mood) and let it force the answer. The warm cream near-white body background is the saturated AI default; where the axis is free, pick a background that is a choice.
+**Commit.** Pick a color strategy before picking colors: Restrained (neutrals + one accent; the default when the visitor came to operate or read) / Committed (one saturated color carries 30-60% of the surface) / Full palette (3-4 named roles) / Drenched (the surface IS the color). Persuade and Experience surfaces have permission for the bolder strategies; take them when the brief allows. Dark vs. light is never a default: write one sentence of physical scene (who uses this, where, under what light, in what mood) and let it force the answer. The warm cream near-white body background is the saturated AI default; where the axis is free, pick a background that is a choice.
 
 **Calibration.** AI-generated interfaces cluster around a few looks regardless of subject: warm cream + high-contrast serif + terracotta accent; near-black + one neon accent (acid green, cyan) + glowing edges; broadsheet-editorial hairlines + italic display serif + small tracked mono labels. All are legitimate when the brief calls for them; the brief always wins. Where the brief leaves the aesthetic free, landing in one of them means your self-check failed. Same one tier deeper: if someone could guess your aesthetic from the category alone, or from category-plus-avoidance, rework until neither answer is obvious.
 
@@ -55,9 +55,15 @@ Build to this floor without announcing it. The design detector (the project hook
 
 ## Registers
 
-**Brand** (design IS the product: landing pages, marketing, campaigns, portfolios). The deliverable is the impression, in the form the surface demands. A product or service page stops the scroll, earns the click, converts. A cultural surface (an album, a portfolio, a publication, a body of work) IS the work: the artifact leads, the interface recedes, and conversion grammar (benefit copy, feature sections, a sales arc) is a category error there; the visitor should meet the work itself in the first viewport, at every screen size. Brand spans every genre (tech, luxury, consumer, culture); don't collapse them into one look. Imagery-implying briefs (food, travel, place, product, fashion) must ship real, verified imagery, searched for the brand's physical object rather than the category; a colored rectangle where a photo belongs reads as incomplete, and one decisive photo beats five mediocre ones. Choose faces like objects from the brand's world; these training-data defaults mean you stopped looking: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, Space Grotesk, Space Mono, IBM Plex, Inter-as-display, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans. Read `reference/brand.md` for extended depth on substantial brand work.
+Name the visitor's mode before designing; the page's grammar follows from it, and most ruined pages are one mode wearing another mode's grammar. The brief and the surface decide the mode. PRODUCT.md's `register` field names the family (`brand` covers Persuade and Experience; `product` covers Operate and Read), and `reference/brand.md` / `reference/product.md` carry extended depth for the two families.
 
-**Product** (design SERVES the product: app UI, dashboards, admin, tools). A person getting something done: density, scanability, and consistency outrank expressiveness. Product surfaces earn trust by feeling native to their platform: system font stacks and workhorse UI faces are legitimate and often correct here (the brand reject list does not apply). The brand lives in the details: focus states, empty states, microcopy, one owned accent. Read `reference/product.md` for extended depth on substantial product work.
+**Persuade** (landing pages, marketing, campaigns; design IS the product). The deliverable is an impression that stops the scroll, earns the click, converts. Spans every genre (tech, luxury, consumer); don't collapse them into one look. Imagery-implying briefs (food, travel, place, product, fashion) must ship real, verified imagery, searched for the brand's physical object rather than the category; a colored rectangle where a photo belongs reads as incomplete, and one decisive photo beats five mediocre ones. Choose faces like objects from the brand's world; these training-data defaults mean you stopped looking: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, Space Grotesk, Space Mono, IBM Plex, Inter-as-display, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans.
+
+**Operate** (app UI, dashboards, admin, tools; design SERVES the task). A person getting something done: density, scanability, and consistency outrank expressiveness. These surfaces earn trust by feeling native to their platform: system font stacks and workhorse UI faces are legitimate and often correct here (the Persuade reject list does not apply). The brand lives in the details: focus states, empty states, microcopy, one owned accent.
+
+**Read** (documentation, guides, editorial, long-form). The deliverable is comprehension: typographic rigor, a navigable structure the reader can hold in their head, hierarchy built for scanning, chrome that stays out of the way. Density follows the reader's task, not atmosphere, and nothing stands between the reader and the answer. The brand lives in type, spacing, and small accents.
+
+**Experience** (an album, a portfolio, a publication, a body of work). The page IS the work: the artifact leads, the interface recedes, and the visitor meets the work itself in the first viewport at every screen size. Boldness here means trusting the work.
 
 ## Commands
 

.rovodev/skills/impeccable/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: impeccable
 description: Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
-version: 4.0.0-alpha.7
+version: 4.0.0-alpha.8
 user-invocable: true
 argument-hint: "[craft|shape · audit|critique · animate|bolder|colorize|delight|layout|overdrive|quieter|typeset · adapt|clarify|distill · harden|onboard|optimize|polish · init|document|extract|live] [target]"
 license: Apache 2.0
@@ -37,7 +37,7 @@ Approach every design task as the design lead at a small studio known for giving
 
 **Prove, don't claim.** A page earns belief by showing the product doing its job: the interface at work, the mechanism dramatized, numbers and specifics a competitor couldn't copy-paste. A reader should understand what it does by looking, before reading a word. Sections that restate the hero's claim in different words add length, not substance.
 
-**Commit.** Pick a color strategy before picking colors: Restrained (neutrals + one accent, the product-register default) / Committed (one saturated color carries 30-60% of the surface) / Full palette (3-4 named roles) / Drenched (the surface IS the color). Brand surfaces have permission for the bolder strategies; take them when the brief allows. Dark vs. light is never a default: write one sentence of physical scene (who uses this, where, under what light, in what mood) and let it force the answer. The warm cream near-white body background is the saturated AI default; where the axis is free, pick a background that is a choice.
+**Commit.** Pick a color strategy before picking colors: Restrained (neutrals + one accent; the default when the visitor came to operate or read) / Committed (one saturated color carries 30-60% of the surface) / Full palette (3-4 named roles) / Drenched (the surface IS the color). Persuade and Experience surfaces have permission for the bolder strategies; take them when the brief allows. Dark vs. light is never a default: write one sentence of physical scene (who uses this, where, under what light, in what mood) and let it force the answer. The warm cream near-white body background is the saturated AI default; where the axis is free, pick a background that is a choice.
 
 **Calibration.** AI-generated interfaces cluster around a few looks regardless of subject: warm cream + high-contrast serif + terracotta accent; near-black + one neon accent (acid green, cyan) + glowing edges; broadsheet-editorial hairlines + italic display serif + small tracked mono labels. All are legitimate when the brief calls for them; the brief always wins. Where the brief leaves the aesthetic free, landing in one of them means your self-check failed. Same one tier deeper: if someone could guess your aesthetic from the category alone, or from category-plus-avoidance, rework until neither answer is obvious.
 
@@ -55,9 +55,15 @@ Build to this floor without announcing it. The design detector (the project hook
 
 ## Registers
 
-**Brand** (design IS the product: landing pages, marketing, campaigns, portfolios). The deliverable is the impression, in the form the surface demands. A product or service page stops the scroll, earns the click, converts. A cultural surface (an album, a portfolio, a publication, a body of work) IS the work: the artifact leads, the interface recedes, and conversion grammar (benefit copy, feature sections, a sales arc) is a category error there; the visitor should meet the work itself in the first viewport, at every screen size. Brand spans every genre (tech, luxury, consumer, culture); don't collapse them into one look. Imagery-implying briefs (food, travel, place, product, fashion) must ship real, verified imagery, searched for the brand's physical object rather than the category; a colored rectangle where a photo belongs reads as incomplete, and one decisive photo beats five mediocre ones. Choose faces like objects from the brand's world; these training-data defaults mean you stopped looking: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, Space Grotesk, Space Mono, IBM Plex, Inter-as-display, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans. Read `reference/brand.md` for extended depth on substantial brand work.
+Name the visitor's mode before designing; the page's grammar follows from it, and most ruined pages are one mode wearing another mode's grammar. The brief and the surface decide the mode. PRODUCT.md's `register` field names the family (`brand` covers Persuade and Experience; `product` covers Operate and Read), and `reference/brand.md` / `reference/product.md` carry extended depth for the two families.
 
-**Product** (design SERVES the product: app UI, dashboards, admin, tools). A person getting something done: density, scanability, and consistency outrank expressiveness. Product surfaces earn trust by feeling native to their platform: system font stacks and workhorse UI faces are legitimate and often correct here (the brand reject list does not apply). The brand lives in the details: focus states, empty states, microcopy, one owned accent. Read `reference/product.md` for extended depth on substantial product work.
+**Persuade** (landing pages, marketing, campaigns; design IS the product). The deliverable is an impression that stops the scroll, earns the click, converts. Spans every genre (tech, luxury, consumer); don't collapse them into one look. Imagery-implying briefs (food, travel, place, product, fashion) must ship real, verified imagery, searched for the brand's physical object rather than the category; a colored rectangle where a photo belongs reads as incomplete, and one decisive photo beats five mediocre ones. Choose faces like objects from the brand's world; these training-data defaults mean you stopped looking: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, Space Grotesk, Space Mono, IBM Plex, Inter-as-display, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans.
+
+**Operate** (app UI, dashboards, admin, tools; design SERVES the task). A person getting something done: density, scanability, and consistency outrank expressiveness. These surfaces earn trust by feeling native to their platform: system font stacks and workhorse UI faces are legitimate and often correct here (the Persuade reject list does not apply). The brand lives in the details: focus states, empty states, microcopy, one owned accent.
+
+**Read** (documentation, guides, editorial, long-form). The deliverable is comprehension: typographic rigor, a navigable structure the reader can hold in their head, hierarchy built for scanning, chrome that stays out of the way. Density follows the reader's task, not atmosphere, and nothing stands between the reader and the answer. The brand lives in type, spacing, and small accents.
+
+**Experience** (an album, a portfolio, a publication, a body of work). The page IS the work: the artifact leads, the interface recedes, and the visitor meets the work itself in the first viewport at every screen size. Boldness here means trusting the work.
 
 ## Commands
 

.trae-cn/skills/impeccable/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: impeccable
 description: Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
-version: 4.0.0-alpha.7
+version: 4.0.0-alpha.8
 user-invocable: true
 argument-hint: "[craft|shape · audit|critique · animate|bolder|colorize|delight|layout|overdrive|quieter|typeset · adapt|clarify|distill · harden|onboard|optimize|polish · init|document|extract|live] [target]"
 license: Apache 2.0
@@ -34,7 +34,7 @@ Approach every design task as the design lead at a small studio known for giving
 
 **Prove, don't claim.** A page earns belief by showing the product doing its job: the interface at work, the mechanism dramatized, numbers and specifics a competitor couldn't copy-paste. A reader should understand what it does by looking, before reading a word. Sections that restate the hero's claim in different words add length, not substance.
 
-**Commit.** Pick a color strategy before picking colors: Restrained (neutrals + one accent, the product-register default) / Committed (one saturated color carries 30-60% of the surface) / Full palette (3-4 named roles) / Drenched (the surface IS the color). Brand surfaces have permission for the bolder strategies; take them when the brief allows. Dark vs. light is never a default: write one sentence of physical scene (who uses this, where, under what light, in what mood) and let it force the answer. The warm cream near-white body background is the saturated AI default; where the axis is free, pick a background that is a choice.
+**Commit.** Pick a color strategy before picking colors: Restrained (neutrals + one accent; the default when the visitor came to operate or read) / Committed (one saturated color carries 30-60% of the surface) / Full palette (3-4 named roles) / Drenched (the surface IS the color). Persuade and Experience surfaces have permission for the bolder strategies; take them when the brief allows. Dark vs. light is never a default: write one sentence of physical scene (who uses this, where, under what light, in what mood) and let it force the answer. The warm cream near-white body background is the saturated AI default; where the axis is free, pick a background that is a choice.
 
 **Calibration.** AI-generated interfaces cluster around a few looks regardless of subject: warm cream + high-contrast serif + terracotta accent; near-black + one neon accent (acid green, cyan) + glowing edges; broadsheet-editorial hairlines + italic display serif + small tracked mono labels. All are legitimate when the brief calls for them; the brief always wins. Where the brief leaves the aesthetic free, landing in one of them means your self-check failed. Same one tier deeper: if someone could guess your aesthetic from the category alone, or from category-plus-avoidance, rework until neither answer is obvious.
 
@@ -52,9 +52,15 @@ Build to this floor without announcing it. The design detector (the project hook
 
 ## Registers
 
-**Brand** (design IS the product: landing pages, marketing, campaigns, portfolios). The deliverable is the impression, in the form the surface demands. A product or service page stops the scroll, earns the click, converts. A cultural surface (an album, a portfolio, a publication, a body of work) IS the work: the artifact leads, the interface recedes, and conversion grammar (benefit copy, feature sections, a sales arc) is a category error there; the visitor should meet the work itself in the first viewport, at every screen size. Brand spans every genre (tech, luxury, consumer, culture); don't collapse them into one look. Imagery-implying briefs (food, travel, place, product, fashion) must ship real, verified imagery, searched for the brand's physical object rather than the category; a colored rectangle where a photo belongs reads as incomplete, and one decisive photo beats five mediocre ones. Choose faces like objects from the brand's world; these training-data defaults mean you stopped looking: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, Space Grotesk, Space Mono, IBM Plex, Inter-as-display, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans. Read `reference/brand.md` for extended depth on substantial brand work.
+Name the visitor's mode before designing; the page's grammar follows from it, and most ruined pages are one mode wearing another mode's grammar. The brief and the surface decide the mode. PRODUCT.md's `register` field names the family (`brand` covers Persuade and Experience; `product` covers Operate and Read), and `reference/brand.md` / `reference/product.md` carry extended depth for the two families.
 
-**Product** (design SERVES the product: app UI, dashboards, admin, tools). A person getting something done: density, scanability, and consistency outrank expressiveness. Product surfaces earn trust by feeling native to their platform: system font stacks and workhorse UI faces are legitimate and often correct here (the brand reject list does not apply). The brand lives in the details: focus states, empty states, microcopy, one owned accent. Read `reference/product.md` for extended depth on substantial product work.
+**Persuade** (landing pages, marketing, campaigns; design IS the product). The deliverable is an impression that stops the scroll, earns the click, converts. Spans every genre (tech, luxury, consumer); don't collapse them into one look. Imagery-implying briefs (food, travel, place, product, fashion) must ship real, verified imagery, searched for the brand's physical object rather than the category; a colored rectangle where a photo belongs reads as incomplete, and one decisive photo beats five mediocre ones. Choose faces like objects from the brand's world; these training-data defaults mean you stopped looking: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, Space Grotesk, Space Mono, IBM Plex, Inter-as-display, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans.
+
+**Operate** (app UI, dashboards, admin, tools; design SERVES the task). A person getting something done: density, scanability, and consistency outrank expressiveness. These surfaces earn trust by feeling native to their platform: system font stacks and workhorse UI faces are legitimate and often correct here (the Persuade reject list does not apply). The brand lives in the details: focus states, empty states, microcopy, one owned accent.
+
+**Read** (documentation, guides, editorial, long-form). The deliverable is comprehension: typographic rigor, a navigable structure the reader can hold in their head, hierarchy built for scanning, chrome that stays out of the way. Density follows the reader's task, not atmosphere, and nothing stands between the reader and the answer. The brand lives in type, spacing, and small accents.
+
+**Experience** (an album, a portfolio, a publication, a body of work). The page IS the work: the artifact leads, the interface recedes, and the visitor meets the work itself in the first viewport at every screen size. Boldness here means trusting the work.
 
 ## Commands
 

.trae/skills/impeccable/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: impeccable
 description: Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
-version: 4.0.0-alpha.7
+version: 4.0.0-alpha.8
 user-invocable: true
 argument-hint: "[craft|shape · audit|critique · animate|bolder|colorize|delight|layout|overdrive|quieter|typeset · adapt|clarify|distill · harden|onboard|optimize|polish · init|document|extract|live] [target]"
 license: Apache 2.0
@@ -34,7 +34,7 @@ Approach every design task as the design lead at a small studio known for giving
 
 **Prove, don't claim.** A page earns belief by showing the product doing its job: the interface at work, the mechanism dramatized, numbers and specifics a competitor couldn't copy-paste. A reader should understand what it does by looking, before reading a word. Sections that restate the hero's claim in different words add length, not substance.
 
-**Commit.** Pick a color strategy before picking colors: Restrained (neutrals + one accent, the product-register default) / Committed (one saturated color carries 30-60% of the surface) / Full palette (3-4 named roles) / Drenched (the surface IS the color). Brand surfaces have permission for the bolder strategies; take them when the brief allows. Dark vs. light is never a default: write one sentence of physical scene (who uses this, where, under what light, in what mood) and let it force the answer. The warm cream near-white body background is the saturated AI default; where the axis is free, pick a background that is a choice.
+**Commit.** Pick a color strategy before picking colors: Restrained (neutrals + one accent; the default when the visitor came to operate or read) / Committed (one saturated color carries 30-60% of the surface) / Full palette (3-4 named roles) / Drenched (the surface IS the color). Persuade and Experience surfaces have permission for the bolder strategies; take them when the brief allows. Dark vs. light is never a default: write one sentence of physical scene (who uses this, where, under what light, in what mood) and let it force the answer. The warm cream near-white body background is the saturated AI default; where the axis is free, pick a background that is a choice.
 
 **Calibration.** AI-generated interfaces cluster around a few looks regardless of subject: warm cream + high-contrast serif + terracotta accent; near-black + one neon accent (acid green, cyan) + glowing edges; broadsheet-editorial hairlines + italic display serif + small tracked mono labels. All are legitimate when the brief calls for them; the brief always wins. Where the brief leaves the aesthetic free, landing in one of them means your self-check failed. Same one tier deeper: if someone could guess your aesthetic from the category alone, or from category-plus-avoidance, rework until neither answer is obvious.
 
@@ -52,9 +52,15 @@ Build to this floor without announcing it. The design detector (the project hook
 
 ## Registers
 
-**Brand** (design IS the product: landing pages, marketing, campaigns, portfolios). The deliverable is the impression, in the form the surface demands. A product or service page stops the scroll, earns the click, converts. A cultural surface (an album, a portfolio, a publication, a body of work) IS the work: the artifact leads, the interface recedes, and conversion grammar (benefit copy, feature sections, a sales arc) is a category error there; the visitor should meet the work itself in the first viewport, at every screen size. Brand spans every genre (tech, luxury, consumer, culture); don't collapse them into one look. Imagery-implying briefs (food, travel, place, product, fashion) must ship real, verified imagery, searched for the brand's physical object rather than the category; a colored rectangle where a photo belongs reads as incomplete, and one decisive photo beats five mediocre ones. Choose faces like objects from the brand's world; these training-data defaults mean you stopped looking: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, Space Grotesk, Space Mono, IBM Plex, Inter-as-display, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans. Read `reference/brand.md` for extended depth on substantial brand work.
+Name the visitor's mode before designing; the page's grammar follows from it, and most ruined pages are one mode wearing another mode's grammar. The brief and the surface decide the mode. PRODUCT.md's `register` field names the family (`brand` covers Persuade and Experience; `product` covers Operate and Read), and `reference/brand.md` / `reference/product.md` carry extended depth for the two families.
 
-**Product** (design SERVES the product: app UI, dashboards, admin, tools). A person getting something done: density, scanability, and consistency outrank expressiveness. Product surfaces earn trust by feeling native to their platform: system font stacks and workhorse UI faces are legitimate and often correct here (the brand reject list does not apply). The brand lives in the details: focus states, empty states, microcopy, one owned accent. Read `reference/product.md` for extended depth on substantial product work.
+**Persuade** (landing pages, marketing, campaigns; design IS the product). The deliverable is an impression that stops the scroll, earns the click, converts. Spans every genre (tech, luxury, consumer); don't collapse them into one look. Imagery-implying briefs (food, travel, place, product, fashion) must ship real, verified imagery, searched for the brand's physical object rather than the category; a colored rectangle where a photo belongs reads as incomplete, and one decisive photo beats five mediocre ones. Choose faces like objects from the brand's world; these training-data defaults mean you stopped looking: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, Space Grotesk, Space Mono, IBM Plex, Inter-as-display, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans.
+
+**Operate** (app UI, dashboards, admin, tools; design SERVES the task). A person getting something done: density, scanability, and consistency outrank expressiveness. These surfaces earn trust by feeling native to their platform: system font stacks and workhorse UI faces are legitimate and often correct here (the Persuade reject list does not apply). The brand lives in the details: focus states, empty states, microcopy, one owned accent.
+
+**Read** (documentation, guides, editorial, long-form). The deliverable is comprehension: typographic rigor, a navigable structure the reader can hold in their head, hierarchy built for scanning, chrome that stays out of the way. Density follows the reader's task, not atmosphere, and nothing stands between the reader and the answer. The brand lives in type, spacing, and small accents.
+
+**Experience** (an album, a portfolio, a publication, a body of work). The page IS the work: the artifact leads, the interface recedes, and the visitor meets the work itself in the first viewport at every screen size. Boldness here means trusting the work.
 
 ## Commands
 

docs/live-performance.md

@@ -0,0 +1,100 @@
+# Impeccable Live performance baseline
+
+## Goal
+
+Measure the latency Impeccable controls in the Pick → Go → first usable variant loop, keep model time separate, expose the result in the development-only `/live-lab`, and use the evidence to define the optimization phase without regressing output quality or non-Codex harnesses.
+
+## Benchmark contract
+
+`bun run bench:live` reuses the Live runtime E2E fixture system. It stages a real framework project, starts the helper and framework dev servers, opens Chromium, drives the picker, and records monotonic boundaries for:
+
+1. Go → generate POST begins (`browserPreparationMs`)
+2. generate POST → agent poll receives the event (`serverPickupMs`)
+3. deterministic source scaffold (`scaffoldMs`)
+4. agent generation (`generationMs`)
+5. source write (`writeMs`)
+6. write → first variant in the DOM (`writeToFirstVariantMs`)
+7. first variant → all variants/cycling (`deliveryGapMs`)
+
+The deterministic agent measures Impeccable’s fixed floor. An LLM-backed run uses the same orchestration seam, but remains opt-in because it sends staged fixture source to an external provider.
+
+## Baseline, July 11 2026
+
+Fixture: `vite8-react-plain`. Browser: local headless Chromium. Three variants. Warm interaction loop.
+
+| Metric | Plain, median | Annotated, median |
+|---|---:|---:|
+| Go → first variant | 916 ms | 431 ms |
+| Browser preparation | 828 ms | 335 ms |
+| Server pickup | 0.8 ms | 0.4 ms |
+| Scaffold | 41 ms | 41 ms |
+| Write → first variant | 47 ms | 54 ms |
+| First → all variants | 1.3 ms | 1.3 ms |
+
+The plain path spends 90.4% of its model-free latency before the generate request leaves the browser. `handleGo()` always calls `captureAndEmit()`, which captures the element for the generating shader even when there are no annotations to upload. The annotation-path difference needs a capture microbenchmark before changing branch logic.
+
+## Harness evidence
+
+- The current Codex desktop unified-exec probe did not surface delayed background output automatically. The sentinel appeared only after an explicit session read, and no app terminal was attached.
+- Codex custom agents can set their own model and `model_reasoning_effort`, and can be resumed. Fresh subagents carry startup/context cost, so a Live producer needs a warm-vs-cold benchmark. [Official Codex subagent docs](https://learn.chatgpt.com/docs/agent-configuration/subagents)
+- Codex app-server exposes streaming command output plus `fs.watch`/`fs.changed` notifications. That proves the primitives exist, not that a watcher can wake a model turn quickly. [Official app-server API](https://learn.chatgpt.com/docs/app-server#api-overview)
+- Claude Code subagents support model, effort, background execution, and resume. The docs explicitly warn that latency-sensitive tasks can be faster in the main conversation because a subagent starts with fresh context. [Official Claude Code subagent docs](https://code.claude.com/docs/en/sub-agents)
+
+## Evidence-ranked experiments
+
+### 1. Dispatch first, capture second
+
+For unannotated picks, send `generate` immediately, then capture the shader texture concurrently. Preserve annotated capture as blocking until the protocol supports attaching screenshot evidence after event pickup. This targets the measured 828 ms plain-path bottleneck and does not touch generation quality.
+
+### 2. Progressive variant delivery
+
+Today all variants are written atomically. Add a per-variant ready protocol and reveal the first validated variant while the remaining work continues. Keep a central writer so parallel workers never edit the same file.
+
+### 3. Warm harness-native producer
+
+Ship provider-specific agents from the existing `skill/agents/` source:
+
+- Codex: a narrow custom agent on a faster model/lower effort, resumed across Live events.
+- Claude: a narrow background subagent using Haiku or the configured fast model, with the current main-thread flow retained as fallback.
+
+Measure cold spawn, warm resume, prompt prefill, generation, validation failures, and visual-quality acceptance rate. Speed is a regression if users reject more variants.
+
+### 4. Local selection prework
+
+The old prefetch event was disabled because quick Go clicks paid an extra harness round trip. Replace it with debounced local work: resolve the source file, run wrap discovery in dry-run mode, summarize tokens/identity, and load the action reference. Cancel or reuse on Go without queueing another agent event.
+
+### 5. Lazy parameters
+
+Return preview HTML/CSS first. Infer coarse knobs locally or request parameters only for the visible/selected variant. Measure output-token reduction and time-to-first-variant separately from time-to-tunable-variant.
+
+### 6. Structured parallel variant workers
+
+Ask independent workers for one JSON variant each, then validate and write from a single coordinator. Stream the first valid result. Compare total token cost, diversity, failure rate, and first-ready latency against one-agent generation.
+
+### 7. Compile a smaller producer contract
+
+The full Live reference is authoritative but much larger than a single generation event needs. Build a generated provider-specific contract containing the output schema, identity lock, selected action reference, and current framework authoring mode. Keep stable content at the prompt-cache prefix.
+
+### 8. Watch the durable journal
+
+Benchmark an app-server/plugin bridge that watches `.impeccable/live/sessions/` and starts or steers a dedicated Live turn. Compare click → model-start against foreground poll and background terminal watchers. Do not ship it merely because `fs.watch` exists.
+
+### 9. Deterministic scaffolds before the model
+
+For common elements, create structural variant skeletons locally and ask the model only for design decisions and CSS. This reduces output shape failures, but must not force generic layouts or constrain the three directions.
+
+### 10. Adaptive variant count
+
+Return one high-confidence variant first, then let the user request two more, or predict 1/2/3 variants from element weight. Measure accepted-design latency, not only all-variants latency.
+
+### 11. Quality-aware fast path
+
+Run a fast producer first and validate identity, copy preservation, param wiring, and detector findings. Escalate only failed outputs to the main model. This creates a latency/quality cascade rather than a single global model choice.
+
+### 12. Perceived-progress truth
+
+Replace generic generating dots with truthful stage states from the journal: preparing capture, locating source, generating, previewing variant 1, and finishing alternatives. Never display fake percentage progress.
+
+## Follow-up goal
+
+Reduce the median plain Pick → first usable variant latency by at least 25% on the measured Vite/Chromium protocol baseline and materially reduce model-backed time-to-first-variant, while holding source validity, copy preservation, visual-quality acceptance, and Claude/Codex harness compatibility at or above baseline. Implement the unannotated dispatch-before-capture path first, then progressive delivery or a warm provider-specific producer only when their own benchmarks show a net win.

plugin/.claude-plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "impeccable",
   "description": "Design fluency for frontend development. 1 skill with 23 commands (/impeccable polish, /impeccable audit, /impeccable critique, etc.) and curated anti-pattern detection.",
-  "version": "4.0.0-alpha.7",
+  "version": "4.0.0-alpha.8",
   "author": {
     "name": "Paul Bakaus",
     "email": "paul@paulbakaus.com"

plugin/skills/impeccable/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: impeccable
 description: Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
-version: 4.0.0-alpha.7
+version: 4.0.0-alpha.8
 user-invocable: true
 argument-hint: "[craft|shape · audit|critique · animate|bolder|colorize|delight|layout|overdrive|quieter|typeset · adapt|clarify|distill · harden|onboard|optimize|polish · init|document|extract|live] [target]"
 license: Apache 2.0
@@ -37,7 +37,7 @@ Approach every design task as the design lead at a small studio known for giving
 
 **Prove, don't claim.** A page earns belief by showing the product doing its job: the interface at work, the mechanism dramatized, numbers and specifics a competitor couldn't copy-paste. A reader should understand what it does by looking, before reading a word. Sections that restate the hero's claim in different words add length, not substance.
 
-**Commit.** Pick a color strategy before picking colors: Restrained (neutrals + one accent, the product-register default) / Committed (one saturated color carries 30-60% of the surface) / Full palette (3-4 named roles) / Drenched (the surface IS the color). Brand surfaces have permission for the bolder strategies; take them when the brief allows. Dark vs. light is never a default: write one sentence of physical scene (who uses this, where, under what light, in what mood) and let it force the answer. The warm cream near-white body background is the saturated AI default; where the axis is free, pick a background that is a choice.
+**Commit.** Pick a color strategy before picking colors: Restrained (neutrals + one accent; the default when the visitor came to operate or read) / Committed (one saturated color carries 30-60% of the surface) / Full palette (3-4 named roles) / Drenched (the surface IS the color). Persuade and Experience surfaces have permission for the bolder strategies; take them when the brief allows. Dark vs. light is never a default: write one sentence of physical scene (who uses this, where, under what light, in what mood) and let it force the answer. The warm cream near-white body background is the saturated AI default; where the axis is free, pick a background that is a choice.
 
 **Calibration.** AI-generated interfaces cluster around a few looks regardless of subject: warm cream + high-contrast serif + terracotta accent; near-black + one neon accent (acid green, cyan) + glowing edges; broadsheet-editorial hairlines + italic display serif + small tracked mono labels. All are legitimate when the brief calls for them; the brief always wins. Where the brief leaves the aesthetic free, landing in one of them means your self-check failed. Same one tier deeper: if someone could guess your aesthetic from the category alone, or from category-plus-avoidance, rework until neither answer is obvious.
 
@@ -55,9 +55,15 @@ Build to this floor without announcing it. The design detector (the project hook
 
 ## Registers
 
-**Brand** (design IS the product: landing pages, marketing, campaigns, portfolios). The deliverable is the impression, in the form the surface demands. A product or service page stops the scroll, earns the click, converts. A cultural surface (an album, a portfolio, a publication, a body of work) IS the work: the artifact leads, the interface recedes, and conversion grammar (benefit copy, feature sections, a sales arc) is a category error there; the visitor should meet the work itself in the first viewport, at every screen size. Brand spans every genre (tech, luxury, consumer, culture); don't collapse them into one look. Imagery-implying briefs (food, travel, place, product, fashion) must ship real, verified imagery, searched for the brand's physical object rather than the category; a colored rectangle where a photo belongs reads as incomplete, and one decisive photo beats five mediocre ones. Choose faces like objects from the brand's world; these training-data defaults mean you stopped looking: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, Space Grotesk, Space Mono, IBM Plex, Inter-as-display, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans. Read `reference/brand.md` for extended depth on substantial brand work.
+Name the visitor's mode before designing; the page's grammar follows from it, and most ruined pages are one mode wearing another mode's grammar. The brief and the surface decide the mode. PRODUCT.md's `register` field names the family (`brand` covers Persuade and Experience; `product` covers Operate and Read), and `reference/brand.md` / `reference/product.md` carry extended depth for the two families.
 
-**Product** (design SERVES the product: app UI, dashboards, admin, tools). A person getting something done: density, scanability, and consistency outrank expressiveness. Product surfaces earn trust by feeling native to their platform: system font stacks and workhorse UI faces are legitimate and often correct here (the brand reject list does not apply). The brand lives in the details: focus states, empty states, microcopy, one owned accent. Read `reference/product.md` for extended depth on substantial product work.
+**Persuade** (landing pages, marketing, campaigns; design IS the product). The deliverable is an impression that stops the scroll, earns the click, converts. Spans every genre (tech, luxury, consumer); don't collapse them into one look. Imagery-implying briefs (food, travel, place, product, fashion) must ship real, verified imagery, searched for the brand's physical object rather than the category; a colored rectangle where a photo belongs reads as incomplete, and one decisive photo beats five mediocre ones. Choose faces like objects from the brand's world; these training-data defaults mean you stopped looking: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, Space Grotesk, Space Mono, IBM Plex, Inter-as-display, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans.
+
+**Operate** (app UI, dashboards, admin, tools; design SERVES the task). A person getting something done: density, scanability, and consistency outrank expressiveness. These surfaces earn trust by feeling native to their platform: system font stacks and workhorse UI faces are legitimate and often correct here (the Persuade reject list does not apply). The brand lives in the details: focus states, empty states, microcopy, one owned accent.
+
+**Read** (documentation, guides, editorial, long-form). The deliverable is comprehension: typographic rigor, a navigable structure the reader can hold in their head, hierarchy built for scanning, chrome that stays out of the way. Density follows the reader's task, not atmosphere, and nothing stands between the reader and the answer. The brand lives in type, spacing, and small accents.
+
+**Experience** (an album, a portfolio, a publication, a body of work). The page IS the work: the artifact leads, the interface recedes, and the visitor meets the work itself in the first viewport at every screen size. Boldness here means trusting the work.
 
 ## Commands
 

scripts/test-suites.mjs

@@ -124,6 +124,7 @@ export const SUITES = {
           'tests/live-browser-regression.test.mjs',
           'tests/live-browser-session.test.mjs',
           'tests/live-browser-source.test.mjs',
+          'tests/live-benchmark.test.mjs',
           'tests/live-commit-manual-edits.test.mjs',
           'tests/live-completion.test.mjs',
           'tests/live-copy-edit-agent.test.mjs',

site/data/live-harnesses.ts

@@ -0,0 +1,114 @@
+export const harnessPaths = [
+  {
+    name: 'Foreground long-poll',
+    harness: 'Codex desktop · observed',
+    pickup: 'Immediate when the turn is blocked',
+    tradeoff: 'Reliable, but Live occupies the main agent and inherits its model speed.',
+    status: 'Baseline',
+    statusTone: 'ready',
+  },
+  {
+    name: 'Background terminal + watcher',
+    harness: 'Codex app-server · available primitives',
+    pickup: 'Not yet measured end-to-end',
+    tradeoff: 'The app-server exposes output notifications and fs.watch, but a watcher still has to wake model work quickly.',
+    status: 'Benchmark next',
+    statusTone: 'measure',
+    source: 'https://learn.chatgpt.com/docs/app-server#api-overview',
+  },
+  {
+    name: 'Warm variant producer',
+    harness: 'Codex custom agent',
+    pickup: 'Spawn/resume cost unknown',
+    tradeoff: 'Can pin a faster model and lower reasoning, but fresh context and handoff can erase the gain unless the agent stays warm.',
+    status: 'Prototype',
+    statusTone: 'prototype',
+    source: 'https://learn.chatgpt.com/docs/agent-configuration/subagents',
+  },
+  {
+    name: 'Background variant producer',
+    harness: 'Claude Code subagent',
+    pickup: 'Supported; measure per version',
+    tradeoff: 'Model, effort, background execution, and resume are configurable. Preserve the current main-thread path as fallback.',
+    status: 'Cross-harness control',
+    statusTone: 'control',
+    source: 'https://code.claude.com/docs/en/sub-agents',
+  },
+];
+
+export const liveExperiments = [
+  {
+    rank: 1,
+    title: 'Dispatch first, capture second',
+    evidence: 'The plain path spends 828 ms before the generate POST leaves the browser.',
+    move: 'For unannotated picks, post the event immediately and run shader capture in parallel. Keep annotated capture on the blocking path until the protocol can attach evidence later.',
+    expected: 'Removes up to 90% of the measured model-free floor on the common path.',
+    confidence: 'Measured',
+  },
+  {
+    rank: 2,
+    title: 'Reveal variants progressively',
+    evidence: 'First and all variants arrive together today; the measured delivery gap is only the observer settling time.',
+    move: 'Give each variant its own ready event or preview file. Reveal variant 1 as soon as it validates while the remaining variants continue.',
+    expected: 'Large perceived win whenever generation is the dominant stage.',
+    confidence: 'Protocol change',
+  },
+  {
+    rank: 3,
+    title: 'Keep a harness-native producer warm',
+    evidence: 'Codex and Claude can assign a different model to a custom subagent; both support continuing agent state.',
+    move: 'Resume one narrow Live producer with a compact contract, low reasoning, and source-write tools only. Quality-gate its output before preview.',
+    expected: 'Reduces model latency without forcing the user to change the main conversation model.',
+    confidence: 'Needs spawn/resume benchmark',
+  },
+  {
+    rank: 4,
+    title: 'Move context work into the selection dwell',
+    evidence: 'The existing prefetch event was disabled because quick Go clicks paid an extra harness round trip.',
+    move: 'Debounce selection, then resolve the source file, style mode, token summary, and identity lock locally. Cancel or reuse the result on Go without queueing a model turn.',
+    expected: 'Shortens scaffold and prompt preparation while keeping quick clicks cheap.',
+    confidence: 'Low-risk prototype',
+  },
+  {
+    rank: 5,
+    title: 'Generate knobs after pixels',
+    evidence: 'Parameter manifests are authored in the same response as every variant even though the first job is visual comparison.',
+    move: 'Render validated variants first. Infer coarse CSS knobs locally or ask the producer for parameters only for the visible/selected variant.',
+    expected: 'Cuts output tokens and lets the first useful preview land sooner.',
+    confidence: 'Quality experiment',
+  },
+  {
+    rank: 6,
+    title: 'Parallelize variant ideas, centralize writes',
+    evidence: 'Modern harnesses can run several specialized agents concurrently, but shared-file edits create coordination risk.',
+    move: 'Have workers return one structured variant each; one coordinator validates and performs the only source write. Stream the first valid result.',
+    expected: 'Lower time to first option and stronger diversity at higher token cost.',
+    confidence: 'Expensive experiment',
+  },
+  {
+    rank: 7,
+    title: 'Trim and cache the producer contract',
+    evidence: 'The full Live reference is large and stable; only a small slice is needed for one generate event.',
+    move: 'Compile a provider-specific generation contract, keep the stable prefix cacheable, and attach only the action reference plus picked-element context.',
+    expected: 'Lower prefill latency and cost, especially for fresh subagents.',
+    confidence: 'Harness-specific',
+  },
+  {
+    rank: 8,
+    title: 'Wake on the journal, not terminal stdout',
+    evidence: 'Codex app-server exposes fs.watch and process output notifications, while this desktop probe still required an explicit terminal read.',
+    move: 'Benchmark a plugin/app-server bridge that watches the durable Live journal and starts or steers a dedicated turn directly.',
+    expected: 'Frees the main turn if watcher-to-turn startup beats foreground polling.',
+    confidence: 'Architectural bet',
+  },
+];
+
+export const currentHarnessProbe = {
+  testedAt: '2026-07-11',
+  surface: 'Codex desktop unified exec',
+  delayedOutputMs: 3000,
+  processExitMs: 4000,
+  surfacedAutomatically: false,
+  result: 'The sentinel appeared only after an explicit session read; no app terminal was attached.',
+};
+

site/data/live-performance.json

@@ -0,0 +1,378 @@
+{
+  "schemaVersion": 1,
+  "generatedAt": "2026-07-11T23:46:48.581Z",
+  "reports": [
+    {
+      "schemaVersion": 1,
+      "generatedAt": "2026-07-11T23:46:32.205Z",
+      "benchmark": {
+        "fixture": "vite8-react-plain",
+        "agent": "fake",
+        "provider": "deterministic",
+        "model": null,
+        "scenario": "plain",
+        "variants": 3,
+        "delivery": "atomic"
+      },
+      "setup": {
+        "dependencies": 750.27,
+        "liveServer": 241.02,
+        "injection": 25.24,
+        "devServer": 521.01,
+        "pageLoad": 101.88,
+        "handshake": 263.84
+      },
+      "summary": {
+        "count": 7,
+        "metrics": {
+          "browserPreparationMs": {
+            "median": 828.36,
+            "p95": 834.77,
+            "min": 826.16,
+            "max": 836.91
+          },
+          "serverPickupMs": {
+            "median": 0.8,
+            "p95": 2.57,
+            "min": 0.58,
+            "max": 3.25
+          },
+          "goToAgentMs": {
+            "median": 829.06,
+            "p95": 837.29,
+            "min": 826.75,
+            "max": 840.16
+          },
+          "scaffoldMs": {
+            "median": 40.99,
+            "p95": 45.12,
+            "min": 40.21,
+            "max": 46.46
+          },
+          "generationMs": {
+            "median": 0.04,
+            "p95": 0.16,
+            "min": 0.03,
+            "max": 0.19
+          },
+          "writeMs": {
+            "median": 0.38,
+            "p95": 0.7,
+            "min": 0.33,
+            "max": 0.75
+          },
+          "writeToFirstVariantMs": {
+            "median": 46.82,
+            "p95": 67.96,
+            "min": 35.43,
+            "max": 74.14
+          },
+          "replyMs": {
+            "median": 2.24,
+            "p95": 3.3,
+            "min": 1.23,
+            "max": 3.69
+          },
+          "goToFirstVariantMs": {
+            "median": 916.31,
+            "p95": 950.62,
+            "min": 906.84,
+            "max": 961.99
+          },
+          "goToAllVariantsMs": {
+            "median": 917.33,
+            "p95": 954.93,
+            "min": 908.06,
+            "max": 966
+          },
+          "deliveryGapMs": {
+            "median": 1.28,
+            "p95": 4.71,
+            "min": 1.02,
+            "max": 5.01
+          },
+          "impeccableOverheadMs": {
+            "median": 916.28,
+            "p95": 950.47,
+            "min": 906.76,
+            "max": 961.8
+          }
+        }
+      },
+      "runs": [
+        {
+          "iteration": 1,
+          "scenario": "plain",
+          "eventId": "6a9e48dd",
+          "browserPreparationMs": 836.91,
+          "serverPickupMs": 3.25,
+          "goToAgentMs": 840.16,
+          "scaffoldMs": 46.46,
+          "generationMs": 0.19,
+          "writeMs": 0.75,
+          "writeToFirstVariantMs": 74.14,
+          "replyMs": 3.69,
+          "goToFirstVariantMs": 961.99,
+          "goToAllVariantsMs": 966,
+          "deliveryGapMs": 4.01,
+          "impeccableOverheadMs": 961.8
+        },
+        {
+          "iteration": 2,
+          "scenario": "plain",
+          "eventId": "79334eff",
+          "browserPreparationMs": 829.79,
+          "serverPickupMs": 0.8,
+          "goToAgentMs": 830.59,
+          "scaffoldMs": 40.29,
+          "generationMs": 0.08,
+          "writeMs": 0.36,
+          "writeToFirstVariantMs": 35.43,
+          "replyMs": 1.23,
+          "goToFirstVariantMs": 906.84,
+          "goToAllVariantsMs": 908.06,
+          "deliveryGapMs": 1.23,
+          "impeccableOverheadMs": 906.76
+        },
+        {
+          "iteration": 3,
+          "scenario": "plain",
+          "eventId": "e90cfb27",
+          "browserPreparationMs": 829.35,
+          "serverPickupMs": 0.99,
+          "goToAgentMs": 830.34,
+          "scaffoldMs": 40.21,
+          "generationMs": 0.03,
+          "writeMs": 0.58,
+          "writeToFirstVariantMs": 42.74,
+          "replyMs": 2.38,
+          "goToFirstVariantMs": 913.95,
+          "goToAllVariantsMs": 915.28,
+          "deliveryGapMs": 1.33,
+          "impeccableOverheadMs": 913.92
+        },
+        {
+          "iteration": 4,
+          "scenario": "plain",
+          "eventId": "3fef871d",
+          "browserPreparationMs": 826.16,
+          "serverPickupMs": 0.58,
+          "goToAgentMs": 826.75,
+          "scaffoldMs": 41.99,
+          "generationMs": 0.04,
+          "writeMs": 0.4,
+          "writeToFirstVariantMs": 44.86,
+          "replyMs": 2.05,
+          "goToFirstVariantMs": 914.08,
+          "goToAllVariantsMs": 915.21,
+          "deliveryGapMs": 1.13,
+          "impeccableOverheadMs": 914.04
+        },
+        {
+          "iteration": 5,
+          "scenario": "plain",
+          "eventId": "d67ced1d",
+          "browserPreparationMs": 828.36,
+          "serverPickupMs": 0.7,
+          "goToAgentMs": 829.06,
+          "scaffoldMs": 41.55,
+          "generationMs": 0.04,
+          "writeMs": 0.38,
+          "writeToFirstVariantMs": 53.03,
+          "replyMs": 2.24,
+          "goToFirstVariantMs": 924.09,
+          "goToAllVariantsMs": 929.1,
+          "deliveryGapMs": 5.01,
+          "impeccableOverheadMs": 924.05
+        },
+        {
+          "iteration": 6,
+          "scenario": "plain",
+          "eventId": "8ec42ed8",
+          "browserPreparationMs": 827.68,
+          "serverPickupMs": 0.86,
+          "goToAgentMs": 828.54,
+          "scaffoldMs": 40.55,
+          "generationMs": 0.03,
+          "writeMs": 0.34,
+          "writeToFirstVariantMs": 46.82,
+          "replyMs": 2.3,
+          "goToFirstVariantMs": 916.31,
+          "goToAllVariantsMs": 917.33,
+          "deliveryGapMs": 1.02,
+          "impeccableOverheadMs": 916.28
+        },
+        {
+          "iteration": 7,
+          "scenario": "plain",
+          "eventId": "545113b0",
+          "browserPreparationMs": 826.45,
+          "serverPickupMs": 0.62,
+          "goToAgentMs": 827.07,
+          "scaffoldMs": 40.99,
+          "generationMs": 0.03,
+          "writeMs": 0.33,
+          "writeToFirstVariantMs": 53.55,
+          "replyMs": 2.15,
+          "goToFirstVariantMs": 921.99,
+          "goToAllVariantsMs": 923.27,
+          "deliveryGapMs": 1.28,
+          "impeccableOverheadMs": 921.96
+        }
+      ],
+      "harnessProbe": null
+    },
+    {
+      "schemaVersion": 1,
+      "generatedAt": "2026-07-11T23:46:48.580Z",
+      "benchmark": {
+        "fixture": "vite8-react-plain",
+        "agent": "fake",
+        "provider": "deterministic",
+        "model": null,
+        "scenario": "annotated",
+        "variants": 3,
+        "delivery": "atomic"
+      },
+      "setup": {
+        "dependencies": 766.31,
+        "liveServer": 241.6,
+        "injection": 24.86,
+        "devServer": 521.99,
+        "pageLoad": 100.94,
+        "handshake": 264.71
+      },
+      "summary": {
+        "count": 3,
+        "metrics": {
+          "browserPreparationMs": {
+            "median": 334.98,
+            "p95": 359.15,
+            "min": 330.18,
+            "max": 361.84
+          },
+          "serverPickupMs": {
+            "median": 0.77,
+            "p95": 3.12,
+            "min": 0.42,
+            "max": 3.38
+          },
+          "goToAgentMs": {
+            "median": 335.4,
+            "p95": 359.89,
+            "min": 333.55,
+            "max": 362.61
+          },
+          "scaffoldMs": {
+            "median": 41.47,
+            "p95": 41.93,
+            "min": 41.03,
+            "max": 41.98
+          },
+          "generationMs": {
+            "median": 0.09,
+            "p95": 0.16,
+            "min": 0.04,
+            "max": 0.17
+          },
+          "writeMs": {
+            "median": 0.42,
+            "p95": 0.61,
+            "min": 0.37,
+            "max": 0.63
+          },
+          "writeToFirstVariantMs": {
+            "median": 53.51,
+            "p95": 104.9,
+            "min": 26.56,
+            "max": 110.61
+          },
+          "replyMs": {
+            "median": 2.52,
+            "p95": 3.22,
+            "min": 2.08,
+            "max": 3.3
+          },
+          "goToFirstVariantMs": {
+            "median": 430.97,
+            "p95": 481.59,
+            "min": 430.64,
+            "max": 487.21
+          },
+          "goToAllVariantsMs": {
+            "median": 432.3,
+            "p95": 485.66,
+            "min": 431.85,
+            "max": 491.59
+          },
+          "deliveryGapMs": {
+            "median": 1.32,
+            "p95": 4.08,
+            "min": 1.21,
+            "max": 4.39
+          },
+          "impeccableOverheadMs": {
+            "median": 430.88,
+            "p95": 481.42,
+            "min": 430.6,
+            "max": 487.04
+          }
+        }
+      },
+      "runs": [
+        {
+          "iteration": 1,
+          "scenario": "annotated",
+          "eventId": "e767f0ce",
+          "browserPreparationMs": 330.18,
+          "serverPickupMs": 3.38,
+          "goToAgentMs": 333.55,
+          "scaffoldMs": 41.98,
+          "generationMs": 0.17,
+          "writeMs": 0.63,
+          "writeToFirstVariantMs": 110.61,
+          "replyMs": 3.3,
+          "goToFirstVariantMs": 487.21,
+          "goToAllVariantsMs": 491.59,
+          "deliveryGapMs": 4.39,
+          "impeccableOverheadMs": 487.04
+        },
+        {
+          "iteration": 2,
+          "scenario": "annotated",
+          "eventId": "5aca9e96",
+          "browserPreparationMs": 334.98,
+          "serverPickupMs": 0.42,
+          "goToAgentMs": 335.4,
+          "scaffoldMs": 41.47,
+          "generationMs": 0.09,
+          "writeMs": 0.42,
+          "writeToFirstVariantMs": 53.51,
+          "replyMs": 2.08,
+          "goToFirstVariantMs": 430.97,
+          "goToAllVariantsMs": 432.3,
+          "deliveryGapMs": 1.32,
+          "impeccableOverheadMs": 430.88
+        },
+        {
+          "iteration": 3,
+          "scenario": "annotated",
+          "eventId": "72cfa915",
+          "browserPreparationMs": 361.84,
+          "serverPickupMs": 0.77,
+          "goToAgentMs": 362.61,
+          "scaffoldMs": 41.03,
+          "generationMs": 0.04,
+          "writeMs": 0.37,
+          "writeToFirstVariantMs": 26.56,
+          "replyMs": 2.52,
+          "goToFirstVariantMs": 430.64,
+          "goToAllVariantsMs": 431.85,
+          "deliveryGapMs": 1.21,
+          "impeccableOverheadMs": 430.6
+        }
+      ],
+      "harnessProbe": null
+    }
+  ]
+}

site/pages/live-lab/index.astro

@@ -0,0 +1,251 @@
+---
+import Base from '../../layouts/Base.astro';
+import benchmarkData from '../../data/live-performance.json';
+import { currentHarnessProbe, harnessPaths, liveExperiments } from '../../data/live-harnesses';
+import '../../styles/sub-pages.css';
+import '../../styles/live-performance.css';
+
+const reports = 'reports' in benchmarkData ? benchmarkData.reports : [benchmarkData];
+const plain = reports.find(report => report.benchmark.scenario === 'plain' && report.benchmark.agent === 'fake') || reports[0];
+const annotated = reports.find(report => report.benchmark.scenario === 'annotated' && report.benchmark.agent === 'fake');
+const metric = (name: string) => plain.summary.metrics[name]?.median || 0;
+const protocolFloor = metric('goToFirstVariantMs');
+const browserPreparation = metric('browserPreparationMs');
+const serverPickup = metric('serverPickupMs');
+const scaffold = metric('scaffoldMs');
+const writeAndRender = metric('writeMs') + metric('writeToFirstVariantMs');
+const overlapFloor = Math.max(0, protocolFloor - browserPreparation);
+const preparationShare = protocolFloor ? (browserPreparation / protocolFloor) * 100 : 0;
+const annotatedFloor = annotated?.summary.metrics.goToFirstVariantMs?.median || 0;
+const maxScenarioFloor = Math.max(protocolFloor, annotatedFloor, 1);
+const generatedDate = new Date(plain.generatedAt).toLocaleDateString('en-US', {
+  month: 'short', day: 'numeric', year: 'numeric',
+});
+
+const displayMs = (value: number) => {
+  if (value >= 1000) return `${(value / 1000).toFixed(value >= 10_000 ? 1 : 2)} s`;
+  if (value < 1) return '<1 ms';
+  return `${Math.round(value)} ms`;
+};
+
+const stageData = [
+  { name: 'Browser preparation', value: browserPreparation, tone: 'capture' },
+  { name: 'Server pickup', value: serverPickup, tone: 'pickup' },
+  { name: 'Source scaffold', value: scaffold, tone: 'scaffold' },
+  { name: 'Write + browser settle', value: writeAndRender, tone: 'render' },
+];
+---
+
+<Base
+  title="Live Latency Lab | Impeccable"
+  description="Measured latency for Impeccable Live, from Go to the first usable variant."
+  bodyClass="sub-page live-performance-page"
+  mainClass="live-performance-main"
+  noIndex
+  hideHeader
+  hideFooter
+>
+  <header class="live-lab-header">
+    <a class="live-lab-brand ks-brand" href="/live" aria-label="Back to Live Mode">
+      <span class="ks-mark" aria-hidden="true">
+        <svg viewBox="0 0 24 24" fill="currentColor">
+          <path d="M5 2.5 L13.5 2.5 L5.5 21.5 L5 21.5 Q2.5 21.5 2.5 19 L2.5 5 Q2.5 2.5 5 2.5 Z"></path>
+          <path d="M16.5 2.5 L19 2.5 Q21.5 2.5 21.5 5 L21.5 19 Q21.5 21.5 19 21.5 L8.5 21.5 Z"></path>
+        </svg>
+      </span>
+      <span class="ks-wordmark">Impeccable</span>
+    </a>
+    <div>
+      <strong>Live Latency Lab</strong>
+      <span>Development benchmark</span>
+    </div>
+  </header>
+  <article
+    class="live-performance"
+    data-live-performance
+    data-protocol-floor={protocolFloor}
+    data-overlap-floor={overlapFloor}
+  >
+    <header class="live-performance-hero ks-section">
+      <p class="live-performance-kicker">Live latency lab · protocol baseline</p>
+      <h1>The wait starts<br /><span>before the model.</span></h1>
+      <p class="live-performance-lede">
+        With generation removed, Go still takes {displayMs(protocolFloor)} to show the first variant.
+        {' '}{preparationShare.toFixed(1)}% of that time passes before the generate event leaves the browser.
+      </p>
+      <div class="live-performance-meta" aria-label="Benchmark context">
+        <span>{plain.summary.count} warm runs</span>
+        <span>{plain.benchmark.fixture}</span>
+        <span>Local Chromium</span>
+        <span>{generatedDate}</span>
+      </div>
+    </header>
+
+    <section class="live-performance-section ks-section" aria-labelledby="critical-path-title">
+      <div class="live-performance-section-head">
+        <div>
+          <p class="live-performance-label">Click → first usable variant</p>
+          <h2 id="critical-path-title">The measured critical path</h2>
+        </div>
+        <p>Median values. Deterministic generation isolates Impeccable’s own floor.</p>
+      </div>
+
+      <div class="latency-tape">
+        <svg viewBox="0 0 1000 214" role="img" aria-labelledby="latency-title latency-desc">
+          <title id="latency-title">Impeccable Live model-free latency timeline</title>
+          <desc id="latency-desc">A 916 millisecond timeline dominated by 828 milliseconds of browser preparation before the generate request.</desc>
+          <line class="latency-axis" x1="24" y1="112" x2="976" y2="112"></line>
+          <g class="latency-ticks" aria-hidden="true">
+            <line x1="24" y1="102" x2="24" y2="124"></line>
+            <line x1="284" y1="106" x2="284" y2="120"></line>
+            <line x1="544" y1="106" x2="544" y2="120"></line>
+            <line x1="804" y1="106" x2="804" y2="120"></line>
+            <line x1="976" y1="102" x2="976" y2="124"></line>
+          </g>
+          <rect class="latency-segment is-capture" x="24" y="88" width="860" height="48"></rect>
+          <rect class="latency-segment is-pickup" x="884" y="88" width="2" height="48"></rect>
+          <rect class="latency-segment is-scaffold" x="886" y="88" width="43" height="48"></rect>
+          <rect class="latency-segment is-render" x="929" y="88" width="47" height="48"></rect>
+          <text class="latency-major-label" x="44" y="75">Browser prepares capture</text>
+          <text class="latency-major-value" x="44" y="118">{displayMs(browserPreparation)}</text>
+          <text class="latency-remainder-label" x="974" y="166" text-anchor="end">everything after dispatch · {displayMs(overlapFloor)}</text>
+          <path class="latency-bracket" d="M884 148 V158 H976 V148"></path>
+          <text class="latency-axis-label" x="24" y="194">Go</text>
+          <text class="latency-axis-label" x="976" y="194" text-anchor="end">First variant</text>
+        </svg>
+      </div>
+
+      <ol class="latency-stage-list" aria-label="Critical path stages">
+        {stageData.map((stage, index) => (
+          <li data-tone={stage.tone}>
+            <span>{String(index + 1).padStart(2, '0')}</span>
+            <strong>{stage.name}</strong>
+            <em>{displayMs(stage.value)}</em>
+          </li>
+        ))}
+      </ol>
+
+      <div class="live-performance-finding" role="note">
+        <strong>Finding 01</strong>
+        <p>The browser captures the selected element for the generating shader even when no annotations need to reach the model. That capture blocks event dispatch.</p>
+      </div>
+    </section>
+
+    <section class="live-performance-section ks-section" aria-labelledby="paths-title">
+      <div class="live-performance-section-head">
+        <div>
+          <p class="live-performance-label">Capture paths</p>
+          <h2 id="paths-title">Annotation state changes the floor</h2>
+        </div>
+        <p>The difference is repeatable enough to investigate, not yet explained enough to optimize against.</p>
+      </div>
+      <div class="scenario-comparison" role="img" aria-label={`Plain path ${displayMs(protocolFloor)}; annotated path ${displayMs(annotatedFloor)}`}>
+        <div class="scenario-row">
+          <div class="scenario-label"><strong>Plain pick</strong><span>No comments or strokes</span></div>
+          <div class="scenario-track"><span class="is-plain" style={`--scenario-width:${(protocolFloor / maxScenarioFloor) * 100}%`}></span></div>
+          <output>{displayMs(protocolFloor)}</output>
+        </div>
+        <div class="scenario-row">
+          <div class="scenario-label"><strong>Annotated pick</strong><span>Pin + stroke + upload</span></div>
+          <div class="scenario-track"><span class="is-annotated" style={`--scenario-width:${(annotatedFloor / maxScenarioFloor) * 100}%`}></span></div>
+          <output>{displayMs(annotatedFloor)}</output>
+        </div>
+      </div>
+      <p class="live-performance-caption">Protocol-only measurements: {plain.summary.count} plain runs, {annotated?.summary.count || 0} annotated runs. Browser and filesystem caches were warm.</p>
+    </section>
+
+    <section class="live-performance-section live-simulator-section ks-section" aria-labelledby="simulator-title">
+      <div class="live-performance-section-head">
+        <div>
+          <p class="live-performance-label">Latency simulator</p>
+          <h2 id="simulator-title">Model speed does not erase fixed overhead</h2>
+        </div>
+        <p>Move the model time. The protocol floor stays put.</p>
+      </div>
+      <div class="live-simulator">
+        <label for="model-latency">Model generates all variants <output data-model-value>15 s</output></label>
+        <input id="model-latency" data-model-latency type="range" min="0" max="60000" step="500" value="15000" />
+        <div class="simulator-results" aria-live="polite">
+          <div>
+            <span>Current atomic path</span>
+            <strong data-current-total>15.9 s</strong>
+            <small>model + measured protocol floor</small>
+          </div>
+          <div>
+            <span>Capture fully overlapped</span>
+            <strong data-overlap-total>15.1 s</strong>
+            <small>best-case projection, not a measured target</small>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="live-performance-section ks-section" aria-labelledby="harness-title">
+      <div class="live-performance-section-head">
+        <div>
+          <p class="live-performance-label">Harness delivery</p>
+          <h2 id="harness-title">Four ways to wake the work</h2>
+        </div>
+        <p>Measure pickup before choosing architecture. Fast models cannot help while no model is running.</p>
+      </div>
+      <div class="harness-table-wrap">
+        <table class="harness-table">
+          <thead><tr><th>Path</th><th>Pickup</th><th>Tradeoff</th><th>Status</th></tr></thead>
+          <tbody>
+            {harnessPaths.map(path => (
+              <tr>
+                <td><strong>{path.name}</strong><span>{path.harness}</span></td>
+                <td>{path.pickup}</td>
+                <td>{path.tradeoff}{path.source && <> <a href={path.source}>Docs</a></>}</td>
+                <td><span class="ks-tag is-neutral" data-tone={path.statusTone}>{path.status}</span></td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <div class="live-performance-finding is-probe" role="note">
+        <strong>Harness probe</strong>
+        <p>{currentHarnessProbe.surface}: {currentHarnessProbe.result}</p>
+      </div>
+    </section>
+
+    <section class="live-performance-section live-experiments-section ks-section" aria-labelledby="experiments-title">
+      <div class="live-performance-section-head">
+        <div>
+          <p class="live-performance-label">Evidence-ranked backlog</p>
+          <h2 id="experiments-title">What to test next</h2>
+        </div>
+        <p>Actual latency first, perceived latency second, architectural bets last.</p>
+      </div>
+      <ol class="experiment-list">
+        {liveExperiments.map(experiment => (
+          <li>
+            <span class="experiment-rank">{String(experiment.rank).padStart(2, '0')}</span>
+            <div class="experiment-body">
+              <header><h3>{experiment.title}</h3><span>{experiment.confidence}</span></header>
+              <p>{experiment.move}</p>
+              <dl>
+                <div><dt>Evidence</dt><dd>{experiment.evidence}</dd></div>
+                <div><dt>Expected</dt><dd>{experiment.expected}</dd></div>
+              </dl>
+            </div>
+          </li>
+        ))}
+      </ol>
+    </section>
+
+    <section class="live-performance-method ks-section" aria-labelledby="method-title">
+      <h2 id="method-title">Measurement contract</h2>
+      <p>
+        <code>bun run bench:live</code> boots a real framework fixture and Chromium, drives Pick → Go → Cycle,
+        and records browser preparation, server pickup, scaffold, generation, write, and render boundaries.
+        The deterministic agent makes Impeccable overhead visible; model-backed runs remain opt-in because they send fixture context to an external provider.
+      </p>
+    </section>
+  </article>
+
+  <script>
+    import { initLivePerformance } from '../../scripts/live-performance.js';
+    initLivePerformance();
+  </script>
+</Base>

site/pages/live/index.astro

@@ -0,0 +1,3 @@
+---
+return Astro.redirect('/live-mode', 301);
+---

site/scripts/live-performance.js

@@ -0,0 +1,31 @@
+export function initLivePerformance() {
+  const root = document.querySelector('[data-live-performance]');
+  if (!root) return;
+
+  const slider = root.querySelector('[data-model-latency]');
+  const modelValue = root.querySelector('[data-model-value]');
+  const currentValue = root.querySelector('[data-current-total]');
+  const overlapValue = root.querySelector('[data-overlap-total]');
+  if (!slider || !modelValue || !currentValue || !overlapValue) return;
+
+  const protocolFloor = Number(root.dataset.protocolFloor || 0);
+  const overlapFloor = Number(root.dataset.overlapFloor || 0);
+  const formatter = new Intl.NumberFormat('en-US', { maximumFractionDigits: 1 });
+
+  const display = (milliseconds) => {
+    if (milliseconds >= 1000) return `${formatter.format(milliseconds / 1000)} s`;
+    return `${Math.round(milliseconds)} ms`;
+  };
+
+  const render = () => {
+    const modelMs = Number(slider.value);
+    modelValue.textContent = display(modelMs);
+    currentValue.textContent = display(modelMs + protocolFloor);
+    overlapValue.textContent = display(modelMs + overlapFloor);
+    slider.setAttribute('aria-valuetext', display(modelMs));
+  };
+
+  slider.addEventListener('input', render);
+  render();
+}
+

site/styles/live-performance.css

@@ -0,0 +1,648 @@
+.live-performance-page {
+  background: var(--ks-lacquer);
+  color: var(--ks-text);
+}
+
+.live-performance-main {
+  overflow: clip;
+}
+
+.live-lab-header {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+  align-items: center;
+  min-height: 68px;
+  padding: 12px max(24px, calc((100vw - 1320px) / 2));
+  border-bottom: 1px solid var(--ks-rule);
+  background: var(--ks-lacquer-deep);
+}
+
+.live-lab-brand {
+  color: var(--ks-kinpaku);
+  text-decoration: none;
+}
+
+.live-lab-brand .ks-mark {
+  width: 30px;
+  height: 30px;
+}
+
+.live-lab-brand .ks-mark svg {
+  width: 26px;
+  height: 26px;
+}
+
+.live-lab-brand .ks-wordmark {
+  font-size: var(--ks-type-wordmark-size);
+  letter-spacing: var(--ks-type-wordmark-track);
+}
+
+.live-lab-header > div {
+  display: grid;
+  gap: 2px;
+  text-align: right;
+}
+
+.live-lab-header strong {
+  color: var(--ks-champagne);
+  font-size: var(--ks-type-body-size);
+  font-weight: 500;
+}
+
+.live-lab-header > div span {
+  color: var(--ks-text-faint);
+  font-family: var(--ks-mono);
+  font-size: var(--ks-type-eyebrow-size);
+  letter-spacing: var(--ks-type-eyebrow-track);
+  text-transform: uppercase;
+}
+
+.live-performance {
+  padding-bottom: clamp(80px, 10vw, 144px);
+}
+
+.live-performance-hero {
+  position: relative;
+  padding-top: clamp(96px, 13vw, 176px);
+  padding-bottom: clamp(72px, 10vw, 136px);
+}
+
+.live-performance-hero::after {
+  position: absolute;
+  right: max(24px, calc((100vw - 1320px) / 2));
+  bottom: 0;
+  left: max(24px, calc((100vw - 1320px) / 2));
+  height: 1px;
+  background: var(--ks-rule);
+  content: '';
+}
+
+.live-performance-kicker,
+.live-performance-label {
+  margin: 0;
+  color: var(--ks-patina);
+  font-family: var(--ks-mono);
+  font-size: var(--ks-type-eyebrow-size);
+  font-weight: 500;
+  letter-spacing: var(--ks-type-eyebrow-track);
+  text-transform: uppercase;
+}
+
+.live-performance-hero h1 {
+  max-width: 1050px;
+  margin: 24px 0 0;
+  color: var(--ks-champagne);
+  font-family: var(--ks-font-display);
+  font-size: var(--ks-type-display-size);
+  font-weight: 100;
+  letter-spacing: -0.01em;
+  line-height: 0.88;
+  text-wrap: balance;
+}
+
+.live-performance-hero h1 span {
+  color: var(--ks-kinpaku);
+}
+
+.live-performance-lede {
+  max-width: 64ch;
+  margin: 38px 0 0;
+  color: var(--ks-text-muted);
+  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
+  line-height: 1.65;
+}
+
+.live-performance-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 24px;
+  margin-top: 42px;
+  color: var(--ks-text-faint);
+  font-family: var(--ks-mono);
+  font-size: 0.75rem;
+}
+
+.live-performance-meta span:not(:last-child)::after {
+  margin-left: 24px;
+  color: var(--ks-kinpaku-deep);
+  content: '—';
+}
+
+.live-performance-section {
+  padding-top: clamp(72px, 9vw, 120px);
+  padding-bottom: clamp(72px, 9vw, 120px);
+  border-bottom: 1px solid var(--ks-rule);
+}
+
+.live-performance-section-head {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(240px, 440px);
+  gap: clamp(32px, 8vw, 120px);
+  align-items: end;
+}
+
+.live-performance-section-head h2,
+.live-performance-method h2 {
+  max-width: 760px;
+  margin: 12px 0 0;
+  color: var(--ks-champagne);
+  font-family: var(--ks-font-display);
+  font-size: var(--ks-type-headline-size);
+  font-weight: var(--ks-type-headline-weight);
+  line-height: var(--ks-type-headline-line);
+  text-wrap: balance;
+}
+
+.live-performance-section-head > p {
+  margin: 0;
+  color: var(--ks-text-muted);
+  line-height: 1.65;
+}
+
+.latency-tape {
+  margin-top: clamp(48px, 7vw, 88px);
+  border-bottom: 1px solid var(--ks-rule);
+}
+
+.latency-tape svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  overflow: visible;
+}
+
+.latency-axis,
+.latency-ticks line {
+  stroke: var(--ks-rule);
+  stroke-width: 1;
+}
+
+.latency-segment.is-capture { fill: var(--ks-kinpaku); }
+.latency-segment.is-pickup { fill: var(--ks-vermilion); }
+.latency-segment.is-scaffold { fill: var(--ks-patina); }
+.latency-segment.is-render { fill: var(--ks-graphite-2); }
+
+.latency-major-label,
+.latency-remainder-label,
+.latency-axis-label {
+  fill: var(--ks-text-muted);
+  font-family: var(--ks-mono);
+  font-size: var(--ks-type-mono-size);
+}
+
+.latency-major-value {
+  fill: var(--ks-lacquer-deep);
+  font-family: var(--ks-font);
+  font-size: var(--ks-type-title-size);
+  font-weight: 700;
+}
+
+.latency-bracket {
+  fill: none;
+  stroke: var(--ks-patina);
+  stroke-width: 1;
+}
+
+.latency-stage-list {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.latency-stage-list li {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 6px 12px;
+  min-width: 0;
+  padding: 20px 18px 22px 0;
+  border-right: 1px solid var(--ks-rule);
+}
+
+.latency-stage-list li:not(:first-child) { padding-left: 18px; }
+.latency-stage-list li:last-child { border-right: 0; }
+
+.latency-stage-list li > span {
+  grid-row: 1 / span 2;
+  color: var(--ks-code-cmd);
+  font-family: var(--ks-mono);
+  font-size: var(--ks-type-eyebrow-size);
+}
+
+.latency-stage-list strong {
+  color: var(--ks-champagne);
+  font-size: var(--ks-type-body-size);
+  font-weight: 500;
+}
+
+.latency-stage-list em {
+  color: var(--ks-text-muted);
+  font-family: var(--ks-mono);
+  font-size: var(--ks-type-mono-size);
+  font-style: normal;
+}
+
+.live-performance-finding {
+  display: grid;
+  grid-template-columns: 140px minmax(0, 1fr);
+  gap: 24px;
+  margin-top: 48px;
+  padding: 22px 0;
+  border-top: 1px solid var(--ks-kinpaku-deep);
+  border-bottom: 1px solid var(--ks-kinpaku-deep);
+}
+
+.live-performance-finding strong {
+  color: var(--ks-code-cmd);
+  font-family: var(--ks-mono);
+  font-size: var(--ks-type-mono-size);
+  font-weight: 500;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.live-performance-finding p {
+  max-width: 74ch;
+  margin: 0;
+  color: var(--ks-text);
+  line-height: 1.65;
+}
+
+.live-performance-finding.is-probe {
+  border-color: var(--ks-patina-deep);
+}
+
+.live-performance-finding.is-probe strong { color: var(--ks-patina); }
+
+.scenario-comparison {
+  display: grid;
+  gap: 24px;
+  margin-top: clamp(48px, 7vw, 80px);
+}
+
+.scenario-row {
+  display: grid;
+  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) 86px;
+  gap: 24px;
+  align-items: center;
+}
+
+.scenario-label {
+  display: grid;
+  gap: 4px;
+}
+
+.scenario-label strong {
+  color: var(--ks-champagne);
+  font-size: var(--ks-type-body-size);
+  font-weight: 500;
+}
+
+.scenario-label span,
+.live-performance-caption {
+  color: var(--ks-text-faint);
+  font-size: var(--ks-type-mono-size);
+}
+
+.scenario-track {
+  height: 18px;
+  background: var(--ks-graphite);
+}
+
+.scenario-track span {
+  display: block;
+  width: var(--scenario-width);
+  height: 100%;
+}
+
+.scenario-track .is-plain { background: var(--ks-kinpaku); }
+.scenario-track .is-annotated { background: var(--ks-patina); }
+
+.scenario-row output {
+  color: var(--ks-champagne);
+  font-family: var(--ks-mono);
+  font-size: var(--ks-type-mono-size);
+  text-align: right;
+}
+
+.live-performance-caption {
+  margin: 24px 0 0;
+  line-height: 1.6;
+}
+
+.live-simulator {
+  margin-top: clamp(48px, 7vw, 80px);
+  padding: clamp(24px, 4vw, 48px);
+  background: var(--ks-lacquer-deep);
+  border: 1px solid var(--ks-rule);
+}
+
+.live-simulator > label {
+  display: flex;
+  justify-content: space-between;
+  gap: 24px;
+  color: var(--ks-champagne);
+  font-weight: 500;
+}
+
+.live-simulator > label output {
+  color: var(--ks-kinpaku);
+  font-family: var(--ks-mono);
+}
+
+.live-simulator input[type='range'] {
+  width: 100%;
+  margin: 30px 0 0;
+  accent-color: var(--ks-kinpaku);
+}
+
+.simulator-results {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin-top: 34px;
+  border-top: 1px solid var(--ks-rule);
+}
+
+.simulator-results > div {
+  display: grid;
+  gap: 8px;
+  padding: 28px 28px 0 0;
+}
+
+.simulator-results > div + div {
+  padding-left: 28px;
+  border-left: 1px solid var(--ks-rule);
+}
+
+.simulator-results span {
+  color: var(--ks-text-muted);
+  font-size: var(--ks-type-body-size);
+}
+
+.simulator-results strong {
+  color: var(--ks-champagne);
+  font-family: var(--ks-font-display);
+  font-size: var(--ks-type-display-size);
+  font-weight: 300;
+  line-height: 0.9;
+}
+
+.simulator-results small {
+  color: var(--ks-text-faint);
+  font-size: var(--ks-type-mono-size);
+  line-height: 1.5;
+}
+
+.harness-table-wrap {
+  margin-top: clamp(48px, 7vw, 80px);
+  overflow-x: auto;
+}
+
+.harness-table {
+  width: 100%;
+  min-width: 840px;
+  border-collapse: collapse;
+}
+
+.harness-table th {
+  padding: 0 18px 14px 0;
+  border-bottom: 1px solid var(--ks-kinpaku-deep);
+  color: var(--ks-text-faint);
+  font-family: var(--ks-mono);
+  font-size: var(--ks-type-eyebrow-size);
+  font-weight: 500;
+  letter-spacing: 0.12em;
+  text-align: left;
+  text-transform: uppercase;
+}
+
+.harness-table td {
+  padding: 22px 18px 22px 0;
+  border-bottom: 1px solid var(--ks-rule);
+  color: var(--ks-text-muted);
+  font-size: var(--ks-type-body-size);
+  line-height: 1.55;
+  vertical-align: top;
+}
+
+.harness-table td:first-child {
+  width: 23%;
+}
+
+.harness-table td:nth-child(2) {
+  width: 20%;
+  color: var(--ks-text);
+}
+
+.harness-table td:last-child {
+  width: 150px;
+}
+
+.harness-table td strong,
+.harness-table td span {
+  display: block;
+}
+
+.harness-table td strong {
+  color: var(--ks-champagne);
+  font-weight: 500;
+}
+
+.harness-table td:first-child span {
+  margin-top: 5px;
+  color: var(--ks-text-faint);
+  font-size: var(--ks-type-mono-size);
+}
+
+.harness-table a {
+  color: var(--ks-patina);
+}
+
+.harness-table .ks-tag {
+  display: inline-flex;
+  width: fit-content;
+  color: var(--ks-text);
+}
+
+.experiment-list {
+  margin: clamp(48px, 7vw, 80px) 0 0;
+  padding: 0;
+  border-top: 1px solid var(--ks-kinpaku-deep);
+  list-style: none;
+}
+
+.experiment-list > li {
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr);
+  border-bottom: 1px solid var(--ks-rule);
+}
+
+.experiment-rank {
+  padding-top: 27px;
+  color: var(--ks-code-cmd);
+  font-family: var(--ks-mono);
+  font-size: var(--ks-type-mono-size);
+}
+
+.experiment-body {
+  padding: 24px 0 28px;
+}
+
+.experiment-body header {
+  display: flex;
+  justify-content: space-between;
+  gap: 24px;
+  align-items: baseline;
+}
+
+.experiment-body h3 {
+  margin: 0;
+  color: var(--ks-champagne);
+  font-size: var(--ks-type-title-size);
+  font-weight: 500;
+}
+
+.experiment-body header span {
+  color: var(--ks-patina);
+  font-family: var(--ks-mono);
+  font-size: var(--ks-type-eyebrow-size);
+  white-space: nowrap;
+}
+
+.experiment-body > p {
+  max-width: 80ch;
+  margin: 12px 0 0;
+  color: var(--ks-text);
+  line-height: 1.65;
+}
+
+.experiment-body dl {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 24px;
+  margin: 20px 0 0;
+}
+
+.experiment-body dl div {
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr);
+  gap: 12px;
+}
+
+.experiment-body dt {
+  color: var(--ks-text-faint);
+  font-family: var(--ks-mono);
+  font-size: var(--ks-type-eyebrow-size);
+  text-transform: uppercase;
+}
+
+.experiment-body dd {
+  margin: 0;
+  color: var(--ks-text-muted);
+  font-size: var(--ks-type-body-size);
+  line-height: 1.55;
+}
+
+.live-performance-method {
+  display: grid;
+  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
+  gap: clamp(32px, 8vw, 120px);
+  padding-top: clamp(72px, 9vw, 120px);
+}
+
+.live-performance-method h2 {
+  margin-top: 0;
+}
+
+.live-performance-method p {
+  max-width: 72ch;
+  margin: 0;
+  color: var(--ks-text-muted);
+  line-height: 1.75;
+}
+
+@media (max-width: 800px) {
+  .live-performance-section-head,
+  .live-performance-method {
+    grid-template-columns: 1fr;
+    gap: 24px;
+  }
+
+  .latency-stage-list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .latency-stage-list li:nth-child(2) { border-right: 0; }
+  .latency-stage-list li:nth-child(n + 3) { border-top: 1px solid var(--ks-rule); }
+  .latency-stage-list li:nth-child(3) { padding-left: 0; }
+
+  .scenario-row {
+    grid-template-columns: minmax(130px, 180px) minmax(0, 1fr) 76px;
+    gap: 14px;
+  }
+
+  .experiment-body dl {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+}
+
+@media (max-width: 560px) {
+  .live-performance-hero h1 {
+    font-size: var(--ks-type-display-size);
+  }
+
+  .live-performance-meta span:not(:last-child)::after { display: none; }
+
+  .latency-tape {
+    margin-right: -12px;
+    margin-left: -12px;
+  }
+
+  .latency-stage-list {
+    grid-template-columns: 1fr;
+  }
+
+  .latency-stage-list li,
+  .latency-stage-list li:not(:first-child),
+  .latency-stage-list li:nth-child(3) {
+    padding: 16px 0;
+    border-top: 1px solid var(--ks-rule);
+    border-right: 0;
+  }
+
+  .scenario-row {
+    grid-template-columns: minmax(0, 1fr) 70px;
+  }
+
+  .scenario-label { grid-column: 1 / -1; }
+
+  .simulator-results {
+    grid-template-columns: 1fr;
+  }
+
+  .simulator-results > div + div {
+    margin-top: 24px;
+    padding: 24px 0 0;
+    border-top: 1px solid var(--ks-rule);
+    border-left: 0;
+  }
+
+  .experiment-list > li {
+    grid-template-columns: 46px minmax(0, 1fr);
+  }
+
+  .experiment-body header {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 8px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .live-performance-page * {
+    scroll-behavior: auto !important;
+  }
+}

skill/SKILL.src.md

@@ -36,7 +36,7 @@ Approach every design task as the design lead at a small studio known for giving
 
 **Prove, don't claim.** A page earns belief by showing the product doing its job: the interface at work, the mechanism dramatized, numbers and specifics a competitor couldn't copy-paste. A reader should understand what it does by looking, before reading a word. Sections that restate the hero's claim in different words add length, not substance. <!-- rule:skill-prove-dont-claim -->
 
-**Commit.** Pick a color strategy before picking colors: Restrained (neutrals + one accent, the product-register default) / Committed (one saturated color carries 30-60% of the surface) / Full palette (3-4 named roles) / Drenched (the surface IS the color). Brand surfaces have permission for the bolder strategies; take them when the brief allows. Dark vs. light is never a default: write one sentence of physical scene (who uses this, where, under what light, in what mood) and let it force the answer. The warm cream near-white body background is the saturated AI default; where the axis is free, pick a background that is a choice. <!-- rule:skill-color-strategy-commitment -->
+**Commit.** Pick a color strategy before picking colors: Restrained (neutrals + one accent; the default when the visitor came to operate or read) / Committed (one saturated color carries 30-60% of the surface) / Full palette (3-4 named roles) / Drenched (the surface IS the color). Persuade and Experience surfaces have permission for the bolder strategies; take them when the brief allows. Dark vs. light is never a default: write one sentence of physical scene (who uses this, where, under what light, in what mood) and let it force the answer. The warm cream near-white body background is the saturated AI default; where the axis is free, pick a background that is a choice. <!-- rule:skill-color-strategy-commitment -->
 
 **Calibration.** AI-generated interfaces cluster around a few looks regardless of subject: warm cream + high-contrast serif + terracotta accent; near-black + one neon accent (acid green, cyan) + glowing edges; broadsheet-editorial hairlines + italic display serif + small tracked mono labels. All are legitimate when the brief calls for them; the brief always wins. Where the brief leaves the aesthetic free, landing in one of them means your self-check failed. Same one tier deeper: if someone could guess your aesthetic from the category alone, or from category-plus-avoidance, rework until neither answer is obvious. <!-- rule:skill-slop-calibration -->
 
@@ -66,9 +66,15 @@ Calibration for this provider:
 
 ## Registers
 
-**Brand** (design IS the product: landing pages, marketing, campaigns, portfolios). The deliverable is the impression, in the form the surface demands. A product or service page stops the scroll, earns the click, converts. A cultural surface (an album, a portfolio, a publication, a body of work) IS the work: the artifact leads, the interface recedes, and conversion grammar (benefit copy, feature sections, a sales arc) is a category error there; the visitor should meet the work itself in the first viewport, at every screen size. Brand spans every genre (tech, luxury, consumer, culture); don't collapse them into one look. Imagery-implying briefs (food, travel, place, product, fashion) must ship real, verified imagery, searched for the brand's physical object rather than the category; a colored rectangle where a photo belongs reads as incomplete, and one decisive photo beats five mediocre ones. Choose faces like objects from the brand's world; these training-data defaults mean you stopped looking: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, Space Grotesk, Space Mono, IBM Plex, Inter-as-display, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans. Read `reference/brand.md` for extended depth on substantial brand work. <!-- rule:brand-register-core -->
+Name the visitor's mode before designing; the page's grammar follows from it, and most ruined pages are one mode wearing another mode's grammar. The brief and the surface decide the mode. PRODUCT.md's `register` field names the family (`brand` covers Persuade and Experience; `product` covers Operate and Read), and `reference/brand.md` / `reference/product.md` carry extended depth for the two families. <!-- rule:skill-visitor-mode -->
 
-**Product** (design SERVES the product: app UI, dashboards, admin, tools). A person getting something done: density, scanability, and consistency outrank expressiveness. Product surfaces earn trust by feeling native to their platform: system font stacks and workhorse UI faces are legitimate and often correct here (the brand reject list does not apply). The brand lives in the details: focus states, empty states, microcopy, one owned accent. Read `reference/product.md` for extended depth on substantial product work. <!-- rule:product-register-core -->
+**Persuade** (landing pages, marketing, campaigns; design IS the product). The deliverable is an impression that stops the scroll, earns the click, converts. Spans every genre (tech, luxury, consumer); don't collapse them into one look. Imagery-implying briefs (food, travel, place, product, fashion) must ship real, verified imagery, searched for the brand's physical object rather than the category; a colored rectangle where a photo belongs reads as incomplete, and one decisive photo beats five mediocre ones. Choose faces like objects from the brand's world; these training-data defaults mean you stopped looking: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, Space Grotesk, Space Mono, IBM Plex, Inter-as-display, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans. <!-- rule:brand-register-core -->
+
+**Operate** (app UI, dashboards, admin, tools; design SERVES the task). A person getting something done: density, scanability, and consistency outrank expressiveness. These surfaces earn trust by feeling native to their platform: system font stacks and workhorse UI faces are legitimate and often correct here (the Persuade reject list does not apply). The brand lives in the details: focus states, empty states, microcopy, one owned accent. <!-- rule:product-register-core -->
+
+**Read** (documentation, guides, editorial, long-form). The deliverable is comprehension: typographic rigor, a navigable structure the reader can hold in their head, hierarchy built for scanning, chrome that stays out of the way. Density follows the reader's task, not atmosphere, and nothing stands between the reader and the answer. The brand lives in type, spacing, and small accents. <!-- rule:skill-read-register -->
+
+**Experience** (an album, a portfolio, a publication, a body of work). The page IS the work: the artifact leads, the interface recedes, and the visitor meets the work itself in the first viewport at every screen size. Boldness here means trusting the work. <!-- rule:skill-experience-register -->
 
 ## Commands