Refresh the Impeccable product experience

Rework the landing page proof, steering demo, feature grid, slop catalog, detector coverage, theming, Live workflow, and responsive behavior.\n\nAI-assisted implementation by OpenAI Codex.

skill/SKILL.src.md

@@ -16,22 +16,22 @@ Approach every design task as the design lead at a small studio known for giving
 ## Setup
 
 1. Run `node {{scripts_path}}/context.mjs` once per session (if the runtime shows this skill's loaded base directory, run `node <skill-base-dir>/scripts/context.mjs`; keep cwd at the user's project). It prints the project's context and its directives; follow what it prints. Once its output is in the conversation, never rerun it on a later turn. <!-- rule:skill-setup-context -->
-2. `craft` and `shape` are build-path exceptions: the new-work gate below owns their flow, and on unattended runs its checkpoints resolve without pausing. For any other invoked sub-command (`audit`, `polish`, `live`, ...), immediately read **`reference/<command>.md`** after `context.mjs` (the `.native` variant from the Commands table when the platform is `ios`/`android`/`adaptive`) and follow it. This read is a hard gate: do not inspect the target, run command-specific scripts, or edit files until the reference is loaded. <!-- rule:skill-setup-command-ref -->
+2. `craft` and `shape` are build-path exceptions: resolve the init gate below first, then read **`reference/new-work.md`** for the shared task discovery and surface-concept choice. `craft` continues through its contract, build, and finish; `shape` also reads **`reference/shape.md`**, produces the planning artifact, and stops before code. For any other invoked sub-command (`audit`, `polish`, `live`, ...), immediately read **`reference/<command>.md`** after `context.mjs` (the `.native` variant from the Commands table when the platform is `ios`/`android`/`adaptive`) and follow it. This read is a hard gate: do not inspect the target, run command-specific scripts, or edit files until the reference is loaded. <!-- rule:skill-setup-command-ref -->
 3. Read at least one project file (CSS / tokens / theme / a representative component) to learn what world you're in. If PRODUCT.md's `## Platform` is `ios` or `android`, also read `reference/<platform>.md` (`adaptive` reads both). <!-- rule:skill-setup-read-project -->
 
 ## How to design
 
 **The brief wins.** Where the brief pins down a direction (a named aesthetic, an era, a place, a material, a specific font or palette), follow it exactly, including when it asks for a look this skill warns is saturated. Redirecting a pinned direction toward your own taste is a failure, not a save. <!-- rule:skill-brief-wins -->
 
-**Existing worlds are sacred.** Most of impeccable's work happens inside a site or app that already exists. When the surface has a committed design system (real tokens, deliberately chosen faces, a palette the brand owns), work inside that world: extend it, sharpen it, leave it unmistakably the same brand, and never degrade a working page's performance. Inventing parallel colors, fonts, or styles on an existing surface is a defect, not creativity. A scoped refinement keeps the named scope's content and media footprint unless the brief explicitly changes them; build the added emphasis by recomposing what is already there through hierarchy, proportion, rhythm, and the system's own motifs. <!-- rule:skill-existing-world-preservation -->
+**Refinement preserves; redesign replaces.** A refinement (`polish`, `bolder`, `quieter`, `distill`, or another scoped improvement) works inside the incumbent world: preserve its identity, functioning behavior, and everything outside the named scope. A redesign or rebrand is explicit authorization to stop treating the old visual system as authority. Keep product truth, real content, working functionality, native affordances, and technical constraints unless the brief changes them, but use the old look only as evidence and anti-reference; run init's visual-world choice and replace DESIGN.md before designing. Do not split the difference into contemporary polish on the old boring page. <!-- rule:skill-world-change-semantics -->
 
-**New identity work reads the playbook first.** When nothing committed exists (greenfield, or a codebase with no real tokens or chosen faces), or the user asks for a redesign that discards the current look, you MUST read [reference/new-work.md](reference/new-work.md) before making any design decision. Not optional, not skippable under time pressure: producing new identity without it yields the generic default this skill exists to prevent. A redesign is new work; read the incumbent as evidence, not as a template or an obstacle: where it carries a deliberate, ownable visual idea, preserve that lineage and intensify it instead of replacing it with contemporary polish. `context.mjs` prints this directive when it detects the situation. Scoped fixes inside an existing world don't need the playbook; the craft floor below governs them. <!-- rule:skill-new-work-gate -->
+**New worlds are initialized with the user.** When no committed identity exists, or the user asks for a redesign, rebrand, or replacement look, load [reference/init.md](reference/init.md) and finish its interview and visual-world choice before making design decisions. Init writes the durable product inputs to PRODUCT.md and the chosen visual world to DESIGN.md. A structured simulated-user tool counts as a user; a bare prompt does not. Missing DESIGN.md alone does not prove the world is blank: for refinement, code, tokens, chosen type, components, and assets remain incumbent design authority and init documents rather than erases them. After the gate, [reference/new-work.md](reference/new-work.md) creates a novel task-scoped composition inside the newly committed world. <!-- rule:skill-new-work-gate -->
 
 ## Modes
 
