arkaos 4.12.0 → 4.13.0

package/departments/brand/skills/design-review/SKILL.md

@@ -1,10 +1,10 @@
 ---
 name: brand/design-review
 description: >
-  Visual review of live designs against brand guidelines — opens Figma,
-  Sketch, or Canva desktop via Computer Use, screenshots each artboard, and
-  annotates palette, typography, spacing, and logo deviations. Requires
-  Computer Use (/mcp -> computer-use). TRIGGER: "/brand design-review",
+  Visual review of live designs against brand guidelines and a named
+  benchmark — screenshots the real UI (Playwright MCP first, claude-in-chrome
+  second, Computer Use for native design tools), and annotates palette,
+  typography, spacing, and logo deviations. TRIGGER: "/brand design-review",
   "design review", "visual review", "revê o design", "compara com o
   brandbook", "está on-brand?", "visual QA", "UI review" of mockups or
   screenshots, design file paths (*.fig, *.sketch, Canva links). SKIP:
@@ -17,49 +17,99 @@ allowed-tools: [Read, Write, Edit, Bash, Grep, Glob, Agent]
 
 # Design Review — `/brand design-review`
 
-> **Agent:** Valentina (Creative Director) | Requires: Computer Use (`/mcp` → `computer-use`)
+> **Agent:** Valentina (Creative Director) | **Framework:** Brand fidelity + benchmark comparison
+> **Squad reference:** `departments/brand/references/uiux-knowledge-and-tools.md` (§3 tokens, §8 anti-default, §9 marker)
 
 ## Command
 
 ```
-/brand design-review <app-or-file>
+/brand design-review <url-or-app-or-file>
 ```
 
-App can be: Figma, Sketch, Canva, or a direct file path to a design file.
+Target can be: a running app URL (preferred), Figma, Sketch, Canva, or a
+direct design-file path.
 
-## What It Does
+## Load design intelligence (MANDATORY — excellence-mandate)
 
-Opens a design tool and compares live designs against brand guidelines. Screenshots and annotates differences.
+Do this BEFORE reviewing, in this order, and record what actually loaded:
 
-## Workflow
+1. **`Skill(frontend-design)`** — the reviewer's calibration: the three
+   AI-default looks are findings when detected; signature-element
+   discipline is the bar.
+2. **`Skill(ui-ux-pro-max)`** — palette/typography/guideline data to
+   make deviations checkable, not vibes-based.
+3. **Read the brand guidelines / design system** — the review compares
+   against the project's OWN tokens (`design-system.yaml`, brandbook,
+   or §3 of the squad reference as fallback).
 
-1. **Check computer-use availability** — follow [Computer Use Availability Check](/arka)
-2. **Open** the design tool or file
-3. **Navigate** to the relevant artboards/pages
-4. **Compare** against brand guidelines:
-   - Color palette accuracy (hex values, contrast)
-   - Typography (font family, sizes, weights)
-   - Spacing and layout consistency
-   - Logo usage and clear space
-   - Icon style consistency
-5. **Screenshot** each artboard with annotations of issues found
-6. **Generate report** with side-by-side comparisons
+### Graceful degradation (honest, never silent)
 
-## Example
+If a plugin skill is NOT installed: say so explicitly, fall back to §3 +
+§8 of the squad reference, and emit the marker with
+`skills=degraded:<missing-name>`. Never claim a load that did not
+happen; never proceed as if it had.
 
-```
-/brand design-review Figma
-/brand design-review ~/Documents/Homepage-v3.sketch
-/brand design-review "Canva — Social Media Templates"
-```
+## Benchmark first
+
+NAME the reference company this design is judged against (from the
+`[arka:design]` marker of the work under review when present — hold the
+work to ITS declared benchmark; pick and state one when absent).
 
-## Fallback (No Computer Use)
+## Design marker (before any file edit)
 
 ```
-⚠ Computer Use required for design tool interaction.
-Enable via: /mcp → computer-use (macOS only, Pro/Max plan required)
+[arka:design] benchmark=<Company> skills=<comma,list> tokens=<path|none>
 ```
 
