baldart 5.1.0 → 5.2.0

package/framework/.claude/skills/ui-design/SKILL.md

@@ -1,20 +1,39 @@
 ---
 name: ui-design
 effort: medium
-version: 1.1.0
-description: "UI design workflow. Generates context-aware mockups with GAN-inspired generator/evaluator separation, visual verification via Playwright, and structured sprint contracts. Use when: (1) designing new pages or components, (2) the /prd skill reaches its UI design phase (Step 3), (3) redesigning existing pages, (4) creating design options for user review, (5) any task involving 'design UI', 'mockup', 'opzioni di design', 'progetta interfaccia', '3 opzioni', 'design page', 'UI design'. Not for: bug fixes, small tweaks, copy-only changes, or implementing an already-chosen design."
+version: 2.0.0
+description: "The local design studio — THE framework skill for designing, prototyping and restyling UI directly in the repo (the internal twin of the Claude Design handoff). Produces context-aware, token-compliant HTML mockups in 3 distinct directions, with a locked Design Read, a deterministic anti-slop craft gate and separated generator/evaluator verification. Use when: (1) designing new pages, screens or components, (2) the /prd skill reaches its UI design phase (Step 3), (3) redesigning/restyling existing pages ('rifai la UI', 'migliora il design', 'restyle'), (4) exploring design options ('3 opzioni', 'opzioni di design', 'direzioni estetiche'), (5) prototyping a page/landing/dashboard locally ('prototipo', 'mockup', 'progetta interfaccia', 'design UI'). SUPERSEDES frontend-design (now a router) and ui-ux-pro-max for ALL design/prototyping work. Not for: implementing an already-approved mockup (→ /ui-implement), in-code UI fixes with no design decision (→ ui-expert agent), motion specs (→ /motion-design)."
 ---
 
-# UI Design Skill
-
-Design workflow that produces context-aware mockup options, evaluates them with
-separated generator/evaluator agents (GAN pattern), and delivers an approved
-design with a structured UI Element Inventory.
-
-**Architecture principle:** The generator never evaluates its own output.
-Evaluation is always performed by a separate agent with fresh context.
-[DESIGN-CHOICE: a fresh-context evaluator avoids the generator rationalizing its
-own mockups — separating generation from scoring keeps the quality gate honest.]
+# UI Design Skill — the local design studio
+
+Design workflow that produces context-aware mockup options in genuinely
+distinct directions, verifies them through a deterministic craft gate plus
+two independent evaluation lenses, and delivers an approved design with a
+structured UI Element Inventory — entirely locally, when the Claude Design
+handoff channel is not the right fit.
+
+**Architecture principle:** the generator never evaluates its own output.
+Quality is judged by a *different agent definition* (`ui-quality-critic`),
+conformance by a fresh-context `ui-expert` instance, and the mechanical
+anti-slop subset by a script no model can rationalize past.
+[DESIGN-CHOICE: same-definition self-review has weak diversity even with
+fresh context — the critic brings a different rubric-calibrated lens, and
+the deterministic gate costs zero tokens.]
+
+The design intelligence lives in this skill's references — read them at the
+step that needs them, not all upfront:
+
+| Reference | What it holds | Read at |
+|---|---|---|
+| [design-brief.md](references/design-brief.md) | Register, regime, dials, Design Read protocol | Step C.0 |
+| [design-directions.md](references/design-directions.md) | Aesthetic direction menu, font/palette pools, reflex-reject lists | Step C.0 (exploration) |
+| [craft-standards.md](references/craft-standards.md) | Always-on craft rules (typography, color, layout, states, motion, forms, CWV, modern CSS) | Step C.1 + D |
+| [anti-slop.md](references/anti-slop.md) | The Tells catalog — bans, rationed patterns, copy tells | Step C.1 + D |
+| [component-discovery.md](references/component-discovery.md) | Reuse-first cascade | Step A |
+| [generation.md](references/generation.md) | Prototype engine rules | Step C.1 |
+| [evaluation.md](references/evaluation.md) | Gate 0 + dual-lens pipeline, verdict, degraded mode | Step D |
+| [inventory.md](references/inventory.md) | Sprint-contract inventory | Step G |
 
 ## Project Context
 