-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 mode belongs to the surface, not the subject**: a landing page for a dense technical tool is still Persuade, with Persuade's full permission to be striking; a docs page for a fashion house is still Read. Deciding a page can be plain because its subject is workmanlike is the same category error in reverse. The brief and the surface decide the mode; PRODUCT.md's `register` field survives only as a family hint (`brand` covers Persuade and Experience, `product` covers Operate and Read). Depth beyond the paragraphs below: [reference/new-work.md](reference/new-work.md) when inventing identity, [reference/operate.md](reference/operate.md) for substantial Operate and Read work. <!-- rule:skill-visitor-mode -->
+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 mode belongs to the requested surface, not the product**: a landing page for a dense technical tool is still Persuade, with Persuade's full permission to be striking; a docs page for a fashion house is still Read. Decide it from the brief and surface on every task; do not persist a brand/product classification in PRODUCT.md. Depth beyond the paragraphs below: [reference/init.md](reference/init.md) when establishing or replacing identity, [reference/new-work.md](reference/new-work.md) when crafting or planning a new surface inside it, and [reference/operate.md](reference/operate.md) for substantial Operate and Read work. <!-- rule:skill-visitor-mode -->
 
-**Persuade** (the surface exists to win someone over; design IS the product). The deliverable is an impression that stops the scroll, earns the click, converts. Spans every genre; don't collapse them into one look. On new surfaces, briefs that imply imagery must ship real, verified imagery; a colored rectangle where a photo belongs reads as incomplete. New Persuade surfaces take their typeface procedure and reject list from [reference/new-work.md](reference/new-work.md). <!-- rule:brand-register-core -->
+**Persuade** (the surface exists to win someone over; design IS the product). The deliverable is an impression that stops the scroll, earns the click, converts. Spans every genre; don't collapse them into one look. On new surfaces, briefs that imply imagery must ship real, verified imagery; a colored rectangle where a photo belongs reads as incomplete. Type, palette, and material language come from the committed DESIGN.md world, not from category habit. <!-- rule:brand-register-core -->
 
 **Operate** (the surface is a tool someone works in; design SERVES the task). A person getting something done: 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. The usage scene is part of the spec: an interface read outdoors, in motion, or at a glance must survive its real ambient light, and the theme follows the scene, not the category's habit. <!-- rule:product-register-core -->
 
@@ -92,7 +92,7 @@ Calibration for this provider:
 | `optimize [target]` | Fix | Diagnose and fix UI performance | [reference/optimize.md](reference/optimize.md) |
 | `live` | Iterate | Visual variant mode: pick elements in the browser, generate alternatives | [reference/live.md](reference/live.md) |
 
-Routing: **no argument** → read [reference/routing.md](reference/routing.md) and present the context-aware menu (never auto-run a command). **First word matches a command** (or `pin` / `unpin` / `hooks`) → load its reference (native variant on native platforms) and follow it; everything after the command name is the target. **Intent clearly maps to one command** ("fix the spacing" → `layout`, "rewrite this error" → `clarify`) → same; if two fit, ask once. **Otherwise** → general design invocation: apply Setup and this file's guidance; builds flow through the new-work gate above, whose playbook carries the direction checkpoint and the finishing pass. `teach` routes to `init`, and `craft` routes to the standard build flow with attended checkpoints. If setup diverted into `init` for a build request, finish init, refresh context, then resume. <!-- rule:skill-routing -->
+Routing: **no argument** → read [reference/routing.md](reference/routing.md) and present the context-aware menu (never auto-run a command). **First word matches a command** (or `pin` / `unpin` / `hooks`) → load its reference (native variant on native platforms) and follow it; everything after the command name is the target. **Intent clearly maps to one command** ("fix the spacing" → `layout`, "rewrite this error" → `clarify`) → same; if two fit, ask once. **Otherwise** → general design invocation: apply Setup and this file's guidance; new builds and redesigns resolve init first, then use the new-work playbook. `teach` routes to `init`; `craft` routes to new-work; `shape` shares new-work's discovery and concept choice, then returns the planning-only brief from shape. If setup diverted into `init`, finish it, use the PRODUCT.md and DESIGN.md just written, then resume without rerunning `context.mjs`. <!-- rule:skill-routing -->
 
 **Pin / Unpin:** `node {{scripts_path}}/pin.mjs <pin|unpin> <command>` creates or removes a standalone `{{command_prefix}}<command>` shortcut. Report the script's result concisely; relay stderr verbatim on error.