+Emit on its own line BEFORE writing the review. Full contract: §9 of the
+squad reference.
+
+## Capture order (screenshots are the evidence — no screenshot, no review)
+
+1. **Playwright MCP** (primary, no Computer Use needed):
+   `mcp__playwright__browser_navigate` → `browser_take_screenshot` at
+   1440 and 390 widths for every reviewed surface.
+2. **claude-in-chrome MCP** (second): same capture flow in the user's
+   Chrome when Playwright is unavailable.
+3. **Computer Use** (last, native design tools only): open Figma /
+   Sketch / Canva desktop and screenshot artboards.
+4. **Manual fallback**: ask the operator for screenshots — the review
+   does not proceed on imagination.
+
+Store captures under `.arka/evidence/ui/<yyyy-mm-dd>/<surface>.png` in
+the project — the path the Quality Gate's mechanical `ui-screenshot`
+evidence check reads (`core.governance.evidence_checks`): UI-touching
+changes with no recent capture (PNG > 10KB, last 24h) fail the evidence
+report, and Francisca judges the artifact it points at against the
+marker's benchmark.
+
+## Review dimensions
+
+For every captured surface, annotate deviations with exact values
+(found vs expected):
+
+- **Palette** — hex fidelity, accent overuse vs the 60/25/15 ratio (§3),
+  contrast (AA minimum).
+- **Typography** — families, sizes, weights vs the type scale; line
+  length and hierarchy integrity.
+- **Spacing/layout** — grid conformity, spacing-scale drift (arbitrary
+  values are findings), alignment.
+- **Logo/iconography** — clear space, min sizes, stroke consistency,
+  forbidden treatments.
+- **Anti-default (§8)** — does any surface read as one of the three
+  AI-default looks? Is there ONE signature element, and is boldness
+  spent only there?
+- **Benchmark contrast** — for each major finding, one line on what the
+  named benchmark does instead.
+
+## Verdict
+
+`ON-BRAND` / `DEVIATIONS (n)` / `OFF-BRAND` — with the annotated
+screenshot list, exact-value deviation table, and fix list ranked by
+visual impact. A review with zero captured screenshots is INVALID.
+
 ## Output
 
-Design review report saved to Obsidian: `Projects/<ecosystem>/Brand/Reviews/<date>.md`
+Design review report saved to Obsidian:
+`Projects/<ecosystem>/Brand/Reviews/<date>.md`, linking every annotated
+capture in `.arka/evidence/ui/<date>/`.

package/departments/brand/skills/design-system/SKILL.md

@@ -22,6 +22,38 @@ allowed-tools: [Read, Write, Edit, Bash, Grep, Glob, Agent, WebFetch, WebSearch]
 # Design System — `/brand design-system`
 
 > **Lead:** Sofia D. (UX Designer) + Isabel (Visual Designer) | **Framework:** Atomic Design (Brad Frost) + Design Tokens + WCAG 2.2 AA
+> **Squad reference:** `departments/brand/references/uiux-knowledge-and-tools.md` (§3 tokens, §8 anti-default, §9 marker)
+
+## Load design intelligence (MANDATORY — excellence-mandate)
+
+Do this BEFORE defining a single token, in this order, and record what
+actually loaded:
+
+1. **`Skill(frontend-design)`** — anti-default doctrine: the token plan
+   (palette, type pairing, signature) is critiqued BEFORE it becomes
+   `design-tokens.json`.
+2. **`Skill(ui-ux-pro-max)`** — 161 palettes + 57 font pairings as
+   comparative evidence for the primitive layer; never a pick-list.
+3. **Motion tokens involved?** Load the GSAP skills (`gsap-core`,
+   `gsap-timeline`; `gsap-performance` as the review bar).
+4. **Aesthetic seed (optional, no visual history only)** — a curated
+   TypeUI direction (`npx typeui.sh pull <slug>`, §10 of the squad
+   reference) may seed primitives; it is never the final system.
+
+### Graceful degradation (honest, never silent)
+
+If a plugin skill is NOT installed: say so explicitly, fall back to §3 +
+§8 of the squad reference, and emit the marker with
+`skills=degraded:<missing-name>`. Never claim a load that did not
+happen; never proceed as if it had.
+
+Then NAME the benchmark company the system is judged against, and emit
+the structured marker before any file edit (full contract: §9 of the
+squad reference):
+
+```
+[arka:design] benchmark=<Company> skills=<comma,list> tokens=<path|none>
+```
 
 ## What ships
 