@@ -25,8 +44,8 @@ own mockups — separating generation from scoring keeps the quality gate honest
 `stack.charting.canonical`, `stack.charting.forbidden`, `stack.charting.wrappers_root`.
 
 **Gated by features:**
-`features.has_design_system` (when `true`, design-system reads are BLOCKING; when `false`, skip step 1 of Prerequisites and rely on `paths.ui_guidelines` alone).
-`features.has_i18n` (when `true`, the copy in your mockups is realistic **placeholder, not final** — see the i18n note in the workflow below; ref `framework/agents/i18n-protocol.md`).
+`features.has_design_system` (when `true`, design-system reads are BLOCKING and the run defaults to in-context regime; when `false`, skip step 1 of Prerequisites and rely on `paths.ui_guidelines` alone).
+`features.has_i18n` (when `true`, mockup copy is realistic **placeholder, not final** — see `references/generation.md` § Content discipline; ref `framework/agents/i18n-protocol.md`).
 
 **Overlay:** loads `.baldart/overlays/ui-design.md` if present — extends base by default; sections marked `## [OVERRIDE] <topic>` replace base sections. See `framework/agents/project-context.md` § 5.
 
@@ -40,6 +59,19 @@ reasoning depth for this run — detect it once at kickoff and strip the token
 before consuming user input. Level→behavior mapping, parsing contract, and
 precedence caveats: `framework/agents/effort-protocol.md`.
 
+## Runtime portability (Claude ↔ Codex)
+
+Abstract operations bind per
+[`framework/agents/runtime-portability-protocol.md`](../../../agents/runtime-portability-protocol.md):
+agent spawns (`ui-expert` generator, `ui-quality-critic` lens, fresh
+`ui-expert` evaluator) use the Task tool on Claude and named-agent spawn from
+`.codex/agents/<name>.toml` on Codex; decision gates (`AskUserQuestion` on
+Claude) become plain prompts on Codex; no silent fallback if a named agent is
+missing. **Codex-specific**: `scripts/craft-check.mjs` runs identically (zero
+deps); on a non-multimodal session the visual lenses degrade to source-level
+review with a mandatory `⚠️ DEGRADED` banner — see
+[evaluation.md](references/evaluation.md) § Degraded mode. Never silently
+skip evaluation.
 
 ## Working Directory (MANDATORY when invoked from `/prd`, since v3.22.0)
 
@@ -50,7 +82,7 @@ artefacts produced by this skill — most notably the `design.html` saved in
 Step G — MUST be written inside that directory, NOT into the consumer's main
 checkout. Without this, the design lands on the main repo, the `/prd` Step 7
 stage list at `$WORKTREE_PATH/${paths.prd_dir}/<slug>/design.html` finds
-nothing, and the PRD merged into `develop` ships without its design asset.
+nothing, and the PRD merged into trunk ships without its design asset.
 
 **Rule:** every `${paths.prd_dir}/...` reference in this document — including
 Step G's "Copy approved HTML to `${paths.prd_dir}/<slug>/design.html`" — is
@@ -80,9 +112,8 @@ These reads are BLOCKING. Resolve paths from `baldart.config.yml` before opening
    - Propose only libraries in `stack.charting.canonical`. Refuse libraries listed in `stack.charting.forbidden`.
    - If `stack.charting.wrappers_root` is set, propose those project wrappers over raw library usage.
    - If both lists are empty, ask the user which charting library to use before proposing one.