package/departments/brand/skills/identity-system/SKILL.md

@@ -21,14 +21,64 @@ allowed-tools: [Read, Write, Edit, Bash, Grep, Glob, Agent, WebFetch, WebSearch]
 # Identity System — `/brand identity <name>`
 
 > **Agent:** Valentina (Creative Director) | **Framework:** Wheeler Process + Primal Branding
+> **Squad reference:** `departments/brand/references/uiux-knowledge-and-tools.md` (§3 tokens, §8 anti-default, §9 marker)
 
-## What It Does
+## Load design intelligence (MANDATORY — excellence-mandate)
 
-Full brand identity: strategy, verbal, visual in the correct order (never skip to visuals).
+Do this BEFORE any identity work, in this order, and record what
+actually loaded:
 
-## Output
+1. **`Skill(frontend-design)`** — anti-default doctrine; the visual
+   phase of this skill lives or dies by it.
+2. **`Skill(ui-ux-pro-max)`** — 161 palettes + 57 font pairings as
+   comparative evidence for the visual phase; never as a pick-list.
+3. **Aesthetic direction seed (optional)** — when the brand has no
+   visual history, consider a curated TypeUI direction
+   (`npx typeui.sh pull <slug>`, §10 of the squad reference) as a SEED
+   for the token system, never as the final system.
+
+### Graceful degradation (honest, never silent)
+
+If a plugin skill is NOT installed: say so explicitly, fall back to §3 +
+§8 of the squad reference, and emit the marker with
+`skills=degraded:<missing-name>`. Never claim a load that did not
+happen; never proceed as if it had.
+
+## Benchmark first
+
+NAME the reference company whose brand coherence this identity should be
+judged against (Stripe for system discipline, Apple for reduction,
+Mailchimp for voice…), and state what that company's brand director
+would reject in your current direction.
+
+## Design marker (before any file edit)
+
+```
+[arka:design] benchmark=<Company> skills=<comma,list> tokens=<path|none>
+```
 
-Complete brand identity package saved to Obsidian
+Emit on its own line BEFORE the first Write/Edit. Full contract: §9 of
+the squad reference.
+
+## Workflow (Wheeler order — never skip to visuals)
+
+1. **Strategy** — audience, positioning, archetype, competitive frame;
+   Primal Branding's 7 assets (creation story, creed, icons, rituals,
+   lexicon, non-believers, leader) drafted as one-liners. Route deep
+   positioning to `brand/positioning-statement` when it deserves it.
+2. **Verbal** — name rationale (if naming), tagline, voice: 3 traits
+   with a do/don't pair each, lexicon (words the brand owns, words it
+   never uses). Verbal LOCKS before pixels.
+3. **Visual** — only now. Run the §8 token-plan-then-critique loop:
+   palette (4–6 named hexes via `brand/colors` discipline), type pairing
+   (display/body/utility), logo direction (route execution to
+   `brand/logo-brief`), iconography style, layout grammar, and the ONE
+   signature element the identity is remembered by. Self-test every
+   choice: *"would this appear for any other brand?"*
+4. **System** — assemble tokens into a handoff for
+   `brand/design-system` (DTCG-shaped), plus usage rules (clear space,
+   min sizes, forbidden treatments).
+5. **Verification** — check the live surfaces against the system.
 
 ## Browser Steps
 
@@ -43,3 +93,14 @@ Follow the [Browser Integration Pattern](/arka) for availability checking.
 Follow the [Computer Use Availability Check](/arka) for availability checking.
 
 - [COMPUTER] Open design tools (Figma, Canva desktop, Sketch) to verify brand assets match guidelines
+
+## Output
+
+Complete brand identity package saved to Obsidian, in Wheeler order:
+
+| Phase | Deliverable |
+|---|---|
+| Strategy | positioning + archetype + Primal 7 assets |
+| Verbal | name rationale, tagline, voice traits, lexicon |
+| Visual | palette, type, logo direction, icon style, signature |
+| System | DTCG token handoff + usage rules → `brand/design-system` |

package/departments/brand/skills/logo-brief/SKILL.md

@@ -20,11 +20,89 @@ allowed-tools: [Read, Write, Edit, Bash, Grep, Glob, Agent, WebFetch, WebSearch]
 # Logo — `/brand logo <brief>`
 
 > **Agent:** Isabel (Visual Designer) | **Framework:** Logo Design Principles + AI Generation
+> **Squad reference:** `departments/brand/references/uiux-knowledge-and-tools.md` (§3 tokens, §8 anti-default, §9 marker)
 
-## What It Does
+## Load design intelligence (MANDATORY — excellence-mandate)
 
-Logo concept generation: brief, mood references, AI-generated concepts.
+Do this BEFORE any concept work, in this order, and record what actually
+loaded:
+
+1. **`Skill(frontend-design)`** — anti-default doctrine: distinctive
+   marks come from the brand's own world; one aesthetic risk, justified.
+2. **`Skill(ui-ux-pro-max)`** — typography data (57 pairings) for
+   wordmark craft and lockup type decisions.
+3. **Read the brand strategy** — positioning/archetype from the
+   identity work; a logo brief without strategy input gets sent back to
+   `brand/identity-system`.
+
+### Graceful degradation (honest, never silent)
+
+If a plugin skill is NOT installed: say so explicitly, fall back to §3 +
+§8 of the squad reference, and emit the marker with
+`skills=degraded:<missing-name>`. Never claim a load that did not
+happen; never proceed as if it had.
+
+## Benchmark first
+
+NAME the reference company whose mark discipline this logo should be
+judged against (FedEx for hidden meaning, Chanel for reduction, Stripe
+for geometric warmth…), and state what that company's design lead would
+reject in your current directions.
+
+## Anti-default check
+
+AI-logo defaults: generic geometric animal, gradient hexagon/orbit,
+lowercase-sans-with-one-colored-letter. §8 self-test on every direction:
+*"would this exact mark appear for any other company?"* A mark must
+survive one-color, 16px favicon, and embroidery.
+
+## Design marker (before any file edit)
+
+```
+[arka:design] benchmark=<Company> skills=<comma,list> tokens=<path|none>
+```
+
+Emit on its own line BEFORE the first Write/Edit. Full contract: §9 of
+the squad reference.
+
+## Workflow
+
+1. **Brief decomposition** — what the brand does, for whom, archetype,
+   one word the mark must communicate, contexts (app icon? signage?
+   embroidery?).
+2. **Mood references** — 3–5 references from the brand's OWN world
+   (materials, tools, geography), each with one line on what to steal
+   and what to refuse.
+3. **Three concept directions** — one wordmark, one monogram/lettermark,
+   one symbol/abstract; for each: sketch description, construction notes
+   (grid, stroke, negative space), rationale tied to strategy, and the
+   §8 self-test verdict.
+4. **Generation prompts** — engine-ready prompts per direction (flat
+   vector language, one-color first, exact hexes only after form is
+   locked). Higgsfield MCP (`generate_image`) is the primary backend
+   when connected; any capable generator works from the same prompts.
+5. **Variations grid** — for the recommended direction: horizontal /
+   stacked / icon-only lockups, one-color, reversed, min sizes.
+6. **Usage guidelines** — clear space (in units of the mark), min size
+   px/mm, forbidden treatments (§4 motion bans apply to animated use).
 
 ## Output
 
-Logo concepts with rationale, variations, and usage guidelines
+| Deliverable | Format |
+|---|---|
+| 3 concept directions | sketch + construction + rationale + self-test |
+| Recommendation | winner + why the losers lost |
+| Prompt set | engine-ready generation prompts per direction |
+| Variations grid | lockups, one-color, reversed, min sizes |
+| Usage guide | clear space, min size, forbidden treatments |
+
+Saved to Obsidian under the project's Brand path; feeds
+`brand/mockup-generate` for application scenes.
+
+## Examples
+
+```
+/brand logo "CLI-first agent OS, precision + calm authority"
+/brand logo "artisan coffee roaster, heat + patience as materials"
+/brand logo "pediatric clinic, trust without infantilization"
+```

package/departments/brand/skills/mockup-generate/SKILL.md