-6. **MUST** run `ui-ux-pro-max` skill for design intelligence (bounded by the design-system SSOT above — advisory only).
-7. **MUST** identify the audience segment for the work, using `identity.audience_segments` as the menu of valid choices. If segments are empty, treat the work as undifferentiated.
-8. If brand inputs are missing (e.g. logo, accent palette), ask — never invent.
+6. **MUST** identify the audience segment for the work, using `identity.audience_segments` as the menu of valid choices. If segments are empty, treat the work as undifferentiated.
+7. If brand inputs are missing (e.g. logo, accent palette), ask — never invent.
 
 ## Design System Alignment
 
@@ -94,6 +125,7 @@ These reads are BLOCKING. Resolve paths from `baldart.config.yml` before opening
   - `${paths.design_system}/patterns/*.md` — pattern docs (e.g. theming, overlays, motion)
 - NEVER hardcode hex colors, shadow tuples, or border-width values when the project has a token contract. Use the tokens listed in the contract.
 - If the project uses multi-tenant theming (`features.multi_tenant_theming: true`), themed-surface text/bg pairing is mandatory per the project's theming pattern doc — consult `.baldart/overlays/ui-design.md` for the exact pairing rule.
+- **Precedence on conflict**: project tokens + overlay > `${paths.ui_guidelines}` > the skill's craft-standards defaults (`references/craft-standards.md` § Precedence).
 
 ---
 