@@ -20,11 +20,90 @@ allowed-tools: [Read, Write, Edit, Bash, Grep, Glob, Agent, WebFetch, WebSearch]
 # Mockup — `/brand mockup <type>`
 
 > **Agent:** Isabel (Visual Designer) | **Framework:** AI Image Generation + Brand Application
+> **Squad reference:** `departments/brand/references/uiux-knowledge-and-tools.md` (§3 tokens, §8 anti-default, §9 marker)
 
-## What It Does
+## Load design intelligence (MANDATORY — excellence-mandate)
 
-Generate mockups: product, packaging, social, stationery with brand identity applied.
+Do this BEFORE writing a single generation prompt, in this order, and
+record what actually loaded:
+
+1. **`Skill(frontend-design)`** — anti-default doctrine: the subject's
+   own world (materials, instruments, vernacular) is where distinctive
+   scenes come from, not stock-photo tropes.
+2. **`Skill(ui-ux-pro-max)`** — palette/typography data to keep brand
+   fidelity checkable in the generated output.
+3. **Read the brand identity source** — brandbook, `design-system.yaml`,
+   or logo package; §3 of the squad reference as in-repo fallback. A
+   mockup without the real tokens is fan-art, not brand application.
+
+### Graceful degradation (honest, never silent)
+
+If a plugin skill is NOT installed: say so explicitly, fall back to §3 +
+§8 of the squad reference, and emit the marker with
+`skills=degraded:<missing-name>`. Never claim a load that did not
+happen; never proceed as if it had.
+
+## Benchmark first
+
+NAME the reference company whose product/packaging photography this
+mockup set should be judged against (Apple for product staging, Aesop
+for material honesty, Notion for illustration-led social…), and state
+what that company's design lead would reject in your current scenes.
+
+## Anti-default check
+
+Generic mockup defaults: floating device on gradient, laptop-on-desk
+with latte, gold-foil-on-black packaging. Use §8's self-test — *"would
+this exact scene appear for any other brand?"* — and pull the scene from
+the brand's actual world instead.
+
+## Design marker (before any file edit)
+
+```
+[arka:design] benchmark=<Company> skills=<comma,list> tokens=<path|none>
+```
+
+Emit on its own line BEFORE the first Write/Edit. Full contract: §9 of
+the squad reference.
+
+## Workflow
+
+1. **KB + identity** — pull the real brand tokens (palette hexes, type,
+   logo variants, clear-space rules) and cite the source note.
+2. **Scene selection** — per requested type (product / packaging /
+   social / stationery), design 2–3 scenes rooted in the brand's world;
+   one sentence of rationale each.
+3. **Prompt engineering** — one generation prompt per scene specifying:
+   subject + environment, camera (focal length, angle), lighting setup,
+   material vernacular, exact brand hexes, logo placement + clear space,
+   aspect ratio per destination (1:1, 4:5, 16:9, 9:16), and negative
+   space reserved for copy. Name the intended engine — the Higgsfield
+   MCP (`generate_image`; `remove_background`/`upscale_image` for
+   post) is the primary backend when connected; any capable generator
+   works from the same prompt set.
+4. **Brand application rules** — for each scene: logo min-size,
+   clear space, color fidelity tolerance, type-in-image rules.
+5. **Fidelity pass** — after generation, check output against tokens
+   (palette drift, logo distortion, off-brand materials) and regenerate
+   or post-process what fails; state what was rejected and why.
 
 ## Output
 
-Mockup set with AI generation prompts and brand application guidelines
+| Deliverable | Format |
+|---|---|
+| Scene set | 2–3 scenes per type with rationale |
+| Prompt set | engine-ready prompts (subject/camera/light/brand tokens) |
+| Application guide | logo, clear space, color fidelity, type rules |
+| Fidelity report | what was rejected/regenerated and why |
+
+Saved to Obsidian under the project's Brand path; images land in the
+project's assets dir with the marker's `tokens=` naming their source.
+
+## Examples
+
+```
+/brand mockup product      # hero product shots in the brand's world
+/brand mockup packaging    # box/label scenes, material-honest
+/brand mockup social       # per-platform templates (1:1, 4:5, 9:16)
+/brand mockup stationery   # cards, letterhead, swag
+```

package/departments/brand/skills/ux-audit/SKILL.md

@@ -18,17 +18,79 @@ allowed-tools: [Read, Write, Edit, Bash, Grep, Glob, Agent, WebFetch, WebSearch]
 > Full doctrine: `arka/SKILL.md` (KB-First Research).
 <!-- arka:kb-first-prefix end -->
 
-# Ux Audit — `/brand ux-audit <url>`
+# UX Audit — `/brand ux-audit <url>`
 
 > **Agent:** Sofia D. (UX Designer) | **Framework:** Nielsen 10 Heuristics + Laws of UX
+> **Squad reference:** `departments/brand/references/uiux-knowledge-and-tools.md` (§3 tokens, §8 anti-default, §9 marker)
 
-## What It Does
+## Load design intelligence (MANDATORY — excellence-mandate)
 
-UX heuristic audit: evaluate interface against Nielsen's 10 heuristics.
+Do this BEFORE auditing, in this order, and record what actually loaded:
 
-## Output
+1. **`Skill(ui-ux-pro-max)`** — the 99 UX guidelines are the audit's
+   extended checklist beyond Nielsen; cite guideline IDs in findings.
+2. **`Skill(frontend-design)`** — calibrates the visual-quality half of
+   findings (default-look detection is itself a finding: an interface
+   that reads as AI-default gets flagged under aesthetic integrity).
+3. **Read the project design system** — findings that violate the
+   project's own tokens rank higher than generic advice.
+
+### Graceful degradation (honest, never silent)
+
+If a plugin skill is NOT installed: say so explicitly, fall back to §3 +
+§8 of the squad reference, and emit the marker with
+`skills=degraded:<missing-name>`. Never claim a load that did not
+happen; never proceed as if it had.
+
+## Benchmark first
+
+NAME the reference company this interface should be judged against for
+its category (Linear for dashboards, Stripe for checkout/docs, Airbnb
+for browse flows…). Every major finding states what the benchmark does
+instead.
+
+## Design marker (before any file edit)
+
+```
+[arka:design] benchmark=<Company> skills=<comma,list> tokens=<path|none>
+```
 
-Heuristic audit report with severity ratings and fix recommendations
+Emit on its own line BEFORE writing the report. Full contract: §9 of the
+squad reference.
+
+## The checklist (applied, not name-dropped)
+
+**Nielsen's 10** — each scored per flow: (1) visibility of system
+status; (2) match between system and real world; (3) user control and
+freedom (undo/escape); (4) consistency and standards; (5) error
+prevention; (6) recognition rather than recall; (7) flexibility and
+efficiency (shortcuts, defaults); (8) aesthetic and minimalist design;
+(9) help users recognize/recover from errors; (10) help and
+documentation.
+
+**Laws of UX (minimum set)** — Fitts (target size/distance), Hick
+(choice overload), Jakob (convention violations), Miller (memory load),
+Peak-End (how flows end), Aesthetic-Usability (and its trap).
+
+**Severity scale** — 0 not a problem · 1 cosmetic · 2 minor · 3 major
+(users fail or abandon) · 4 catastrophic (blocks the core job). Every
+finding: heuristic/law violated, severity, evidence (screenshot),
+benchmark contrast, concrete fix.
+
+## Workflow
+
+1. **Scope** — the 2–3 flows that carry the product's core job
+   (onboarding, core action, checkout/conversion).
+2. **Walk the flows in a real browser** (steps below), capturing
+   evidence screenshots per finding.
+3. **Score** every screen against the checklist; log findings as you go
+   — no memory-based auditing.
+4. **Accessibility pass** — keyboard-only run, focus visibility,
+   contrast (AA), `prefers-reduced-motion`, semantic landmarks.
+5. **Responsive pass** — 390 / 768 / 1440; layout integrity, target
+   sizes, content parity.
+6. **Report** — findings ranked by severity, quick-wins vs structural,
+   each with its fix and benchmark contrast.
 
 ## Browser Steps
 
@@ -46,6 +108,13 @@ Follow the [Computer Use Availability Check](/arka) for availability checking.
 
 - [COMPUTER] Launch the native app, test user flows, screenshot each screen for the audit report
 