@@ -111,10 +143,10 @@ Run the full cascade: design-system INDEX → project search (`${paths.component
 
 ### Step B — Context Capture
 
-Read [references/generation.md](references/generation.md) § Context Capture.
+Read [references/generation.md](references/generation.md) § Prerequisites.
 
 1. Identify 1-3 pages where the feature will live.
-2. Capture screenshots via Playwright. Save to `/tmp/prd-design-<slug>/context/`.
+2. Capture screenshots via the Playwright CLI (headless). Save to `/tmp/prd-design-<slug>/context/`.
    **Render-harness preference (closed-loop Stage C):** for **component-level**
    scope (designing/redesigning a primitive, not a whole page), prefer the isolated
    render harness over full-page Playwright — `baldart render build && /ds-render`
@@ -124,47 +156,57 @@ Read [references/generation.md](references/generation.md) § Context Capture.
 
 ### Step C — Generate 3 Options (GENERATOR)
 
-Read [references/generation.md](references/generation.md).
+#### C.0 — Design Read & Direction Lock (MANDATORY, before any HTML)
+
+Read [references/design-brief.md](references/design-brief.md). Classify the
+**register** (brand vs product) and the **regime** (in-context vs
+exploration), set the three dials, run the two-altitude slop test on your own
+read, and emit the **Design Read** block — one locked line + per-option
+direction assignments + color commitment + dark/light scene sentence +
+anti-references. In exploration regime pick directions from
+[references/design-directions.md](references/design-directions.md) (rotation
+rule applies). Ambiguity → exactly ONE question to the user; when invoked
+from `/prd`, discovery answers already resolve the read — do not re-ask.
 
-**OPTIONAL (graceful degradation):** `huashu-design` is a user-installed skill, NOT shipped with the
-framework. If it is installed, invoke it before generating any HTML — it provides the HTML prototype
-engine (React+Babel or vanilla+Tailwind CDN, Tweaks panel, App Prototype shell with AppPhone state
-manager, Playwright click validation, animated output); follow its rules for the prototype type in
-scope. If it is NOT installed, proceed without it: emit a one-line notice ("huashu-design not
-installed — generating HTML mockups directly") and have `ui-expert` produce the HTML mockups using
-the generation rules in `references/generation.md` plus a Tailwind CDN scaffold. Never block the
-design run on huashu-design's absence.
+Persist the Design Read in the state file (`## UI Design` → `design_read`).
 
-**Filesystem rule (ABSOLUTE):** every HTML file MUST be written to disk with the `Write` tool at `/tmp/prd-design-<slug>/option-X.html` BEFORE opening in a browser. Outputting inline code blocks is not sufficient.
+#### C.1 — Generate
 
-Invoke `ui-expert` agent with:
+Read [references/generation.md](references/generation.md) (binding:
+[craft-standards.md](references/craft-standards.md) +
+[anti-slop.md](references/anti-slop.md)).
+
+**Filesystem rule (ABSOLUTE):** every HTML file MUST be written to disk with the `Write` tool at `/tmp/prd-design-<slug>/option-<x>.html` BEFORE opening in a browser. Outputting inline code blocks is not sufficient.
+
+Invoke the `ui-expert` agent (spawn per runtime-portability) with:
 - Feature description and discovery answers
+- The C.0 Design Read block + per-option assignments
 - Context screenshots (Read the image files)
-- Codebase-architect findings
-- 21st.dev catalog categories
-- Full generation rules from the reference
-- `huashu-design` prototype rules loaded above (only if the skill is installed; otherwise omit)
-- `identity.design_philosophy` and `identity.language` to drive aesthetic and copy register
-
-Output: 3 HTML files written to `/tmp/prd-design-<slug>/` via `Write` tool.
+- Codebase-architect findings + the Step A reuse list
+- The generation rules + craft-standards + anti-slop references (by path — the agent Reads them)
+- `identity.design_philosophy` and `identity.language`
 
-### Step D — Evaluate Options (EVALUATOR — separate agent)
+Output: 3 self-contained, token-first, `data-region`-annotated HTML files in
+`/tmp/prd-design-<slug>/`. The generator runs the craft-check self-gate
+before handing off (`references/generation.md` § Generator self-check).
 
-Read [references/evaluation.md](references/evaluation.md).
+### Step D — Evaluate (deterministic gate + two independent lenses)
 
-Invoke a **separate, fresh-context `ui-expert` agent** (a NEW instance — NOT the `ui-expert` that
-generated in Step C). `ui-expert` is the right evaluator because the rubric scores design-quality
-criteria (visual hierarchy, information density, mobile-first layout) — a code-quality reviewer would
-apply a code-correctness lens and miss the design criteria entirely. The GAN separation is preserved
-by using a distinct instance with no memory of the generation pass.
-- Pass the 3 HTML files
-- Pass the context screenshots as reference
-- Pass the evaluation rubric from [references/evaluation.md](references/evaluation.md) (7 criteria, scoring 1-5, hard thresholds) — the evaluator must read that reference, it does not know the rubric natively
-- Request: produce evaluation report at `/tmp/prd-design-<slug>/evaluation-report.md`
+Read [references/evaluation.md](references/evaluation.md) and follow its
+pipeline exactly:
 
-**If any option FAIL:** send feedback to generator, re-generate, re-evaluate. Max 5 iterations per option.
+1. **Gate 0** — `node <skill_dir>/scripts/craft-check.mjs option-*.html`
+   (`--strict-palette` in exploration regime). Blockers → back to generator.
+2. **Screenshots** — 1440px + 375px per option (Playwright CLI, headless).
+3. **Lens A** — `ui-quality-critic` per option (design quality, rubric SSOT
+   in `design-system-protocol.md` § "Design Quality Rubric").
+4. **Lens B** — fresh `ui-expert` instance (brief/context conformance, B1–B5).
+5. **Verdict** per option (PASS floors in evaluation.md). FAIL → consolidated
+   feedback packet to the generator. **Max 5 iterations per option.**
 
-**If PASS:** proceed to Step E.
+Non-multimodal runtime → degraded mode with the mandatory `⚠️ DEGRADED`
+banner (never silently skip evaluation). Evaluation artifacts land in
+`/tmp/prd-design-<slug>/evaluation-report.md`.
 
 ### Step E — Present to User
 
@@ -175,16 +217,23 @@ by using a distinct instance with no memory of the generation pass.
    open /tmp/prd-design-<slug>/option-c.html
    ```
    (On non-macOS hosts, substitute `xdg-open` / `start`.)
-2. Show screenshots inline as supplement.
-3. For each option: approach name, reused vs. new components. **DO NOT give evaluation scores, rankings, or recommendations on which to pick.**
+2. Show screenshots inline as supplement (desktop + mobile).
+3. For each option: direction/approach name (from the Design Read), one-line
+   intent, reused vs. new components. **DO NOT give evaluation scores,
+   rankings, or recommendations on which to pick.** The only evaluation
+   artifact ever surfaced here is the `⚠️ DEGRADED` banner, when applicable.
 
 **STOP.** Wait for user choice.
 
 ### Step F — Iterate on Feedback
 
-1. User chooses option or requests changes.
-2. Generator applies changes (with context screenshots as reference).
-3. Evaluator re-evaluates (same rubric, fresh context).
+1. User chooses an option or requests changes. Map each request to its
+   `data-region` anchor — feedback is applied surgically to the named
+   regions, never by regenerating the whole page from scratch.
+2. Generator applies changes (with context screenshots as reference; craft
+   self-check re-run).
+3. Step D re-runs on the changed option (Gate 0 always; lenses on visual
+   changes).
 4. Open updated HTML + show screenshot.
 5. Repeat until explicit user approval.
 
@@ -200,8 +249,8 @@ Read [references/inventory.md](references/inventory.md).
      location. (The user may override via an overlay-declared `paths.designs_dir`, but the default is
      deterministic.)
    **When invoked from `/prd` (since v3.22.0), prefix the chosen relative path with `WORKING_DIRECTORY` — see the "Working Directory" section near the top of this file.** Concrete absolute target (prd-workflow case): `<WORKING_DIRECTORY>/<paths.prd_dir>/<slug>/design.html`.
-2. Extract UI Element Inventory (sprint contract). **When `features.has_i18n: true`**, the inventory MUST list every user-facing string the design introduces, so whoever implements it (`coder` / `ui-expert`) externalizes each via `t()` + a registry stub per `coder.md` STEP 9 / `framework/agents/i18n-protocol.md`. The mockup HTML itself is a throwaway prototype — its hardcoded copy is realistic placeholder, never the final shipped string, and this skill does NOT populate the registry (mockups are not shipped code).
-3. Update state file with chosen option, design decisions, component lists.
+2. Extract UI Element Inventory (sprint contract), walking the `data-region` annotations. **When `features.has_i18n: true`**, the inventory MUST list every user-facing string the design introduces, so whoever implements it (`coder` / `ui-expert`) externalizes each via `t()` + a registry stub per `coder.md` STEP 9 / `framework/agents/i18n-protocol.md`. The mockup HTML itself is a throwaway prototype — its hardcoded copy is realistic placeholder, never the final shipped string, and this skill does NOT populate the registry (mockups are not shipped code).
+3. Record in the state file: chosen option, its Design Read + direction (feeds the rotation rule next run), design decisions, component lists. **Standalone runs** (no PRD state file): write these to `<design-dir>/design-session.md` next to `design.html`.
 4. Clean up `/tmp/prd-design-<slug>/`.
 
 ### Step H — Registry Coherence Reconciliation (BLOCKING completion gate)
@@ -248,24 +297,26 @@ catching it after implementation costs a refactor. The weekly `ds-drift`
 routine is a safety net, not a substitute for this check.
 
 **Downstream visual verification (nudge, not a gate).** The chosen design is
-verified visually **at the mockup stage** here (Step D evaluator). The fidelity
-of the *implemented* result against this design is verified **downstream**, when
-the design lands in a live route: that is `/e2e-review` Phase 4 — auto-run by
-`/new`, or invoke `/e2e-review CARD-ID` manually if you implement this design
-outside the `/new` pipeline. This is where route-level fidelity lives; it is a
-pointer, never a blocking obligation on this skill.
+verified visually **at the mockup stage** here (Step D). The fidelity of the
+*implemented* result against this design is verified **downstream**, when the
+design lands in a live route: that is `/ui-implement` (which folds in
+`/e2e-review` Phase 4) — auto-delegated by `/new` for a UI card, or invoke
+`/ui-implement <design.html-or-CARD-ID>` manually. This is where route-level
+fidelity lives; it is a pointer, never a blocking obligation on this skill.
 
 ---
 
 ## Design Principles (quick reference)
 
-These are enforced — read `${paths.ui_guidelines}` for full spec.
+These are enforced — `references/craft-standards.md` + `references/anti-slop.md`
+hold the full rules; `${paths.ui_guidelines}` holds the project spec.
 
 - **Minimalism**: every control justifies its existence
-- **Mobile-first**: 320px upward, 44px touch targets, 200% text scaling
-- **Contrast**: every `bg-*` MUST have explicit `text-*` (WCAG 4.5:1)
+- **Mobile-first**: 320px upward, 44px touch targets, 200% text scaling — the mockup is evaluated at 375px too
+- **Contrast**: every `bg-*` MUST have explicit `text-*` (WCAG 4.5:1, APCA secondary gate — zero tolerance)
 - **Multi-tenant theming pairing**: when `features.multi_tenant_theming: true`, themed text-token paired with themed bg-token per the project's theming pattern doc
-- **View State Trinity**: loading (skeletons), error (localized message + retry), empty (CTA). The error language follows `identity.language`.
+- **View State Trinity+**: loading (skeletons), error (localized message + retry), empty (CTA) — full 8-state taxonomy for key components. The error language follows `identity.language`.
+- **Anti-slop**: the Tells catalog is binding; overrides are declared, never silent
 - **Separation of concerns**: UI / business logic / data layers stay separate
 - **Registry coherence (BLOCKING)**: when `has_design_system: true`, every primitive in the chosen design is reconciled with `INDEX.md` + `components/<Name>.md` + `tokens-reference.md` before sign-off (Step H). New primitive ⇒ new spec same change. Modified primitive ⇒ updated spec same change. Silent reuse of undocumented primitive ⇒ INDEX entry added now
 
@@ -282,6 +333,7 @@ The flow maps directly:
 | 3b — 3 Design Options | Steps C + D + E |
 | 3c — Design Iteration | Step F |
 | 3d — Save & Inventory | Step G |
+| 3e — Registry Coherence | Step H |
 
 The `/prd` skill should invoke `ui-design` and follow its output rather than duplicating the design workflow internally.
 
@@ -293,13 +345,13 @@ The `/prd` skill should invoke `ui-design` and follow its output rather than dup
 
 For: hero illustrations, custom icons, empty state artwork, decorative backgrounds, onboarding visuals, campaign assets.
 
-Provide: asset type, purpose, relevant section, style-guideline reference, brand colors, aspect ratio. Use `identity.design_philosophy` to set the aesthetic direction.
+Provide: asset type, purpose, relevant section, style-guideline reference, brand colors, aspect ratio. Use `identity.design_philosophy` and the locked direction to set the aesthetic.
 
 ### To `motion-expert` agent
 
 For: hover states, page transitions, expand/collapse motion, micro-interactions, reduced-motion-safe specs.
 
-Provide: triggering action, affected element, desired feedback, accessibility requirements. If `stack.animation.canonical` is set, the motion-expert proposes specs targeting those libraries.
+Provide: triggering action, affected element, desired feedback, accessibility requirements, and the MOTION dial value from the Design Read. If `stack.animation.canonical` is set, the motion-expert proposes specs targeting those libraries.
 
 ---
 
@@ -307,8 +359,8 @@ Provide: triggering action, affected element, desired feedback, accessibility re
 
 | Skill | When |
 |-------|------|
-| `huashu-design` | **OPTIONAL in Step C** (user-installed, not shipped) — HTML prototype engine, App Prototype shell, Tweaks, Playwright validation, MP4/GIF export. If installed, use it; else generate HTML mockups directly with a notice |
-| `ui-ux-pro-max` | Before substantial design for design intelligence |
-| `frontend-design` | To translate design into production code |
-| `webapp-testing` | For browser verification with Playwright |
-| `playwright-skill` | For quick screenshots and responsive checks |
+| `ui-implement` | AFTER approval — implements the approved `design.html` into the codebase and self-verifies fidelity. The implementation twin of this skill |
+| `ds-new` / `ds-edit` | When Step H confirms a NEW canonical primitive / an extension of an existing one |
+| `motion-design` | Motion/timing/easing decisions beyond the mockup's scope |
+| `webapp-testing` / `playwright-skill` | Headless browser capture for Steps B and D |
+| `design-sync` | When a Claude Design satellite is bound and Step H nudges `DS_MIRROR_STALE` |

package/framework/.claude/skills/ui-design/references/anti-slop.md

@@ -0,0 +1,106 @@
+# Anti-Slop Protocol — the Tells catalog
+
+The catalog of patterns that mark a design as machine-generated. These are the
+LLM's own statistical defaults, named explicitly so they can be refused
+deliberately. The generator (Step C) treats them as bans; the evaluator
+(Step D) and the deterministic `scripts/craft-check.mjs` gate enforce them.
+
+> Distilled from production-tested tells in
+> [impeccable](https://github.com/pbakaus/impeccable) (Apache-2.0, © Paul
+> Bakaus), [taste-skill](https://github.com/Leonxlnx/taste-skill) (MIT, ©
+> Leonxlnx) and [open-design](https://github.com/nexu-io/open-design)
+> (Apache-2.0, nexu-io).
+>
+> **Every ban has an override path**: "unless the brief, brand, or overlay
+> explicitly calls for it" — in that case the option's rationale comment MUST
+> name the override. A ban silently violated is a defect; a ban deliberately
+> overridden with a stated reason is a design choice.
+
+## The two-altitude slop test (run at Step C.0 and again at Step D)
+
+- **First-order**: if someone could guess the theme + palette from the
+  category alone ("AI tool → purple gradient on dark", "wellness → beige +
+  serif"), it is the first training-data reflex. Reject it.
+- **Second-order**: if someone could guess the aesthetic family from
+  category-plus-anti-references ("AI workflow tool that's *not* SaaS-cream →
+  editorial-typographic", "fintech that's *not* navy-and-gold →
+  terminal-native dark"), it is the same trap one tier deeper. Reject that
+  too, then choose deliberately.
+- **The soul rule**: aim for ~80% proven patterns + ~20% distinctive choice.
+  If a screenshot of the result could not be attributed to *this* product by
+  someone who knows it, you shipped a template.
+
+## Absolute bans (mechanical — craft-check enforces the checkable subset)
+
+| Ban | What it is |
+|---|---|
+| **Em-dash in UI copy** | `—` (and `–` used as a separator) anywhere visible. The LLM's signature stylistic crutch; zero-tolerance — "use sparingly" has empirically failed |
+| **Gradient text** | `background-clip: text` — decorative, never meaningful |
+| **Side-stripe accent** | `border-left`/`border-right` > 1px as a colored accent — the canonical "AI dashboard tile", never intentional; doubly wrong on a rounded card |
+| **Two-stop "trust" gradient hero** | purple→blue, blue→cyan, indigo→pink washes. A flat surface + intentional type beats it every time |
+| **Default-Tailwind indigo accent** | `#6366f1 #4f46e5 #4338ca #3730a3 #8b5cf6 #7c3aed #a855f7` — the textbook AI tell |
+| **Emoji as feature icons** | `✨🚀🎯⚡…` inside headings, buttons, list markers. Use 1.6–1.8px-stroke monoline SVG with `currentColor` |
+| **Filler copy** | `lorem ipsum`, "Feature One/Two/Three". An empty section is a composition problem, not a copywriting one |
+| **Invented metrics** | "10× faster", "99.9% uptime", `92%`: either from a real source, or visibly labelled as mock, or absent |
+| **Div-based fake screenshots** | a "product preview" built from styled `<div>` rectangles (fake task lists, fake terminals, fake dashboards) — the #1 LLM-design tell. Use a real capture, a generated image, or an honest labelled placeholder |
+| **The hero-metric template** | big number, small label, supporting stats, gradient accent — SaaS cliché |
+| **Glassmorphism as default** | `backdrop-blur` everywhere without a directional reason |
+| **Broken/unverified image URLs** | guessed Unsplash IDs 404 and ship as broken placeholders — verify every URL, or use seeded `picsum.photos`, or label the placeholder |
+
+## Rationed patterns (count-bounded — exceeding the cap is a FAIL)
+
+| Pattern | Cap |
+|---|---|
+| Eyebrow kickers (`uppercase tracking` micro-labels above headings) | ≤ ceil(sections/3), hero counts — the #1 violated rule in production tests. When in doubt: drop it, the headline alone is enough |
+| Numbered section markers (`01 / 02 / 03`, `001 · Capabilities`) | 0 — the eyebrow trope one tier deeper |
+| Middle-dot `·` separators | ≤ 1 per line |
+| Marquee / auto-scrolling strip | ≤ 1 per page |
+| Decorative status dots (pulsing green "live" dots) | 0 by default |
+| Identical image+text zigzag splits | ≤ 2 consecutive |
+| Identical card grids (3 equal feature cards) | reshape or vary — a repeated uniform grid is grammar, not design |
+| Icon-tile above every heading | 0 as a pattern; icons earn their place per-instance |
+| `var(--accent)` visible uses | ≤ 2 per screen |
+
+## Layout & composition tells
+
+- Centered hero over dark radial mesh + three equal feature cards + pricing —
+  the default page. Vary structure per the layout-family diversity rule
+  (`craft-standards.md`).
+- Split-header (big headline left, small explainer right) as *section* header
+  — banned by default; stack vertically, `max-w-[65ch]`.
+- Headlines broken with `<br>` + italic mixed-family words.
+- Vertical 90°-rotated text, decorative crosshairs/hairline overlays,
+  `border-t`+`border-b` on every list row.
+- "Scroll to explore" cues — they know what scroll is.
+- Version labels in the hero (`V0.6`, `BETA`, `INVITE-ONLY PREVIEW`) and
+  version footers (`v1.4.2 · Build 0048`) on marketing pages.
+- Weather/locale strips (`LIS 14:23 · 18°C`), decorative photo credits
+  (`Field study no. 12`), fake live counters ("Reservation 412 of 800").
+- Uniform entrance animation applied to every section — the reflex is the
+  tell, not motion itself (see `craft-standards.md` § Motion).
+
+## Copy tells (run the Copy Self-Audit before evaluation)
+
+Re-read every visible string. Flag and rewrite:
+
+- **The Jane Doe effect**: generic names ("John Doe"), fake-perfect numbers
+  (`99.99%`, round `50%` — real data reads like `47.2%`), startup-slop brand
+  names ("Acme", "Nexus", "SmartFlow", "Cloudly"), filler verbs ("Elevate",
+  "Seamless", "Unleash", "Next-Gen", "Revolutionize").
+- **Aphoristic cadence**: "X. No Y." / "Not a feature. A platform." — once is
+  a choice; the pattern is the tell.
+- **Poetic micro-labels**: "From the field", "Field notes", "On our desks",
+  "Quietly in use at" — mock-humble AI voice.
+- **Generic step labels**: "Stage 1 / Step 2 / Phase 03" — the actual step
+  content is the label.
+- Anything that "reads like an LLM trying to sound thoughtful" —
+  passive-aggressive humility, fake-craftsman labels, mock-poetic micro-meta.
+  AI-generated cute copy is worse than boring copy.
+
+## Palette & typography reflexes
+
+The named default palettes and fonts the model reaches for, with their
+refusal rules and rotation pools, live in
+[`design-directions.md`](design-directions.md) § "Reflex-reject lists" (LILA
+rule, premium-consumer beige ban, cream/sand body ban, serif discipline, font
+pools). Consult them at direction-lock time (Step C.0), not after generation.