+## Output
+
+Heuristic audit report: severity-ranked findings (heuristic/law +
+evidence screenshot + benchmark contrast + fix), accessibility and
+responsive annexes, quick-win list. Saved to Obsidian under the
+project's UX path.
+
 ## Scheduling ⏰
 
 ```

package/departments/brand/skills/wireframe/SKILL.md

@@ -21,11 +21,83 @@ allowed-tools: [Read, Write, Edit, Bash, Grep, Glob, Agent, WebFetch, WebSearch]
 # Wireframe — `/brand wireframe <page>`
 
 > **Agent:** Sofia D. (UX Designer) | **Framework:** Garrett's 5 Planes + Information Architecture
+> **Squad reference:** `departments/brand/references/uiux-knowledge-and-tools.md` (§3 tokens, §8 anti-default, §9 marker)
 
-## What It Does
+## Load design intelligence (MANDATORY — excellence-mandate)
 
-Wireframe design: layout, navigation, content hierarchy, interaction notes.
+Do this BEFORE sketching a single box, in this order, and record what
+actually loaded:
+
+1. **`Skill(frontend-design)`** — anti-default doctrine: layout concepts
+   are compared as one-sentence prose + ASCII wireframes BEFORE choosing;
+   structure is information, not decoration.
+2. **`Skill(ui-ux-pro-max)`** — 99 UX guidelines and per-product-type
+   interface patterns; use them to pressure-test the information
+   architecture, not to pick a template.
+3. **Read the project design system** — grid, spacing scale, breakpoints
+   (`design-system.yaml` or §3 of the squad reference as fallback).
+
+### Graceful degradation (honest, never silent)
+
+If a plugin skill is NOT installed: say so explicitly, fall back to §3 +
+§8 of the squad reference, and emit the marker with
+`skills=degraded:<missing-name>`. Never claim a load that did not
+happen; never proceed as if it had.
+
+## Benchmark first
+
+NAME the reference company whose information density and hierarchy this
+page should be judged against (Linear for ruthless density, Stripe for
+progressive disclosure, Notion for flexible blocks…), and state what
+that company's design lead would reject in your current structure.
+
+## Anti-default check
+
+The wireframe stage is where the broadsheet default (§8) sneaks in —
+numbered markers (01/02/03), hero-with-big-number-and-gradient, dense
+hairline columns. Use a structural device ONLY if it encodes something
+true about the content (a real sequence, a real timeline). Self-test:
+*"would this exact structure appear for any other brief?"*
+
+## Design marker (before any file edit)
+
+```
+[arka:design] benchmark=<Company> skills=<comma,list> tokens=<path|none>
+```
+
+Emit on its own line BEFORE the first Write/Edit. Full contract: §9 of
+the squad reference.
+
+## Workflow (Garrett's 5 Planes, applied)
+
+1. **Strategy** — one sentence: the page's single job and its audience.
+   If the brief doesn't pin these, pin them yourself and say so.
+2. **Scope** — content inventory: every element that must exist, ranked
+   by the user's need (not the org chart's pride).
+3. **Structure** — user flows in/out of the page; navigation model;
+   where each ranked element lives. State the ONE thing a first-time
+   visitor must understand in 5 seconds.
+4. **Skeleton** — ASCII wireframes at TWO breakpoints minimum (desktop
+   ~1440, mobile ~390), exploring at least TWO structurally different
+   layout concepts with a one-sentence rationale each; pick one and say
+   why the loser lost.
+5. **Surface handoff** — annotate: interaction notes (hover, focus,
+   empty, error, loading states), component references (map every region
+   to a design-system component or flag it as NEW), responsive behavior
+   per region, and the intended signature element's location.
 
 ## Output
 
-Wireframe spec with annotations, component references, and responsive notes
+An annotated wireframe spec:
+
+| Section | Content |
+|---|---|
+| Strategy line | page job + audience + 5-second takeaway |
+| Content inventory | ranked element list |
+| ASCII wireframes | ≥2 concepts × 2 breakpoints, winner + rationale |
+| Annotations | interaction states, component refs, responsive notes |
+| Signature | where the one memorable element lives and why |
+
+Saved to Obsidian under the project's Brand/UX path; consumed by
+`brand/mockup-generate` and `dev` implementation with the marker's
+`tokens=` pointing at the same design system.