diff --git a/.claude/settings.json b/.claude/settings.json
new file mode 100644
index 0000000000..082abd608e
--- /dev/null
+++ b/.claude/settings.json
@@ -0,0 +1,14 @@
+{
+  "hooks": {
+    "Stop": [
+      {
+        "hooks": [
+          {
+            "type": "command",
+            "command": "node -e \"const fs=require('fs'),path=require('path');const base='src/routes/_index/components';if(!fs.existsSync(base))process.exit(0);const comps=fs.readdirSync(base,{withFileTypes:true}).filter(d=>d.isDirectory()).map(d=>d.name);let found=false;comps.forEach(c=>{const p=path.join(base,c,'pipeline-state.json');if(!fs.existsSync(p))return;try{const s=JSON.parse(fs.readFileSync(p,'utf8'));const ip=Object.entries(s.steps||{}).filter(([,v])=>v.status==='in-progress');if(ip.length){found=true;process.stdout.write('\\n⚠️  PIPELINE IN-PROGRESS — do not stop.\\n  Component: '+s.component+'\\n  Step '+ip.map(([k])=>k).join(', ')+' is still in-progress.\\n  Read pipeline-state.json and advance to the next step before stopping.\\n');}}catch(e){}});if(found)process.exit(2);\" 2>/dev/null"
+          }
+        ]
+      }
+    ]
+  }
+}
diff --git a/.claude/skills/evo-a11y/SKILL.md b/.claude/skills/evo-a11y/SKILL.md
new file mode 100644
index 0000000000..6c74665591
--- /dev/null
+++ b/.claude/skills/evo-a11y/SKILL.md
@@ -0,0 +1,283 @@
+---
+name: evo-a11y
+description: >
+  Accessibility validation and incremental docs generation for evo-web components.
+  Runs in two passes: Pass 1 (Step 7, after static layer) validates HTML and
+  static storybook, then writes the static sections of accessibility+page.marko.
+  Pass 2 (Step 12, after all layers) validates Marko and React, then fills in
+  the interactive sections. The orchestrator explicitly declares which pass and
+  scope — never inferred from disk. Skipped entirely for style-only revisions.
+  Use this whenever the user says "run a11y", "validate accessibility", "generate
+  accessibility docs", "check ARIA", or when the orchestrator invokes Step 7
+  (Pass 1) or Step 12 (Pass 2).
+---
+
+# evo-a11y
+
+You run in two passes. The orchestrator tells you which pass and scope — do not
+infer from disk state (fails on revisions where old files are already present).
+
+The accessibility docs are built incrementally: Pass 1 writes the static
+sections; Pass 2 fills in the interactive sections. For style-only revisions,
+this skill is not invoked.
+
+---
+
+## Scope declaration from orchestrator
+
+You will receive one of:
+
+- `"Pass 1 — static layer only. Steps 4–6 have run."`
+- `"Pass 2 — full scope. Steps 4–11 have run."`
+- `"Pass 2 — interactive scope. Steps 8–11 have run."`
+
+If invoked standalone without declaration, ask which pass and scope.
+
+---
+
+## Pass 1 — Static layer validation + static a11y docs
+
+**Trigger:** Step 7, after static component + static storybook + css docs (Steps 4–6)
+
+### Phase 1a: Validate
+
+**HTML from `/evo-static-component` (in context):**
+
+- `manifest.a11y.explicitRole: true` → `role="..."` on root element
+- `manifest.a11y.labelStrategy === "aria-label-prop"` → `aria-label` present
+- `manifest.a11y.labelStrategy === "aria-hidden"` → `aria-hidden="true"` present for null case
+- Each entry in `manifest.a11y.ariaAttributes[]` represented in at least one variant
+- Root element matches `manifest.rootElement.default`
+- No `<div>` where a semantic element is correct
+
+**Static storybook (read from disk):**
+
+- `RTL` named export exists — 🔴 if missing
+- `textSpacing` export with `demo-a11y-text-spacing` on root BEM element — 🔴 if missing
+
+**Anti-patterns:**
+
+- `role="presentation"` without justification
+- `aria-hidden` and interactive elements mixed incorrectly
+
+### Phase 1b: Write static sections of accessibility+page.marko
+
+Write `src/routes/_index/components/<block>/accessibility+page.marko` with the
+sections derivable from the static layer. Mark interactive sections as stubs.
+
+```marko
+import "../../../../sass/accessibility.scss";
+import { urls } from "../../../../data";
+
+<div class="a11y-pattern-content">
+  <h1><DisplayName> Accessibility</h1>
+
+  <h2>Best Practices</h2>
+  <!-- From manifest.a11y (label strategy, decorative vs informational)
+       and manifest.callerObligations[] (a11y-critical categories only) -->
+
+  <h2>Interaction Design</h2>
+  <p>This section provides detailed instructions for how different input types
+  should navigate and operate the pattern.</p>
+
+  <h3>Keyboard</h3>
+  <!-- STUB if interactive layers not yet generated:
+       <p>This section will be completed after the interactive layer is generated.</p>
+       OR fill with manifest.keyboardInteractions[] if present in manifest -->
+
+  <h3>Screen Reader</h3>
+  <!-- STUB or fill from manifest.a11y.screenReaderAnnouncement if static-only -->
+
+  <h3>Pointer</h3>
+  <!-- For non-interactive components: fill now.
+       For interactive: stub — "Updated after interactive layer generation." -->
+
+  <h2>ARIA Reference</h2>
+  <table>
+    <thead><tr><th>Attribute</th><th>Description</th></tr></thead>
+    <tbody>
+      <!-- One <tr> per manifest.a11y.ariaAttributes[] + a11yProps
+           This table is derivable entirely from the manifest — fill it now -->
+    </tbody>
+  </table>
+
+  <!-- <h2>Further Reading</h2> — only if contract/manifest references known a11y URLs -->
+</div>
+```
+
+**What to fill vs. stub:**
+
+| Section                   | Fill now                                 | Reason                                           |
+| ------------------------- | ---------------------------------------- | ------------------------------------------------ |
+| Best Practices            | ✅ Always                                | Derivable from manifest.a11y + callerObligations |
+| ARIA Reference table      | ✅ Always                                | Derivable from manifest.a11y.ariaAttributes[]    |
+| Pointer (non-interactive) | ✅ If focusable === false                | Fully static                                     |
+| Keyboard                  | ✅ If keyboardInteractions[] in manifest | Otherwise stub                                   |
+| Screen Reader             | ✅ Static announcements from manifest    | Stub interactive state changes                   |
+| Pointer (interactive)     | Stub                                     | Needs active/pressed/hover from Marko/React      |
+
+**Non-interactive components:** Fill all sections completely in Pass 1 — there
+is no Pass 2 for style/static-only scopes.
+
+Also write `accessibility+meta.json` if the component is non-interactive (no
+Pass 2 needed):
+
+```json
+{
+  "pageTitle": "<DisplayName> Accessibility Guidelines — <tagline>",
+  "pageDescription": "<2-3 sentence SEO description>"
+}
+```
+
+For interactive components, mark meta as pending: write a stub meta.json and
+complete it in Pass 2.
+
+### Pass 1 output
+
+```
+## A11y Pass 1 — $COMPONENT
+
+Validation:
+  [✅ HTML ARIA correct | 🔴 issue: description]
+  [✅ RTL story present | 🔴 Missing]
+  [✅ textSpacing story present | 🔴 Missing]
+
+Docs written:
+  ✅  accessibility+page.marko — static sections complete
+  [✅ all sections filled (non-interactive) | 🔒 interactive stubs pending Pass 2]
+
+Result: [✅ PASSED — proceed to Marko | 🔴 BLOCKED — fix issues first]
+```
+
+---
+
+## Pass 2 — Full validation + fill interactive a11y docs
+
+**Trigger:** Step 12, after all layers (Steps 4–11) or interactive-scope layers (Steps 8–11)
+
+### Phase 2a: Validate all layers
+
+**Re-run Pass 1 checks** (confirm static is still clean).
+
+**`index.marko`** — read from disk:
+
+- `manifest.a11y.labelStrategy` correctly wired: conditional `aria-label`/`aria-hidden`
+- a11yProps with `allowNull: true` have both branches
+- Required a11yProps: no `?` in `Input` interface
+- Each `manifest.a11y.ariaAttributes[]` entry in template
+- Keyboard handlers: Marko 6 inline syntax — no `this.emit`, `$ let`, `<if(`
+- If `manifest.keyboardModel`: `<let/>` for focus state, not class methods
+
+**`index.tsx`** — read from disk:
+
+- a11yProps in TypeScript props type
+- `aria-*` forwarded to correct DOM element
+- Keyboard handlers match `manifest.keyboardInteractions[]`
+
+**Marko storybook** — if `manifest.keyboardModel`: interactive story with `<let>` or `:=` — 🟡 if missing
+
+**React storybook** — if `manifest.keyboardModel`: `Controlled` or `render`-based story — 🟡 if missing
+
+### Phase 2b: Fill interactive sections of accessibility+page.marko
+
+Read the existing `accessibility+page.marko` (written in Pass 1). Fill in or
+replace the stubbed sections:
+
+**Keyboard section** — from `manifest.keyboardModel` + `manifest.keyboardInteractions[]`:
+
+- Use `<strong>KEY</strong>` for key names
+- `<strong>must</strong>` for required behavior; `<em>may</em>` for optional
+
+**Screen Reader section** — from `manifest.a11y.screenReaderAnnouncement`:
+
+- Cover each usage mode (decorative, informational, interactive)
+- Plain English — what gets announced, not implementation details
+
+**Pointer section** — from manifest states + behaviors:
+
+- Active/pressed/clicked behavior
+- If inside interactive element: what clicking does
+
+**Also complete `accessibility+meta.json`** (if written as stub in Pass 1).
+
+### Pass 2 output
+
+```
+## A11y Pass 2 — $COMPONENT
+
+Validation:
+  Static:          [✅ Clean | 🔴 N issue(s)]
+  Marko:           [✅ Passed | 🔴 N issue(s) | 🟡 N warnings]
+  React:           [✅ Passed | 🔴 N issue(s) | 🟡 N warnings]
+  Marko storybook: [✅ Interactive story present | 🟡 Missing]
+  React storybook: [✅ Controlled story present | 🟡 Missing]
+
+Docs updated:
+  ✅  accessibility+page.marko — interactive sections filled
+  ✅  accessibility+meta.json — complete
+
+Result: [✅ PASSED | 🔴 BLOCKED — N issue(s)]
+```
+
+🔴 blocking issues in Pass 2 must be fixed before the build step.
+
+---
+
+## Completion record — mandatory final step
+
+After all outputs are verified on disk, write the completion record.
+The step ID depends on which pass was declared at invocation.
+This is the signal the orchestrator reads to advance — do not skip this step.
+
+### Pass 1 (Step 7)
+
+> **Before running:** Substitute the actual component name for `$COMPONENT` and the actual BEM block name for `<BLOCK>`.
+
+```bash
+node -e "
+const fs = require('fs');
+const comp = '$COMPONENT';
+const p = \`src/routes/_index/components/\${comp}/pipeline-state.json\`;
+const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+const block = '<BLOCK>';
+s.steps['7'] = {
+  status: 'complete',
+  completedAt: new Date().toISOString(),
+  outputs: [
+    \`src/routes/_index/components/\${block}/accessibility+page.marko\`,
+  ]
+};
+s.updatedAt = new Date().toISOString();
+fs.writeFileSync(p, JSON.stringify(s, null, 2));
+console.log('Step 7 completion record written.');
+"
+```
+
+### Pass 2 (Step 12)
+
+> **Before running:** Substitute the actual component name for `$COMPONENT` and the actual BEM block name for `<BLOCK>`.
+
+```bash
+node -e "
+const fs = require('fs');
+const comp = '$COMPONENT';
+const p = \`src/routes/_index/components/\${comp}/pipeline-state.json\`;
+const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+const block = '<BLOCK>';
+s.steps['12'] = {
+  status: 'complete',
+  completedAt: new Date().toISOString(),
+  outputs: [
+    \`src/routes/_index/components/\${block}/accessibility+page.marko\`,
+    \`src/routes/_index/components/\${block}/accessibility+meta.json\`,
+  ]
+};
+s.updatedAt = new Date().toISOString();
+fs.writeFileSync(p, JSON.stringify(s, null, 2));
+console.log('Step 12 completion record written.');
+"
+```
+
+If any blocking a11y failure was found that could not be fixed inline, write
+`status: "failed"` with the failing check as the `error` field. Use the correct step ID
+(`'7'` for Pass 1, `'12'` for Pass 2).
diff --git a/.claude/skills/evo-component/SKILL.md b/.claude/skills/evo-component/SKILL.md
new file mode 100644
index 0000000000..bb3e1f8914
--- /dev/null
+++ b/.claude/skills/evo-component/SKILL.md
@@ -0,0 +1,1309 @@
+---
+name: evo-component
+description: >
+  Orchestrator for the evo-web AI component generation pipeline. Reads an
+  approved manifest.json and generates all component layers in the correct
+  sequence, with scope-aware step selection. Supports four scopes: full (all
+  16 steps, default for new components), static (HTML + SCSS changes), style
+  (SCSS only), and interactive (framework behavior changes). Run this after
+  /evo-create-component-manifest and engineer approval. Use this skill whenever
+  the user says "generate the component", "run evo-component", "start code gen",
+  "build the component from the manifest", "kick off generation for [component]",
+  "the manifest is approved, go ahead", "proceed with generation", "looks good,
+  generate it", "produce the Marko and React files", or any variant of "the
+  manifest/gap report is approved and I want to generate code now". Do NOT wait
+  for the user to name this skill explicitly — if they have an approved manifest
+  and want to generate code, this is the skill to use.
+---
+
+# Generate Component
+
+This skill reads an approved `manifest.json` and generates component layers in
+a fixed, scope-aware sequence. The manifest is the single source of truth.
+
+---
+
+## Invocation
+
+```
+/evo-component <component-name> [--scope <scope>] [--reference <component>]
+```
+
+- `component-name` — kebab-case (e.g. `evo-accordion`)
+- `--scope` — `full` (default), `static`, `interactive`, or `style`
+- `--reference` — triggers Layer 2 fidelity comparison in QA
+
+If `$ARGUMENTS` is empty, ask: "Which component should I generate?"
+Wait. Do not proceed until you have a component name.
+
+---
+
+## Step 1 — Read and validate the manifest
+
+Read `src/routes/_index/components/$COMPONENT/manifest.json` in full.
+
+If the file does not exist, stop and report the error.
+
+---
+
+## Step 2 — Gate: resolve blocking gaps
+
+Scan `manifest.json["gaps"]` for `confidence: "low"` or `source: "missing"`.
+If any exist, list them and stop. Medium-confidence gaps proceed as inline
+`// TODO: verify` comments.
+
+---
+
+## Step 2.5 — State file management
+
+The pipeline uses `src/routes/_index/components/$COMPONENT/pipeline-state.json` as a
+disk-resident record of step progress. Read it at startup, create it if absent, detect
+stalls, and fast-forward past completed steps.
+
+### Schema
+
+```json
+{
+  "component": "accordion",
+  "scope": "full",
+  "manifestHash": "<md5-of-manifest-json>",
+  "startedAt": "2026-06-10T09:00:00.000Z",
+  "updatedAt": "2026-06-10T09:14:22.000Z",
+  "steps": {
+    "4": { "status": "pending" },
+    "5": { "status": "pending" },
+    "6": { "status": "pending" },
+    "6.5": { "status": "pending" },
+    "7": { "status": "pending" },
+    "micro-qa-1": { "status": "pending" },
+    "8": { "status": "pending" },
+    "9": { "status": "pending" },
+    "10": { "status": "pending" },
+    "11": { "status": "pending" },
+    "12": { "status": "pending" },
+    "micro-qa-2": { "status": "pending" },
+    "13": { "status": "pending" },
+    "14": { "status": "pending" },
+    "15": { "status": "pending" }
+  }
+}
+```
+
+`status` values: `pending` | `in-progress` | `complete` | `failed` | `skipped`
+
+### Startup procedure
+
+> **Note on `$SCOPE`:** This is the value from `--scope` on invocation (default: `full`). The full scope-to-steps mapping is in the scope reference table at the end of this skill. For state file initialization, steps not included in the current scope should be set to `skipped` instead of `pending`.
+
+**1. Compute the manifest hash:**
+
+```bash
+# macOS: md5 -q src/routes/_index/components/$COMPONENT/manifest.json
+# Cross-platform (Node):
+node -e "const c=require('crypto'),fs=require('fs');process.stdout.write(c.createHash('md5').update(fs.readFileSync('src/routes/_index/components/$COMPONENT/manifest.json')).digest('hex'))"
+```
+
+Store this value as `$MANIFEST_HASH` for use in subsequent steps.
+
+**2. Check if the state file exists:**
+
+```bash
+cat src/routes/_index/components/$COMPONENT/pipeline-state.json 2>/dev/null || echo "NOT_FOUND"
+```
+
+**3a. If NOT_FOUND — create the state file:**
+
+Initialize all steps for the resolved scope as `pending` (steps not in this scope
+set to `skipped`). See the scope-to-steps table in Step 3.
+
+> **Before running:** Substitute the actual values of `$COMPONENT`, `$SCOPE`, and `$MANIFEST_HASH` into the command string — these are not shell environment variables that persist across tool calls.
+
+```bash
+node -e "
+const fs = require('fs');
+const path = 'src/routes/_index/components/$COMPONENT/pipeline-state.json';
+const now = new Date().toISOString();
+const state = {
+  component: '$COMPONENT',
+  scope: '$SCOPE',
+  manifestHash: '$MANIFEST_HASH',
+  startedAt: now,
+  updatedAt: now,
+  steps: {
+    '4':          { status: 'pending' },
+    '5':          { status: 'pending' },
+    '6':          { status: 'pending' },
+    '6.5':        { status: 'pending' },
+    '7':          { status: 'pending' },
+    'micro-qa-1': { status: 'pending' },
+    '8':          { status: 'pending' },
+    '9':          { status: 'pending' },
+    '10':         { status: 'pending' },
+    '11':         { status: 'pending' },
+    '12':         { status: 'pending' },
+    'micro-qa-2': { status: 'pending' },
+    '13':         { status: 'pending' },
+    '14':         { status: 'pending' },
+    '15':         { status: 'pending' }
+  }
+};
+fs.mkdirSync(require('path').dirname(path), { recursive: true });
+fs.writeFileSync(path, JSON.stringify(state, null, 2));
+console.log('State file created.');
+"
+```
+
+**3b. If state file exists — validate and resume:**
+
+Parse the content already read in sub-step 2. Then:
+
+> If parsing fails (corrupted or partial write), treat this as NOT_FOUND: log a warning `⚠️ pipeline-state.json is corrupt — starting fresh.` and proceed to sub-step 3a to recreate it.
+
+**(i) Manifest hash check:**
+
+Compare the stored `manifestHash` against `$MANIFEST_HASH`. If they differ:
+
+```
+⚠️  Manifest changed since this pipeline run started.
+    Stored hash:   <stored>
+    Current hash:  <current>
+
+    Steps already marked complete were generated from a different manifest.
+    Options:
+      • Type "reset" to clear the state file and restart from Step 4.
+      • Type "continue" to proceed — completed steps will NOT be re-run even
+        though the manifest changed. Use this only if the manifest change is
+        cosmetic and does not affect the layers already generated.
+```
+
+Stop and wait. Do not proceed until the engineer responds.
+
+If "reset": delete `pipeline-state.json` and re-run Step 2.5 as if NOT_FOUND.
+If "continue": update `manifestHash` in the state file and proceed normally.
+
+**(ii) Stall detection:**
+
+For each step where `status === "in-progress"`, check the `startedAt` timestamp.
+If `startedAt` is more than 10 minutes ago relative to now:
+
+> **Before running:** Substitute the actual values of `$COMPONENT`, `$SCOPE`, and `$MANIFEST_HASH` into the command string — these are not shell environment variables that persist across tool calls.
+
+```bash
+node -e "
+const fs = require('fs');
+const path = 'src/routes/_index/components/$COMPONENT/pipeline-state.json';
+const state = JSON.parse(fs.readFileSync(path, 'utf8'));
+const now = Date.now();
+const STALL_MS = 10 * 60 * 1000;
+Object.entries(state.steps).forEach(([stepId, step]) => {
+  if (step.status === 'in-progress') {
+    const age = now - new Date(step.startedAt).getTime();
+    if (age > STALL_MS) {
+      console.log('STALLED:' + stepId);
+      state.steps[stepId] = { status: 'failed', error: 'Stalled — in-progress for >' + Math.round(age/60000) + ' min. Re-run to retry.' };
+    }
+  }
+});
+state.updatedAt = new Date().toISOString();
+fs.writeFileSync(path, JSON.stringify(state, null, 2));
+"
+```
+
+If any steps were stalled and marked failed, surface them:
+
+```
+⚠️  Stalled step detected and marked failed:
+    Step <N>: was in-progress for >10 minutes — treated as failed.
+    The pipeline will halt at Step <N>. Fix the issue, then
+    re-run /evo-component $COMPONENT to retry from that step.
+```
+
+**(iii) Print resume state:**
+
+After stall detection, print a summary of which steps are complete, which
+will be skipped (wrong scope), and which will now run:
+
+```
+▶  Resuming <COMPONENT> [scope: <scope>]
+   ✅ Step 4  — complete (from prior run)
+   ✅ Step 5  — complete (from prior run)
+   ⏭  Step 6  — skipped (scope: <scope>)
+   ▶  Step 7  — will run now (first pending step)
+   ...
+```
+
+→ After printing the resume summary, proceed to Step 3 to resolve scope and begin execution from the first pending step.
+
+### Step marking helpers
+
+Use these patterns at the start and end of every step execution:
+
+**Mark step in-progress (before invoking sub-skill):**
+
+> **Before running:** Substitute the actual values of `$COMPONENT`, `$SCOPE`, and `$MANIFEST_HASH` into the command string — these are not shell environment variables that persist across tool calls.
+
+```bash
+node -e "
+const fs = require('fs');
+const p = 'src/routes/_index/components/$COMPONENT/pipeline-state.json';
+const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+s.steps['<STEP_ID>'] = { status: 'in-progress', startedAt: new Date().toISOString() };
+s.updatedAt = new Date().toISOString();
+fs.writeFileSync(p, JSON.stringify(s, null, 2));
+"
+```
+
+Replace `<STEP_ID>` with the actual step key string (e.g. `'7'`, `'micro-qa-1'`) before running.
+
+**Read step status after sub-skill returns (to confirm completion record was written):**
+
+> **Before running:** Substitute the actual values of `$COMPONENT`, `$SCOPE`, and `$MANIFEST_HASH` into the command string — these are not shell environment variables that persist across tool calls.
+
+```bash
+node -e "
+const fs = require('fs');
+const p = 'src/routes/_index/components/$COMPONENT/pipeline-state.json';
+const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+const cur = s.steps['<STEP_ID>'];
+console.log(JSON.stringify(cur));
+if (cur.status === 'complete') {
+  const ORDER = ['4','5','6','6.5','7','micro-qa-1','8','9','10','11','12','micro-qa-2','13','14','15'];
+  const next = ORDER.find(k => s.steps[k] && s.steps[k].status === 'pending');
+  if (next) process.stdout.write('\n⏭  ADVANCE IMMEDIATELY — next pending step: ' + next + '\n');
+  else process.stdout.write('\n✅ All steps complete — proceed to State F summary.\n');
+}
+"
+```
+
+Replace `<STEP_ID>` with the actual step key string (e.g. `'7'`, `'micro-qa-1'`) before running.
+
+If the returned status is NOT `complete`, the sub-skill did not finish cleanly.
+Treat this as a step failure — do NOT advance.
+
+**Mark step complete (for fast-forward when expected outputs already exist on disk):**
+
+> **Before running:** Substitute the actual component name for `$COMPONENT` and the actual step key for `<STEP_ID>`.
+
+```bash
+node -e "
+const fs = require('fs');
+const p = 'src/routes/_index/components/$COMPONENT/pipeline-state.json';
+const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+s.steps['<STEP_ID>'] = { status: 'complete', completedAt: new Date().toISOString(), note: 'fast-forwarded — outputs already existed on disk' };
+s.updatedAt = new Date().toISOString();
+fs.writeFileSync(p, JSON.stringify(s, null, 2));
+"
+```
+
+Replace `<STEP_ID>` with the actual step key string (e.g. `'4'`, `'6.5'`) before running.
+
+---
+
+## ⛔ Execution rule — deterministic transitions, no pausing between steps
+
+> **⛔ DO NOT PAUSE BETWEEN STEPS. ⛔**
+> When a sub-skill returns, your ONLY action is to read `pipeline-state.json`
+> and immediately invoke the next step. Do not summarise, do not ask the
+> engineer, do not wait. The sub-skill output is irrelevant — the state file
+> is the only signal that matters.
+
+You are an automated orchestrator. Transitions between steps are determined by
+reading `pipeline-state.json` — NOT by evaluating prior output prose. After each
+sub-skill returns, you MUST:
+
+1. Read the state file to confirm the step's status is `complete`.
+2. If `complete`: immediately advance to the next step in the transition table.
+3. If `failed` or still `in-progress`: halt and surface the failure (see Failure halting below).
+4. Never ask the user whether to continue between steps.
+
+The ONLY valid reasons to stop and wait for input are:
+
+1. Gate 2 — manifest review (engineer must type "approved")
+2. A `failed` step in the state file that cannot be fixed inline
+3. Manifest hash mismatch (engineer must type "reset" or "continue")
+
+**If you find yourself writing a summary or asking "shall I continue?" between
+steps, you have violated this rule. Stop writing, read the state file, invoke
+the next step.**
+
+### Transition table
+
+Read this table as: "after step N is complete, run step M next."
+Steps NOT in the scope column for the current scope are marked `skipped` in the state file
+and bypassed — the orchestrator does not invoke them.
+
+| Step       | Sub-skill                  | full | static | interactive | style |
+| ---------- | -------------------------- | :--: | :----: | :---------: | :---: |
+| 4          | evo-static-component       |  ✅  |   ✅   |     ⏭      |  ✅   |
+| 5          | evo-static-storybook       |  ✅  |   ✅   |     ⏭      |  ⏭   |
+| 6          | evo-docs-hookup (css-only) |  ✅  |   ✅   |     ⏭      |  ✅   |
+| 6.5        | scaffold generation        |  ✅  |   ⏭   |     ✅      |  ⏭   |
+| 7          | evo-a11y Pass 1            |  ✅  |   ✅   |     ⏭      |  ⏭   |
+| micro-qa-1 | Micro-QA checkpoint        |  ✅  |   ✅   |     ⏭      |  ⏭   |
+| 8          | evo-marko-component        |  ✅  |   ⏭   |     ✅      |  ⏭   |
+| 9          | evo-marko-storybook        |  ✅  |   ⏭   |     ✅      |  ⏭   |
+| 10         | evo-react-component        |  ✅  |   ⏭   |     ✅      |  ⏭   |
+| 11         | evo-react-storybook        |  ✅  |   ⏭   |     ✅      |  ⏭   |
+| 12         | evo-a11y Pass 2            |  ✅  |   ⏭   |     ✅      |  ⏭   |
+| micro-qa-2 | Micro-QA checkpoint        |  ✅  |   ⏭   |     ✅      |  ⏭   |
+| 13         | evo-docs-hookup (full)     |  ✅  |   ✅   |     ✅      |  ⏭   |
+| 14         | npm run build              |  ✅  |   ✅   |     ✅      |  ✅   |
+| 15         | evo-qa (Agent spawn)       |  ✅  |   ✅   |     ✅      |  ✅   |
+
+### Per-step artifact definitions
+
+Before running any step, check if its expected outputs already exist on disk.
+If they do AND the step is still `pending` in the state file, mark it `complete`
+(fast-forward) and advance — do not invoke the sub-skill again.
+
+| Step | requiredInputs (must exist before running)                  | expectedOutputs (existence confirms complete)                                               |
+| ---- | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
+| 4    | `manifest.json`                                             | `packages/skin/src/sass/<block>/<block>.scss`                                               |
+| 5    | `packages/skin/src/sass/<block>/<block>.scss`               | `packages/skin/src/sass/<block>/stories/<block>.stories.js`                                 |
+| 6    | `manifest.json`                                             | `src/routes/_index/components/<block>/css+page.marko`                                       |
+| 6.5  | `manifest.json`                                             | `packages/evo-marko/src/tags/<name>/index.marko`, `packages/evo-react/src/<name>/index.tsx` |
+| 7    | `<block>.scss`, `<block>.stories.js`                        | `src/routes/_index/components/<block>/accessibility+page.marko`                             |
+| 8    | `packages/evo-marko/src/tags/<name>/index.marko` (scaffold) | `packages/evo-marko/src/tags/<name>/index.marko` (complete)                                 |
+| 9    | `packages/evo-marko/src/tags/<name>/index.marko`            | `packages/evo-marko/src/tags/<name>/<name>.stories.ts`                                      |
+| 10   | `packages/evo-react/src/<name>/index.tsx` (scaffold)        | `packages/evo-react/src/<name>/index.tsx` (complete)                                        |
+| 11   | `packages/evo-react/src/<name>/index.tsx`                   | `packages/evo-react/src/<name>/<basename>.stories.tsx`                                      |
+| 12   | `index.marko` (complete), `index.tsx` (complete)            | `src/routes/_index/components/<block>/accessibility+meta.json`                              |
+| 13   | `manifest.json`, `accessibility+page.marko`                 | `src/routes/_index/components/<block>/+page.marko`                                          |
+| 14   | (prior steps complete)                                      | Build exit code 0                                                                           |
+| 15   | All expected outputs for scope                              | `pipeline-state.json` step 15 status = complete                                             |
+
+### Pre-step preamble (run before EVERY step)
+
+Before marking any step `in-progress` and invoking its sub-skill:
+
+**1. Check if already complete (idempotent skip):**
+
+> **Before running:** Substitute the actual component name for `$COMPONENT` and the actual step key for `<STEP_ID>` — these are not shell variables.
+
+```bash
+node -e "
+const fs = require('fs');
+const s = JSON.parse(fs.readFileSync('src/routes/_index/components/$COMPONENT/pipeline-state.json', 'utf8'));
+console.log(s.steps['<STEP_ID>'].status);
+"
+```
+
+If `complete` or `skipped`: print `⏭ Step <STEP_ID> already complete — skipping.` and advance.
+
+**2. Validate required inputs exist:**
+
+For each path in the step's `requiredInputs` list (from the table above):
+
+```bash
+test -f "<requiredInput>" && echo "EXISTS" || echo "MISSING: <requiredInput>"
+```
+
+If any required input is MISSING:
+
+```
+🔴 Pipeline halted — Step <N> cannot start.
+   Missing required input: <path>
+   This input should have been produced by Step <prior-step>.
+   Check Step <prior-step>'s completion record in pipeline-state.json for errors.
+```
+
+Do not invoke the sub-skill. Mark this step `failed`. Stop.
+
+**3. Mark step in-progress:**
+
+> **Before running:** Substitute the actual component name for `$COMPONENT` and the actual step key for `<STEP_ID>`.
+
+```bash
+node -e "
+const fs = require('fs');
+const p = 'src/routes/_index/components/$COMPONENT/pipeline-state.json';
+const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+s.steps['<STEP_ID>'] = { status: 'in-progress', startedAt: new Date().toISOString() };
+s.updatedAt = new Date().toISOString();
+fs.writeFileSync(p, JSON.stringify(s, null, 2));
+"
+```
+
+Then invoke the sub-skill.
+
+### Post-step verification (run after EVERY sub-skill returns)
+
+After the sub-skill returns, run these checks before advancing:
+
+**1. Read completion record:**
+
+> **Before running:** Substitute the actual component name for `$COMPONENT` and the actual step key for `<STEP_ID>`.
+
+```bash
+node -e "
+const fs = require('fs');
+const s = JSON.parse(fs.readFileSync('src/routes/_index/components/$COMPONENT/pipeline-state.json', 'utf8'));
+console.log(JSON.stringify(s.steps['<STEP_ID>'], null, 2));
+"
+```
+
+If status is NOT `complete`: the sub-skill did not finish cleanly. Halt (see Failure halting).
+
+**2. Content validation (hallucination checks):**
+
+Run the following checks based on the step just completed:
+
+_After Step 4 (SCSS generated):_
+
+> Substitute the actual BEM block name for `$BLOCK`.
+
+```bash
+# BEM block must exist
+grep -c "\.$BLOCK {" packages/skin/src/sass/$BLOCK/$BLOCK.scss
+# No deprecated BEM nesting
+grep -c "&--" packages/skin/src/sass/$BLOCK/$BLOCK.scss
+```
+
+The first grep must return ≥ 1. The second must return 0 (nesting forbidden).
+
+_After Step 8 (Marko generated):_
+
+> Substitute the actual BEM block name for `$BLOCK` and the actual tag name (e.g. `evo-accordion`) for `$NAME`.
+
+```bash
+# No Marko 5 scriptlet patterns
+grep -c "^\$ \(let\|const\|var\)" packages/evo-marko/src/tags/$NAME/index.marko
+# BEM block class must be applied
+grep -c "\"$BLOCK\"" packages/evo-marko/src/tags/$NAME/index.marko
+```
+
+First grep must return 0 (no deprecated patterns); second must return ≥ 1 (BEM class present).
+
+_After Step 10 (React generated):_
+
+> Substitute the actual bare component name (e.g. `accordion`) for `$NAME`.
+
+```bash
+# Component must export a named function or const
+grep -c "^export \(function\|const\)" packages/evo-react/src/$NAME/index.tsx
+# No forwardRef (evo-react uses React 19 native ref)
+grep -c "forwardRef" packages/evo-react/src/$NAME/index.tsx
+```
+
+First must be ≥ 1; second must be 0.
+
+If any content check fails: mark the step `failed` with the specific check result as the error.
+Halt. Surface to the engineer.
+
+**3. Scope boundary check:**
+
+Each step has an `allowedWriteZones` list. After the sub-skill's `outputs` are recorded in
+the completion record, verify every listed output path starts with one of these prefixes:
+
+| Step | allowedWriteZones                                                       |
+| ---- | ----------------------------------------------------------------------- |
+| 4    | `packages/skin/src/sass/<block>/`, `packages/skin/src/sass/bundles/`    |
+| 5    | `packages/skin/src/sass/<block>/stories/`                               |
+| 6    | `src/routes/_index/components/<block>/`                                 |
+| 6.5  | `packages/evo-marko/src/tags/<name>/`, `packages/evo-react/src/<name>/` |
+| 7    | `src/routes/_index/components/<block>/`                                 |
+| 8    | `packages/evo-marko/src/tags/<name>/`                                   |
+| 9    | `packages/evo-marko/src/tags/<name>/`                                   |
+| 10   | `packages/evo-react/src/<name>/`                                        |
+| 11   | `packages/evo-react/src/<name>/`                                        |
+| 12   | `src/routes/_index/components/<block>/`                                 |
+| 13   | `src/routes/_index/components/<block>/`, `src/data/`                    |
+
+> **Steps 14 and 15 are exempt from scope boundary checking.** Step 14 (`npm run build`) writes
+> compiled artefacts to `dist/` directories across multiple packages — this is expected and correct.
+> Step 15 (`evo-qa`) writes only to `pipeline-state.json`. Neither produces component output files
+> that should be constrained to a write zone. Skip the boundary check for these two steps.
+
+If any output is outside all allowed zones:
+
+```
+🔴 Scope boundary violation — Step <N> wrote a file outside its allowed zone:
+   File:          <path>
+   Allowed zones: <list>
+   This file was not expected. Review it manually before proceeding.
+   Type "continue" to accept it or "reset-step" to mark Step <N> failed and retry.
+```
+
+Wait for engineer input.
+
+### Failure halting
+
+When any step ends with status `failed`:
+
+```
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+🔴 Pipeline halted — Step <N> (<sub-skill>) failed
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+Error: <error from completion record>
+
+The pipeline state is saved. To retry:
+1. Fix the issue described above
+2. Re-run /evo-component $COMPONENT --scope $SCOPE
+   The pipeline will resume from Step <N>.
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+```
+
+Do not advance to the next step. Do not attempt inline fixes. Stop.
+
+---
+
+## Step 3 — Determine scope and print plan
+
+If `--scope` was not provided, ask:
+
+> "What changed in this revision?
+>
+> - `full` — new component or significant cross-layer changes (default)
+> - `static` — HTML structure and/or SCSS changed; framework layers need updating
+> - `interactive` — only Marko/React behavior or props changed; static layer untouched
+> - `style` — SCSS-only change; no structural or behavioral changes"
+
+Then print the generation plan:
+
+```
+Generating $COMPONENT  [scope: <scope>]
+
+Steps that will run:
+  4   /evo-static-component     [full, static, style(SCSS only)]
+  5   /evo-static-storybook     [full, static]
+  6   /evo-docs-hookup css-only [full, static, style]
+  7   /evo-a11y Pass 1          [full, static] — writes static a11y docs
+  8   /evo-marko-component      [full, interactive]
+  9   /evo-marko-storybook      [full, interactive]
+  10  /evo-react-component      [full, interactive]
+  11  /evo-react-storybook      [full, interactive]
+  12  /evo-a11y Pass 2          [full, interactive] — fills interactive a11y docs
+  13  /evo-docs-hookup full     [full, static, interactive]
+  14  npm run build             [all scopes]
+  15  /evo-qa (forked)          [all scopes]
+  16  Final summary
+```
+
+Steps marked ⏭ for this scope are skipped — print them clearly.
+
+---
+
+## Step 4 — Static component
+
+**Scopes: full, static, style**
+
+> **Before invoking:** Run the pre-step preamble above (idempotent check → pre-flight validation → mark in-progress).
+> **After returning:** Run the post-step verification above (read completion record → content validation → scope boundary check).
+
+Invoke: `/evo-static-component` (inline)
+
+- **full / static:** Generate both HTML catalogue and SCSS (SCSS conditional on tokens/figma)
+- **style:** Generate SCSS only — HTML structure is unchanged. Tell the skill: "Style scope — regenerate SCSS only. Do not regenerate HTML."
+
+**Expected output:**
+
+- HTML catalogue in context (full/static only)
+- `packages/skin/src/sass/<block>/<block>.scss` (if tokens/figma available)
+- `skin-headless.scss` updated (if SCSS generated)
+
+**style scope:** if no tokens/figma → nothing to do here, print ⏭ and continue to Step 6.
+
+→ **Next:** After this skill returns, print "Step 4 complete." then immediately invoke Step 5.
+
+---
+
+## Step 5 — Static storybook
+
+**Scopes: full, static** | ⏭ skip for: interactive, style
+
+> **Before invoking:** Run the pre-step preamble above (idempotent check → pre-flight validation → mark in-progress).
+> **After returning:** Run the post-step verification above (read completion record → content validation → scope boundary check).
+
+Invoke: `/evo-static-storybook` (inline)
+
+Reads the HTML catalogue from Step 4 context. Writes CSF2 stories with RTL
+and textSpacing exports.
+
+→ **Next:** After this skill returns, print "Step 5 complete." then immediately invoke Step 6.
+
+---
+
+## Step 6 — CSS docs (css-only)
+
+**Scopes: full, static, style** | ⏭ skip for: interactive
+
+> **Before invoking:** Run the pre-step preamble above (idempotent check → pre-flight validation → mark in-progress).
+> **After returning:** Run the post-step verification above (read completion record → content validation → scope boundary check).
+
+Invoke: `/evo-docs-hookup` (inline) with scope `"css-only"`
+
+Tell the skill: "css-only scope — write only css+page.marko and css+meta.json.
+Do not write +page.marko, +meta.json, or update component-metadata.json."
+
+- **full / static:** HTML catalogue from Step 4 is in context — the skill uses it directly
+- **style:** Step 4 ran SCSS-only, so no HTML catalogue is in context. Tell the skill:
+  "Style scope — no HTML catalogue in context. For any new variants, read
+  packages/skin/src/sass/<block>/stories/<block>.stories.js to get the HTML
+  for each missing story export, then add the corresponding variant sections
+  to css+page.marko. Do not rewrite existing sections."
+
+**Expected output:**
+
+- `src/routes/_index/components/<block>/css+page.marko`
+- `src/routes/_index/components/<block>/css+meta.json`
+
+→ **Next:** After this skill returns, print "Step 6 complete." then immediately invoke Step 7 (or Step 6.5 if framework layers are next).
+
+---
+
+## Step 6.5 — Generate component scaffold (deterministic files)
+
+> **Before invoking:** Run the pre-step preamble above (idempotent check → pre-flight validation → mark in-progress).
+> **After returning:** Run the post-step verification above (read completion record → content validation → scope boundary check).
+
+Run before any framework generation. This produces byte-identical structural files
+so the AI skills only need to complete the non-deterministic parts (template body,
+component body, behavioral logic):
+
+```bash
+npx tsx scripts/codegen/generate-component-scaffold.ts $COMPONENT
+```
+
+Files written:
+
+- `packages/evo-marko/src/tags/<name>/style.ts` — complete
+- `packages/evo-marko/src/tags/<name>/index.marko` — Input interface scaffold + TODO template body
+- `packages/evo-marko/src/tags/<name>/test/test.server.ts` — complete structure with stubs
+- `packages/evo-marko/src/tags/<name>/test/test.browser.ts` — stub (if `keyboardModel` present)
+- `packages/evo-react/src/<name>/index.tsx` — Props interface scaffold + TODO component body
+
+If the script errors, surface it and stop — do not proceed to framework generation.
+
+After this step, tell each framework sub-skill: "Scaffold files are already written at
+these paths. Read the existing file and complete only the TODO sections — do not
+regenerate the Input interface, Props type, style.ts, or test structure."
+
+→ **Next:** After this script completes, immediately invoke Step 7.
+
+---
+
+## Step 7 — A11y Pass 1 — static layer + writes static a11y docs
+
+**Scopes: full, static** | ⏭ skip for: interactive, style
+
+> **Before invoking:** Run the pre-step preamble above (idempotent check → pre-flight validation → mark in-progress).
+> **After returning:** Run the post-step verification above (read completion record → content validation → scope boundary check).
+
+Invoke: `/evo-a11y` (inline) with scope declaration:
+`"Pass 1 — static layer only. Steps 4–6 have run in this pipeline run.
+Validate the static HTML and static storybook. Write the static sections
+of accessibility+page.marko. Do NOT evaluate index.marko or index.tsx."`
+
+**Pass 1 validates:**
+
+- ARIA roles and label strategy in the static HTML
+- RTL and textSpacing stories in the static storybook
+- 🔴 blocking issues stop the pipeline here
+
+**Pass 1 writes static sections of `accessibility+page.marko`:**
+
+- Best Practices (from manifest a11y + callerObligations)
+- ARIA Reference table (from manifest.a11y.ariaAttributes[])
+- Skeleton placeholders for Keyboard, Screen Reader, Pointer (to be filled by Pass 2)
+
+If 🔴 blocking issues: stop. Engineer resolves before proceeding.
+
+→ **Next:** If no 🔴 issues, print "Step 7 complete." then immediately invoke Step 8 (or Step 13 if scope is static).
+
+---
+
+## Micro-QA Checkpoint 1 — Static layer verification (after Step 7)
+
+**Scopes: full, static** | ⏭ skip for: interactive, style
+
+> **Before running:** Run the pre-step preamble above (idempotent check → pre-flight validation → mark in-progress). Use step ID `micro-qa-1`. If already complete, skip to Step 8.
+
+Spawn a fresh Agent to verify the static layer in genuine isolation. This agent has no
+memory of the generation session — it reads only from disk.
+
+> **Before spawning:** Substitute the actual values for `$COMPONENT`, `$BLOCK`, and `$SCOPE`.
+
+```
+Agent(
+  description: "Micro-QA checkpoint 1 — static layer for $COMPONENT",
+  prompt: """
+You are an isolated QA agent verifying the static layer of an evo-web component pipeline.
+You have NO prior context from the generation session. Read ONLY from disk.
+
+Component: $COMPONENT
+BEM block: $BLOCK
+Manifest: src/routes/_index/components/$COMPONENT/manifest.json
+
+Read the manifest first. Then run each check below in order.
+
+=== CHECKS ===
+
+CHECK 1 — SCSS file exists and is non-empty
+Command: test -s packages/skin/src/sass/$BLOCK/$BLOCK.scss && echo PASS || echo FAIL
+
+CHECK 2 — BEM block rule present in SCSS
+Command: grep -c ".$BLOCK {" packages/skin/src/sass/$BLOCK/$BLOCK.scss
+Pass: count >= 1. Fail: count is 0.
+
+CHECK 3 — No deprecated BEM nesting in SCSS
+Command: grep -c "&--" packages/skin/src/sass/$BLOCK/$BLOCK.scss
+Pass: count is 0. Fail: any nesting found.
+
+CHECK 4 — Every modifier from manifest.bem.modifiers[] has a rule in SCSS
+For each modifier name M in manifest.bem.modifiers[]:
+  grep -c ".$BLOCK--M " packages/skin/src/sass/$BLOCK/$BLOCK.scss
+  Pass: count >= 1. Fail: count is 0 (rule missing).
+
+CHECK 5 — Stories file exists
+Command: test -f packages/skin/src/sass/$BLOCK/stories/$BLOCK.stories.js && echo PASS || echo FAIL
+
+CHECK 6 — RTL export present in stories
+Command: grep -c "export.*RTL" packages/skin/src/sass/$BLOCK/stories/$BLOCK.stories.js
+Pass: count >= 1.
+
+CHECK 7 — textSpacing export present in stories
+Command: grep -c "export.*textSpacing" packages/skin/src/sass/$BLOCK/stories/$BLOCK.stories.js
+Pass: count >= 1.
+
+CHECK 8 — accessibility+page.marko exists
+Command: test -f src/routes/_index/components/$COMPONENT/accessibility+page.marko && echo PASS || echo FAIL
+
+CHECK 9 — No Marko 5 scriptlet patterns in SCSS directory
+Command: grep -rn "^\$ \(let\|const\|var\)" packages/skin/src/sass/$BLOCK/
+Pass: no output. Fail: any match.
+
+=== WRITE RESULT ===
+
+After all checks, write your result to the pipeline state file.
+Substitute the actual value of $COMPONENT before running:
+
+node -e "
+const fs = require('fs');
+const p = 'src/routes/_index/components/$COMPONENT/pipeline-state.json';
+const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+const issues = [];
+// populate issues[] with any FAIL results from your checks above (as strings)
+s.steps['micro-qa-1'] = {
+  status: issues.length === 0 ? 'complete' : 'failed',
+  completedAt: new Date().toISOString(),
+  checks: 9,
+  issues
+};
+s.updatedAt = new Date().toISOString();
+fs.writeFileSync(p, JSON.stringify(s, null, 2));
+"
+
+Return a JSON object: { passed: boolean, issues: string[] }
+If passed is false, list each failing check with the specific file and what was expected.
+  """
+)
+```
+
+After the Agent returns, read the micro-qa-1 result from the state file:
+
+> **Before running:** Substitute the actual value of `$COMPONENT`.
+
+```bash
+node -e "
+const fs = require('fs');
+const s = JSON.parse(fs.readFileSync('src/routes/_index/components/$COMPONENT/pipeline-state.json', 'utf8'));
+console.log(JSON.stringify(s.steps['micro-qa-1'], null, 2));
+"
+```
+
+**If micro-qa-1 status is `failed`:**
+
+```
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+🔴 Micro-QA Checkpoint 1 FAILED — static layer issues detected
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+The following issues were found by an isolated verification agent:
+<list issues from micro-qa-1.issues[]>
+
+These issues were caught BEFORE the Marko and React layers were generated,
+saving you from building framework layers on a broken static foundation.
+
+Fix the issues above by re-running /evo-static-component or editing files
+manually, then re-run /evo-component $COMPONENT to retry from this checkpoint.
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+```
+
+Do NOT advance to Step 8. Do not attempt inline fixes. Stop.
+
+**If micro-qa-1 status is `complete`:**
+
+```
+✅ Micro-QA Checkpoint 1 — static layer verified by isolated agent (9/9 checks passed)
+```
+
+> **After returning:** Run the post-step verification above (read completion record → content validation → scope boundary check). Use step ID `micro-qa-1`.
+
+→ **Next:** After micro-qa-1 passes, immediately invoke Step 8.
+
+---
+
+## Step 8 — Marko component
+
+**Scopes: full, interactive** | ⏭ skip for: static, style
+
+> **Before invoking:** Run the pre-step preamble above (idempotent check → pre-flight validation → mark in-progress).
+> **After returning:** Run the post-step verification above (read completion record → content validation → scope boundary check).
+
+Invoke: `/evo-marko-component` (inline)
+
+Reads static HTML from context (Step 4, full scope) or from existing storybook
+file (interactive scope — no Step 4 was run). Generates Marko 6 component.
+
+**Expected output** (`packages/evo-marko/src/tags/<name>/`):
+
+- `index.marko`, `style.ts`, `test/test.server.ts`, `test/test.browser.ts` (if interactive)
+
+→ **Next:** After this skill returns, print "Step 8 complete." then immediately invoke Step 9.
+
+---
+
+## Step 9 — Marko storybook
+
+**Scopes: full, interactive** | ⏭ skip for: static, style
+
+> **Before invoking:** Run the pre-step preamble above (idempotent check → pre-flight validation → mark in-progress).
+> **After returning:** Run the post-step verification above (read completion record → content validation → scope boundary check).
+
+Invoke: `/evo-marko-storybook` (inline)
+
+**Expected output:**
+
+- `packages/evo-marko/src/tags/<name>/<name>.stories.ts` + `examples/`
+
+→ **Next:** After this skill returns, print "Step 9 complete." then immediately invoke Step 10.
+
+---
+
+## Step 10 — React component
+
+**Scopes: full, interactive** | ⏭ skip for: static, style
+
+> **Before invoking:** Run the pre-step preamble above (idempotent check → pre-flight validation → mark in-progress).
+> **After returning:** Run the post-step verification above (read completion record → content validation → scope boundary check).
+
+Invoke: `/evo-react-component` (inline)
+
+**Expected output** (`packages/evo-react/src/<name>/`):
+
+- `index.tsx`, `__tests__/index.spec.tsx`
+
+→ **Next:** After this skill returns, print "Step 10 complete." then immediately invoke Step 11.
+
+---
+
+## Step 11 — React storybook
+
+**Scopes: full, interactive** | ⏭ skip for: static, style
+
+> **Before invoking:** Run the pre-step preamble above (idempotent check → pre-flight validation → mark in-progress).
+> **After returning:** Run the post-step verification above (read completion record → content validation → scope boundary check).
+
+Invoke: `/evo-react-storybook` (inline)
+
+**Expected output:**
+
+- `packages/evo-react/src/<name>/<basename>.stories.tsx`
+
+→ **Next:** After this skill returns, print "Step 11 complete." then immediately invoke Step 12.
+
+---
+
+## Step 12 — A11y Pass 2 — full validation + fills interactive a11y docs
+
+**Scopes: full, interactive** | ⏭ skip for: static, style
+
+> **Before invoking:** Run the pre-step preamble above (idempotent check → pre-flight validation → mark in-progress).
+> **After returning:** Run the post-step verification above (read completion record → content validation → scope boundary check).
+
+Invoke: `/evo-a11y` (inline) with scope declaration:
+`"Pass 2 — full validation. Steps 4–11 have run in this pipeline run
+(or Steps 8–11 for interactive scope). Validate all layers. Fill in the
+interactive sections of accessibility+page.marko."`
+
+**Pass 2 validates:**
+
+- Static HTML (re-check)
+- `index.marko` — ARIA wiring, keyboard handlers, Marko 6 syntax
+- `index.tsx` — ARIA wiring, keyboard handlers
+- Marko storybook — interactive story if keyboardModel present
+- React storybook — controlled story if keyboardModel present
+
+**Pass 2 fills in interactive sections of `accessibility+page.marko`:**
+
+- Keyboard section (from manifest.keyboardModel + manifest.keyboardInteractions[])
+- Screen Reader section (from manifest.a11y.screenReaderAnnouncement — interactive states)
+- Pointer section (active/interactive behavior)
+- Also writes `accessibility+meta.json` (full picture now available)
+
+**For `--scope interactive`:** The accessibility+page.marko may already have
+static sections from a previous run. Fills in/updates only the interactive
+sections without overwriting the static sections.
+
+If 🔴 blocking issues: fix inline before build.
+
+→ **Next:** If no 🔴 issues, print "Step 12 complete." then immediately invoke Step 13.
+
+---
+
+## Micro-QA Checkpoint 2 — Framework layer verification (after Step 12)
+
+**Scopes: full, interactive** | ⏭ skip for: static, style
+
+> **Before running:** Run the pre-step preamble above (idempotent check → pre-flight validation → mark in-progress). Use step ID `micro-qa-2`. If already complete, skip to Step 13.
+
+Spawn a fresh Agent to verify the framework layer in genuine isolation. This agent has no
+memory of the generation session — it reads only from disk.
+
+> **Before spawning:** Substitute the actual values for `$COMPONENT`, `$BLOCK`, `$MARKO_NAME` (e.g. `evo-accordion`), `$REACT_NAME` (bare kebab-case, e.g. `accordion`), and `$SCOPE`.
+
+```
+Agent(
+  description: "Micro-QA checkpoint 2 — framework layer for $COMPONENT",
+  prompt: """
+You are an isolated QA agent verifying the framework layer of an evo-web component pipeline.
+You have NO prior context from the generation session. Read ONLY from disk.
+
+Component: $COMPONENT
+BEM block: $BLOCK
+Marko name: $MARKO_NAME   (e.g. evo-accordion)
+React name: $REACT_NAME   (e.g. accordion)
+Manifest: src/routes/_index/components/$COMPONENT/manifest.json
+
+Read the manifest fully before starting checks.
+
+=== CHECKS ===
+
+CHECK 1 — index.marko exists and is non-empty
+Command: test -s packages/evo-marko/src/tags/$MARKO_NAME/index.marko && echo PASS || echo FAIL
+
+CHECK 2 — No Marko 5 scriptlet patterns in index.marko
+Command: grep -cn "^\$ \(let\|const\|var\)" packages/evo-marko/src/tags/$MARKO_NAME/index.marko
+Pass: 0. Fail: any count > 0 (list each matching line).
+
+CHECK 3 — BEM block class applied in index.marko
+Command: grep -c "\"$BLOCK\"" packages/evo-marko/src/tags/$MARKO_NAME/index.marko
+Pass: >= 1.
+
+CHECK 4 — Every prop in manifest.props[] appears in the Input interface
+For each prop name P in manifest.props[]:
+  grep -c "P[?]?:" packages/evo-marko/src/tags/$MARKO_NAME/index.marko
+  Pass: >= 1. Fail: 0 (prop missing from interface).
+
+CHECK 5 — style.ts contains correct skin import
+Command: cat packages/evo-marko/src/tags/$MARKO_NAME/style.ts
+Expected content: import "@ebay/skin/$BLOCK";
+Pass: exact match. Fail: wrong or missing.
+
+CHECK 6 — index.tsx exists and is non-empty
+Command: test -s packages/evo-react/src/$REACT_NAME/index.tsx && echo PASS || echo FAIL
+
+CHECK 7 — No forwardRef in index.tsx (evo-react uses React 19 native ref)
+Command: grep -c "forwardRef" packages/evo-react/src/$REACT_NAME/index.tsx
+Pass: 0. Fail: any count > 0.
+
+CHECK 8 — Component export present in index.tsx
+Command: grep -c "^export \(function\|const\)" packages/evo-react/src/$REACT_NAME/index.tsx
+Pass: >= 1.
+
+CHECK 9 — Every prop in manifest.props[] appears in React Props type
+For each prop name P in manifest.props[]:
+  grep -c "P[?]?:" packages/evo-react/src/$REACT_NAME/index.tsx
+  Pass: >= 1.
+
+CHECK 10 — Marko stories file exists
+Command: test -f packages/evo-marko/src/tags/$MARKO_NAME/$MARKO_NAME.stories.ts && echo PASS || echo FAIL
+
+CHECK 11 — React stories file exists
+Command: find packages/evo-react/src/$REACT_NAME -name "*.stories.tsx" | grep -c .
+Pass: >= 1.
+
+CHECK 12 — accessibility+meta.json exists
+Command: test -f src/routes/_index/components/$COMPONENT/accessibility+meta.json && echo PASS || echo FAIL
+
+=== WRITE RESULT ===
+
+After all checks, write your result to the pipeline state file.
+Substitute the actual value of $COMPONENT before running:
+
+node -e "
+const fs = require('fs');
+const p = 'src/routes/_index/components/$COMPONENT/pipeline-state.json';
+const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+const issues = [];
+// populate with any FAIL results as strings
+s.steps['micro-qa-2'] = {
+  status: issues.length === 0 ? 'complete' : 'failed',
+  completedAt: new Date().toISOString(),
+  checks: 12,
+  issues
+};
+s.updatedAt = new Date().toISOString();
+fs.writeFileSync(p, JSON.stringify(s, null, 2));
+"
+
+Return: { passed: boolean, issues: string[] }
+  """
+)
+```
+
+After the Agent returns, read micro-qa-2 from the state file:
+
+> **Before running:** Substitute the actual value of `$COMPONENT`.
+
+```bash
+node -e "
+const fs = require('fs');
+const s = JSON.parse(fs.readFileSync('src/routes/_index/components/$COMPONENT/pipeline-state.json', 'utf8'));
+console.log(JSON.stringify(s.steps['micro-qa-2'], null, 2));
+"
+```
+
+**If micro-qa-2 status is `failed`:**
+
+```
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+🔴 Micro-QA Checkpoint 2 FAILED — framework layer issues detected
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+The following issues were found by an isolated verification agent:
+<list issues from micro-qa-2.issues[]>
+
+These issues were caught before docs, build, and final QA run.
+Fix the issues, then re-run /evo-component $COMPONENT to retry from this checkpoint.
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+```
+
+Do NOT advance to Step 13. Do not attempt inline fixes. Stop.
+
+**If micro-qa-2 status is `complete`:**
+
+```
+✅ Micro-QA Checkpoint 2 — framework layer verified by isolated agent (12/12 checks passed)
+```
+
+> **After returning:** Run the post-step verification above (read completion record → content validation → scope boundary check). Use step ID `micro-qa-2`.
+
+→ **Next:** After micro-qa-2 passes, immediately invoke Step 13.
+
+---
+
+## Step 13 — Docs hookup (full)
+
+**Scopes: full, static, interactive** | ⏭ skip for: style
+
+> **Before invoking:** Run the pre-step preamble above (idempotent check → pre-flight validation → mark in-progress).
+> **After returning:** Run the post-step verification above (read completion record → content validation → scope boundary check).
+
+Invoke: `/evo-docs-hookup` (inline) with scope `"full"`
+
+Tell the skill: "full scope — write +page.marko, +meta.json, and update
+component-metadata.json. Do NOT rewrite css+page.marko (already done in Step 6)."
+
+**Expected output:**
+
+- `src/routes/_index/components/<block>/+page.marko`
+- `src/routes/_index/components/<block>/+meta.json`
+- `src/data/component-metadata.json` entry added/updated
+
+→ **Next:** After this skill returns, print "Step 13 complete." then immediately run Step 14 (npm run build).
+
+---
+
+## Step 14 — Build validation
+
+**Scopes: all**
+
+> **Before invoking:** Run the pre-step preamble above (idempotent check → pre-flight validation → mark in-progress).
+> **After returning:** Run the post-step verification above (read completion record → content validation → scope boundary check).
+
+Run: `npm run build`
+
+Fix failures inline. Do not advance to QA with a failing build.
+
+→ **Next:** After the build passes, immediately invoke Step 15.
+
+---
+
+## Step 15 — QA
+
+**Scopes: full, static, interactive, style** (always runs)
+
+> **Before running:** Run the pre-step preamble above (idempotent check → pre-flight validation → mark in-progress). Use step ID `15`. If already complete, skip.
+
+Spawn a fresh Agent with subagent_type `evo-qa` to run QA in genuine isolation.
+The evo-qa agent has no memory of the generation session — it reads only from disk.
+
+> **Before spawning:** Substitute the actual values for `$COMPONENT`, `$SCOPE`, and `$BLOCK`.
+> For `files`, read `steps[*].outputs` from `pipeline-state.json` and flatten into a list.
+> For `reference`, use the manifest's `migration.legacyName` field if present; otherwise omit.
+
+```
+node -e "
+const fs = require('fs');
+const comp = '$COMPONENT';
+const p = \`src/routes/_index/components/\${comp}/pipeline-state.json\`;
+const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+const files = Object.values(s.steps)
+  .filter(st => st && st.outputs)
+  .flatMap(st => st.outputs);
+console.log(JSON.stringify(files, null, 2));
+"
+```
+
+Then spawn the QA agent:
+
+```
+Agent(
+  subagent_type: "evo-qa",
+  description: "QA verification for $COMPONENT (scope: $SCOPE)",
+  prompt: """
+manifest: src/routes/_index/components/$COMPONENT/manifest.json
+files: [<paste the JSON array output from the node command above>]
+reference: <legacyName from manifest, or omit this line>
+scope: $SCOPE
+  """
+)
+```
+
+After the Agent returns, read its output. If it contains `Layer 1 result: ✅ PASSED`, write the completion record below with `status: "complete"`. If it contains `Layer 1 result: 🔴 FAILED`, write it with `status: "failed"` and surface the QA report to the engineer.
+
+**If QA passed:**
+
+> **Before running:** Substitute the actual value of `$COMPONENT`.
+
+```bash
+node -e "
+const fs = require('fs');
+const comp = '$COMPONENT';
+const p = \`src/routes/_index/components/\${comp}/pipeline-state.json\`;
+const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+s.steps['15'] = {
+  status: 'complete',
+  completedAt: new Date().toISOString(),
+  outputs: []
+};
+s.updatedAt = new Date().toISOString();
+fs.writeFileSync(p, JSON.stringify(s, null, 2));
+console.log('Step 15 completion record written.');
+"
+```
+
+**If QA failed:**
+
+```
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+🔴 QA FAILED — isolated verification agent found issues
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+<paste full QA report here>
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+```
+
+> **Before running:** Substitute the actual value of `$COMPONENT` and describe the failure.
+
+```bash
+node -e "
+const fs = require('fs');
+const comp = '$COMPONENT';
+const p = \`src/routes/_index/components/\${comp}/pipeline-state.json\`;
+const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+s.steps['15'] = {
+  status: 'failed',
+  error: '<summarize which Layer 1 checks failed>'
+};
+s.updatedAt = new Date().toISOString();
+fs.writeFileSync(p, JSON.stringify(s, null, 2));
+"
+```
+
+Do NOT mark the pipeline complete when QA fails. Surface the report and stop.
+
+> **After returning:** Run the post-step verification above (read completion record → content validation → scope boundary check). Use step ID `15`.
+
+→ **Next:** Pipeline complete. Print the final summary banner:
+
+```
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+✅ Pipeline complete: $COMPONENT ($SCOPE scope)
+All steps verified. QA passed.
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+```
+
+---
+
+## Step 16 — Final summary
+
+```
+## Component generated: $COMPONENT  [scope: <scope>]
+
+Static layer:
+  [✅ | ⏭] /evo-static-component — HTML + SCSS
+  [✅ | ⏭] /evo-static-storybook — CSF2 stories
+  [✅ | ⏭] css+page.marko written
+  [✅ | ⏭] /evo-a11y Pass 1 — static a11y docs written
+
+Marko layer:
+  [✅ | ⏭] index.marko + style.ts
+  [✅ | ⏭] Marko storybook
+
+React layer:
+  [✅ | ⏭] index.tsx
+  [✅ | ⏭] React storybook
+
+A11y Pass 2:  [✅ | ⏭] Interactive sections filled
+Docs (full):  [✅ | ⏭] Overview + component-metadata.json
+Build:        ✅ Passed
+QA L1:        ✅ Passed  (or: 🔴 N failure(s) — list each)
+QA L2:        ✅ N/A     (or: fidelity score + delta)
+
+─────────────────────────────────────────────────
+Next steps:
+[scope: style]  1. Review SCSS output. File PR. /evo-release-workflow
+[scope: static] 1. Review static layer + a11y docs.
+                2. Run /evo-component <name> --scope interactive if framework needs updating.
+                3. File PR. /evo-release-workflow
+[scope: full]   1. Review generated files and resolve any 🟡 warnings.
+                2. Fill storybook paths in component-metadata.json after first deploy.
+                3. File PR. /evo-release-workflow
+─────────────────────────────────────────────────
+```
+
+---
+
+## Scope reference
+
+| Scope         | When to use                                   | Steps run         |
+| ------------- | --------------------------------------------- | ----------------- |
+| `full`        | New component; cross-layer changes            | 4–16              |
+| `static`      | HTML structure and/or SCSS changed            | 4–7, 13–16        |
+| `interactive` | Only Marko/React behavior or props changed    | 6.5, 8–16         |
+| `style`       | SCSS only; no structural or behavioral change | 4(SCSS), 6, 14–16 |
+
+> **Note on Step 6.5 and interactive scope:** Step 6.5 (scaffold generation) runs for interactive scope
+> because it produces the `index.marko` and `index.tsx` scaffold files that Steps 8 and 10 complete.
+> The "8–16" shorthand in the table above is updated to "6.5, 8–16" to reflect this dependency.
+
+## Sub-skill scope declarations
+
+All sub-skills run inline. The orchestrator explicitly tells each skill what
+scope this invocation is running — never infer from disk state.
+
+| Sub-skill                    | Context    | Scope declaration pattern                                                             |
+| ---------------------------- | ---------- | ------------------------------------------------------------------------------------- |
+| `/evo-static-component`      | Inline     | "full/static scope: full HTML + SCSS" or "style scope: SCSS only"                     |
+| `/evo-static-storybook`      | Inline     | (no scope needed — always reads Step 4 HTML)                                          |
+| `/evo-docs-hookup` (Step 6)  | Inline     | "css-only scope"                                                                      |
+| `/evo-a11y` Pass 1           | Inline     | "Pass 1 — static layer only; steps 4–6 ran"                                           |
+| `/evo-marko-component`       | Inline     | (reads static HTML from context or existing storybook)                                |
+| `/evo-marko-storybook`       | Inline     | (no scope needed)                                                                     |
+| `/evo-react-component`       | Inline     | (reads static HTML from context or existing storybook)                                |
+| `/evo-react-storybook`       | Inline     | (no scope needed)                                                                     |
+| `/evo-a11y` Pass 2           | Inline     | "Pass 2 — full scope; steps 4–11 ran" or "Pass 2 — interactive scope; steps 8–11 ran" |
+| `/evo-docs-hookup` (Step 13) | Inline     | "full scope — Overview + metadata only, css+page.marko already written"               |
+| `/evo-qa`                    | **Forked** | Told: scope used, which files were generated this run                                 |
diff --git a/.claude/skills/evo-component/evals/evals.json b/.claude/skills/evo-component/evals/evals.json
new file mode 100644
index 0000000000..bf8295c8d3
--- /dev/null
+++ b/.claude/skills/evo-component/evals/evals.json
@@ -0,0 +1,80 @@
+{
+  "skill_name": "evo-component",
+  "evals": [
+    {
+      "id": 1,
+      "name": "missing-manifest",
+      "prompt": "Run /evo-component evo-nonexistent-widget in the evo-web repo at /Users/arkhachatryan/Repos/evo-web. There is no manifest.json for this component. Save the full text output (what Claude prints/decides) to response.md in the outputs directory.",
+      "expected_output": "A clear error message saying the manifest was not found and directing the user to run /evo-create-component-manifest first. No files should be written.",
+      "files": [],
+      "assertions": [
+        {
+          "name": "clear-error-for-missing-manifest",
+          "description": "Output contains an explicit error message stating that no manifest was found at the expected path."
+        },
+        {
+          "name": "redirects-to-manifest-skill",
+          "description": "Output directs user to run /evo-create-component-manifest before /evo-component."
+        },
+        {
+          "name": "no-files-written",
+          "description": "Output explicitly states no files were written, or no file-writing actions occurred."
+        },
+        {
+          "name": "mentions-correct-path",
+          "description": "Output references the specific path contracts/evo-nonexistent-widget/manifest.json."
+        }
+      ]
+    },
+    {
+      "id": 2,
+      "name": "blocking-gaps-gate",
+      "prompt": "Run /evo-component evo-avatar in the evo-web repo at /Users/arkhachatryan/Repos/evo-web. The manifest exists at contracts/avatar/manifest.json and has low-confidence blocking gaps (component.designSystemVersion, states[loading].cssSelector, states[imageError].cssSelector). Save the full text output to response.md in the outputs directory.",
+      "expected_output": "A GATE BLOCKED message listing the specific low-confidence fields that must be resolved, with no files written and no code generation begun.",
+      "files": ["contracts/avatar/manifest.json"],
+      "assertions": [
+        {
+          "name": "gate-blocked-message",
+          "description": "Output contains a 'GATE BLOCKED' header or equivalent clear gate stop signal."
+        },
+        {
+          "name": "lists-specific-gap-fields",
+          "description": "Output enumerates specific blocking field paths from the manifest gaps array (e.g. component.designSystemVersion, states[loading].cssSelector)."
+        },
+        {
+          "name": "no-code-generation-started",
+          "description": "Output contains no Marko, React, or SCSS code, and does not mention invoking evo-marko-migration or evo-react-migration."
+        },
+        {
+          "name": "instructs-how-to-fix",
+          "description": "Output tells the user how to resolve the blocking gaps (edit manifest.json) and re-run."
+        }
+      ]
+    },
+    {
+      "id": 3,
+      "name": "pr1-build-path",
+      "prompt": "Run /evo-component evo-test-clean in the evo-web repo at /Users/arkhachatryan/Repos/evo-web. The manifest exists at contracts/evo-test-clean/manifest.json, has no blocking gaps (only medium-confidence gaps), and figmaUrl is null. Save the full text output to response.md in the outputs directory. Stop after the skill announces the build path and begins calling sub-skills (it's OK if it can't actually invoke them since they don't exist yet).",
+      "expected_output": "The skill announces 'PR 1 build (no Figma yet)', correctly identifies the build path as Phase 1 + Phase 3 (no Phase 2), and then attempts to call the Marko sub-skill first.",
+      "files": ["contracts/evo-test-clean/manifest.json"],
+      "assertions": [
+        {
+          "name": "announces-pr1-not-full-build",
+          "description": "Output explicitly announces 'PR 1 build' (not 'Full build') since figmaUrl is null."
+        },
+        {
+          "name": "phase2-skipped-with-explanation",
+          "description": "Output mentions that Phase 2 (visual SCSS / evo-style-component) is skipped because figmaUrl is null, and explains how to trigger it later."
+        },
+        {
+          "name": "marko-invoked-before-react",
+          "description": "Output shows evo-marko-migration is invoked (or attempted) before evo-react-migration."
+        },
+        {
+          "name": "storybook-phase-included",
+          "description": "Output mentions Phase 3 storybook steps will run (even if deferred due to missing sub-skills)."
+        }
+      ]
+    }
+  ]
+}
diff --git a/.claude/skills/evo-create-component-manifest/SKILL.md b/.claude/skills/evo-create-component-manifest/SKILL.md
new file mode 100644
index 0000000000..8395ba4a3a
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/SKILL.md
@@ -0,0 +1,455 @@
+---
+name: evo-create-component-manifest
+description: >
+  Pipeline entry point for evo-web AI component generation. Reads an approved
+  component contract (`src/routes/_index/components/[component]/_contract.md`)
+  and produces two structured files: `manifest.json` (machine-readable spec for
+  downstream code generation) and `gap-report.json` (a full log of every
+  assumption made). Invoke this skill whenever the user runs
+  `/evo-create-component-manifest`, says "create manifest for [component]",
+  "generate manifest from contract", "run the manifest step", or "kick off the
+  pipeline for [component]". Do NOT wait for the user to spell out all of these
+  phrases — if they're asking to start the component pipeline or convert a
+  contract to a manifest, this is the skill to use.
+---
+
+# Create Component Manifest
+
+This skill is the **first and only human gate before code generation begins**.
+Its value is rigor: every ambiguity in the contract must surface here, in a
+form the engineer can read and resolve, before a single line of SCSS or React
+is written. Silently filling in gaps or skipping uncertain fields defeats the
+entire purpose.
+
+**Scope: read contract → write two files → surface gaps → stop.**
+
+Do NOT generate component code (no SCSS, Marko, React, JS).
+Do NOT invoke `/evo-component` or any downstream skill.
+Do NOT silently populate fields you are not certain about — log the gap instead.
+
+See `references/manifest-schema.md` for the full annotated schema and real component
+examples. See `references/contract-template-additions.md` for what the design contract
+should supply.
+
+---
+
+## Step 1 — Parse the component name
+
+The component name is `$ARGUMENTS` (e.g. `ebay-avatar`).
+
+If `$ARGUMENTS` is empty, ask:
+> "Which component should I generate a manifest for? (e.g. `ebay-avatar`)"
+
+Then wait. Do not proceed until you have a component name.
+
+---
+
+## Step 2 — Read the contract
+
+Read `src/routes/_index/components/$COMPONENT/_contract.md` in full before writing anything.
+
+If the file does not exist, stop and report:
+
+```
+ERROR: No contract found at src/routes/_index/components/$COMPONENT/_contract.md
+
+Create the contract first using the _contract.md template.
+No manifest was generated.
+```
+
+---
+
+## Step 2a — Run spec-to-manifest script (if spec present), then read
+
+Check for `src/routes/_index/components/$COMPONENT/*.spec.json` (any file matching that glob).
+
+**If found:** First run the deterministic translation script before doing any AI inference.
+This writes the spec-derived fields (props, tokens, slots, states, figma) into `manifest.json`
+with byte-identical precision, so you do not need to infer those fields:
+
+```bash
+npx tsx scripts/codegen/spec-to-manifest.ts $COMPONENT
+```
+
+If the script succeeds, `manifest.json` now has the spec-derived sections pre-filled.
+Then read the updated `manifest.json` and the spec file (`$SPEC`) for your remaining work.
+Only handle the **contract-sourced fields** in your AI inference step — do not re-derive
+props, tokens, slots, states, or figma.fileKey from the spec yourself (the script already did this).
+
+**If the script fails or no spec is found:** Continue with AI inference for all fields.
+
+Read the spec in full and store it as `$SPEC`. This is a machine-readable
+handoff from the design team. It is the **authoritative source** for the fields it
+covers — treat spec-sourced values as `confidence: high, source: spec` with no gap entry.
+
+`$SPEC` fields and how they map:
+
+| Spec field | Manifest field | Translation |
+|---|---|---|
+| `props.*` | `props[]` | Each key → prop object; `enum` type → values array |
+| `slots.*` | `slots[]` | Each key → slot with `required` flag |
+| `states.state[]` | `states[]` | Direct array of state names |
+| `tokens.*` | `tokens` | Replace `.` with `-`, prepend `--` (e.g. `color.background.primary` → `--color-background-primary`) |
+| `a11y.role` | `a11y.role` | Direct |
+| `a11y.aria.*` | `a11y.ariaAttributes[]` | Each key-value → attribute entry |
+| `metadata.figma.fileKey` | `figma.fileKey` | Store as-is alongside any `figmaUrl` from contract |
+| `description` | `component.description` | Use if contract description is absent |
+
+**Spec does NOT replace:**
+- `a11yProps` — these are i18n strings, not in the spec
+- `bem` — structural concern, from audit
+- `behaviors`, `events`, `keyboardModel`, `callerObligations` — engineering/contract concerns
+- `figmaUrl` — the spec only has `fileKey`; full URL (with nodeId) comes from the contract
+
+**If not found:** Continue. All fields fall back to contract inference and audit.
+
+---
+
+## Step 2b — Load the audit snapshot
+
+Check for `scripts/audit-output/components/$COMPONENT.json`.
+
+**If it exists:** Read it in full and store it as `$AUDIT`. You will use it to fill
+`[AUDIT]`-tagged fields directly — no inference, no gap entry needed when data is present.
+
+**If it does not exist** (brand-new component not yet in the codebase):
+- All `[AUDIT]` fields become soft gaps: `confidence: medium, source: missing`
+- Add a single note at the top of the gap report:
+  `"Component not in audit snapshot. Run component-audit.js after the skin module exists to auto-fill BEM, tokens, dependencies, and ARIA attributes."`
+- Do not let this block progress — proceed with contract-sourced fields only.
+
+---
+
+## Step 3 — Extract fields
+
+Work through the manifest structure field by field. For each field, apply this
+sourcing priority:
+
+| Source | Action | Gap entry? |
+|---|---|---|
+| `$SPEC` — present and explicit | Use it; `confidence: high, source: spec` | No |
+| `$AUDIT` — found in snapshot | Use it; `confidence: high, source: audit` | No |
+| Contract — clearly and explicitly stated | Use it verbatim | No |
+| Contract — implied, inferable | Use inferred value | Yes — `confidence: medium, source: inferred` |
+| Not mentioned anywhere | Set to `null` | Yes — `confidence: low, source: missing` |
+
+Every populated field must be traceable to a source. Every `null` must have
+an explanation in the gap report. If you infer from domain knowledge alone (not
+from the contract or spec), log a gap regardless of how obvious the value seems.
+
+### Fields to extract
+
+Work through each section in order. Fields tagged **[CONTRACT]** should be
+extractable from the contract. Fields tagged **[ENGINEER]** are expected to be
+`null` with a gap entry — the engineer fills these in during GATE 2.
+Fields tagged **[INFER]** can be attempted with medium confidence.
+
+**Component identity** [CONTRACT; `description` also from SPEC]
+- `component.name` — kebab-case tag name (e.g. `evo-button`)
+- `component.displayName` — human name (e.g. `Button`)
+- `component.description` — one-sentence purpose; prefer `$SPEC.description` if present
+- `component.category` — UI category (e.g. `buttons`, `graphics & icons`, `form`)
+- `figmaUrl` — Figma design link from contract (full URL with nodeId); null if not in contract
+- `figma.fileKey` — from `$SPEC.metadata.figma.fileKey` if present; stored alongside figmaUrl
+
+**Root element** [INFER]
+- `rootElement.default` — the primary HTML element (button, div, a, span, dialog, etc.)
+- `rootElement.conditional` — if the element can change based on a prop, capture the condition and alternate element
+- `rootElement.passthroughAttributes` — which native attributes pass through to the root
+- `rootElement.excludedAttributes` — which attributes are managed internally and must not be passed through
+
+**Props** [SPEC when present, otherwise CONTRACT for existence/purpose, ENGINEER for types/defaults]
+- If `$SPEC.props` exists: use it as the authoritative source. Each spec prop has `type`,
+  `enum` (values list), `default`, and `description` — extract all directly, no gap needed.
+- If no spec: for each prop: `name`, `type`, `values` (enum only), `default`, `required`, `description`
+- Do not guess types without spec. If the contract only mentions a prop exists, log its type and default as gaps.
+
+**A11y props** [CONTRACT] — CRITICAL, often missing from contracts
+- These are i18n-able text strings consumers must override for localization (e.g. `a11yText`, `a11yLoadingText`, `a11ySelectedText`)
+- For each: `name`, `type`, `default` (English string), `required`, `allowNull`, `nullMeaning`, `condition`, `offscreenMethod`, `appendsToVisible`, `description`
+- If the contract's "Required label strings" section names these → extract them
+- If the contract is silent → add a 🔴 gap. Every interactive or announced component needs at least one a11y prop.
+
+**Slots** [SPEC when present, otherwise CONTRACT]
+- If `$SPEC.slots` exists: use it as the base. Each spec slot has `required` and `description`.
+  Infer `type` (default | named-attrtag | named) from the slot's role described in the contract —
+  spec does not provide the Marko slot type, so that still requires contract/engineering judgement.
+- Named content regions: `name`, `type` (default | named-attrtag | named), `required`, `requiredReason` (when required: true), `description`
+- Also check: `elementTypeOverride` (slot accepts `as` prop to change element), `decorative` (CSS background only), `pinned` (outside scrollable area)
+- Marko's named AttrTag slots (`<@image>`) are a distinct pattern — call out the type explicitly
+
+**Nested slots** [CONTRACT/ENGINEER]
+- When a slot's definition itself contains named sub-slots (e.g. evo-tabs' `tab` slot contains a `panel` sub-slot)
+- Populate `nestedSlots[]` with `parentSlot`, `childSlots[]`, `description`
+- Log as gap if not mentioned in contract — this is a non-obvious structural pattern
+
+**Slot a11y props** [CONTRACT/ENGINEER]
+- When a slot's interface includes an a11y text string (e.g. postfixIcon.a11yText becomes aria-label on the inner button)
+- Populate `slotA11yProps[]` with `slot`, `prop`, `appliedAs`, `description`
+
+**Variants** [CONTRACT]
+- Distinct rendering modes: `name`, `trigger` (which prop/condition activates), `description`
+
+**States** [SPEC when present, otherwise CONTRACT]
+- If `$SPEC.states.state[]` exists: use the array as the list of state names.
+  `trigger`, `cssSelector`, `ariaAttribute`, `keyboardAccess`, `renderChange` still come from contract/engineering.
+- Visual or ARIA states: `name`, `trigger`, `cssSelector` [ENGINEER], `ariaAttribute` [ENGINEER], `keyboardAccess`, `renderChange`, `description`
+
+**A11y** [CONTRACT→ENGINEER translation]
+Extract from the contract's Accessibility section and translate to technical fields:
+- `role` — ARIA role if a non-semantic element is used; null if a semantic element handles it
+- `explicitRole` — true if `role=""` must be added as an attribute
+- `labelStrategy` — `content` | `aria-label-prop` | `aria-labelledby` | `aria-hidden` | `compound-labelledby`
+- `focusable` — is this component keyboard focusable?
+- `focusableWhenDisabled` — `always` | `partiallyDisabled-only` | `never`
+- `tabOrder` — `natural` | `manual` | `none`
+- `focusTrap` — `browser-native` | `javascript` | `none` [ENGINEER]
+- `initialFocus` — where focus lands when component opens [CONTRACT — look for "Open/close rules"]
+- `focusReturn` — where focus returns on close [CONTRACT — often a caller obligation]
+- `screenReaderAnnouncement` — plain English: what does a screen reader announce? [CONTRACT]
+- `ariaAttributeOwnership.managed` — aria-* attrs managed internally; caller must not set [ENGINEER]
+- `ariaAttributeOwnership.passthrough` — aria-* attrs the caller can set [ENGINEER]
+- `ariaAttributes[]` — specific aria-* attributes with their values and conditions [ENGINEER]
+
+**Widget role** [CONTRACT] — for interactive widget components only
+- If the contract's "Widget type" section names a WAI-ARIA pattern (tabs, menu, listbox, combobox):
+  - `widgetRole.containerRole` — role on the host element (tablist, menu, listbox)
+  - `widgetRole.itemRole` — default role on child items (tab, menuitem, option)
+  - `widgetRole.itemRoleVariants[]` — when item role varies at runtime (e.g. menuitem vs menuitemradio)
+  - `widgetRole.supportingRoles[]` — additional roles (tabpanel, separator)
+  - `widgetRole.relatedRoles` — cross-element ARIA relationships (aria-controls, aria-selected, aria-checked, aria-expanded)
+- NOTE: listbox uses `aria-selected`; menu uses `aria-checked` — do not confuse these
+- Log as gap if contract does not declare widget type
+
+**Keyboard model** [CONTRACT] — for widget components only
+- If widgetRole is populated, also populate keyboardModel:
+  - `focusStrategy` — `roving-tabindex` | `aria-activedescendant` | `none`
+    - Decision: roving-tabindex for menu/tabs/listbox; aria-activedescendant for combobox (textbox must retain focus)
+  - `focusStrategyReason` — brief rationale
+  - `autoSelect.supported`, `autoSelect.prop`, `autoSelect.description`
+  - `wraps` — does navigation wrap at list ends?
+  - `keys[]` — non-arrow-key interactions (Escape, Home, End)
+  - `typeahead` — if type-ahead search is supported
+- Log as gap if not described in contract
+
+**State-lifting callbacks** [CONTRACT] — SEPARATE from events
+- Callbacks that synchronize state to parent (openChange, indexChange, selectedChange)
+- These receive a plain value (boolean, number, string/array), NOT a DOM Event
+- For each: `name`, `signature` [ENGINEER], `stateLifted`, `defaultBehavior`
+- Distinguish from `events` (onEscape, onLoadError — these receive a DOM Event)
+
+**Dual output** [ENGINEER]
+- When component renders both a custom widget AND a hidden native form element (e.g. listbox + select[hidden])
+- Look for: "form submission", "native select", "hidden input" in the contract
+- `customElement`, `nativeElement`, `syncProp`, `purpose`
+- Log as gap if not mentioned in contract
+
+**Floating positioner** [ENGINEER]
+- For components with floating overlays (menus, tooltips, combobox)
+- `implementation` (evo-expander | browser-anchor | none), `library`, `placement`, `strategy`, `triggerElement`
+- Log as gap — engineer determines from implementation
+
+**Caller obligations** [CONTRACT] — CRITICAL for a11y compliance
+- Derive from the contract's "Label mechanism", "Open/close rules", "Form context", "Widget type" sections
+- Common categories: `form-context`, `label`, `heading-structure`, `focus-management`, `open-trigger`, `icon-treatment`
+- For each: `category`, `description`, `wcagCriterion` [ENGINEER], `consequence` [ENGINEER]
+- If the contract has a "Required label strings" section but no explicit caller obligations section,
+  derive obligations from the described requirements
+- 🔴 Any unmet obligation = WCAG AA failure — these MUST surface as blocking gaps
+
+**Internal data protocol** [ENGINEER — always a gap]
+- data-* attributes placed on children for internal coordination (e.g. data-value on listbox options)
+- Log as gap — engineer determines from source audit
+
+**Keyboard interactions** [CONTRACT]
+- Only non-native interactions (Space/Enter on a button do not need listing)
+- Widget arrow-key navigation goes in `keyboardModel`, not here
+- For each: `key`, `action`, `condition`, `emittedEvent` [ENGINEER]
+
+**Events** [CONTRACT/INFER]
+- Custom DOM-event-like callbacks (onEscape, onLoadError, onAnimationEnd)
+- These receive a DOM Event object or equivalent
+- Do NOT put state-lifting callbacks here — those go in `stateLiftingCallbacks`
+- For each: `name`, `signature` [ENGINEER], `trigger`, `condition`
+
+**BEM** [AUDIT for block/elements/modifiers — ENGINEER for alternateBlock]
+- `block` ← `$AUDIT.skin.bemBlocks[0]` (the primary block name)
+- `elements[]` ← `$AUDIT.skin.bemElements[]` (name only; description is a soft gap)
+- `modifiers[]` ← `$AUDIT.skin.bemModifiers[]` (name only; description is a soft gap)
+- `alternateBlock` / `alternateBlockCondition` — still `[ENGINEER]`; log as low confidence gap
+- If audit snapshot absent: log block/elements/modifiers as medium confidence gaps
+
+**Design tokens** [SPEC when present, otherwise AUDIT]
+- `tokens` (named map) ← `$SPEC.tokens` translated to CSS custom property names:
+  replace `.` with `-`, prepend `--` (e.g. `color.background.primary` → `--color-background-primary`)
+  Store as `{ "background": "--color-background-primary", "border": "--color-border-subtle", ... }`
+  This map is the primary input to the `evo-style-component` skill.
+- `designTokens[]` (flat list) ← `$AUDIT.skin.cssCustomProperties[]` — keep this separately for
+  audit-sourced token enumeration; no gap when found in snapshot
+- If spec absent and audit absent: log `tokens` as medium confidence gap
+
+**Token variants** [SPEC when present]
+- `tokenVariants` (keyed by prop name → enum value → token map) ← `$SPEC.tokenVariants`
+  Translate each token value from dot-notation to CSS custom property name (same rule as above).
+  Store as a nested map: `{ "type": { "warning": { "background": "--color-background-warning", ... } } }`
+  This is the primary input for the static component skill when generating per-modifier SCSS rules.
+  Include a `note` string on any variant whose token raises a dark mode concern (e.g. a foreground
+  token that is globally adaptive and may flip to a light value in dark mode).
+- If spec absent: omit entirely; no gap needed (the static skill will infer from manifest.bem.modifiers)
+
+**Behaviors** [CONTRACT hint → ENGINEER]
+- Non-obvious algorithms (e.g. color hash, aspect ratio detection, animation-gated close)
+- Standard behavior kinds to use (see manifest-schema.md for full list):
+  `animationGatedClose`, `typeaheadSearch`, `lightDismiss`, `collapseOnSelect`,
+  `reactiveVisibility`, `dualOutputSync`, `colorDerived`
+- The contract describes the *behavior*; the engineer supplies the implementation detail
+
+**Dependencies** [AUDIT for name/type — INFER for usedWhen]
+- `name` ← `$AUDIT.marko.subComponents[]` (all evo-* tags used in the template)
+- `type` ← derive from name: `evo-icon-*` → `icon`; names in `$AUDIT.marko.internalImports[]` → `internal-tag`; others → `component`
+- `usedWhen` ← default to `'always'`; log each as a soft gap (`confidence: medium, source: inferred`) for engineer to refine to conditional where needed
+- If audit snapshot absent: log as medium confidence gaps
+
+**RTL** [AUDIT — never from contract]
+- RTL is a Skin-layer invariant — the contract does not declare it
+- `notes` ← if `$AUDIT.skin.rtlOverrides === true`: populate with "This component has RTL-specific overrides in skin SCSS" and log as `confidence: high, source: audit`
+- If `$AUDIT.skin.rtlOverrides === false`: omit the `rtl` field entirely (no gap needed)
+- If audit snapshot absent: log as medium confidence gap
+
+**Storybook** [ENGINEER — always a gap]
+- `category` (Storybook title path), `stories[]`
+
+---
+
+## Step 4 — Write manifest.json
+
+Write `src/routes/_index/components/$COMPONENT/manifest.json`. Use the full schema from
+`references/manifest-schema.md`. Omit sections where no information is available
+rather than writing empty arrays — except for `gaps`, which is always present.
+
+Key structural rules:
+
+| Source | Gap entry? | Confidence | Blocks Gate 2? |
+|---|---|---|---|
+| `[SPEC]` — explicit in spec file | No | high | No |
+| `[CONTRACT]` — explicit | No | — | — |
+| `[AUDIT]` — found in snapshot | No | high | No |
+| `[INFER]` — inferred from context | Yes | medium | No |
+| `[AUDIT]` — snapshot absent | Yes | medium | No |
+| `[ENGINEER]` — requires interpretation | Yes | low | **Yes** |
+| `figmaUrl: null` — contract-first workflow | No | — | **Never blocks** |
+
+- `a11yProps` — extract from contract's "Required label strings" section; if silent, add a 🔴 low-confidence gap
+- `bem.block/elements/modifiers`, `designTokens`, `dependencies` — fill from audit snapshot; no gap when found
+- `bem.alternateBlock` — always a gap, but mark as `"informational": true`. It does not block static or CSS generation; only framework layers need it and engineers fill it after inspecting the template. Setting `"informational": true` ensures the validator never exits 1 on this field.
+- `figma.nodeId` — always a gap when only a fileKey is available (no full node URL). Mark as `"informational": true`. It does not affect code generation; it only enables Code Connect navigation. Engineers fill it after the Figma design is finalized.
+- `storybook.stories` — always a gap, but mark as `"informational": true` so the validator does not treat it as blocking. Story names cannot be known before generation runs; this field is post-generation by design.
+- `figmaUrl` — if the contract explicitly states null or "not yet available", treat as a valid value with NO gap entry. A contract written before the Figma design exists is a first-class workflow, not a missing field. Add a single informational note: "figmaUrl will be populated in the subsequent visual-layer contract update (PR 2)."
+- Never produce an empty `gaps` array — even a fully contract-sourced manifest will have alternateBlock gaps
+
+---
+
+## Step 5 — Write gap-report.json
+
+Write `src/routes/_index/components/$COMPONENT/gap-report.json`:
+
+```json
+{
+  "component": "<component name>",
+  "generatedAt": "<ISO 8601 timestamp>",
+  "summary": {
+    "totalGaps": 0,
+    "highConfidence": 0,
+    "mediumConfidence": 0,
+    "lowConfidence": 0,
+    "missingFields": 0
+  },
+  "requiresEngineerAction": [
+    "<field paths where confidence is low or source is missing — these block approval>"
+  ],
+  "gaps": [],
+  "deviations": []
+}
+```
+
+The `gaps` array must be identical to `manifest.json["gaps"]`.
+`requiresEngineerAction` contains only `low` confidence or `missing` source gaps.
+Medium-confidence gaps go in `gaps` only.
+
+**`deviations[]`** — records intentional departures from the spec's stated values.
+When an implementation must differ from a spec-specified value (e.g. for WCAG compliance,
+dark mode correctness, or engineering constraints), record the deviation here rather than
+silently implementing a different value:
+
+```json
+{
+  "field": "tokenVariants.type.warning.iconColor",
+  "specValue": "color.foreground.primary",
+  "implementedValue": "color.foreground.on-warning",
+  "reason": "--color-foreground-primary resolves to #f7f7f7 in dark mode (1.6:1 contrast on yellow, fails 3:1 WCAG AA minimum for non-text). --color-foreground-on-warning is always neutral-800 (#191919).",
+  "wcagCriterion": "1.4.11",
+  "designReviewNeeded": true
+}
+```
+
+Each deviation entry:
+- `field` — the manifest/spec field path
+- `specValue` — exact value the spec specified
+- `implementedValue` — what was actually implemented
+- `reason` — why the deviation was necessary (be specific — cite contrast ratios, token resolution behavior, etc.)
+- `wcagCriterion` — WCAG criterion that motivated the change (omit if not WCAG-driven)
+- `designReviewNeeded` — `true` if the spec must be updated to reflect this, `false` if it is a local implementation detail
+
+Deviations surface in the Gate 2 review so the engineer can decide whether to:
+1. Confirm the deviation and flag it for design team follow-up
+2. Revert to the spec value and solve the underlying cause differently
+
+---
+
+## Step 6 — Validate
+
+Check if `scripts/codegen/validate-manifest.ts` exists.
+
+- **If yes:** Run `npx tsx scripts/codegen/validate-manifest.ts $COMPONENT`.
+  Report every validation error. Mark the manifest as `INVALID` if any errors
+  are found — do not suppress them or proceed.
+- **If no:** Skip silently. Do not print anything about this step.
+
+---
+
+## Step 7 — Surface the report and stop
+
+Print the following summary and then **stop completely**:
+
+```
+## Manifest generated: $COMPONENT
+
+Files written:
+  ✅  src/routes/_index/components/$COMPONENT/manifest.json
+  ✅  src/routes/_index/components/$COMPONENT/gap-report.json
+
+Gap summary:
+  🔴 Requires engineer action (low confidence / missing): N
+  🟡 Needs verification (inferred from context): N
+  🟢 Confirmed from contract: N
+
+[If 🔴 gaps exist — list each with field path and what the engineer must provide]
+[If 🟡 gaps exist — list each with what was assumed and why]
+
+[If deviations[] is non-empty:]
+⚠️  Spec deviations (N) — implementation differs from spec-stated values:
+  • <field>: spec=<specValue> → implemented=<implementedValue>
+    Reason: <reason>
+    Design review needed: [yes/no]
+
+─────────────────────────────────────────────────
+GATE 2: Awaiting engineer approval.
+
+Review src/routes/_index/components/$COMPONENT/manifest.json and src/routes/_index/components/$COMPONENT/gap-report.json.
+Resolve any 🔴 items. Verify 🟡 items. Confirm or escalate any ⚠️ deviations.
+When satisfied, run `/evo-component $COMPONENT` to begin code generation.
+─────────────────────────────────────────────────
+```
+
+Do not write any more files. Do not invoke any skills. The engineer owns what
+happens next.
diff --git a/.claude/skills/evo-create-component-manifest/evals/evals.json b/.claude/skills/evo-create-component-manifest/evals/evals.json
new file mode 100644
index 0000000000..fba4f60ede
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/evals/evals.json
@@ -0,0 +1,57 @@
+{
+  "skill_name": "evo-create-component-manifest",
+  "evals": [
+    {
+      "id": 1,
+      "prompt": "/evo-create-component-manifest ebay-avatar",
+      "expected_output": "Produces contracts/ebay-avatar/manifest.json and contracts/ebay-avatar/gap-report.json. The manifest should be fully populated with props, slots, states, variants, BEM, design tokens, and a11y. The gap report should have zero or minimal gaps (0-2 medium-confidence) since the contract is complete. Ends with a GATE 2 summary and stops — does not write any component code.",
+      "files": [],
+      "expectations": [
+        "manifest.json is written to contracts/ebay-avatar/manifest.json",
+        "gap-report.json is written to contracts/ebay-avatar/gap-report.json",
+        "manifest.json contains all five props (size, imageUrl, initials, a11yText, fallback) with correct types",
+        "manifest.json contains all three variants (image, initials, icon) with trigger conditions",
+        "manifest.json contains both slots (default) and states (loading, error)",
+        "manifest.json contains the BEM block 'avatar' with the correct elements and modifiers",
+        "manifest.json contains at least 4 design tokens",
+        "gap-report.json has zero low-confidence gaps",
+        "The skill prints a GATE 2 message and does not generate any SCSS, React, or Marko code",
+        "No downstream skill (/evo-component or similar) is invoked"
+      ]
+    },
+    {
+      "id": 2,
+      "prompt": "create manifest for ebay-badge",
+      "expected_output": "Produces contracts/ebay-badge/manifest.json and contracts/ebay-badge/gap-report.json. The contract is partial — no Figma URL, no slots section, no states section, no design tokens, no a11y section. The gap report should have multiple low-confidence (missing) entries for these omitted fields. The GATE 2 summary must call out the required engineer actions before the manifest can be approved.",
+      "files": [],
+      "expectations": [
+        "manifest.json is written to contracts/ebay-badge/manifest.json",
+        "gap-report.json is written to contracts/ebay-badge/gap-report.json",
+        "manifest.json has figmaUrl set to null with a corresponding gap entry",
+        "manifest.json has designTokens as an empty array or null with a corresponding gap entry",
+        "gap-report.json has at least 3 gaps with confidence 'low' or source 'missing'",
+        "gap-report.json requiresEngineerAction is non-empty",
+        "The GATE 2 summary lists the 🔴 gaps that the engineer must resolve",
+        "The skill prints a GATE 2 message and does not generate any component code",
+        "The manifest still includes the 3 props (count, max, variant) that are clearly defined in the contract"
+      ]
+    },
+    {
+      "id": 3,
+      "prompt": "generate manifest from contract for ebay-progress-bar",
+      "expected_output": "Produces contracts/ebay-progress-bar/manifest.json and contracts/ebay-progress-bar/gap-report.json. The contract describes two modes in prose (determinate/indeterminate) without using a formal 'variants' table. The manifest should extract these as variants with medium-confidence gaps noting the prose source. Figma URL is explicitly stated as pending — should be null with a low-confidence gap. Design tokens are described as TBD — should be null with a low-confidence gap.",
+      "files": [],
+      "expectations": [
+        "manifest.json is written to contracts/ebay-progress-bar/manifest.json",
+        "gap-report.json is written to contracts/ebay-progress-bar/gap-report.json",
+        "manifest.json has figmaUrl set to null with a gap entry noting it is pending",
+        "manifest.json has designTokens as null or empty with a gap entry noting tokens are TBD",
+        "manifest.json contains two variants (determinate and indeterminate) extracted from the prose description",
+        "The variant gap entries have confidence 'medium' and source 'inferred' (not 'missing')",
+        "The skill correctly uses medium confidence for inferred fields, not low confidence",
+        "gap-report.json requiresEngineerAction contains figmaUrl and designTokens",
+        "The skill prints a GATE 2 message and does not generate any component code"
+      ]
+    }
+  ]
+}
diff --git a/.claude/skills/evo-create-component-manifest/references/audit-plan.md b/.claude/skills/evo-create-component-manifest/references/audit-plan.md
new file mode 100644
index 0000000000..53a846089d
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/references/audit-plan.md
@@ -0,0 +1,124 @@
+# Comprehensive Component Audit Plan
+
+## Context
+
+The manifest skill (`/evo-create-component-manifest`) was built after auditing only
+two components: `evo-button` and `evo-avatar`. While those were enough to establish
+the schema structure, they are both simple components. The goal of this audit is to
+ensure the schema and contract template additions cover every pattern that exists
+across the full evo-web component library — including complex keyboard navigation,
+ARIA relationships, compound components, focus management, and MakeupJS delegation.
+
+## Current state (before this audit)
+
+- `manifest-schema.md` — schema derived from button + avatar audit; likely missing
+  fields for ARIA relationships, focus management, compound components, multi-event
+  patterns, and MakeupJS delegation
+- `contract-template-additions.md` — describes what to add to the eBay design
+  contract format (NOT a separate structure); targets Accessibility Contract and
+  Platform Realizations › Web sections
+- `SKILL.md` — updated to extract all fields from current schema
+
+## Goal
+
+Update `manifest-schema.md`, `contract-template-additions.md`, and `SKILL.md` to
+reflect the full range of patterns found across all evo-web components.
+
+---
+
+## Phase 1 — Static analysis script
+
+Write a script that scans all three package layers and produces a structured JSON
+summary per component. Save output to
+`.claude/skills/evo-create-component-manifest/scripts/audit-output/`.
+
+**From `packages/evo-marko/src/tags/`:**
+- All Input interface props (name, type, required/optional)
+- All `a11y*` and `aria-*` props
+- All `on-*` event callbacks
+- All AttrTag slot definitions (`<@name>`)
+- All `aria-*` attribute usages directly in templates
+- All MakeupJS imports (`@ebay/makeup-*`)
+- All sub-component and icon imports
+
+**From `packages/skin/src/`:**
+- All BEM blocks, elements, and modifiers
+- All CSS custom properties consumed (`var(--*)`)
+- All state selectors (`[disabled]`, `[aria-*]`, `[hidden]`, etc.)
+- All RTL overrides (`[dir="rtl"]`)
+
+**From `packages/evo-react/src/`:**
+- TypeScript prop interface definitions
+- `aria-*` attribute usages
+- Event handler type signatures
+
+Output: one JSON file per component + a cross-component summary of every unique
+pattern found.
+
+---
+
+## Phase 2 — Component categorization
+
+Group components from the script output by pattern type:
+
+| Category | Why it matters |
+|---|---|
+| Simple presentational | Baseline — already covered (avatar) |
+| Simple interactive | Baseline — already covered (button) |
+| Form inputs | `aria-invalid`, `aria-errormessage`, `aria-required`, fieldset/legend |
+| Navigation | Tabs, breadcrumb — roving tabindex, `aria-selected` |
+| Overlays | Dialog, tooltip, drawer — focus trap, `aria-modal`, `aria-controls` |
+| Complex interactive | Combobox, menu, carousel — full keyboard models, ARIA relationships |
+| Compound/parent-child | Components that orchestrate child components |
+
+---
+
+## Phase 3 — Deep manual audit of representative complex components
+
+Pick one component from each uncovered category and read all three layers + docs.
+Target candidates:
+
+- **Combobox** — complex keyboard model, ARIA relationships (`aria-controls`,
+  `aria-activedescendant`), MakeupJS delegation
+- **Dialog** — focus trap, `aria-modal`, `aria-labelledby`, lifecycle events
+- **Tabs** — compound pattern, `aria-selected`, roving tabindex, parent-child
+  coordination
+
+For each: skin SCSS → evo-marko → evo-react → website docs page.
+
+---
+
+## Phase 4 — Website docs mining
+
+Scan `/src/routes/_index/components/` and `/src/routes/_index/accessibility/` for:
+- Plain-English a11y guidance not reflected in source code
+- Props documented with behavioral context
+- RTL notes
+- Known limitations or caveats
+
+Phases 3 and 4 can run in parallel once Phase 2 is complete.
+
+---
+
+## Phase 5 — Schema gap analysis and updates
+
+1. Compare all discovered patterns against current `manifest-schema.md`
+2. Identify fields the schema cannot represent
+3. Update `manifest-schema.md` with new fields and real component examples
+4. Update `contract-template-additions.md` if new contract-level information is needed
+5. Update `SKILL.md` to extract any newly discovered field patterns
+
+---
+
+## Important notes
+
+- The real eBay design contract format is a rich design-team document (Core
+  Invariants, Flex Zones, Interaction & Lifecycle, Platform Realizations, etc.).
+  `contract-template-additions.md` describes additions that fit *within* that
+  existing structure — NOT a replacement format.
+- Not all information will be on the static layer. Some patterns only appear at
+  runtime (MakeupJS behavior, focus management). The manual audit (Phase 3) is
+  needed to catch these.
+- The script should be saved to
+  `.claude/skills/evo-create-component-manifest/scripts/` for future re-runs as
+  new components are added.
diff --git a/.claude/skills/evo-create-component-manifest/references/contract-template-additions.md b/.claude/skills/evo-create-component-manifest/references/contract-template-additions.md
new file mode 100644
index 0000000000..b88b62d8ef
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/references/contract-template-additions.md
@@ -0,0 +1,394 @@
+# Contract Template Additions
+
+The real design contract format (as used at eBay) is a rich, design-team-oriented
+document with sections like Core Invariants, Flex Zones, Interaction & Lifecycle,
+Platform Realizations, and an Accessibility Contract. It is intentionally
+implementation-agnostic.
+
+The manifest skill needs specific pieces of information that are typically absent from
+contracts written in this format. Each addition below maps to the section of the real
+contract where it naturally belongs — no new top-level sections are needed.
+
+---
+
+## 0. Figma URL → Component header
+
+The contract may be written and merged before the Figma design exists. This is a
+first-class workflow — the behavioral spec is independent of the visual design.
+
+When writing the contract before Figma exists, explicitly state the absence rather
+than omitting the field. This tells the manifest skill the null is intentional, not
+a missing piece:
+
+```markdown
+**Figma URL**: Not yet available — will be added in the visual-layer contract update.
+```
+
+When the Figma design is ready, a second contract update (PR 2) adds the link:
+
+```markdown
+**Figma URL**: https://figma.com/design/...
+```
+
+Merging PR 2 (after engineer review of the Figma design) triggers the visual-layer
+build phase. The engineer's PR approval is the gate — no separate manifest review
+step is needed for the visual layer.
+
+---
+
+## 1. Required label strings → Accessibility Contract
+
+The Accessibility Contract describes what assistive technologies must be able to do.
+It should also name the specific overridable text strings consumers must supply for
+localization.
+
+Without this, the manifest skill cannot populate `a11yProps` and must flag every
+i18n-able string as a 🔴 gap.
+
+**Add a "Required label strings" subsection inside Accessibility Contract:**
+
+```markdown
+### Required label strings
+
+These strings are passed as props and must be overridable for localization.
+
+- `a11yText` (required, allowNull) — default: none — The accessible label for
+  the component. Typically "Signed in as [name]" or "Signed out". Pass null
+  only if a parent element already provides an accessible label for this
+  component.
+- `a11yLoadingText` (optional) — default: "loading" — Announced when the
+  component enters a loading state.
+```
+
+Include one entry per string. State the prop name, whether it is required,
+its default English value, and when it is announced or used.
+
+---
+
+## 2. Explicit screen reader announcement → Accessibility Contract
+
+The Accessibility Contract often states what assistive technologies *must be
+able to do* but not what they *actually say*. The manifest skill needs the latter
+to populate `a11y.screenReaderAnnouncement`.
+
+**Add a "Screen reader announcement" subsection inside Accessibility Contract:**
+
+```markdown
+### Screen reader announcement
+
+When encountered, a screen reader announces the value of `a11yText` — typically
+"Signed in as [name]" or "Signed out". This component is purely presentational;
+it is not announced as a button or interactive element.
+```
+
+For components with state changes:
+
+```markdown
+### Screen reader announcement
+
+The button label is announced normally. When in loading state, the label is
+replaced by the value of `a11yLoadingText` (default: "loading"). This change
+is announced reactively — the screen reader does not need to refocus.
+```
+
+Plain English is sufficient. The engineer translates this to ARIA.
+
+---
+
+## 3. Keyboard focusability → Accessibility Contract
+
+Many contracts address interactive vs. non-interactive in general terms but do
+not explicitly state whether the component is keyboard focusable by default,
+or what happens to focus when disabled.
+
+**Add a "Keyboard focusability" subsection inside Accessibility Contract:**
+
+For a non-interactive component:
+```markdown
+### Keyboard focusability
+
+Not keyboard focusable on its own. If placed inside a `<button>` or `<a>`,
+the parent receives focus — not this component. No tab stop.
+```
+
+For an interactive component with a disabled state:
+```markdown
+### Keyboard focusability
+
+Focusable. When `disabled` is true, the element is removed from tab order
+entirely. When `partiallyDisabled` is true, the element remains in tab order
+but does not respond to activation (Space/Enter).
+```
+
+If the component has non-native keyboard interactions, add a table:
+```markdown
+### Keyboard interactions
+
+| Key    | Condition    | Action                          |
+|--------|--------------|---------------------------------|
+| Escape | not disabled | Dismiss/cancel — fires onEscape |
+```
+
+If no custom interactions exist, state: "No custom keyboard interactions.
+Native element semantics apply."
+
+---
+
+## 4. Slot structure → Platform Realizations › Web
+
+The Platform Realizations › Web section is where named content regions (slots)
+should be called out. The key distinction is whether a named slot accepts free
+content or structured markup — these are different implementation patterns.
+
+**Add a "Content regions" table inside Platform Realizations › Web:**
+
+```markdown
+### Web
+
+...existing content...
+
+**Content regions:**
+
+| Slot    | Required | Type                           | Description |
+|---------|----------|--------------------------------|-------------|
+| `image` | No       | Structured markup (`<@image>`) | Profile photo. Passes through all `<img>` attributes; `alt` is forced to `""` since the root element provides the label. |
+| default | No       | Any content                    | Optional overlay (e.g. status badge). |
+```
+
+If the component has no named slots, state: "Single content area — no named slots."
+
+---
+
+## 5. Widget type → Accessibility Contract
+
+For interactive components that implement a WAI-ARIA widget role (menu, listbox,
+tabs, combobox), the contract must declare which widget pattern applies. This
+determines the keyboard model, ARIA role system, and focus strategy the engineer
+uses.
+
+Without this, the manifest skill cannot populate `widgetRole`, `keyboardModel`,
+or `a11y.focusStrategy`.
+
+**Add a "Widget type" subsection inside Accessibility Contract:**
+
+For a full widget:
+```markdown
+### Widget type
+
+This component implements the WAI-ARIA **Tabs** widget pattern:
+- The tab list (`role="tablist"`) contains tab buttons (`role="tab"`)
+- Each tab controls a panel (`role="tabpanel"`) via `aria-controls`
+- Keyboard navigation uses a roving tab index — only one tab is in the
+  tab order at any time; arrow keys navigate between tabs
+- `autoSelect` mode: arrow key navigation also selects the panel
+- `manual` mode: arrow key moves focus; SPACE or ENTER selects
+```
+
+For a simpler widget:
+```markdown
+### Widget type
+
+This component implements the WAI-ARIA **Listbox** widget pattern
+(`role="listbox"` + `role="option"`). Uses roving tabindex with type-ahead
+character search. Renders an additional hidden native `<select>` for form
+submission.
+```
+
+For a non-widget:
+```markdown
+### Widget type
+
+Not a widget — native element semantics handle all keyboard behavior.
+```
+
+---
+
+## 6. Open/close trigger rules → Accessibility Contract
+
+For components with expanded/collapsed states (dialogs, menus, tooltips, infotips),
+the contract must state what may open and close them. This populates
+`callerObligations`, `a11y.initialFocus`, `a11y.focusReturn`, and the
+`lightDismiss` behavior.
+
+**Add an "Open/close rules" subsection inside Accessibility Contract:**
+
+For a dialog:
+```markdown
+### Open/close rules
+
+**Opens on:** Click-event on a trigger button, or via application event. Must
+NOT open on hover or focus of the trigger — this violates WCAG 3.2.1.
+
+**Closes on:** Click of the dismiss button, or Escape key (light dismiss).
+
+**Initial focus:** First interactive element inside the dialog (browser-native
+`showModal()` behavior).
+
+**Focus return:** Focus must return to the element that opened the dialog.
+This is the caller's responsibility — the component does not handle it.
+```
+
+For a menu:
+```markdown
+### Open/close rules
+
+**Opens on:** Click of the trigger button (not hover, not focus).
+
+**Closes on:** Escape key; click outside the menu (light dismiss); selecting
+an item (when collapseOnSelect is enabled).
+
+**Initial focus:** First item in the menu (the menu container itself does not
+receive focus).
+
+**Focus return:** Returns to the trigger button automatically when menu closes.
+```
+
+For a tooltip:
+```markdown
+### Open/close rules
+
+**Opens on:** Focus or hover of the host element.
+
+**Closes on:** Blur or mouseout of the host element. Must NOT close on
+mouseout/blur of the overlay itself — the user must be able to read the content.
+
+**Initial focus:** Not applicable — tooltip is non-modal and does not receive focus.
+
+**Focus return:** Not applicable.
+```
+
+---
+
+## 7. Form context → Platform Realizations › Web
+
+Form controls that must live inside a `<form>` with a submit button need to declare
+this explicitly. Without it, the manifest skill cannot populate `callerObligations`
+for form-context requirements.
+
+**Add a "Form context" line inside Platform Realizations › Web:**
+
+For a form control:
+```markdown
+### Form context
+
+This component is a form control. It must be placed inside a `<form>` element
+that has a submit button. Changing the input value should not immediately submit
+the form or trigger a page reload — wait for explicit form submission.
+
+Add `novalidate` to the `<form>` element to suppress browser built-in validation
+UI, which conflicts with design system validation patterns.
+```
+
+For a component that is NOT a form control:
+```markdown
+### Form context
+
+Not a form control. Does not need to be inside a `<form>`.
+```
+
+---
+
+## 8. Label mechanism → Accessibility Contract
+
+When a component requires an external `<label>` element or a `<fieldset>`/`<legend>`
+group, the contract must state this. Without it, the manifest skill cannot add the
+appropriate `callerObligation`.
+
+**Add a "Label mechanism" subsection inside Accessibility Contract:**
+
+For a simple form control:
+```markdown
+### Label mechanism
+
+Requires a visible `<label>` element with `for=` matching the component's `id`
+prop. Placeholder text is NOT a substitute for a label — it disappears on input
+and has insufficient contrast.
+
+If a visible label is not possible (e.g. search field), use the `aria-label`
+prop to provide an accessible name.
+```
+
+For a form control group (checkboxes, radios, switch):
+```markdown
+### Label mechanism
+
+Individual controls require a visible `<label>` element.
+The group requires a visible group label provided via `<fieldset>` and `<legend>`.
+```
+
+For a component that provides its own label:
+```markdown
+### Label mechanism
+
+Self-labelled — no external label element required. The component's accessible
+name comes from [the a11yText prop | the visible button content | ...].
+```
+
+---
+
+## 9. Toggle state strategy → Accessibility Contract
+
+Toggle controls (buttons that switch between two states) must declare whether they
+use `aria-pressed` or visible text to convey state. These are mutually exclusive —
+using both is incorrect.
+
+**Add a "Toggle state" line inside Accessibility Contract:**
+
+If using `aria-pressed`:
+```markdown
+### Toggle state
+
+State is conveyed via `aria-pressed`. The visible button label stays constant
+(e.g. always "Mute"). Do NOT also change the label text to reflect state — that
+would double-announce the state.
+```
+
+If using visible text:
+```markdown
+### Toggle state
+
+State is conveyed by the visible button label, which changes between "Follow"
+and "Following". Do NOT also add `aria-pressed` — the changing label already
+communicates state.
+```
+
+---
+
+## What does NOT belong in the design contract
+
+These fields are filled autonomously by the agent from codebase data — adding them
+to the contract creates false completeness and burdens design teams unnecessarily.
+
+| What to omit | Where the agent gets it instead |
+|---|---|
+| BEM class names | `audit-output/components/<name>.json` → `skin.bemBlocks/Elements/Modifiers` |
+| CSS custom property names | `audit-output/components/<name>.json` → `skin.cssCustomProperties` |
+| ARIA attribute names and values | `audit-output/components/<name>.json` → `marko.templateAriaUsages` |
+| Icon and component dependencies | `audit-output/components/<name>.json` → `marko.subComponents` |
+| RTL behavior | `audit-output/components/<name>.json` → `skin.rtlOverrides` |
+| TypeScript types and prop signatures | Engineer fills at Gate 2 — genuinely requires interpretation |
+| Storybook category path | Engineer fills at Gate 2 — naming convention decision |
+| Internal algorithms (color hashing, etc.) | Engineer fills at Gate 2 — but contract *should* describe the behavior in plain English so the engineer knows what to implement |
+
+---
+
+## Summary
+
+Nine targeted additions to the existing contract format — all fitting inside sections
+that already exist — cover everything the manifest skill needs:
+
+| What to add | Where in the real contract |
+|---|---|
+| Required label strings (prop names + defaults) | Accessibility Contract |
+| Explicit screen reader announcement | Accessibility Contract |
+| Keyboard focusability (+ custom key interactions) | Accessibility Contract |
+| Widget type (ARIA widget pattern, keyboard model) | Accessibility Contract |
+| Open/close trigger rules (initial focus, focus return) | Accessibility Contract |
+| Label mechanism (external label / fieldset required?) | Accessibility Contract |
+| Toggle state strategy (aria-pressed vs visible text) | Accessibility Contract |
+| Slot structure (free content vs. structured markup) | Platform Realizations › Web |
+| Form context (must be in `<form>`? novalidate?) | Platform Realizations › Web |
+
+RTL and color/spacing behavior are not listed here — these are Skin-layer invariants
+enforced by convention across all components and do not need to be declared in the
+design contract.
diff --git a/.claude/skills/evo-create-component-manifest/references/contract-validator.md b/.claude/skills/evo-create-component-manifest/references/contract-validator.md
new file mode 100644
index 0000000000..4fb52cd378
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/references/contract-validator.md
@@ -0,0 +1,320 @@
+# Contract Validator
+
+The contract validator is a CI check that runs on pull requests in the design
+repository. It enforces that every `_contract.md` file includes the sections and
+fields the manifest skill needs to run with minimal gaps. Catching missing information
+at the PR — before the contract is merged — is significantly cheaper than discovering
+it in the gap report downstream.
+
+---
+
+## Where it fits in the pipeline
+
+```
+Design repo PR opened
+        ↓
+Contract validator runs (this document)
+        ↓  blocks if required sections missing
+PR approved and merged
+        ↓  triggers manifest skill
+evo-web: /evo-create-component-manifest
+        ↓  produces manifest + gap report
+Gate 2: engineer reviews and approves
+        ↓
+/evo-component generates behavioral layer (PR 1 path)
+/evo-style-component generates visual layer (PR 2 path)
+```
+
+The validator and the manifest gap report are complementary:
+- **Validator** — enforces structural completeness (are required sections present?)
+- **Gap report** — catches semantic gaps the validator cannot detect (is the content correct and sufficient?)
+
+A contract that passes the validator should produce very few 🔴 blocking gaps in the manifest skill.
+
+---
+
+## PR type detection
+
+The validator distinguishes two contract PR types by reading the `Figma URL` field
+in the contract header:
+
+| `Figma URL` value | PR type | Rules applied |
+|---|---|---|
+| `Not yet available` (or similar) | **PR 1** — behavioral contract | Behavioral checks only |
+| Valid `https://figma.com/...` URL | **PR 2** — visual contract update | All checks + Figma URL format |
+| Field absent entirely | **Error** | Hard block — field must always be present |
+
+---
+
+## Validation rules
+
+### Severity levels
+
+| Symbol | Severity | Effect |
+|---|---|---|
+| 🔴 | **Block** | Check fails; PR cannot merge until resolved |
+| 🟡 | **Warn** | Comment posted; PR can still merge |
+| 🔵 | **Info** | Informational comment only |
+
+### Universal rules (PR 1 and PR 2)
+
+| Rule | Check | Severity |
+|---|---|---|
+| Figma URL field declared | Header contains `**Figma URL**:` | 🔴 |
+| Required label strings section | `### Required label strings` heading exists and is non-empty | 🔴 |
+| Screen reader announcement section | `### Screen reader announcement` heading exists and is non-empty | 🔴 |
+| Keyboard focusability section | `### Keyboard focusability` heading exists and is non-empty | 🔴 |
+| Widget type section | `### Widget type` heading exists and is non-empty | 🔴 |
+| Label mechanism section | `### Label mechanism` heading exists and is non-empty | 🔴 |
+| Content regions declared | `Content regions` or content regions table present under `### Web` | 🔴 |
+| Form context declared | `Form context` declared under `### Web` | 🔴 |
+| Toggle state section | `### Toggle state` present when contract text mentions toggle / press / aria-pressed | 🟡 |
+| Accessibility Contract section present | `## Accessibility Contract` heading exists | 🔴 |
+| Platform Realizations › Web section present | `### Web` heading exists under Platform Realizations | 🔴 |
+
+### PR 2-only rules
+
+| Rule | Check | Severity |
+|---|---|---|
+| Figma URL is a valid link | `Figma URL` value matches `https://figma.com/` or `https://www.figma.com/` | 🔴 |
+| Figma URL is a design file (not FigJam) | URL contains `/design/` | 🟡 |
+
+### Content quality rules (both PR types)
+
+| Rule | Check | Severity |
+|---|---|---|
+| Sections are non-trivial | Required sections contain more than 10 words of content | 🟡 |
+| a11yText named if component is interactive | `a11yText` (or another `a11y*` prop) named in Required label strings if Accessibility Requirements describe interactive usage | 🟡 |
+
+---
+
+## PR comment format
+
+The validator posts a single review comment on the PR summarising results:
+
+```
+## Contract Validation — Avatar
+
+**PR type detected:** PR 1 (behavioral — Figma URL not yet available)
+**Contract:** components/avatar/_contract.md
+
+### ✅ Passed (9 checks)
+- Required label strings · Screen reader announcement · Keyboard focusability
+- Widget type · Label mechanism · Content regions · Form context
+- Accessibility Contract section · Platform Realizations › Web section
+
+### 🟡 Warnings (1)
+- **Toggle state section missing** — contract mentions "press" behavior; add a
+  `### Toggle state` section declaring whether `aria-pressed` or visible text
+  conveys state. (Can merge — resolve before manifest generation.)
+
+### Summary
+Contract is structurally complete and ready to merge.
+Manifest skill will run after merge.
+```
+
+For a failing PR:
+
+```
+## Contract Validation — Avatar
+
+### 🔴 Blocking issues (2) — PR cannot merge
+
+1. **Required label strings section missing**
+   Add `### Required label strings` under Accessibility Contract listing every
+   i18n-able string (e.g. `a11yText`). See contract-template-additions.md #1.
+
+2. **Content regions not declared**
+   Add a Content regions table under `### Web` in Platform Realizations.
+   See contract-template-additions.md #4.
+
+### ✅ Passed (7 checks)
+...
+```
+
+---
+
+## Implementation — Option A: Reusable GitHub Action ✅ Chosen
+
+### Why this approach
+
+Engineering owns the validation logic entirely in evo-web. The design repo has a
+single workflow file that calls the action — that's the full design repo footprint.
+No infrastructure to host, no services to maintain. When validation rules change as
+the contract template evolves, only evo-web needs to be updated.
+
+### Architecture
+
+```
+evo-web (engineering repo)
+└── .github/
+    └── actions/
+        └── validate-contract/
+            ├── action.yml           ← composite action definition
+            └── validate-contract.js ← validation script (Node.js, no deps)
+
+design-repo (design-owned)
+└── .github/
+    └── workflows/
+        └── validate-contract.yml   ← one file; calls evo-web action
+```
+
+### Files in evo-web
+
+**`.github/actions/validate-contract/action.yml`** — declares the action inputs,
+sets up Node, runs the validator, posts the PR comment, and sets the check status.
+
+**`.github/actions/validate-contract/validate-contract.js`** — the validator script.
+Takes a contract file path as input. Reads the markdown, runs all checks, exits 0
+(pass) or non-zero (fail). Can also be run locally.
+
+### Files in the design repo
+
+**`.github/workflows/validate-contract.yml`** — the only file the design repo needs:
+
+```yaml
+name: Validate Contract
+
+on:
+  pull_request:
+    paths:
+      - '**/_contract.md'
+
+jobs:
+  validate:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write   # needed to post PR comment
+      checks: write          # needed to set check status
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Get changed contracts
+        id: changed
+        uses: tj-actions/changed-files@v44
+        with:
+          files: '**/_contract.md'
+
+      - uses: ebay/evo-web/.github/actions/validate-contract@main
+        with:
+          changed-files: ${{ steps.changed.outputs.all_changed_files }}
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+```
+
+### Permissions required
+
+The design repo workflow runs with `GITHUB_TOKEN` (standard, no secrets to manage).
+The token needs `pull-requests: write` to post the review comment and `checks: write`
+to set the check status. Both are granted in the workflow `permissions` block above.
+
+The design repo does not need any secrets from evo-web. GitHub resolves `uses: ebay/evo-web/.github/actions/validate-contract@main` directly.
+
+> **Note:** If evo-web is a private repository, the design repo must be in the same
+> GitHub organization and the action must be explicitly shared. In GitHub Enterprise,
+> this is controlled under Organization Settings → Actions → Access.
+
+### Pinning the action version
+
+The design repo workflow above pins to `@main` (always latest). For stability,
+pin to a release tag instead:
+
+```yaml
+uses: ebay/evo-web/.github/actions/validate-contract@v1.2.0
+```
+
+Tag evo-web releases that include validator changes with a semantic version so the
+design repo can adopt updates deliberately.
+
+### Making it a required check
+
+In the design repo, go to **Settings → Branches → Branch protection rules** for the
+main branch and add `validate / validate-contract` to **Required status checks**.
+This ensures PRs cannot be merged until the validator passes.
+
+### Running locally
+
+Anyone can run the validator locally before pushing:
+
+```bash
+# From anywhere with Node.js available
+npx github:ebay/evo-web/.github/actions/validate-contract/validate-contract.js \
+  path/to/components/avatar/_contract.md
+
+# Or clone evo-web and run directly
+node .github/actions/validate-contract/validate-contract.js \
+  path/to/components/avatar/_contract.md
+```
+
+Exit code 0 = passes. Non-zero = failures printed to stdout.
+
+### Adding or updating checks
+
+All validation rules live in `validate-contract.js` in evo-web. When the contract
+template changes (new required section, updated rule), update the script there.
+The change takes effect on the next PR in the design repo automatically (if pinned
+to `@main`) or after the design repo bumps its version pin.
+
+Rules follow a simple structure:
+```js
+{ id: 'required-label-strings',
+  severity: 'block',
+  description: '### Required label strings section',
+  check: (ast) => hasHeading(ast, 'Required label strings') }
+```
+
+Adding a new check = adding one object to the rules array.
+
+---
+
+## Implementation — Option B: GitHub App ☐ Not chosen
+
+A GitHub App registered by the engineering org is installed on the design repo.
+When a PR is opened, GitHub sends a webhook to the App's backend. The App fetches
+the changed contracts, runs the validator, and reports back via the GitHub Checks API.
+
+**Why not chosen now:**
+Requires a live backend service (Lambda, Cloudflare Worker, or similar) that must be
+hosted, monitored, and kept running. More operational overhead than the problem
+warrants at this stage. The design repo also has zero footprint, which is appealing,
+but the infrastructure cost outweighs that benefit right now.
+
+**When to revisit:** If the design repo relationship makes even a single workflow file
+untenable (org ownership, access policies), or if the validator logic becomes complex
+enough to warrant a dedicated service that handles multiple downstream integrations.
+
+---
+
+## Implementation — Option C: Repository Dispatch ☐ Not chosen
+
+The design repo has a minimal workflow that fires a `repository_dispatch` event to
+evo-web when a contract PR is opened. evo-web's Actions receive the event, run the
+validator against the contract file (fetched from the design repo), and post results
+back via the GitHub API.
+
+**Why not chosen now:**
+Requires cross-repo token management (evo-web needs a token with write access to
+the design repo to post comments and set statuses). More orchestration between repos
+than Option A with no clear benefit. GitHub's `repository_dispatch` also has rate
+limits and latency that make it less reliable as a PR gate.
+
+**When to revisit:** If the reusable action approach hits GitHub's cross-org
+limitations and the GitHub App route is too heavyweight.
+
+---
+
+## Relationship to the manifest gap report
+
+| | Contract Validator | Manifest Gap Report |
+|---|---|---|
+| **Where** | Design repo CI | evo-web (after contract merge) |
+| **When** | On every contract PR | On every manifest generation run |
+| **What** | Structural completeness — are required sections present? | Semantic completeness — is the content sufficient for code generation? |
+| **Audience** | Designer opening the PR | Engineer at Gate 2 |
+| **Effect** | Blocks PR merge | Blocks Gate 2 approval |
+| **Example catch** | `### Widget type` section missing | Widget type declared but keyboard model not described clearly enough |
+
+A contract that passes the validator will produce few or no 🔴 blocking gaps in the
+manifest skill. Warnings (🟡) from the validator may still appear as medium-confidence
+gaps in the manifest — those are resolved at Gate 2, not in the design repo.
diff --git a/.claude/skills/evo-create-component-manifest/references/figma-mcp-capabilities.md b/.claude/skills/evo-create-component-manifest/references/figma-mcp-capabilities.md
new file mode 100644
index 0000000000..b29839c020
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/references/figma-mcp-capabilities.md
@@ -0,0 +1,278 @@
+# Figma MCP Capabilities for Component Generation
+
+This document details what the Figma MCP extracts from a Figma design file, how
+that data maps to the visual layer build, and where the boundaries are. All examples
+are drawn from a live pull of the Avatar component in the eBay Evo Design System file.
+
+**Source file:** eBay Evo Design System  
+**Node pulled:** Avatar component set (`279892:147895`)  
+**Tools used:** `get_design_context` + `get_variable_defs`  
+**Relevant pipeline phase:** Phase 2 — Visual layer, triggered by PR 2 merge
+
+---
+
+## Role in the pipeline
+
+The Figma MCP is the data source for the `/evo-style-component` skill — the Phase 2
+build that generates the CSS visual layer after the behavioral layer (Phase 1) is
+already in place. It is not used during Phase 1 (behavioral build), which runs from
+the contract and audit snapshot alone.
+
+```
+PR 2 merged (contract updated with Figma URL)
+        ↓
+/evo-style-component reads manifest (has figmaUrl)
+        ↓
+get_design_context → structure, sizes, typography, colors, layout
+get_variable_defs  → resolved token values
+        ↓
+Agent translates Tailwind → SCSS/BEM
+        ↓
+Visual CSS layer PR in evo-web
+```
+
+---
+
+## The two tools and what each provides
+
+### `get_design_context`
+
+The primary tool. Returns:
+- A React + Tailwind code representation of the selected node, with all variants
+  and states encoded as conditional logic
+- A screenshot of the node as rendered in Figma
+- Component documentation, descriptions, and Playbook links if defined
+- Image asset URLs for any images/icons embedded in the design (7-day expiry)
+- Node IDs as `data-node-id` attributes throughout the code
+
+### `get_variable_defs`
+
+A secondary tool that resolves the token values referenced in the design. Returns:
+- All Figma variables (design tokens) used in the selected node
+- Their resolved values (hex colors, or image references for gradient tokens)
+
+**Use both tools together.** `get_design_context` gives you token names;
+`get_variable_defs` gives you their resolved hex values. Neither is sufficient alone.
+
+---
+
+## What is extracted — field by field
+
+Verified against the live Avatar pull. Every value below came directly from the MCP,
+not from estimation or visual inspection.
+
+### Sizing
+
+All 7 size steps extracted with exact pixel values:
+
+| Size step | Container | Border radius | Initials font size |
+|---|---|---|---|
+| 32 | 32 × 32px | 16px | 16px |
+| 40 | 40 × 40px | 20px | 20px |
+| 48 | 48 × 48px | 24px | 24px |
+| 56 | 56 × 56px | 28px | 28px |
+| 64 | 64 × 64px | 32px | 32px |
+| 96 | 96 × 96px | 48px | 48px |
+| 128 | 128 × 128px | 64px | 64px |
+
+Rule derivable by the agent: `border-radius = size / 2` (always circular);
+`initials-font-size = size / 2`.
+
+### Typography
+
+```
+font-family:  Market Sans, Bold (font-weight: 700)
+font-size:    see size table above
+color:        #002a69  (eBay navy — initials text on colored background)
+text-align:   center
+line-height:  1 (leading-none)
+```
+
+### Colors and design tokens
+
+Extracted from `get_variable_defs` — these are the actual resolved values:
+
+| Token name (Figma) | Resolved value | Usage |
+|---|---|---|
+| `--color-background-primary` | `#ffffff` | Image variant container background |
+| `Background/Secondary` | `#f7f7f7` | Signed-out / eBay / eBay.ai container |
+| `Foreground/Secondary` | `#707070` | Signed-out person icon color |
+| `Color/Yellow/400` | `#ffbd14` | eBay logo — yellow bar |
+| `Color/Blue/500` | `#0968f6` | eBay logo — blue bar |
+| `Color/Green/500` | `#92c821` | eBay logo — green element |
+| `Color/Red/500` | `#f02d2d` | eBay logo — red element |
+| `AI/Solid/Blue/Strong` | `#0968f6` | eBay.ai sparkle |
+| `AI/Solid/Yellow/Strong` | `#ffd80e` | eBay.ai sparkle |
+| `AI/Solid/Purple/Strong` | `#993ee0` | eBay.ai sparkle |
+| `AI/Solid/Red/Strong` | `#ff4242` | eBay.ai sparkle |
+| `AI/Solid/Green/Strong` | `#4ee04b` | eBay.ai sparkle |
+
+### Variants
+
+All five `type` values extracted with their visual logic:
+
+| Variant | Extracted details |
+|---|---|
+| `Image` | Circular container with photo; `--color-background-primary` bg; circular clip |
+| `Default` | Circular container with initials; colored gradient background (per-size image); Market Sans Bold |
+| `Signed out` | Container with person icon; `Background/Secondary` bg; icon scales with size |
+| `eBay` | Container with eBay shopping bag logo; 4-color composition; proportional icon |
+| `eBay.ai` | Container with AI sparkle; multi-color gradient; `Background/Secondary` bg |
+
+### Layout and spacing
+
+```
+gap between container and text label: 8px  (signed-out / eBay / eBay.ai types)
+container positioning: relative; content centered absolute
+icon sizing relative to container:
+  eBay logo — height: 76.92% of container, width varies per size
+  eBay.ai sparkle — inset: 4.17% (sizes ≥ 48) or 5% (40) or 6.25% (32)
+```
+
+### Image and icon assets
+
+The MCP returns temporary URLs (7-day expiry) for every image and icon embedded
+in the design. For Avatar this includes:
+
+- 7 container background images (one per size) for the Default (initials) variant
+- 7 container background images for the Signed-out / eBay / eBay.ai variant
+- 7 profile photo placeholders for the Image variant
+- 7 signed-out person icons (one per size)
+- Per-size eBay logo elements (green shape, red shape, handle stroke)
+- Per-size AI sparkle shapes
+
+For the SCSS/BEM implementation, these image assets are not used directly —
+the colored backgrounds are CSS (`background-color` + `border-radius`) and the
+icons are SVG components. The asset URLs serve as visual reference for the agent.
+
+### Component documentation
+
+The MCP returned the component's Figma description and its Playbook documentation
+link directly:
+
+```
+Description: Avatars are informational assets that represent users' identities
+             across our products.
+Playbook:    https://playbook.ebay.com/design-system/components/avatar
+Version:     1.3
+```
+
+---
+
+## How this satisfies the visual layer build
+
+### What the skill receives vs. what it needs
+
+| Need | Source | Status |
+|---|---|---|
+| Container dimensions per size | `get_design_context` → size-[Npx] classes | ✅ Exact |
+| Border radius per size | `get_design_context` → rounded-[Npx] classes | ✅ Exact |
+| Background colors (token names) | `get_design_context` → var(--token-name) | ✅ Present |
+| Background color values | `get_variable_defs` → resolved hex | ✅ Exact |
+| Typography (family, weight, size) | `get_design_context` → font-* classes | ✅ Exact |
+| All variant conditions | `get_design_context` → conditional logic | ✅ Complete |
+| Layout/spacing values | `get_design_context` → gap/inset classes | ✅ Exact |
+| Brand and AI color values | `get_variable_defs` → resolved hex | ✅ Exact |
+| Visual reference | `get_design_context` → screenshot | ✅ Full render |
+| Playbook / design documentation | `get_design_context` → description field | ✅ Present |
+
+### The Tailwind → SCSS/BEM translation
+
+The MCP output is React + Tailwind. evo-web uses SCSS + BEM. The translation is
+mechanical — every Tailwind class maps to a known CSS property. The agent performs
+this automatically:
+
+```
+Tailwind class              →  SCSS equivalent
+─────────────────────────────────────────────────────────────────
+size-[32px]                 →  width: 32px; height: 32px;
+rounded-[16px]              →  border-radius: 16px;
+text-[#002a69]              →  color: #002a69;
+text-[16px]                 →  font-size: 16px;
+font-["Market_Sans:Bold"]   →  font-family: "Market Sans"; font-weight: 700;
+bg-[var(--color-bg,#fff)]   →  background-color: var(--color-background-primary);
+gap-[8px]                   →  gap: 8px;
+inset-[4.17%]               →  inset: 4.17%;
+leading-none                →  line-height: 1;
+```
+
+BEM structure is determined from the component hierarchy in the MCP output and
+cross-referenced with the audit snapshot (`skin.bemBlocks`, `skin.bemElements`,
+`skin.bemModifiers`) which already exists for all 50 current evo-web components.
+For new components, the BEM structure is derived from the hierarchy.
+
+### Known rendering artifact — double dashes in token names
+
+The MCP renders CSS variable names with extra leading dashes:
+
+```
+Figma MCP output:   var(----color-background-primary, white)
+Correct form:       var(--color-background-primary)
+```
+
+This is a consistent Figma MCP artifact — not a design error. The `/evo-style-component`
+skill must normalize token names by stripping extra leading dashes before writing SCSS.
+A single regex handles this: `s/var\(---+/var(--/g`.
+
+---
+
+## What Figma cannot provide
+
+These four categories are outside the scope of static Figma design files.
+They must come from other sources as noted.
+
+| Gap | Why Figma cannot provide it | Source to fill it |
+|---|---|---|
+| **Hover / focus / active / pressed states** | Static design — no interaction layer | Contract (Accessibility Contract → States table) or a separate Figma interaction spec frame |
+| **Dark mode token values** | Only light theme shown in this component set | Separate dark-mode Figma frame or the skin token system's dark aliases |
+| **Motion / transition specs** | No animation data in the component | Contract or skin SCSS motion conventions (`--motion-duration-*`, `--motion-easing-*`) |
+| **Multi-color initials backgrounds** | Figma shows one demo color; the hash algorithm is behavioral | Contract documents the algorithm; audit snapshot confirms the skin class names |
+
+Of these four, only interactive states and dark mode are relevant for most components.
+Motion and the color algorithm are handled by existing skin conventions and the
+behavioral layer respectively — neither requires the Figma design to specify them.
+
+---
+
+## Generating new components vs. revising existing ones
+
+### Generating a new component (no existing skin module)
+
+The full visual specification is derived from Figma:
+1. `get_design_context` → extract all sizes, colors, typography, layout
+2. `get_variable_defs` → resolve all token values
+3. Translate Tailwind → SCSS; establish BEM class names from hierarchy
+4. Write `packages/skin/src/sass/<component>/<component>.scss` from scratch
+
+### Revising an existing component (skin module exists)
+
+The audit snapshot already contains the current SCSS structure:
+1. `get_design_context` → compare against current implementation
+2. Identify what changed: new size step, updated token, changed border-radius, etc.
+3. Produce a diff — change only what changed, leave the rest intact
+4. This is the primary use case for `/evo-style-component` in the PR 2 workflow
+
+The audit snapshot (`audit-output/components/<name>.json`) acts as the baseline.
+The Figma design is the target. The diff between them is the PR.
+
+---
+
+## Summary assessment
+
+The Figma MCP provides everything needed to build the visual CSS layer of an evo-web
+component from a design file, with real values — not visual approximations:
+
+- **Sizing, radii, spacing:** exact pixel values for every variant and size step
+- **Typography:** exact font family, weight, and size per variant
+- **Colors:** both token names and their resolved hex values
+- **All variants:** complete conditional logic across every type × size combination
+- **Token normalization:** a trivial fix to a known rendering artifact
+- **Documentation:** Playbook links and design descriptions included
+
+The only values that genuinely require sources other than Figma are interactive
+states and dark mode — both of which are design decisions that belong in the contract
+or a separate interaction spec, not in the static component design.
+
+**The `/evo-style-component` skill is viable as designed.** The Figma MCP provides
+sufficient fidelity to generate the skin SCSS visual layer without any manual
+measurement or guesswork.
diff --git a/.claude/skills/evo-create-component-manifest/references/manifest-schema.md b/.claude/skills/evo-create-component-manifest/references/manifest-schema.md
new file mode 100644
index 0000000000..32a1924685
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/references/manifest-schema.md
@@ -0,0 +1,971 @@
+# Manifest Schema Reference
+
+Derived from auditing the full evo-web component library across all three package layers
+(skin SCSS, evo-marko, evo-react) and the website accessibility docs. Every field here
+corresponds to something real components needed during implementation.
+
+## Source key
+
+Each field is tagged with where the value comes from:
+
+- **[CONTRACT]** — extract from the design contract
+- **[AUDIT]** — agent reads directly from `scripts/audit-output/components/<name>.json`; no human needed. When found: `confidence: high, source: audit` — do NOT log as a gap. When missing (new component not yet in audit): `confidence: medium, source: missing` — soft gap, not blocking.
+- **[INFER]** — agent infers from contract text or library conventions; always log as gap with `confidence: medium, source: inferred`
+- **[ENGINEER]** — requires human interpretation; cannot be derived from contract or audit data. Log as gap with `confidence: low, source: missing` — these are the only fields that should block Gate 2
+
+---
+
+## Full schema
+
+```json
+{
+  "$schema": "../manifest.schema.json",
+  "generatedAt": "<ISO 8601 timestamp>",
+
+  "component": {
+    "name": "<kebab-case tag name, e.g. evo-button>",        // [CONTRACT]
+    "displayName": "<human name, e.g. Button>",              // [CONTRACT]
+    "description": "<one-sentence purpose>",                 // [CONTRACT]
+    "category": "<storybook category, e.g. buttons>",        // [CONTRACT/INFER]
+    "designSystemVersion": "<from README header>"            // [ENGINEER]
+  },
+
+  "figmaUrl": "<URL or null>",
+  // [CONTRACT] — null is a valid first-class value when the contract predates the
+  // Figma design (PR 1 in the two-phase workflow). Do NOT log as a gap when the
+  // contract explicitly states null or "not yet available". Add an informational
+  // note instead: "figmaUrl will be populated in the visual-layer contract update."
+
+  "figma": {
+    // [SPEC] — populated from spec.metadata.figma when a *.spec.json is present.
+    // fileKey is always available from the spec; nodeId requires a full figmaUrl.
+    "fileKey": "<Figma file key string or null>",
+    "nodeId": "<node ID string (e.g. '1:2') or null>"
+  },
+
+  // ─── Root element ───────────────────────────────────────────────────────────
+  // What HTML element does the component render as its root?
+  // Critical for code gen — wrong element = wrong semantics + wrong pass-through.
+
+  "rootElement": {
+    "default": "<button | div | span | a | dialog | ...>",   // [INFER/ENGINEER]
+    "conditional": {
+      "condition": "<when this changes, e.g. 'href is provided'>",
+      "element": "<alternate element>"
+    },
+    "passthroughAttributes": "<which native attrs pass through, e.g. 'all <button> attributes'>",
+    "excludedAttributes": ["<attrs managed internally, e.g. 'role', 'aria-label'>"]
+  },
+
+  // ─── Props ──────────────────────────────────────────────────────────────────
+  // Visual and behavioral props. Do NOT include a11y text strings here — those
+  // go in a11yProps. Do NOT include state-lifting callbacks — those go in
+  // stateLiftingCallbacks.
+
+  "props": [
+    {
+      "name": "<prop name>",                                  // [CONTRACT]
+      "type": "<string | boolean | number | enum | function>",// [ENGINEER]
+      "values": ["<enum values>"],                            // [CONTRACT/INFER]
+      "default": "<default value or null>",                  // [CONTRACT/ENGINEER]
+      "required": false,                                      // [ENGINEER]
+      "description": "<what this controls>"                   // [CONTRACT]
+    }
+  ],
+
+  // ─── A11y props ─────────────────────────────────────────────────────────────
+  // SEPARATE from regular props. These are i18n-able accessibility text strings
+  // that must be overridable by consumers for localization.
+  // Examples: a11yLoadingText (button), a11yText (avatar), a11ySelectedText (listbox).
+  // The contract's Accessibility section should name these; if it doesn't, flag as gap.
+
+  "a11yProps": [
+    {
+      "name": "<prop name, e.g. a11yText>",                  // [CONTRACT/INFER]
+      "type": "<string | string | null>",                    // [ENGINEER]
+      "default": "<default English string or null>",         // [CONTRACT/INFER]
+      "required": false,                                      // [CONTRACT]
+      "allowNull": false,                                     // [ENGINEER]
+      "nullMeaning": "<what null means, if allowNull is true>",
+      "condition": "<when this prop is used, if conditional>",
+      "offscreenMethod": "clipped-span | aria-label | aria-labelledby",  // [ENGINEER]
+      "appendsToVisible": false,                             // [ENGINEER] true = appended after visible text (.clipped span)
+      "description": "<what is announced and when>"          // [CONTRACT]
+    }
+  ],
+
+  // ─── Slots ──────────────────────────────────────────────────────────────────
+  // Named content regions. In Marko these can be default slots or named AttrTag
+  // slots (<@image>, <@label>, etc.) which have a different implementation pattern.
+
+  "slots": [
+    {
+      "name": "<slot name>",                                  // [CONTRACT]
+      "type": "default | named-attrtag | named",             // [ENGINEER]
+      "markoSyntax": "<@name>",                              // [ENGINEER] (only for named-attrtag)
+      "passesThrough": "<which attrs pass to inner element>", // [ENGINEER]
+      "required": false,                                      // [CONTRACT]
+      "requiredReason": "functionality | accessibility | both", // [ENGINEER] only when required:true
+      "elementTypeOverride": "<prop name that overrides rendered element, e.g. 'as'>", // [ENGINEER] or omit
+      "decorative": false,                                   // [ENGINEER] true = CSS background-image, not announced by AT
+      "pinned": false,                                       // [ENGINEER] true = outside scrollable area
+      "description": "<what content goes here>"              // [CONTRACT]
+    }
+  ],
+
+  // ─── Nested slots ────────────────────────────────────────────────────────────
+  // When a slot's own definition contains named AttrTag sub-slots.
+  // Example: evo-tabs has `tab` slot, and each Tab definition has a `panel` sub-slot.
+
+  "nestedSlots": [                                           // omit if no nesting
+    {
+      "parentSlot": "<name of the parent slot>",             // [ENGINEER]
+      "childSlots": ["<names of nested slots within it>"],   // [ENGINEER]
+      "description": "<why this nesting exists>"             // [CONTRACT]
+    }
+  ],
+
+  // ─── Slot a11y props ─────────────────────────────────────────────────────────
+  // A11y text props that belong to a slot's interface, not the component root.
+  // Example: evo-textbox's postfixIcon slot has an a11yText prop that becomes
+  // aria-label on the inner button element.
+
+  "slotA11yProps": [                                         // omit if none
+    {
+      "slot": "<slot name>",                                 // [ENGINEER]
+      "prop": "<prop name, e.g. a11yText>",                  // [ENGINEER]
+      "appliedAs": "<aria-label | aria-labelledby | ...>",   // [ENGINEER]
+      "description": "<what this text announces>"            // [CONTRACT]
+    }
+  ],
+
+  // ─── Variants ───────────────────────────────────────────────────────────────
+  // Distinct rendering modes. For avatar: image / initials / signedOut / custom.
+  // For button: different bodyState renders different content.
+
+  "variants": [
+    {
+      "name": "<variant name>",                              // [CONTRACT]
+      "trigger": "<prop or condition that activates it>",    // [CONTRACT/INFER]
+      "description": "<what is rendered differently>"        // [CONTRACT]
+    }
+  ],
+
+  // ─── States ─────────────────────────────────────────────────────────────────
+  // Visual + ARIA states the component can enter.
+
+  "states": [
+    {
+      "name": "<state name>",                                // [CONTRACT]
+      "trigger": "<what causes this state>",                 // [CONTRACT]
+      "cssSelector": "<CSS selector, e.g. [disabled] or [aria-invalid='true']>",  // [ENGINEER]
+      "ariaAttribute": "<aria attribute added in this state, or null>",            // [ENGINEER]
+      "keyboardAccess": "full | focusable | none",           // [CONTRACT/ENGINEER]
+      "renderChange": "<what visually changes, if any>",     // [CONTRACT]
+      "description": "<plain English description>"           // [CONTRACT]
+    }
+  ],
+
+  // ─── A11y ───────────────────────────────────────────────────────────────────
+  // The accessibility contract. One of the most critical sections for code gen —
+  // wrong ARIA patterns produce inaccessible components.
+  //
+  // The design contract's Accessibility section should supply the plain-English
+  // answers. The skill translates those to the technical fields below.
+
+  "a11y": {
+    "role": "<ARIA role string or null>",                    // [CONTRACT→ENGINEER]
+    "explicitRole": false,                                   // [ENGINEER] true = role="" attr added
+    "labelStrategy": "content | aria-label-prop | aria-labelledby | aria-hidden | compound-labelledby",
+                                                             // [ENGINEER]
+                                                             // compound-labelledby = space-separated IDs
+                                                             //   that stitch external + internal elements
+    "focusable": true,                                       // [CONTRACT]
+    "focusableWhenDisabled": "<always | partiallyDisabled-only | never>", // [CONTRACT]
+    "tabOrder": "natural | manual | none",                   // [CONTRACT]
+
+    // Focus management (for overlays and widgets)
+    "focusTrap": "browser-native | javascript | none",       // [ENGINEER]
+    "initialFocus": "<where focus lands when component opens, e.g. 'first-item' | 'acknowledgement-button' | null>",
+                                                             // [CONTRACT]
+    "focusReturn": "<where focus returns on close; 'trigger-element' is most common; null if not applicable>",
+                                                             // [CONTRACT] — often a CALLER OBLIGATION
+
+    "screenReaderAnnouncement": "<what is announced, plain English>",  // [CONTRACT]
+
+    // ARIA attribute ownership — which are managed internally vs. caller passthrough
+    "ariaAttributeOwnership": {                              // [ENGINEER]
+      "managed": ["<aria-* attributes managed internally — caller MUST NOT set these>"],
+      "passthrough": ["<aria-* attributes the caller can set — merged or forwarded to root>"]
+    },
+
+    "ariaAttributes": [
+      {
+        "attr": "<aria-* attribute name>",                   // [AUDIT] marko.templateAriaUsages[].attr
+        "value": "<value or description>",                   // [AUDIT] marko.templateAriaUsages[].value
+        "condition": "<when applied>"                        // [INFER] from value expression; soft gap
+      }
+    ]
+  },
+
+  // ─── Widget role ────────────────────────────────────────────────────────────
+  // For components that implement a WAI-ARIA widget role system:
+  // menu + menuitem, tablist + tab + tabpanel, listbox + option, etc.
+  // Omit for simple interactive components (button, checkbox, switch).
+
+  "widgetRole": {                                            // omit if not a widget
+    "containerRole": "<role on the host element, e.g. listbox | menu | tablist>",  // [ENGINEER]
+    "itemRole": "<default role on each child, e.g. option | menuitem | tab>",      // [ENGINEER]
+    "itemRoleVariants": [                                    // only when role varies at runtime
+      {
+        "role": "<e.g. menuitemradio | menuitemcheckbox>",
+        "condition": "<e.g. 'selected prop is a single value' or 'selected prop is an array'>"
+      }
+    ],
+    "supportingRoles": ["<additional roles, e.g. tabpanel | separator>"],  // [ENGINEER]
+    "relatedRoles": {                                        // ARIA relationships between widget elements
+      "aria-controls": "<which element controls which>",
+      "aria-labelledby": "<cross-element labelling>",
+      "aria-selected": "<when used; NOTE: listbox/tabs use aria-selected, NOT aria-checked>",
+      "aria-checked": "<when used; NOTE: menu items use aria-checked, NOT aria-selected>",
+      "aria-expanded": "<which element carries aria-expanded and when>"
+    }
+  },
+
+  // ─── Keyboard model ─────────────────────────────────────────────────────────
+  // How keyboard navigation works inside this widget. Omit for simple components
+  // where native element semantics handle all keyboard behavior.
+  //
+  // focusStrategy decision guide:
+  //   roving-tabindex  → physical focus moves to each item (menu, tabs, listbox standalone)
+  //   aria-activedescendant → focus stays on host (combobox, grid — textbox must retain focus)
+
+  "keyboardModel": {                                         // omit for simple components
+    "focusStrategy": "roving-tabindex | aria-activedescendant | none",  // [ENGINEER]
+    "focusStrategyReason": "<why this strategy — e.g. 'physical focus for better SR support'>",
+    "autoSelect": {
+      "supported": false,                                    // [CONTRACT]
+      "prop": "<prop name that enables auto-select>",
+      "description": "<auto-select = arrow key navigation also selects; manual = SPACE/ENTER needed>"
+    },
+    "wraps": false,                                          // [ENGINEER] navigation wraps at list ends
+    "keys": [
+      {
+        "key": "<key, e.g. Escape | Home | End>",
+        "action": "<plain English>",
+        "condition": "<when>"
+      }
+    ],
+    "typeahead": {
+      "supported": false,                                    // [ENGINEER]
+      "timeoutMs": 2000,                                     // [ENGINEER]
+      "implementation": "evo-typeahead | custom | none"
+    }
+  },
+
+  // ─── State-lifting callbacks ─────────────────────────────────────────────────
+  // Callbacks that synchronize internal state to the parent. NOT DOM events.
+  // Pattern: indexChange, openChange, selectedChange — called with a plain value
+  // (number, boolean, string/array), not a DOM Event object.
+  // Distinguish from `events` which are custom DOM-event-like callbacks (onEscape).
+
+  "stateLiftingCallbacks": [                                 // omit if none
+    {
+      "name": "<e.g. indexChange | openChange | selectedChange>",  // [ENGINEER]
+      "signature": "<TypeScript, e.g. (index: number) => void>",   // [ENGINEER]
+      "stateLifted": "<plain English — what state is being synced>",  // [CONTRACT]
+      "defaultBehavior": "<what happens internally if the callback is not provided>"  // [ENGINEER]
+    }
+  ],
+
+  // ─── Dual output ─────────────────────────────────────────────────────────────
+  // When a component renders both a custom accessible widget AND a hidden native
+  // form control. Example: evo-listbox renders div[role=listbox] + select[hidden].
+
+  "dualOutput": null,                                        // or:
+  // "dualOutput": {
+  //   "customElement": "<e.g. div[role=listbox]>",          // [ENGINEER]
+  //   "nativeElement": "<e.g. select[hidden]>",             // [ENGINEER]
+  //   "syncProp": "<prop that drives both, e.g. selected>", // [ENGINEER]
+  //   "purpose": "<why native element exists>"              // [ENGINEER]
+  // },
+
+  // ─── Floating positioner ─────────────────────────────────────────────────────
+  // For components with floating overlays (menu, tooltip, listbox-button, combobox).
+  // Captures positioning implementation so code gen writes correct import/setup.
+
+  "floatingPositioner": null,                                // or:
+  // "floatingPositioner": {
+  //   "implementation": "evo-expander | browser-anchor | none",  // [ENGINEER]
+  //   "library": "<e.g. @floating-ui/dom>",               // [ENGINEER]
+  //   "placement": "<e.g. bottom-start>",                  // [CONTRACT/ENGINEER]
+  //   "strategy": "fixed | absolute",                      // [CONTRACT/ENGINEER]
+  //   "triggerElement": "<which element anchors the overlay>"  // [ENGINEER]
+  // },
+
+  // ─── Caller obligations ──────────────────────────────────────────────────────
+  // A11y requirements imposed on the consumer that the component CANNOT enforce.
+  // If not met by the caller, the component will not satisfy WCAG 2.2 AA.
+  // Critical to surface clearly — these will become blocking 🔴 gap entries.
+
+  "callerObligations": [                                     // omit if none
+    {
+      "category": "form-context | label | heading-structure | focus-management | open-trigger | icon-treatment | live-region | other",
+      "description": "<plain English — what the caller must do>",  // [CONTRACT]
+      "wcagCriterion": "<e.g. 1.3.1 | 4.1.2 | 2.4.3>",           // [ENGINEER]
+      "consequence": "<what breaks if this obligation is not met>"  // [ENGINEER]
+    }
+  ],
+
+  // ─── Internal data protocol ──────────────────────────────────────────────────
+  // data-* attributes placed on child elements by the component for internal
+  // coordination with internal tags (e.g. evo-roving-tabindex reads data-value).
+  // Invisible to consumers but necessary for code gen to reproduce the pattern.
+
+  "internalDataProtocol": [                                  // omit if none
+    {
+      "attribute": "<data-* name, e.g. data-value>",         // [ENGINEER]
+      "purpose": "<which internal tag reads it and why>",    // [ENGINEER]
+      "appliedTo": "<which child element gets this attribute>"  // [ENGINEER]
+    }
+  ],
+
+  // ─── Keyboard interactions ───────────────────────────────────────────────────
+  // Explicit key-to-action mapping. Native button Space/Enter don't need listing.
+  // Only non-obvious or custom interactions belong here.
+  // NOTE: Widget arrow-key navigation goes in keyboardModel, not here.
+
+  "keyboardInteractions": [
+    {
+      "key": "<key name, e.g. Escape>",                      // [CONTRACT]
+      "action": "<what happens in plain English>",           // [CONTRACT]
+      "condition": "<when this fires>",                      // [CONTRACT]
+      "emittedEvent": "<callback name if any, e.g. onEscape>"  // [ENGINEER]
+    }
+  ],
+
+  // ─── Events ─────────────────────────────────────────────────────────────────
+  // Custom DOM-event-like callbacks (onEscape, onLoadError, onAnimationEnd).
+  // These receive a DOM Event object or equivalent.
+  // DO NOT put state-lifting callbacks here (openChange, indexChange) — those
+  // go in stateLiftingCallbacks above.
+
+  "events": [
+    {
+      "name": "<event name, e.g. onEscape>",                 // [CONTRACT/INFER]
+      "signature": "<TypeScript signature>",                 // [ENGINEER]
+      "trigger": "<plain English trigger>",                  // [CONTRACT]
+      "condition": "<when this fires>"                       // [CONTRACT]
+    }
+  ],
+
+  // ─── BEM ────────────────────────────────────────────────────────────────────
+  // Read from audit snapshot: skin.bemBlocks → block, skin.bemElements → elements,
+  // skin.bemModifiers → modifiers. alternateBlock still requires engineer interpretation.
+
+  "bem": {
+    "block": "<BEM block class, e.g. btn>",                  // [AUDIT] skin.bemBlocks[0]
+    "alternateBlock": "<alternate block if root el changes>",// [ENGINEER] requires reading template
+    "alternateBlockCondition": "<when alternate block applies>",  // [ENGINEER]
+    "elements": [
+      { "name": "<element name>", "description": "<purpose>" }   // [AUDIT] skin.bemElements[]
+    ],
+    "modifiers": [
+      { "name": "<modifier name>", "description": "<what changes>" }  // [AUDIT] skin.bemModifiers[]
+    ]
+  },
+
+  // ─── Design tokens ──────────────────────────────────────────────────────────
+
+  "tokens": {
+    // [SPEC] — named map from semantic purpose → CSS custom property name.
+    // Sourced from spec.tokens, with dot-notation translated to kebab + "--" prefix.
+    // e.g. spec "background": "color.background.primary" → "background": "--color-background-primary"
+    // This is the primary input to evo-style-component for SCSS generation.
+    // Example:
+    // "background": "--color-background-primary",
+    // "border": "--color-border-subtle",
+    // "titlePaddingVertical": "--spacing-200",
+    // "titleTypography": "--typography-title2"
+  },
+
+  "designTokens": ["<--css-custom-property-name>"],          // [AUDIT] skin.cssCustomProperties[]
+
+  // ─── Behaviors ──────────────────────────────────────────────────────────────
+  // Non-obvious algorithms or runtime logic the code generator cannot infer.
+  // Standard behavior kinds (use these names for consistency):
+  //   animationGatedClose   — two-phase close: state → animation → DOM close
+  //   typeaheadSearch       — character accumulation + timeout + match algorithm
+  //   lightDismiss          — closedby attribute or click-outside close
+  //   collapseOnSelect      — auto-close overlay after item selection
+  //   reactiveVisibility    — element shown/hidden based on reactive state (not CSS only)
+  //   dualOutputSync        — hidden native element mirrors custom widget state
+  //   colorDerived          — computed value from hash/algorithm
+
+  "behaviors": [
+    {
+      "name": "<behavior name — use standard kinds above where possible>",
+      "description": "<plain English>",                      // [CONTRACT]
+      "algorithm": "<implementation detail if needed>"       // [ENGINEER]
+    }
+  ],
+
+  // ─── Dependencies ───────────────────────────────────────────────────────────
+  // Read from audit snapshot: marko.subComponents → component entries,
+  // marko.internalImports → internal-tag entries.
+  // Icon entries (evo-icon-*) are a subset of subComponents — filter by name prefix.
+  // usedWhen requires reading the template; default to 'always' and log as soft gap.
+
+  "dependencies": [
+    {
+      "type": "component | icon | internal-tag",             // [AUDIT] derived from name prefix
+      "name": "<evo-component-name or evo-internal-tag>",    // [AUDIT] marko.subComponents[]
+      "usedWhen": "<condition or 'always'>"                  // [INFER] default 'always'; engineer refines
+    }
+  ],
+
+  // ─── RTL ────────────────────────────────────────────────────────────────────
+  // RTL and color/spacing are Skin-layer invariants — always required by convention.
+  // Read from audit snapshot: skin.rtlOverrides (boolean) and skin.stateSelectors
+  // for any [dir="rtl"] entries. Do NOT ask the contract to specify this.
+
+  "rtl": {
+    "notes": "<what changes in RTL>"  // [AUDIT] skin.rtlOverrides + skin.stateSelectors
+  },
+
+  // ─── Storybook ──────────────────────────────────────────────────────────────
+
+  "storybook": {
+    "category": "<Storybook title path, e.g. buttons/evo-button>",  // [ENGINEER]
+    "stories": [
+      { "name": "<story name>", "description": "<what it demonstrates>" }
+    ]
+  },
+
+  // ─── Gaps ───────────────────────────────────────────────────────────────────
+
+  "gaps": [
+    {
+      "field": "<dot-path, e.g. a11y.role | callerObligations[0]>",
+      "assumed": "<value used or null>",
+      "confidence": "high | medium | low",
+      "source": "inferred | missing",
+      "note": "<what the engineer needs to confirm or provide>"
+    }
+  ]
+}
+```
+
+---
+
+## Real component examples
+
+### evo-button — baseline simple interactive
+
+```json
+{
+  "rootElement": {
+    "default": "button",
+    "conditional": { "condition": "href prop provided", "element": "a" },
+    "passthroughAttributes": "all native <button> and <a> attributes",
+    "excludedAttributes": ["aria-label (overridden in loading state)", "type (managed internally)"]
+  },
+  "a11yProps": [
+    {
+      "name": "a11yLoadingText",
+      "type": "string",
+      "default": "loading",
+      "required": false,
+      "offscreenMethod": "aria-label",
+      "appendsToVisible": false,
+      "condition": "replaces aria-label when bodyState='loading'",
+      "description": "Localized text announced by screen readers when button is in loading state"
+    }
+  ],
+  "a11y": {
+    "role": null,
+    "explicitRole": false,
+    "labelStrategy": "content",
+    "focusable": true,
+    "focusableWhenDisabled": "partiallyDisabled-only",
+    "tabOrder": "natural",
+    "focusTrap": "none",
+    "ariaAttributeOwnership": {
+      "managed": ["aria-label (overridden in loading state)", "aria-disabled (from partiallyDisabled)"],
+      "passthrough": ["aria-controls", "aria-expanded", "aria-pressed", "aria-haspopup"]
+    },
+    "ariaAttributes": [
+      { "attr": "aria-disabled", "value": "true", "condition": "partiallyDisabled=true" },
+      { "attr": "aria-label", "value": "a11yLoadingText value", "condition": "bodyState='loading'" }
+    ]
+  },
+  "bem": { "block": "btn", "alternateBlock": "fake-btn", "alternateBlockCondition": "href prop provided" },
+  "dependencies": [
+    { "type": "component", "name": "evo-progress-spinner", "usedWhen": "bodyState='loading'" },
+    { "type": "icon", "name": "evo-icon-chevron-down-16", "usedWhen": "bodyState='expand'" }
+  ]
+}
+```
+
+### evo-avatar — baseline simple presentational
+
+```json
+{
+  "rootElement": {
+    "default": "div",
+    "excludedAttributes": ["role (hardcoded 'img')", "aria-label (managed by a11yText)"]
+  },
+  "a11yProps": [
+    {
+      "name": "a11yText",
+      "type": "string | null",
+      "default": null,
+      "required": true,
+      "allowNull": true,
+      "nullMeaning": "Parent element provides accessibility via its own label",
+      "offscreenMethod": "aria-label",
+      "appendsToVisible": false,
+      "description": "aria-label. Typically 'Signed in as [name]' or 'Signed out'. Pass null ONLY if a parent already labels this element."
+    }
+  ],
+  "slots": [
+    {
+      "name": "image",
+      "type": "named-attrtag",
+      "markoSyntax": "<@image>",
+      "passesThrough": "all <img> attributes except alt (forced to empty string)",
+      "required": false
+    }
+  ],
+  "a11y": {
+    "role": "img",
+    "explicitRole": true,
+    "labelStrategy": "aria-label-prop",
+    "focusable": false,
+    "tabOrder": "none",
+    "focusTrap": "none",
+    "screenReaderAnnouncement": "Value of a11yText (e.g. 'Signed in as Elizabeth')"
+  },
+  "behaviors": [
+    {
+      "name": "colorDerived",
+      "description": "Background color for initials variant derived from username hash",
+      "algorithm": "djb2 hash of username mod 8 → one of 8 preset colors"
+    },
+    {
+      "name": "imageFitDetection",
+      "description": "After image loads, natural aspect ratio determines object-fit (contain vs cover)"
+    }
+  ]
+}
+```
+
+### evo-textbox — form input with validation
+
+```json
+{
+  "rootElement": {
+    "default": "span (or div when fluid=true)",
+    "conditional": { "condition": "multiline=true", "element": "inner control changes from input to textarea" },
+    "passthroughAttributes": "all <input> / <textarea> attributes on the control element"
+  },
+  "props": [
+    { "name": "invalid", "type": "boolean", "required": false, "description": "Triggers aria-invalid='true' on control AND textbox--invalid CSS modifier on wrapper" },
+    { "name": "multiline", "type": "boolean", "default": false, "required": false, "description": "Switches inner element from <input> to <textarea>" }
+  ],
+  "a11yProps": [],
+  "slots": [
+    { "name": "prefixIcon", "type": "named-attrtag", "decorative": true, "description": "Icon before the input — aria-hidden by evo-icon, purely visual" },
+    { "name": "prefixText", "type": "named-attrtag", "description": "Text before the input — receives a generated ID and linked to control via aria-describedby" },
+    { "name": "postfixText", "type": "named-attrtag", "description": "Text after the input — same aria-describedby pattern as prefixText" },
+    {
+      "name": "postfixIcon",
+      "type": "named-attrtag",
+      "required": false,
+      "description": "Icon button after the input — renders as <button> when a11yText is provided"
+    }
+  ],
+  "slotA11yProps": [
+    {
+      "slot": "postfixIcon",
+      "prop": "a11yText",
+      "appliedAs": "aria-label on the inner <button> element",
+      "description": "Label for the postfix action button (e.g. 'Clear input', 'Show password')"
+    }
+  ],
+  "states": [
+    {
+      "name": "invalid",
+      "trigger": "invalid=true",
+      "cssSelector": ".textbox--invalid, input[aria-invalid='true']",
+      "ariaAttribute": "aria-invalid='true'",
+      "keyboardAccess": "full",
+      "renderChange": "Red border on wrapper; validation styles on control",
+      "description": "Indicates the input value failed validation"
+    }
+  ],
+  "a11y": {
+    "role": null,
+    "explicitRole": false,
+    "labelStrategy": "aria-labelledby",
+    "focusable": true,
+    "tabOrder": "natural",
+    "focusTrap": "none",
+    "ariaAttributeOwnership": {
+      "managed": ["aria-invalid (from invalid prop)", "aria-describedby (auto-computed from slot IDs)"],
+      "passthrough": ["aria-label", "aria-required", "aria-disabled", "aria-errormessage"]
+    },
+    "ariaAttributes": [
+      { "attr": "aria-invalid", "value": "true", "condition": "invalid=true" },
+      { "attr": "aria-describedby", "value": "auto-computed space-joined IDs of prefixText + postfixText slots", "condition": "prefixText or postfixText slot is used" }
+    ]
+  },
+  "callerObligations": [
+    {
+      "category": "label",
+      "description": "Must provide a visible <label> with for= matching the textbox id. Placeholder text is NOT a substitute for a label.",
+      "wcagCriterion": "1.3.1",
+      "consequence": "Screen reader will not announce the textbox purpose"
+    },
+    {
+      "category": "label",
+      "description": "Error message element must exist in the DOM and be referenced by the textbox's aria-describedby. The component does not create the error message element.",
+      "wcagCriterion": "3.3.1",
+      "consequence": "Screen reader announces invalid state but cannot describe the error"
+    },
+    {
+      "category": "form-context",
+      "description": "Add novalidate to the parent <form> to suppress browser built-in validation UI",
+      "wcagCriterion": "3.3.1",
+      "consequence": "Browser and design system both show conflicting validation messages"
+    }
+  ],
+  "behaviors": [
+    {
+      "name": "reactiveVisibility",
+      "description": "Placeholder is only shown when the input is focused AND the value is empty — not the native browser placeholder behavior",
+      "algorithm": "focused state + value state reactive: currentPlaceholder = (placeholder && focused && !value ? placeholder : '')"
+    }
+  ]
+}
+```
+
+### evo-tabs — navigation widget
+
+```json
+{
+  "rootElement": { "default": "div", "passthroughAttributes": "all <div> attributes" },
+  "props": [
+    { "name": "activation", "type": "enum", "values": ["auto", "manual"], "default": "auto", "description": "auto: arrow key moves focus AND selects; manual: arrow key moves focus, SPACE/ENTER selects" },
+    { "name": "index", "type": "number", "required": false, "description": "Currently selected tab index (controlled)" }
+  ],
+  "slots": [
+    {
+      "name": "tab",
+      "type": "named-attrtag",
+      "required": false,
+      "description": "Each tab. The tab's content renders in the tab button; panel sub-slot renders the panel content"
+    }
+  ],
+  "nestedSlots": [
+    {
+      "parentSlot": "tab",
+      "childSlots": ["panel"],
+      "description": "Each tab AttrTag contains a panel AttrTag for the tab panel content"
+    }
+  ],
+  "widgetRole": {
+    "containerRole": "tablist",
+    "itemRole": "tab",
+    "supportingRoles": ["tabpanel"],
+    "relatedRoles": {
+      "aria-controls": "Each tab has aria-controls pointing to its panel's generated ID",
+      "aria-selected": "aria-selected='true' on active tab; omitted on inactive tabs",
+      "aria-labelledby": "Each tabpanel has aria-labelledby pointing to its tab's generated ID"
+    }
+  },
+  "keyboardModel": {
+    "focusStrategy": "roving-tabindex",
+    "focusStrategyReason": "Physical focus provides better cross-browser screen reader support for tab navigation",
+    "autoSelect": {
+      "supported": true,
+      "prop": "activation",
+      "description": "activation='auto': arrow key navigation also selects. activation='manual': SPACE or ENTER required to select."
+    },
+    "wraps": true,
+    "keys": [],
+    "typeahead": { "supported": false }
+  },
+  "stateLiftingCallbacks": [
+    {
+      "name": "indexChange",
+      "signature": "(index: number) => void",
+      "stateLifted": "Currently selected tab index",
+      "defaultBehavior": "Index state managed internally when callback not provided"
+    }
+  ],
+  "a11y": {
+    "role": null,
+    "explicitRole": false,
+    "labelStrategy": "aria-labelledby",
+    "focusable": true,
+    "tabOrder": "manual",
+    "focusTrap": "none",
+    "screenReaderAnnouncement": "Tab list with N tabs. Selected tab announced as 'Tab label, tab, N of M, selected'. Panel announced as 'Tab label, tab panel'."
+  },
+  "callerObligations": [
+    {
+      "category": "heading-structure",
+      "description": "A visible heading must immediately precede the tablist in the DOM. The heading level determines the offscreen heading level required inside each panel.",
+      "wcagCriterion": "1.3.1",
+      "consequence": "Document heading structure breaks — AT users cannot understand page hierarchy"
+    },
+    {
+      "category": "heading-structure",
+      "description": "Each tab panel SHOULD contain an offscreen heading at exactly one level below the preceding heading. Heading text must match the tab text.",
+      "wcagCriterion": "1.3.1",
+      "consequence": "Screen reader users lose heading structure navigation inside panels"
+    }
+  ]
+}
+```
+
+### evo-dialog — overlay with native focus trap
+
+```json
+{
+  "rootElement": { "default": "dialog (native HTML element)" },
+  "props": [
+    { "name": "open", "type": "boolean", "required": false, "description": "Controls visibility. When true, calls showModal(). When false, triggers exit animation then el.close()." },
+    { "name": "size", "type": "enum", "values": ["wide", "narrow", "large"], "description": "Dialog width variant" }
+  ],
+  "slots": [
+    { "name": "header", "type": "named-attrtag", "required": true, "requiredReason": "accessibility", "elementTypeOverride": "as", "description": "Dialog title. Renders as <h2> by default. Receives auto-generated ID for aria-labelledby." },
+    { "name": "close", "type": "named-attrtag", "required": true, "requiredReason": "accessibility", "description": "Dismiss button (icon-button). Required by a11y guidelines — dialog must contain a dismiss button." },
+    { "name": "banner", "type": "named-attrtag", "required": false, "decorative": true, "description": "Expressive header image. Rendered as CSS background-image on a div — not announced by AT." },
+    { "name": "footer", "type": "named-attrtag", "required": false, "description": "Footer action area" },
+    { "name": "previous", "type": "named-attrtag", "required": false, "description": "Back navigation button for multi-step dialogs" }
+  ],
+  "stateLiftingCallbacks": [
+    {
+      "name": "openChange",
+      "signature": "(open: boolean) => void",
+      "stateLifted": "Dialog open/closed state",
+      "defaultBehavior": "Open state managed internally"
+    }
+  ],
+  "a11y": {
+    "role": null,
+    "explicitRole": false,
+    "labelStrategy": "aria-labelledby",
+    "focusable": true,
+    "tabOrder": "manual",
+    "focusTrap": "browser-native",
+    "initialFocus": "First interactive element inside dialog (browser-native showModal behavior)",
+    "focusReturn": "Trigger element — CALLER OBLIGATION, not handled by component",
+    "ariaAttributeOwnership": {
+      "managed": ["aria-labelledby (auto-computed from header slot ID, extensible)"],
+      "passthrough": ["aria-describedby"]
+    },
+    "ariaAttributes": [
+      { "attr": "aria-labelledby", "value": "header slot generated ID (caller can prepend additional IDs)", "condition": "always" }
+    ]
+  },
+  "callerObligations": [
+    {
+      "category": "focus-management",
+      "description": "Caller must return focus to the trigger element when the dialog closes. The component does not handle focus return.",
+      "wcagCriterion": "2.4.3",
+      "consequence": "After dialog closes, focus is lost or lands in an unexpected location"
+    },
+    {
+      "category": "open-trigger",
+      "description": "Dialog must be opened on click-event of button or via application event only. Must NOT open on hover or focus.",
+      "wcagCriterion": "3.2.1",
+      "consequence": "WCAG violation — unexpected change of context on focus/hover"
+    },
+    {
+      "category": "heading-structure",
+      "description": "Dialog heading must start at level 2 (h2). The header slot renders h2 by default; use header.as to override only if the document context requires a different level.",
+      "wcagCriterion": "1.3.1",
+      "consequence": "Heading hierarchy inside dialog is incorrect"
+    }
+  ],
+  "behaviors": [
+    {
+      "name": "animationGatedClose",
+      "description": "Two-phase close: (1) open=false adds dialog--close class and starts exit animation; (2) onAnimationEnd fires and calls el.close() to remove from DOM/AT",
+      "algorithm": "onCancel: preventDefault + open=false. onAnimationEnd: if !open then el.close()"
+    },
+    {
+      "name": "lightDismiss",
+      "description": "closedby='any' enables browser-native light dismiss (Escape key or click outside). NOTE: closedby is an emerging HTML attribute — not yet widely supported.",
+      "algorithm": "closedby prop defaults to 'any'; set to 'closerequest' or 'none' to restrict"
+    }
+  ]
+}
+```
+
+### evo-listbox — complex interactive widget
+
+```json
+{
+  "rootElement": { "default": "div" },
+  "a11yProps": [
+    {
+      "name": "a11ySelectedText",
+      "type": "string",
+      "default": "selected",
+      "required": false,
+      "allowNull": false,
+      "offscreenMethod": "clipped-span",
+      "appendsToVisible": true,
+      "description": "Visually hidden text appended inside selected option element. Announces selection state to screen readers without relying on the visual checkmark."
+    }
+  ],
+  "slots": [
+    {
+      "name": "option",
+      "type": "named-attrtag",
+      "required": false,
+      "description": "Each list option. Value prop identifies the option; disabled prop marks it inert."
+    }
+  ],
+  "widgetRole": {
+    "containerRole": "listbox",
+    "itemRole": "option",
+    "relatedRoles": {
+      "aria-selected": "aria-selected='true' on selected option. Omitted (NOT 'false') on unselected options.",
+      "aria-disabled": "aria-disabled='true' on disabled options (not native disabled — allows focus)"
+    }
+  },
+  "keyboardModel": {
+    "focusStrategy": "roving-tabindex",
+    "focusStrategyReason": "Physical focus chosen over aria-activedescendant for better cross-browser screen reader support. NOTE: older documentation describes aria-activedescendant — the implementation intentionally differs.",
+    "autoSelect": {
+      "supported": true,
+      "prop": "listSelection",
+      "description": "listSelection='auto': arrow key navigation also selects. listSelection='manual': SPACE/ENTER required."
+    },
+    "wraps": true,
+    "typeahead": { "supported": true, "timeoutMs": 2000, "implementation": "evo-typeahead" }
+  },
+  "dualOutput": {
+    "customElement": "div[role=listbox]",
+    "nativeElement": "select[hidden]",
+    "syncProp": "selected",
+    "purpose": "Form submission — the hidden native select carries the selected value to the server when the listbox is inside a <form>"
+  },
+  "internalDataProtocol": [
+    {
+      "attribute": "data-value",
+      "purpose": "Read by evo-roving-tabindex to identify items by value string rather than by DOM index",
+      "appliedTo": "Each option div element"
+    }
+  ],
+  "a11y": {
+    "focusTrap": "none",
+    "ariaAttributeOwnership": {
+      "managed": ["role (listbox/option)", "aria-selected", "aria-disabled", "tabindex"],
+      "passthrough": ["aria-label", "aria-labelledby"]
+    }
+  }
+}
+```
+
+### evo-menu-button — compound trigger + widget
+
+```json
+{
+  "widgetRole": {
+    "containerRole": "menu",
+    "itemRole": "menuitem",
+    "itemRoleVariants": [
+      { "role": "menuitemradio", "condition": "selected prop is a single number or string value" },
+      { "role": "menuitemcheckbox", "condition": "selected prop is an array" }
+    ],
+    "supportingRoles": ["separator"],
+    "relatedRoles": {
+      "aria-checked": "Applied to menuitemradio and menuitemcheckbox items. ALWAYS present when checkable — aria-checked='true' or aria-checked='false'. NOTE: aria-checked NOT aria-selected (menu uses checked; listbox uses selected).",
+      "aria-haspopup": "aria-haspopup='true' on trigger button",
+      "aria-expanded": "aria-expanded='true'/'false' on trigger button, driven by evo-expander"
+    }
+  },
+  "keyboardModel": {
+    "focusStrategy": "roving-tabindex",
+    "focusStrategyReason": "Menu is a pure command widget — no text input — so physical focus movement is correct",
+    "wraps": true,
+    "typeahead": { "supported": true, "timeoutMs": 2000, "implementation": "evo-typeahead" },
+    "keys": [
+      { "key": "Escape", "action": "Closes the menu overlay", "condition": "Menu is open" }
+    ]
+  },
+  "floatingPositioner": {
+    "implementation": "evo-expander",
+    "library": "@floating-ui/dom",
+    "placement": "bottom-start (default) or bottom-end (when reverse=true)",
+    "strategy": "fixed",
+    "triggerElement": "The trigger button element ($root span)"
+  },
+  "stateLiftingCallbacks": [
+    {
+      "name": "openChange",
+      "signature": "(open: boolean) => void",
+      "stateLifted": "Menu open/closed state",
+      "defaultBehavior": "Open state managed internally"
+    },
+    {
+      "name": "selectedChange",
+      "signature": "(selected: Index) => void",
+      "stateLifted": "Currently selected item value(s)",
+      "defaultBehavior": "Selection state managed internally"
+    }
+  ],
+  "a11y": {
+    "labelStrategy": "compound-labelledby",
+    "focusTrap": "none",
+    "initialFocus": "First item in the menu (menu container itself does not receive focus)",
+    "ariaAttributeOwnership": {
+      "managed": ["aria-haspopup", "aria-expanded", "aria-labelledby (on trigger, when prefixId provided)"],
+      "passthrough": []
+    }
+  },
+  "behaviors": [
+    {
+      "name": "collapseOnSelect",
+      "description": "When collapseOnSelect=true, the menu closes automatically after an item is clicked",
+      "algorithm": "onClick on evo-menu: if collapseOnSelect then open=false"
+    }
+  ],
+  "callerObligations": [
+    {
+      "category": "label",
+      "description": "The trigger button's accessible label must always reflect its current function. When prefixId is provided, aria-labelledby concatenates the external prefix element with the internal value span.",
+      "wcagCriterion": "4.1.2",
+      "consequence": "Screen reader announces a label that does not reflect the current state/value"
+    }
+  ]
+}
+```
+
+---
+
+## What the design contract should explicitly supply
+
+Fields marked `[CONTRACT]` cannot be inferred without the contract. Critical gaps
+that prevent the skill from producing a useful manifest:
+
+1. **A11y props** — list every required text string with its default English value
+2. **Keyboard interactions** — explicit key → action table
+3. **Focusability** — is this component focusable? what happens when disabled?
+4. **Screen reader announcement** — what exactly does a screen reader say?
+5. **Slot types** — are named slots structured markup (AttrTag) or free content?
+6. **Widget role** — for interactive widgets: is this a listbox? menu? tab widget?
+8. **Caller obligations** — what must the page/consumer provide that the component cannot enforce?
+9. **Open/close trigger rules** — what opens/closes this component; is light dismiss allowed?
+10. **Initial focus placement** — where should focus go when this component opens?
+11. **Focus return** — where should focus return when this component closes?
+12. **Toggle state strategy** — for toggle controls: aria-pressed or visible text? (mutually exclusive)
+13. **Form context** — must this component be inside a `<form>` with a submit button?
+
+See `contract-template-additions.md` for the proposed contract section additions.
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/README.md b/.claude/skills/evo-create-component-manifest/scripts/audit-output/README.md
new file mode 100644
index 0000000000..545603e2df
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/README.md
@@ -0,0 +1,216 @@
+# Audit Output
+
+Static analysis and human/agent analysis of the full evo-web component library,
+produced as part of a comprehensive 5-phase audit. The outputs here drive the
+`/evo-create-component-manifest` skill — specifically the `[AUDIT]` source tier,
+which lets the agent fill manifest fields directly from codebase data rather than
+waiting for a human engineer.
+
+---
+
+## Background
+
+### Why this audit exists
+
+The manifest skill generates `manifest.json` from a design contract. Many fields in
+that manifest — BEM classes, CSS tokens, ARIA attributes, dependencies — are not in
+the design contract; they live in the codebase. Before this audit, those fields were
+tagged `[ENGINEER]`, meaning a human had to fill them in at Gate 2. The audit
+eliminates most of that by giving the agent a pre-built snapshot of the entire library.
+
+### What was audited
+
+Every component across three package layers (52 components total in evo-marko):
+
+| Package | Path | What it contains |
+|---|---|---|
+| `@evo-web/marko` | `packages/evo-marko/src/tags/` | Marko 6 components — TypeScript `Input` interfaces, template markup, skin imports |
+| `@ebay/skin` | `packages/skin/src/sass/` | Pure CSS/SCSS — BEM classes, CSS custom properties, state selectors, RTL overrides |
+| `@evo-web/react` | `packages/evo-react/src/` | React 19 ESM components — currently only `evo-button` and `evo-icon` |
+
+The audit also scanned the website docs at `src/routes/_index/components/` and
+`src/routes/_index/accessibility/` for a11y guidance that is documented but not
+derivable from source code.
+
+### How the packages relate
+
+```
+@ebay/skin  ←  CSS foundation (BEM classes, design tokens, RTL)
+     ↑
+@evo-web/marko  ←  Marko 6 wrapper; imports skin CSS, adds TypeScript interface,
+                    renders accessible markup, wires up keyboard behavior
+     ↑
+@evo-web/react  ←  React 19 wrapper; same skin imports, different framework
+```
+
+evo-marko components import their skin module in `style.ts`
+(e.g. `import "@ebay/skin/button"`). That import is the link between a Marko component
+and its BEM/token/RTL data in the skin package. The script follows that import to
+associate the right skin module with each component.
+
+---
+
+## How the data was produced
+
+### Machine-extracted: `component-audit.js`
+
+The script at `../component-audit.js` performs static analysis — no component is
+imported or executed. It uses regex and bracket-counting to parse TypeScript and SCSS
+source files directly.
+
+**Per evo-marko component** (`packages/evo-marko/src/tags/<name>/`):
+
+- `style.ts` → skin module name (e.g. `@ebay/skin/button` → `button`)
+- `index.marko` → TypeScript `export interface Input` block parsed with depth-aware
+  splitting; props categorized by name pattern:
+  - `a11y*` → `a11yProps`
+  - `aria-*` → `ariaProps`
+  - `on[A-Z]*` → `eventCallbacks`
+  - types containing `Marko.AttrTag<` → `attrTagSlots`
+  - everything else → `regularProps`
+- `index.marko` → non-`Input` helper interfaces (e.g. `Tab`, `Option`, `Item`)
+  that define child slot types
+- `index.marko` → template body scanned for `<evo-*` tag usages (sub-components),
+  `import ... from "<evo-*>"` (static imports), `aria-*=` assignments, `role=` assignments
+
+**Per skin module** (`packages/skin/src/sass/<module>/`):
+
+- All `.scss` files concatenated and scanned for:
+  - BEM class names split into blocks, elements, modifiers
+  - `var(--...)` usages → CSS custom properties consumed
+  - `:root { --... }` definitions → CSS custom properties defined (overridable tokens)
+  - `[aria-*]`, `[disabled]`, `[hidden]`, `[role]`, etc. → state selectors
+  - `[dir="rtl"]` → boolean RTL flag
+
+**Per evo-react component** (`packages/evo-react/src/<name>/`):
+
+- TypeScript interface bodies parsed for prop names and types
+- `aria-*=` usages in JSX scanned
+- `@ebay/makeup-*` imports scanned (none found currently)
+
+Re-run the script any time components are added or changed:
+
+```bash
+node .claude/skills/evo-create-component-manifest/scripts/component-audit.js
+```
+
+### Human/agent-analyzed: phase documents
+
+Five phases of analysis were conducted on top of the machine data:
+
+| Phase | Method | Output |
+|---|---|---|
+| 1 | Script run | `components/*.json` + `summary.json` |
+| 2 | Pattern analysis of script output | `phase2-categorization.md` |
+| 3 | Deep read of 5 component source files + docs | `phase3-deep-audit.md` |
+| 4 | Scan of 76 component a11y pages + technique library | `phase4-docs-mining.md` |
+| 5 | Schema updates | Edits to `references/manifest-schema.md`, `SKILL.md`, `contract-template-additions.md` |
+
+---
+
+## Files
+
+### `components/<name>.json` — per-component static analysis
+
+One file per evo-marko component. All 52 components from `packages/evo-marko/src/tags/`
+are represented. The `skin` and `react` sections are absent (or `hasImplementation: false`)
+when no counterpart exists in those packages.
+
+| Field | Source file | What was extracted |
+|---|---|---|
+| `marko.skinImports` | `style.ts` | `import "@ebay/skin/..."` — links component to its skin module |
+| `marko.makeupImports` | `index.marko` | `@ebay/makeup-*` imports (none found in current library; evo-marko uses internal tags instead) |
+| `marko.internalImports` | `index.marko` | Static `import ... from "<evo-*>"` (e.g. `<evo-icon-button>`) |
+| `marko.subComponents` | `index.marko` | All `<evo-*` tag usages in the template — superset of internalImports; includes dynamic icon tags |
+| `marko.helperInterfaces` | `index.marko` | Non-`Input` exported interfaces that define child slot types (e.g. `Tab`, `Option`, `Item`, `Step`) |
+| `marko.inputInterface.a11yProps` | `index.marko` | Props starting with `a11y` — localization strings |
+| `marko.inputInterface.ariaProps` | `index.marko` | Props matching `aria-*` in the interface (distinct from ARIA set in the template) |
+| `marko.inputInterface.eventCallbacks` | `index.marko` | Props matching `on[A-Z]*` — custom event callbacks |
+| `marko.inputInterface.attrTagSlots` | `index.marko` | Props typed as `Marko.AttrTag<...>` — named content slots |
+| `marko.inputInterface.regularProps` | `index.marko` | All other props |
+| `marko.templateAriaUsages` | `index.marko` | Every `aria-*=<value>` assignment in the template body (not the interface) |
+| `marko.templateRoleUsages` | `index.marko` | Every `role=<value>` in the template — includes literal role strings and dynamic expressions |
+| `skin.bemBlocks` | `sass/<module>/*.scss` | Root BEM class names (no `__` or `--`) |
+| `skin.bemElements` | `sass/<module>/*.scss` | BEM element class names (contain `__`) |
+| `skin.bemModifiers` | `sass/<module>/*.scss` | BEM modifier class names (contain `--`) |
+| `skin.nestedBemElementSuffixes` | `sass/<module>/*.scss` | `&__name` nested SCSS selectors — partial names only, need parent class context |
+| `skin.nestedBemModifierSuffixes` | `sass/<module>/*.scss` | `&--name` nested SCSS selectors — partial names only |
+| `skin.cssCustomProperties` | `sass/<module>/*.scss` | All `var(--name)` usages — tokens consumed |
+| `skin.cssCustomPropertyDefinitions` | `sass/<module>/*.scss` | All `--name:` declarations in `:root` — overridable tokens defined by the component |
+| `skin.stateSelectors` | `sass/<module>/*.scss` | Attribute selectors like `[aria-disabled="true"]`, `[disabled]`, `[hidden]`, `[open]`, `[role="..."]` |
+| `skin.rtlOverrides` | `sass/<module>/*.scss` | `true` if the file contains any `[dir="rtl"]` selector |
+| `react.props` | `packages/evo-react/src/<name>/` | TypeScript prop interface definitions |
+| `react.ariaUsages` | `packages/evo-react/src/<name>/` | `aria-*=` attribute usages in JSX |
+| `react.eventHandlers` | `packages/evo-react/src/<name>/` | Prop names matching `on[A-Z]*` |
+
+**Note on `templateRoleUsages`:** Some entries are dynamic expressions rather than
+literal ARIA role strings — e.g. `itemRole` (a variable), `!!hasA11yText` (a
+conditional), `type` (a prop name). These indicate components that compute their role
+at runtime based on props. The genuine ARIA role literals (`listbox`, `menu`, `tab`,
+`tablist`, etc.) are also present in the same array.
+
+### `summary.json` — cross-component aggregate
+
+A flattened view across all 52 components, useful for auditing schema coverage and
+understanding library-wide patterns.
+
+| Field | Contents |
+|---|---|
+| `counts` | Total components; how many have marko / skin / react implementations |
+| `makeupPackages` | All unique `@ebay/makeup-*` packages imported (currently empty — evo-marko uses internal tags) |
+| `a11yPropNames` | Every unique `a11y*` prop name across all components |
+| `ariaProps` | Every unique `aria-*` prop declared in Input interfaces |
+| `eventCallbacks` | Every unique `on[A-Z]*` event callback in Input interfaces |
+| `attrTagSlots` | Every unique AttrTag slot name |
+| `templateAriaAttrs` | Every `aria-*` attribute actually set in template bodies |
+| `templateRoles` | Every `role=` value set in template bodies (includes dynamic expressions) |
+| `allBemBlocks` | All BEM block class names across all skin modules |
+| `allStateSelectors` | All state-based CSS attribute selectors across all skin modules |
+| `allCssVars` | All CSS custom properties consumed across all skin modules |
+| `withMakeup` | Components that use `@ebay/makeup-*` imports |
+| `withAttrTagSlots` | Compound components — have one or more named AttrTag slots |
+| `withRtl` | Components with `[dir="rtl"]` overrides in their skin module |
+| `withHelperInterfaces` | Components that define helper interfaces for child slot types |
+| `withSubComponents` | Components that use other `evo-*` components internally |
+
+### Phase documents — human/agent analysis
+
+| File | What it covers |
+|---|---|
+| `phase2-categorization.md` | All 52 components grouped into 7 categories (simple presentational, simple interactive, form inputs, navigation, overlays, complex interactive, compound/parent-child) with schema gap notes per category. Also lists 38 skin-only components not yet in evo-marko. |
+| `phase3-deep-audit.md` | Deep read of 5 representative components (evo-textbox, evo-tabs, evo-dialog, evo-listbox, evo-menu-button) across all source layers and docs pages. Documents confirmed patterns, non-obvious behaviors, implementation discrepancies, and 35+ concrete schema gaps with IDs. |
+| `phase4-docs-mining.md` | Findings from scanning 76 component accessibility pages and the site-wide technique/pattern library (`/src/routes/_index/accessibility/`). Covers caller obligations not in source code, ARIA attribute usage rules, roving tabindex vs. aria-activedescendant decision matrix, live-region rules, known browser limitations. |
+
+---
+
+## How to use these files
+
+### Manifest generation (`/evo-create-component-manifest`)
+
+The skill reads `components/$COMPONENT.json` in Step 2b before field extraction.
+Fields tagged `[AUDIT]` in the schema are filled directly from this snapshot:
+
+| Manifest field | Audit field |
+|---|---|
+| `bem.block` | `skin.bemBlocks[0]` |
+| `bem.elements[]` | `skin.bemElements[]` |
+| `bem.modifiers[]` | `skin.bemModifiers[]` |
+| `designTokens[]` | `skin.cssCustomProperties[]` |
+| `dependencies[].name` | `marko.subComponents[]` |
+| `dependencies[].type` | derived: `evo-icon-*` → `icon`; `marko.internalImports[]` → `internal-tag`; else → `component` |
+| `a11y.ariaAttributes[]` | `marko.templateAriaUsages[]` |
+| `rtl.notes` | `skin.rtlOverrides` (boolean flag) |
+
+When a component is not in the snapshot (brand-new, skin module not yet created),
+all `[AUDIT]` fields become soft gaps and the engineer is prompted to re-run the script
+once the skin module exists.
+
+### Schema and contract development
+
+Use `summary.json` to verify the manifest schema can represent every ARIA attribute,
+role, and slot name that appears across the library. If a pattern appears in the summary
+but has no corresponding schema field, that is a schema gap.
+
+Use the phase documents when writing contracts for new components. The relevant category
+section in `phase2-categorization.md` lists the schema fields that matter most for that
+component type and the caller obligations that must appear in the contract.
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-3d-viewer.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-3d-viewer.json
new file mode 100644
index 0000000000..926b4d0d69
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-3d-viewer.json
@@ -0,0 +1,62 @@
+{
+  "name": "evo-3d-viewer",
+  "skinModules": [
+    "3d-viewer"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [
+      "evo-progress-spinner",
+      "evo-icon-attention-24"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Partial<ModelViewerElement>"
+      ],
+      "a11yProps": [
+        {
+          "name": "a11yLoadingText",
+          "optional": false,
+          "type": "string",
+          "category": "a11y"
+        }
+      ],
+      "ariaProps": [],
+      "eventCallbacks": [
+        {
+          "name": "onLoadError",
+          "optional": true,
+          "type": "(err: CustomEvent) => void",
+          "category": "event"
+        }
+      ],
+      "attrTagSlots": [],
+      "regularProps": [
+        {
+          "name": "class",
+          "optional": true,
+          "type": "Marko.HTMLAttributes[\"class\"]",
+          "category": "prop"
+        },
+        {
+          "name": "errorText",
+          "optional": false,
+          "type": "string",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-accordion.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-accordion.json
new file mode 100644
index 0000000000..0be034750b
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-accordion.json
@@ -0,0 +1,110 @@
+{
+  "name": "evo-accordion",
+  "skinModules": [
+    "accordion"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/accordion"
+    ],
+    "makeupImports": [],
+    "internalImports": [
+      "evo-details"
+    ],
+    "subComponents": [
+      "evo-details"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Omit<Marko.HTML.UL, \"aria-roledescription\">"
+      ],
+      "a11yProps": [
+        {
+          "name": "a11yText",
+          "optional": false,
+          "type": "string",
+          "category": "a11y"
+        }
+      ],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "details",
+          "optional": true,
+          "type": "Marko.AttrTag< Omit<DetailsInput, \"size\" | \"alignment\" | \"open\" | \"openChange\"> >",
+          "category": "slot"
+        }
+      ],
+      "regularProps": [
+        {
+          "name": "size",
+          "optional": true,
+          "type": "\"regular\" | \"large\"",
+          "category": "prop"
+        },
+        {
+          "name": "open",
+          "optional": true,
+          "type": "Open",
+          "category": "prop"
+        },
+        {
+          "name": "openChange",
+          "optional": true,
+          "type": "(open: Open) => void",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-roledescription",
+        "value": "a11yText"
+      }
+    ],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "accordion",
+      "chevron-close",
+      "chevron-open"
+    ],
+    "bemElements": [
+      "details__collapse",
+      "details__content",
+      "details__expand",
+      "details__icon",
+      "details__label",
+      "details__summary"
+    ],
+    "bemModifiers": [
+      "accordion--animated",
+      "accordion--large"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--color-border-subtle",
+      "--color-foreground-secondary",
+      "--font-size-large-1",
+      "--font-size-medium",
+      "--motion-duration-medium-2",
+      "--motion-duration-medium-3",
+      "--motion-easing-continuous",
+      "--motion-easing-standard"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [
+      "[open]"
+    ],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-alert-dialog.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-alert-dialog.json
new file mode 100644
index 0000000000..12f14d5b27
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-alert-dialog.json
@@ -0,0 +1,129 @@
+{
+  "name": "evo-alert-dialog",
+  "skinModules": [
+    "dialog"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/dialog"
+    ],
+    "makeupImports": [],
+    "internalImports": [
+      "evo-button"
+    ],
+    "subComponents": [
+      "evo-button"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Omit<Marko.HTML.Dialog, \"open\" | \"closedby\" | \"role\" | \"aria-labelledby\" | \"aria-modal\">"
+      ],
+      "a11yProps": [],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "header",
+          "optional": false,
+          "type": "Marko.AttrTag<Marko.HTML.H2 & { as?: string }>",
+          "category": "slot"
+        },
+        {
+          "name": "confirm",
+          "optional": false,
+          "type": "Marko.AttrTag<ButtonInput>",
+          "category": "slot"
+        }
+      ],
+      "regularProps": [
+        {
+          "name": "open",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "openChange",
+          "optional": true,
+          "type": "(o: boolean) => void",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-modal",
+        "value": "\"true\""
+      },
+      {
+        "attr": "aria-labelledby",
+        "value": "headerId"
+      },
+      {
+        "attr": "aria-describedby",
+        "value": "mainId"
+      }
+    ],
+    "templateRoleUsages": [
+      "alertdialog"
+    ]
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "dialog",
+      "icon",
+      "icon-btn"
+    ],
+    "bemElements": [
+      "dialog__close",
+      "dialog__footer",
+      "dialog__header",
+      "dialog__image",
+      "dialog__main",
+      "dialog__prev"
+    ],
+    "bemModifiers": [
+      "dialog--close",
+      "dialog--expressive",
+      "dialog--large",
+      "dialog--narrow",
+      "dialog--wide"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--border-radius-100",
+      "--border-radius-150",
+      "--color-background-primary",
+      "--color-foreground-primary",
+      "--dialog-max-width",
+      "--dialog-narrow-max-width",
+      "--dialog-scrim-color",
+      "--dialog-wide-max-width",
+      "--motion-duration-medium-3",
+      "--motion-duration-short-3",
+      "--motion-easing-continuous",
+      "--motion-easing-soft-exit",
+      "--motion-easing-standard",
+      "--spacing-100",
+      "--spacing-200",
+      "--spacing-300"
+    ],
+    "cssCustomPropertyDefinitions": [
+      "--dialog-max-width",
+      "--dialog-narrow-max-width",
+      "--dialog-scrim-color",
+      "--dialog-wide-max-width"
+    ],
+    "stateSelectors": [
+      "[open]"
+    ],
+    "rtlOverrides": true
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-avatar.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-avatar.json
new file mode 100644
index 0000000000..856cb74455
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-avatar.json
@@ -0,0 +1,113 @@
+{
+  "name": "evo-avatar",
+  "skinModules": [
+    "avatar"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/avatar"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [
+      "evo-icon-avatar-signed-out"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Omit<Marko.HTML.Div, \"role\" | \"aria-label\">"
+      ],
+      "a11yProps": [
+        {
+          "name": "a11yText",
+          "optional": false,
+          "type": "string | null",
+          "category": "a11y"
+        }
+      ],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "image",
+          "optional": true,
+          "type": "Marko.AttrTag<Omit<Marko.HTML.Img, \"alt\">>",
+          "category": "slot"
+        }
+      ],
+      "regularProps": [
+        {
+          "name": "username",
+          "optional": true,
+          "type": "string",
+          "category": "prop"
+        },
+        {
+          "name": "color",
+          "optional": true,
+          "type": "string",
+          "category": "prop"
+        },
+        {
+          "name": "size",
+          "optional": true,
+          "type": "Size | `${Size}`",
+          "category": "prop"
+        },
+        {
+          "name": "knownAspectRatio",
+          "optional": true,
+          "type": "number",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-label",
+        "value": "a11yText"
+      }
+    ],
+    "templateRoleUsages": [
+      "img"
+    ]
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "avatar",
+      "image-treatment"
+    ],
+    "bemElements": [],
+    "bemModifiers": [
+      "avatar--fit",
+      "avatar--green",
+      "avatar--light-teal",
+      "avatar--lime",
+      "avatar--magenta",
+      "avatar--orange",
+      "avatar--pink",
+      "avatar--teal",
+      "avatar--yellow"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--font-size-giant-1",
+      "--font-size-giant-2",
+      "--font-size-giant-3",
+      "--font-size-giant-4",
+      "--font-size-large-1",
+      "--font-size-large-2",
+      "--font-size-medium",
+      "--font-weight-600"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-badge.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-badge.json
new file mode 100644
index 0000000000..bcf57efeee
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-badge.json
@@ -0,0 +1,76 @@
+{
+  "name": "evo-badge",
+  "skinModules": [
+    "badge"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/badge"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Omit<Marko.HTML.Span, \"role\" | \"aria-label\">"
+      ],
+      "a11yProps": [
+        {
+          "name": "a11yText",
+          "optional": false,
+          "type": "string | null",
+          "category": "a11y"
+        }
+      ],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [],
+      "regularProps": [
+        {
+          "name": "type",
+          "optional": true,
+          "type": "\"menu\" | \"icon\"",
+          "category": "prop"
+        },
+        {
+          "name": "number",
+          "optional": true,
+          "type": "number | string",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-label",
+        "value": "a11yText"
+      }
+    ],
+    "templateRoleUsages": [
+      "type"
+    ]
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "badge"
+    ],
+    "bemElements": [],
+    "bemModifiers": [],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--color-background-attention",
+      "--color-border-on-attention",
+      "--color-foreground-on-attention"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-breadcrumbs.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-breadcrumbs.json
new file mode 100644
index 0000000000..04d03c6c4a
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-breadcrumbs.json
@@ -0,0 +1,116 @@
+{
+  "name": "evo-breadcrumbs",
+  "skinModules": [
+    "breadcrumbs",
+    "utility"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/breadcrumbs",
+      "@ebay/skin/utility"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [
+      "evo-icon-chevron-right-12",
+      "evo-fake-menu-button",
+      "evo-icon-overflow-horizontal-16"
+    ],
+    "helperInterfaces": [
+      {
+        "name": "Item",
+        "props": []
+      }
+    ],
+    "inputInterface": {
+      "extends": [
+        "Omit<Marko.HTML.Nav, \"role\">"
+      ],
+      "a11yProps": [
+        {
+          "name": "a11yHeadingText",
+          "optional": false,
+          "type": "string",
+          "category": "a11y"
+        },
+        {
+          "name": "a11yHeadingTag",
+          "optional": true,
+          "type": "keyof Marko.NativeTags",
+          "category": "a11y"
+        },
+        {
+          "name": "a11yMenuButtonText",
+          "optional": false,
+          "type": "string",
+          "category": "a11y"
+        }
+      ],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "item",
+          "optional": true,
+          "type": "Marko.AttrTag<Item>",
+          "category": "slot"
+        }
+      ],
+      "regularProps": []
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-labelledby",
+        "value": "headingId"
+      },
+      {
+        "attr": "aria-current",
+        "value": "(itemList.length === 1 && !firstItem.href && \"location\")"
+      },
+      {
+        "attr": "aria-current",
+        "value": "(!lastItem.href && \"location\")"
+      }
+    ],
+    "templateRoleUsages": [
+      "navigation"
+    ]
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "breadcrumbs",
+      "color-token",
+      "fill-token",
+      "icon"
+    ],
+    "bemElements": [
+      "fake-menu-button__button",
+      "fake-menu-button__menu",
+      "menu-button__button",
+      "menu-button__menu"
+    ],
+    "bemModifiers": [
+      "breadcrumb--overflow"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--color-background-secondary",
+      "--font-size-body",
+      "--font-size-small",
+      "--spacing-300",
+      "--spacing-75"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [
+      "[aria-current]",
+      "[hidden]"
+    ],
+    "rtlOverrides": true
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-button.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-button.json
new file mode 100644
index 0000000000..bc7634c5ef
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-button.json
@@ -0,0 +1,310 @@
+{
+  "name": "evo-button",
+  "skinModules": [
+    "button"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/button"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [
+      "evo-progress-spinner",
+      "evo-icon-chevron-down-16"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Marko.HTML.Button",
+        "Omit<Marko.HTML.A, \"type\" |`on${string}`>"
+      ],
+      "a11yProps": [
+        {
+          "name": "a11yLoadingText",
+          "optional": true,
+          "type": "string",
+          "category": "a11y"
+        }
+      ],
+      "ariaProps": [],
+      "eventCallbacks": [
+        {
+          "name": "onEscape",
+          "optional": true,
+          "type": "(event: KeyboardEvent) => void",
+          "category": "event"
+        }
+      ],
+      "attrTagSlots": [],
+      "regularProps": [
+        {
+          "name": "href",
+          "optional": true,
+          "type": "string",
+          "category": "prop"
+        },
+        {
+          "name": "size",
+          "optional": true,
+          "type": "(typeof validSizes)[number]",
+          "category": "prop"
+        },
+        {
+          "name": "priority",
+          "optional": true,
+          "type": "\"primary\" | \"secondary\" | \"tertiary\" | \"none\"",
+          "category": "prop"
+        },
+        {
+          "name": "variant",
+          "optional": true,
+          "type": "\"standard\" | \"destructive\" | \"form\"",
+          "category": "prop"
+        },
+        {
+          "name": "bodyState",
+          "optional": true,
+          "type": "\"loading\" | \"expand\" | \"reset\" | \"none\"",
+          "category": "prop"
+        },
+        {
+          "name": "fluid",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "borderless",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "disabled",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "partiallyDisabled",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "transparent",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "fixedHeight",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "truncate",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "split",
+          "optional": true,
+          "type": "\"start\" | \"end\"",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-disabled",
+        "value": "partiallyDisabled"
+      },
+      {
+        "attr": "aria-label",
+        "value": "(bodyState === \"loading\" ? a11yLoadingText : input[\"aria-label\"])"
+      }
+    ],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "animations",
+      "background-color-token",
+      "base",
+      "border-color-token",
+      "border-left-color-token",
+      "border-radius-token",
+      "border-right-color-token",
+      "btn",
+      "cell-base",
+      "cell-fixed-height",
+      "cell-truncated",
+      "color-token",
+      "fake-btn",
+      "fill-token",
+      "icon",
+      "icon-base",
+      "large",
+      "progress-spinner",
+      "standard",
+      "truncate"
+    ],
+    "bemElements": [
+      "btn__cell",
+      "btn__cell--fixed-height",
+      "btn__floating-label",
+      "btn__floating-label--animate",
+      "btn__floating-label--inline",
+      "btn__text",
+      "fake-btn__cell",
+      "fake-btn__cell--fixed-height"
+    ],
+    "bemModifiers": [
+      "btn--borderless",
+      "btn--destructive",
+      "btn--floating-label",
+      "btn--fluid",
+      "btn--form",
+      "btn--large",
+      "btn--large-fixed-height",
+      "btn--large-truncated",
+      "btn--primary",
+      "btn--secondary",
+      "btn--slim",
+      "btn--small",
+      "btn--split-end",
+      "btn--split-start",
+      "btn--tertiary",
+      "btn--transparent",
+      "btn--truncated",
+      "fake-btn--borderless",
+      "fake-btn--destructive",
+      "fake-btn--fluid",
+      "fake-btn--form",
+      "fake-btn--large",
+      "fake-btn--large-fixed-height",
+      "fake-btn--large-truncated",
+      "fake-btn--primary",
+      "fake-btn--secondary",
+      "fake-btn--slim",
+      "fake-btn--small",
+      "fake-btn--split-end",
+      "fake-btn--split-start",
+      "fake-btn--tertiary",
+      "fake-btn--transparent",
+      "fake-btn--truncated"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--btn-secondary-background-color",
+      "--color-background-accent",
+      "--color-background-attention",
+      "--color-background-disabled",
+      "--color-background-primary",
+      "--color-border-accent",
+      "--color-border-attention",
+      "--color-border-disabled",
+      "--color-foreground-accent",
+      "--color-foreground-on-accent",
+      "--color-foreground-on-attention",
+      "--font-size-body",
+      "--font-size-medium",
+      "--spacing-100"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [
+      "[aria-disabled=\"true\"]",
+      "[aria-expanded=\"true\"]",
+      "[aria-live=\"polite\"]",
+      "[disabled]"
+    ],
+    "rtlOverrides": true
+  },
+  "react": {
+    "hasImplementation": true,
+    "props": [
+      {
+        "name": "fluid",
+        "optional": true,
+        "type": "boolean",
+        "category": "prop"
+      },
+      {
+        "name": "partiallyDisabled",
+        "optional": true,
+        "type": "boolean",
+        "category": "prop"
+      },
+      {
+        "name": "truncate",
+        "optional": true,
+        "type": "boolean",
+        "category": "prop"
+      },
+      {
+        "name": "priority",
+        "optional": true,
+        "type": "Priority",
+        "category": "prop"
+      },
+      {
+        "name": "variant",
+        "optional": true,
+        "type": "Variant",
+        "category": "prop"
+      },
+      {
+        "name": "size",
+        "optional": true,
+        "type": "Size",
+        "category": "prop"
+      },
+      {
+        "name": "bodyState",
+        "optional": true,
+        "type": "BodyState",
+        "category": "prop"
+      },
+      {
+        "name": "split",
+        "optional": true,
+        "type": "Split",
+        "category": "prop"
+      },
+      {
+        "name": "transparent",
+        "optional": true,
+        "type": "boolean",
+        "category": "prop"
+      },
+      {
+        "name": "borderless",
+        "optional": true,
+        "type": "boolean",
+        "category": "prop"
+      },
+      {
+        "name": "fixedHeight",
+        "optional": true,
+        "type": "boolean",
+        "category": "prop"
+      }
+    ],
+    "a11yProps": [],
+    "ariaProps": [],
+    "eventHandlers": [],
+    "ariaUsages": [
+      "aria-disabled",
+      "aria-live"
+    ],
+    "roleUsages": [],
+    "makeupImports": []
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-card.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-card.json
new file mode 100644
index 0000000000..0db8b0d873
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-card.json
@@ -0,0 +1,133 @@
+{
+  "name": "evo-card",
+  "skinModules": [
+    "card"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/card"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Omit<Marko.HTML.Span, \"title\">"
+      ],
+      "a11yProps": [],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "overline",
+          "optional": true,
+          "type": "Marko.AttrTag<Marko.HTML.Div>",
+          "category": "slot"
+        },
+        {
+          "name": "title",
+          "optional": true,
+          "type": "Marko.AttrTag<Marko.HTML.H3 & { as?: keyof Marko.NativeTags }>",
+          "category": "slot"
+        },
+        {
+          "name": "description",
+          "optional": true,
+          "type": "Marko.AttrTag<Marko.HTML.Div>",
+          "category": "slot"
+        },
+        {
+          "name": "action",
+          "optional": true,
+          "type": "Marko.AttrTag<Marko.HTML.Div>",
+          "category": "slot"
+        },
+        {
+          "name": "image",
+          "optional": false,
+          "type": "Marko.AttrTag<Marko.HTML.Img>",
+          "category": "slot"
+        }
+      ],
+      "regularProps": [
+        {
+          "name": "layout",
+          "optional": true,
+          "type": "\"horizontal\" | \"vertical\"",
+          "category": "prop"
+        },
+        {
+          "name": "aspectRatio",
+          "optional": true,
+          "type": "\"16:9\" | \"5:4\"",
+          "category": "prop"
+        },
+        {
+          "name": "disabled",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "href",
+          "optional": true,
+          "type": "string",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "card"
+    ],
+    "bemElements": [
+      "card__action",
+      "card__description",
+      "card__hero-image",
+      "card__main",
+      "card__media",
+      "card__overline",
+      "card__title"
+    ],
+    "bemModifiers": [
+      "card--aspect-16-9",
+      "card--aspect-5-4",
+      "card--full-hero",
+      "card--horizontal",
+      "card--outlined"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--border-radius-100",
+      "--border-radius-150",
+      "--color-background-secondary",
+      "--color-border-accent",
+      "--color-border-subtle",
+      "--color-foreground-primary",
+      "--font-size-large-1",
+      "--motion-duration-long-3",
+      "--motion-duration-medium-3",
+      "--motion-duration-short-3",
+      "--motion-easing-quick-enter",
+      "--spacing-100",
+      "--spacing-150",
+      "--spacing-200",
+      "--spacing-50"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [
+      "[disabled]"
+    ],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-ccd.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-ccd.json
new file mode 100644
index 0000000000..d5a7bc2bb8
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-ccd.json
@@ -0,0 +1,101 @@
+{
+  "name": "evo-ccd",
+  "skinModules": [
+    "ccd",
+    "icon"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/ccd",
+      "@ebay/skin/icon"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [
+      "evo-icon-ccd-charger-included",
+      "evo-icon-ccd-charger-not-included",
+      "evo-icon-ccd-top"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Omit<Marko.HTML.Div, \"aria-label\">"
+      ],
+      "a11yProps": [
+        {
+          "name": "a11yText",
+          "optional": false,
+          "type": "string | null",
+          "category": "a11y"
+        }
+      ],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [],
+      "regularProps": [
+        {
+          "name": "max",
+          "optional": true,
+          "type": "string",
+          "category": "prop"
+        },
+        {
+          "name": "min",
+          "optional": true,
+          "type": "string",
+          "category": "prop"
+        },
+        {
+          "name": "chargerIcon",
+          "optional": true,
+          "type": "\"included\" | \"not-included\"",
+          "category": "prop"
+        },
+        {
+          "name": "secondaryType",
+          "optional": true,
+          "type": "\"usbpd\"",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-label",
+        "value": "a11yText"
+      }
+    ],
+    "templateRoleUsages": [
+      "figure"
+    ]
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "ccd",
+      "com",
+      "ebaystatic",
+      "ttf"
+    ],
+    "bemElements": [
+      "ccd__body",
+      "ccd__charger-icon",
+      "ccd__description-figure",
+      "ccd__top-icon"
+    ],
+    "bemModifiers": [],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--color-foreground-primary",
+      "--font-weight-600"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-character-count.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-character-count.json
new file mode 100644
index 0000000000..d6b3f42a5d
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-character-count.json
@@ -0,0 +1,58 @@
+{
+  "name": "evo-character-count",
+  "skinModules": [
+    "character-count"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Omit<Marko.HTML.Span, \"content\">"
+      ],
+      "a11yProps": [
+        {
+          "name": "a11yText",
+          "optional": true,
+          "type": "string | null",
+          "category": "a11y"
+        }
+      ],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [],
+      "regularProps": [
+        {
+          "name": "string",
+          "optional": false,
+          "type": "string",
+          "category": "prop"
+        },
+        {
+          "name": "count",
+          "optional": true,
+          "type": "number",
+          "category": "prop"
+        },
+        {
+          "name": "max",
+          "optional": false,
+          "type": "number",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-checkbox.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-checkbox.json
new file mode 100644
index 0000000000..1184e99f1d
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-checkbox.json
@@ -0,0 +1,75 @@
+{
+  "name": "evo-checkbox",
+  "skinModules": [
+    "checkbox",
+    "field"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/checkbox",
+      "@ebay/skin/field"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [
+      "evo-icon-checkbox-unchecked-24",
+      "evo-icon-checkbox-checked-24",
+      "evo-icon-checkbox-unchecked-18",
+      "evo-icon-checkbox-checked-18"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Omit<Marko.HTML.Input, \"type\">"
+      ],
+      "a11yProps": [],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [],
+      "regularProps": [
+        {
+          "name": "size",
+          "optional": true,
+          "type": "\"large\"",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "base",
+      "checkbox",
+      "color-token",
+      "com",
+      "fill-token",
+      "outline-color-token",
+      "paciellogroup"
+    ],
+    "bemElements": [
+      "checkbox__checked",
+      "checkbox__control",
+      "checkbox__icon",
+      "checkbox__unchecked"
+    ],
+    "bemModifiers": [
+      "checkbox--large"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [
+      "[disabled]",
+      "[hidden]"
+    ],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-confirm-dialog.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-confirm-dialog.json
new file mode 100644
index 0000000000..b7c3875206
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-confirm-dialog.json
@@ -0,0 +1,135 @@
+{
+  "name": "evo-confirm-dialog",
+  "skinModules": [
+    "dialog"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/dialog"
+    ],
+    "makeupImports": [],
+    "internalImports": [
+      "evo-button"
+    ],
+    "subComponents": [
+      "evo-button"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Omit<Marko.HTML.Dialog, \"open\" | \"role\" | \"aria-labelledby\" | \"aria-modal\">"
+      ],
+      "a11yProps": [],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "header",
+          "optional": false,
+          "type": "Marko.AttrTag<Marko.HTML.H2 & { as?: string }>",
+          "category": "slot"
+        },
+        {
+          "name": "confirm",
+          "optional": false,
+          "type": "Marko.AttrTag<ButtonInput>",
+          "category": "slot"
+        },
+        {
+          "name": "reject",
+          "optional": false,
+          "type": "Marko.AttrTag<ButtonInput>",
+          "category": "slot"
+        }
+      ],
+      "regularProps": [
+        {
+          "name": "open",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "openChange",
+          "optional": true,
+          "type": "(o: boolean) => void",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-modal",
+        "value": "\"true\""
+      },
+      {
+        "attr": "aria-labelledby",
+        "value": "headerId"
+      },
+      {
+        "attr": "aria-describedby",
+        "value": "mainId"
+      }
+    ],
+    "templateRoleUsages": [
+      "alertdialog"
+    ]
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "dialog",
+      "icon",
+      "icon-btn"
+    ],
+    "bemElements": [
+      "dialog__close",
+      "dialog__footer",
+      "dialog__header",
+      "dialog__image",
+      "dialog__main",
+      "dialog__prev"
+    ],
+    "bemModifiers": [
+      "dialog--close",
+      "dialog--expressive",
+      "dialog--large",
+      "dialog--narrow",
+      "dialog--wide"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--border-radius-100",
+      "--border-radius-150",
+      "--color-background-primary",
+      "--color-foreground-primary",
+      "--dialog-max-width",
+      "--dialog-narrow-max-width",
+      "--dialog-scrim-color",
+      "--dialog-wide-max-width",
+      "--motion-duration-medium-3",
+      "--motion-duration-short-3",
+      "--motion-easing-continuous",
+      "--motion-easing-soft-exit",
+      "--motion-easing-standard",
+      "--spacing-100",
+      "--spacing-200",
+      "--spacing-300"
+    ],
+    "cssCustomPropertyDefinitions": [
+      "--dialog-max-width",
+      "--dialog-narrow-max-width",
+      "--dialog-scrim-color",
+      "--dialog-wide-max-width"
+    ],
+    "stateSelectors": [
+      "[open]"
+    ],
+    "rtlOverrides": true
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-cta-button.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-cta-button.json
new file mode 100644
index 0000000000..55d44ca099
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-cta-button.json
@@ -0,0 +1,77 @@
+{
+  "name": "evo-cta-button",
+  "skinModules": [
+    "cta-button"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/cta-button"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [
+      "evo-icon-arrow-right-24"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Marko.HTML.A"
+      ],
+      "a11yProps": [],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [],
+      "regularProps": [
+        {
+          "name": "size",
+          "optional": true,
+          "type": "\"large\"",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "background-color-token",
+      "base",
+      "border-color-token",
+      "cell-base",
+      "cell-fixed-height",
+      "cell-truncated",
+      "color-token",
+      "cta-btn",
+      "icon",
+      "icon-base",
+      "truncate"
+    ],
+    "bemElements": [
+      "cta-btn__cell",
+      "cta-btn__cell--fixed-height"
+    ],
+    "bemModifiers": [
+      "cta-btn--fluid",
+      "cta-btn--large",
+      "cta-btn--truncated",
+      "icon--arrow-right-24"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--font-size-body",
+      "--font-size-medium"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [
+      "[aria-disabled=\"true\"]"
+    ],
+    "rtlOverrides": true
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-details.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-details.json
new file mode 100644
index 0000000000..dae36c984e
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-details.json
@@ -0,0 +1,103 @@
+{
+  "name": "evo-details",
+  "skinModules": [
+    "details"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/details"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [
+      "evo-icon-chevron-down-16"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Marko.Input<\"details\">"
+      ],
+      "a11yProps": [],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "summary",
+          "optional": true,
+          "type": "Marko.AttrTag<Marko.Input<\"span\">>",
+          "category": "slot"
+        }
+      ],
+      "regularProps": [
+        {
+          "name": "size",
+          "optional": true,
+          "type": "\"regular\" | \"small\"",
+          "category": "prop"
+        },
+        {
+          "name": "alignment",
+          "optional": true,
+          "type": "\"regular\" | \"center\"",
+          "category": "prop"
+        },
+        {
+          "name": "contentAs",
+          "optional": true,
+          "type": "keyof Marko.NativeTags",
+          "category": "prop"
+        },
+        {
+          "name": "open",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "openChange",
+          "optional": true,
+          "type": "(open: boolean) => void",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "border-radius-token",
+      "color-token",
+      "com",
+      "details",
+      "paciellogroup",
+      "standard"
+    ],
+    "bemElements": [
+      "details__icon",
+      "details__summary",
+      "details__summary--center",
+      "details__summary--small"
+    ],
+    "bemModifiers": [],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--font-size-body",
+      "--font-size-small",
+      "--font-weight-600",
+      "--spacing-100"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [
+      "[hidden]",
+      "[open]"
+    ],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-dialog.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-dialog.json
new file mode 100644
index 0000000000..29dcd5796e
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-dialog.json
@@ -0,0 +1,145 @@
+{
+  "name": "evo-dialog",
+  "skinModules": [
+    "dialog"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/dialog"
+    ],
+    "makeupImports": [],
+    "internalImports": [
+      "evo-icon-button"
+    ],
+    "subComponents": [
+      "evo-icon-button",
+      "evo-icon-chevron-left-16",
+      "evo-icon-close-16"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Marko.HTML.Dialog"
+      ],
+      "a11yProps": [],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "banner",
+          "optional": true,
+          "type": "Marko.AttrTag< Marko.Input<\"div\"> & { src?: string; position?: Marko.CSS.Properties[\"background-position\"]; } >",
+          "category": "slot"
+        },
+        {
+          "name": "header",
+          "optional": false,
+          "type": "Marko.AttrTag<Marko.Input<\"h2\"> & { as?: string }>",
+          "category": "slot"
+        },
+        {
+          "name": "footer",
+          "optional": true,
+          "type": "Marko.AttrTag<Marko.Input<\"div\">>",
+          "category": "slot"
+        },
+        {
+          "name": "close",
+          "optional": false,
+          "type": "Marko.AttrTag<IconButtonInput>",
+          "category": "slot"
+        },
+        {
+          "name": "previous",
+          "optional": true,
+          "type": "Marko.AttrTag<IconButtonInput>",
+          "category": "slot"
+        }
+      ],
+      "regularProps": [
+        {
+          "name": "open",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "openChange",
+          "optional": true,
+          "type": "(o: boolean) => void",
+          "category": "prop"
+        },
+        {
+          "name": "size",
+          "optional": true,
+          "type": "(typeof validSizes)[number]",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-labelledby",
+        "value": "(inputLabelledBy ? `${inputLabelledBy} ${headerId}` : headerId)"
+      }
+    ],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "dialog",
+      "icon",
+      "icon-btn"
+    ],
+    "bemElements": [
+      "dialog__close",
+      "dialog__footer",
+      "dialog__header",
+      "dialog__image",
+      "dialog__main",
+      "dialog__prev"
+    ],
+    "bemModifiers": [
+      "dialog--close",
+      "dialog--expressive",
+      "dialog--large",
+      "dialog--narrow",
+      "dialog--wide"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--border-radius-100",
+      "--border-radius-150",
+      "--color-background-primary",
+      "--color-foreground-primary",
+      "--dialog-max-width",
+      "--dialog-narrow-max-width",
+      "--dialog-scrim-color",
+      "--dialog-wide-max-width",
+      "--motion-duration-medium-3",
+      "--motion-duration-short-3",
+      "--motion-easing-continuous",
+      "--motion-easing-soft-exit",
+      "--motion-easing-standard",
+      "--spacing-100",
+      "--spacing-200",
+      "--spacing-300"
+    ],
+    "cssCustomPropertyDefinitions": [
+      "--dialog-max-width",
+      "--dialog-narrow-max-width",
+      "--dialog-scrim-color",
+      "--dialog-wide-max-width"
+    ],
+    "stateSelectors": [
+      "[open]"
+    ],
+    "rtlOverrides": true
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-eek.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-eek.json
new file mode 100644
index 0000000000..6dc9fd9500
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-eek.json
@@ -0,0 +1,108 @@
+{
+  "name": "evo-eek",
+  "skinModules": [
+    "eek"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/eek"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [
+      "evo-icon-eek-range-arrow",
+      "evo-icon-eek-arrow"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Omit<Marko.HTML.Div, \"aria-label\">"
+      ],
+      "a11yProps": [
+        {
+          "name": "a11yText",
+          "optional": false,
+          "type": "string | null",
+          "category": "a11y"
+        }
+      ],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [],
+      "regularProps": [
+        {
+          "name": "max",
+          "optional": false,
+          "type": "string",
+          "category": "prop"
+        },
+        {
+          "name": "min",
+          "optional": false,
+          "type": "string",
+          "category": "prop"
+        },
+        {
+          "name": "rating",
+          "optional": false,
+          "type": "string",
+          "category": "prop"
+        },
+        {
+          "name": "size",
+          "optional": true,
+          "type": "\"regular\" | \"large\"",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-label",
+        "value": "a11yText"
+      },
+      {
+        "attr": "aria-hidden",
+        "value": "\"true\""
+      }
+    ],
+    "templateRoleUsages": [
+      "img"
+    ]
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "eek",
+      "sqrt"
+    ],
+    "bemElements": [
+      "eek__arrow",
+      "eek__container",
+      "eek__rating",
+      "eek__rating-range"
+    ],
+    "bemModifiers": [
+      "eek--large",
+      "eek--rating-1",
+      "eek--rating-2",
+      "eek--rating-3",
+      "eek--rating-4",
+      "eek--rating-5",
+      "eek--rating-6",
+      "eek--rating-7",
+      "icon--eek-arrow",
+      "icon--eek-range-arrow"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [],
+    "rtlOverrides": true
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-fake-menu-button.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-fake-menu-button.json
new file mode 100644
index 0000000000..4a8f5d6cdd
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-fake-menu-button.json
@@ -0,0 +1,227 @@
+{
+  "name": "evo-fake-menu-button",
+  "skinModules": [
+    "menu-button"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/menu-button"
+    ],
+    "makeupImports": [],
+    "internalImports": [
+      "evo-icon-button",
+      "evo-button",
+      "evo-fake-menu"
+    ],
+    "subComponents": [
+      "evo-icon-button",
+      "evo-button",
+      "evo-fake-menu",
+      "evo-expander",
+      "evo-icon-chevron-down-12"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Marko.HTML.Span"
+      ],
+      "a11yProps": [
+        {
+          "name": "a11yText",
+          "optional": true,
+          "type": "string",
+          "category": "a11y"
+        }
+      ],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "label",
+          "optional": true,
+          "type": "Marko.AttrTag<Marko.HTML.Span>",
+          "category": "slot"
+        },
+        {
+          "name": "item",
+          "optional": true,
+          "type": "Marko.AttrTag<FakeMenuItem>",
+          "category": "slot"
+        }
+      ],
+      "regularProps": [
+        {
+          "name": "open",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "openChange",
+          "optional": true,
+          "type": "(open: boolean) => void",
+          "category": "prop"
+        },
+        {
+          "name": "collapseOnSelect",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "variant",
+          "optional": true,
+          "type": "\"form\" | \"button\" | \"icon\"",
+          "category": "prop"
+        },
+        {
+          "name": "borderless",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "priority",
+          "optional": true,
+          "type": "\"primary\" | \"secondary\" | \"tertiary\" | \"delete\" | \"none\"",
+          "category": "prop"
+        },
+        {
+          "name": "size",
+          "optional": true,
+          "type": "ButtonInput[\"size\"]",
+          "category": "prop"
+        },
+        {
+          "name": "transparent",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "disabled",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "noToggleIcon",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "reverse",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "strategy",
+          "optional": true,
+          "type": "\"absolute\" | \"fixed\"",
+          "category": "prop"
+        },
+        {
+          "name": "fixWidth",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "flip",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-haspopup",
+        "value": "\"true\""
+      },
+      {
+        "attr": "aria-expanded",
+        "value": "expander.ariaExpanded"
+      },
+      {
+        "attr": "aria-label",
+        "value": "a11yText"
+      }
+    ],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "background-color-token",
+      "badge",
+      "base",
+      "border-bottom-left-radius-token",
+      "border-bottom-right-radius-token",
+      "border-color-token",
+      "border-top-left-radius-token",
+      "border-top-right-radius-token",
+      "btn",
+      "color-token",
+      "com",
+      "expand-btn",
+      "fake-menu-button",
+      "filter",
+      "filter-chip",
+      "footer",
+      "icon",
+      "item-border-radius",
+      "menu-button",
+      "paciellogroup",
+      "reverse",
+      "status",
+      "truncate"
+    ],
+    "bemElements": [
+      "fake-menu-button__button",
+      "fake-menu-button__item",
+      "fake-menu-button__item--badged",
+      "fake-menu-button__menu",
+      "fake-menu-button__menu--fix-width",
+      "fake-menu-button__menu--reverse",
+      "fake-menu-button__menu--static",
+      "menu-button__button",
+      "menu-button__footer",
+      "menu-button__item",
+      "menu-button__item--badged",
+      "menu-button__menu",
+      "menu-button__menu--fix-width",
+      "menu-button__menu--reverse",
+      "menu-button__menu--scroll",
+      "menu-button__menu--static",
+      "menu-button__option--active",
+      "menu-button__separator"
+    ],
+    "bemModifiers": [
+      "menu-button--filter"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--spacing-100",
+      "--spacing-50"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [
+      "[aria-checked=\"true\"]",
+      "[aria-current=\"page\"]",
+      "[aria-disabled=\"true\"]",
+      "[aria-expanded=\"true\"]",
+      "[disabled]",
+      "[role=\"option\"]",
+      "[role^=\"menuitem\"]"
+    ],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-fake-menu.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-fake-menu.json
new file mode 100644
index 0000000000..3b8dfec72e
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-fake-menu.json
@@ -0,0 +1,171 @@
+{
+  "name": "evo-fake-menu",
+  "skinModules": [
+    "menu"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/menu"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [
+      "evo-badge",
+      "evo-icon-tick-16"
+    ],
+    "helperInterfaces": [
+      {
+        "name": "Item",
+        "props": [
+          {
+            "name": "type",
+            "optional": true,
+            "type": "\"button\" | \"submit\"",
+            "category": "prop"
+          },
+          {
+            "name": "current",
+            "optional": true,
+            "type": "boolean",
+            "category": "prop"
+          },
+          {
+            "name": "itemMatchesUrl",
+            "optional": true,
+            "type": "boolean",
+            "category": "prop"
+          },
+          {
+            "name": "badgeNumber",
+            "optional": true,
+            "type": "number",
+            "category": "prop"
+          },
+          {
+            "name": "disabled",
+            "optional": true,
+            "type": "boolean",
+            "category": "prop"
+          },
+          {
+            "name": "separator",
+            "optional": true,
+            "type": "boolean",
+            "category": "prop"
+          }
+        ]
+      }
+    ],
+    "inputInterface": {
+      "extends": [
+        "Marko.HTML.Span"
+      ],
+      "a11yProps": [],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "item",
+          "optional": true,
+          "type": "Marko.AttrTag<Item>",
+          "category": "slot"
+        }
+      ],
+      "regularProps": [
+        {
+          "name": "classPrefix",
+          "optional": true,
+          "type": "string",
+          "category": "prop"
+        },
+        {
+          "name": "reverse",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "fixed",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "fixWidth",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-disabled",
+        "value": "(disabled && \"true\")"
+      },
+      {
+        "attr": "aria-current",
+        "value": "ariaCurrent"
+      }
+    ],
+    "templateRoleUsages": [
+      "separator"
+    ]
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "background-color-token",
+      "badge",
+      "base",
+      "border-color-token",
+      "color-token",
+      "com",
+      "fake-menu",
+      "filter",
+      "footer",
+      "icon",
+      "menu",
+      "paciellogroup",
+      "status"
+    ],
+    "bemElements": [
+      "fake-menu__item",
+      "fake-menu__item--badged",
+      "fake-menu__items",
+      "fake-menu__items--fix-width",
+      "fake-menu__items--reverse",
+      "menu__footer",
+      "menu__item",
+      "menu__item--badged",
+      "menu__items",
+      "menu__items--fix-width",
+      "menu__items--reverse",
+      "menu__items--scroll",
+      "menu__separator"
+    ],
+    "bemModifiers": [
+      "expand-btn--borderless",
+      "menu--filter"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--spacing-100"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [
+      "[aria-checked=\"true\"]",
+      "[aria-current=\"page\"]",
+      "[aria-disabled=\"true\"]",
+      "[disabled]",
+      "[role=\"menu\"]",
+      "[role^=\"menuitem\"]"
+    ],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-fake-tabs.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-fake-tabs.json
new file mode 100644
index 0000000000..762a92f8d9
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-fake-tabs.json
@@ -0,0 +1,106 @@
+{
+  "name": "evo-fake-tabs",
+  "skinModules": [
+    "tabs"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/tabs"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Marko.HTML.Div"
+      ],
+      "a11yProps": [],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "tab",
+          "optional": true,
+          "type": "Marko.AttrTag<Marko.HTML.A>",
+          "category": "slot"
+        }
+      ],
+      "regularProps": [
+        {
+          "name": "selectedIndex",
+          "optional": true,
+          "type": "number",
+          "category": "prop"
+        },
+        {
+          "name": "size",
+          "optional": true,
+          "type": "\"large\" | \"regular\"",
+          "category": "prop"
+        },
+        {
+          "name": "tabMatchesCurrentUrl",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-current",
+        "value": "selectedIndex"
+      }
+    ],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "color-token",
+      "com",
+      "fake-tabs",
+      "paciellogroup",
+      "tabs"
+    ],
+    "bemElements": [
+      "fake-tabs__cell",
+      "fake-tabs__item",
+      "fake-tabs__items",
+      "tabs__cell",
+      "tabs__item",
+      "tabs__items"
+    ],
+    "bemModifiers": [
+      "fake-tabs--large",
+      "tabs--large"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--color-background-secondary",
+      "--color-foreground-disabled",
+      "--color-foreground-secondary",
+      "--font-size-body",
+      "--font-size-medium",
+      "--font-weight-600",
+      "--spacing-150",
+      "--spacing-200",
+      "--spacing-50"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [
+      "[aria-current]",
+      "[aria-disabled=\"true\"]",
+      "[aria-selected=\"true\"]",
+      "[role=\"tab\"]",
+      "[role=\"tablist\"]"
+    ],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-file-input.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-file-input.json
new file mode 100644
index 0000000000..0fb708c0b4
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-file-input.json
@@ -0,0 +1,84 @@
+{
+  "name": "evo-file-input",
+  "skinModules": [
+    "file-input"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/file-input"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [
+      "evo-icon-upload-24"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Omit<Marko.HTML.Input, \"type\">"
+      ],
+      "a11yProps": [],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "header",
+          "optional": true,
+          "type": "Marko.AttrTag< Marko.Input<\"h1\"> & { as?: keyof Marko.NativeTags; } >",
+          "category": "slot"
+        },
+        {
+          "name": "subheader",
+          "optional": true,
+          "type": "Marko.AttrTag<Marko.HTML.Span>",
+          "category": "slot"
+        }
+      ],
+      "regularProps": []
+    },
+    "templateAriaUsages": [],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "background-color-token",
+      "border-color-token",
+      "border-radius-token",
+      "color-token",
+      "file",
+      "file-input",
+      "fill-token"
+    ],
+    "bemElements": [
+      "file-input__container",
+      "file-input__content",
+      "file-input__content-cta",
+      "file-input__content-header",
+      "file-input__content-subheader",
+      "file-input__input",
+      "file-input__upload-icon"
+    ],
+    "bemModifiers": [],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--font-size-body",
+      "--font-size-medium",
+      "--font-size-small",
+      "--spacing-100",
+      "--spacing-150",
+      "--spacing-200",
+      "--spacing-250",
+      "--spacing-300",
+      "--spacing-50"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-file-preview-card-group.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-file-preview-card-group.json
new file mode 100644
index 0000000000..14188da5f7
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-file-preview-card-group.json
@@ -0,0 +1,77 @@
+{
+  "name": "evo-file-preview-card-group",
+  "skinModules": [
+    "file-preview-card-group"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/file-preview-card-group"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [
+      "evo-file-preview-card"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Marko.HTML.Div"
+      ],
+      "a11yProps": [],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "card",
+          "optional": true,
+          "type": "Marko.AttrTag<FilePreviewCardInput>",
+          "category": "slot"
+        }
+      ],
+      "regularProps": [
+        {
+          "name": "seeMoreAction",
+          "optional": true,
+          "type": "FilePreviewCardInput[\"seeMoreAction\"]",
+          "category": "prop"
+        },
+        {
+          "name": "visibleCardCount",
+          "optional": true,
+          "type": "number",
+          "category": "prop"
+        },
+        {
+          "name": "visibleCardCountChange",
+          "optional": true,
+          "type": "(s: number) => void",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "e",
+      "file-preview-card-group"
+    ],
+    "bemElements": [],
+    "bemModifiers": [],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--spacing-100",
+      "--spacing-200"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-file-preview-card.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-file-preview-card.json
new file mode 100644
index 0000000000..5b418437ae
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-file-preview-card.json
@@ -0,0 +1,182 @@
+{
+  "name": "evo-file-preview-card",
+  "skinModules": [
+    "file-preview-card"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/file-preview-card"
+    ],
+    "makeupImports": [],
+    "internalImports": [
+      "evo-icon-button"
+    ],
+    "subComponents": [
+      "evo-icon-button",
+      "evo-progress-spinner",
+      "evo-icon-file-24",
+      "evo-icon-close-16",
+      "evo-menu-button",
+      "evo-icon-delete-16",
+      "evo-icon-play-16"
+    ],
+    "helperInterfaces": [
+      {
+        "name": "FilePreviewCardEvent",
+        "props": [
+          {
+            "name": "file",
+            "optional": false,
+            "type": "File",
+            "category": "prop"
+          },
+          {
+            "name": "menuAction",
+            "optional": false,
+            "type": "FilePreviewCardMenuAction",
+            "category": "prop"
+          },
+          {
+            "name": "originalEvent",
+            "optional": false,
+            "type": "Event",
+            "category": "prop"
+          }
+        ]
+      }
+    ],
+    "inputInterface": {
+      "extends": [
+        "Marko.HTML.Div"
+      ],
+      "a11yProps": [],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "deleteAction",
+          "optional": true,
+          "type": "Marko.AttrTag<IconButtonInput>",
+          "category": "slot"
+        },
+        {
+          "name": "action",
+          "optional": true,
+          "type": "Marko.AttrTag<IconButtonInput>",
+          "category": "slot"
+        },
+        {
+          "name": "seeMoreAction",
+          "optional": true,
+          "type": "Marko.AttrTag<IconButtonInput>",
+          "category": "slot"
+        },
+        {
+          "name": "cancelAction",
+          "optional": true,
+          "type": "Marko.AttrTag<IconButtonInput>",
+          "category": "slot"
+        }
+      ],
+      "regularProps": [
+        {
+          "name": "as",
+          "optional": true,
+          "type": "keyof Marko.NativeTags",
+          "category": "prop"
+        },
+        {
+          "name": "file",
+          "optional": true,
+          "type": "FilePreviewCardFile",
+          "category": "prop"
+        },
+        {
+          "name": "status",
+          "optional": true,
+          "type": "\"uploading\"",
+          "category": "prop"
+        },
+        {
+          "name": "href",
+          "optional": true,
+          "type": "string",
+          "category": "prop"
+        },
+        {
+          "name": "infoText",
+          "optional": true,
+          "type": "string",
+          "category": "prop"
+        },
+        {
+          "name": "menuActions",
+          "optional": true,
+          "type": "FilePreviewCardMenuAction[]",
+          "category": "prop"
+        },
+        {
+          "name": "footerTitle",
+          "optional": true,
+          "type": "string",
+          "category": "prop"
+        },
+        {
+          "name": "footerSubtitle",
+          "optional": true,
+          "type": "string",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-label",
+        "value": "null/"
+      }
+    ],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "background-color-token",
+      "border-radius-token",
+      "file-preview-card",
+      "icon",
+      "icon-btn",
+      "standard"
+    ],
+    "bemElements": [
+      "file-preview-card__action",
+      "file-preview-card__asset",
+      "file-preview-card__asset--fade",
+      "file-preview-card__body",
+      "file-preview-card__footer",
+      "file-preview-card__info",
+      "file-preview-card__see-more"
+    ],
+    "bemModifiers": [],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--color-background-inverse",
+      "--color-foreground-on-strong",
+      "--color-foreground-secondary",
+      "--font-size-body",
+      "--font-size-small",
+      "--spacing-100",
+      "--spacing-150",
+      "--spacing-250",
+      "--spacing-400",
+      "--spacing-50"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-filter-chip.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-filter-chip.json
new file mode 100644
index 0000000000..e9ad6fb647
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-filter-chip.json
@@ -0,0 +1,136 @@
+{
+  "name": "evo-filter-chip",
+  "skinModules": [
+    "filter-chip"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/filter-chip"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [
+      "evo-icon-chevron-down-12"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Marko.HTML.Button",
+        "Omit<Marko.HTML.A, \"type\" | `on${string}`>"
+      ],
+      "a11yProps": [
+        {
+          "name": "a11ySelectedText",
+          "optional": true,
+          "type": "string",
+          "category": "a11y"
+        }
+      ],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "icon",
+          "optional": true,
+          "type": "Marko.AttrTag<{ content?: Marko.Body }>",
+          "category": "slot"
+        },
+        {
+          "name": "image",
+          "optional": true,
+          "type": "Marko.AttrTag<Marko.HTML.Img>",
+          "category": "slot"
+        }
+      ],
+      "regularProps": [
+        {
+          "name": "selected",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "selectedChange",
+          "optional": true,
+          "type": "(selected: boolean) => void",
+          "category": "prop"
+        },
+        {
+          "name": "variant",
+          "optional": true,
+          "type": "\"default\" | \"expressive\" | \"menu\"",
+          "category": "prop"
+        },
+        {
+          "name": "expanded",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "expandedChange",
+          "optional": true,
+          "type": "(expanded: boolean) => void",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-selected",
+        "value": "(selected ? \"true\" : \"false\")"
+      },
+      {
+        "attr": "aria-expanded",
+        "value": "variant"
+      }
+    ],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "background-keyframes",
+      "base",
+      "chevron-close",
+      "chevron-keyframes",
+      "chevron-open",
+      "filter-chip",
+      "image-treatment",
+      "interactive",
+      "selected",
+      "selected-animation",
+      "standard",
+      "strong",
+      "text"
+    ],
+    "bemElements": [
+      "filter-chip__media",
+      "filter-chip__text",
+      "filter-chip__trailing"
+    ],
+    "bemModifiers": [
+      "filter-chip--animated",
+      "filter-chip--expressive",
+      "filter-chip--selected"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--border-radius-100",
+      "--border-radius-150",
+      "--spacing-400"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [
+      "[aria-expanded=\"false\"]",
+      "[aria-expanded=\"true\"]",
+      "[aria-pressed=\"true\"]"
+    ],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-filter-input.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-filter-input.json
new file mode 100644
index 0000000000..d300cb6c7c
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-filter-input.json
@@ -0,0 +1,94 @@
+{
+  "name": "evo-filter-input",
+  "skinModules": [
+    "icon",
+    "textbox",
+    "filter-input"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/icon",
+      "@ebay/skin/textbox",
+      "@ebay/skin/filter-input"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [
+      "evo-textbox",
+      "evo-icon-search-16",
+      "evo-icon-button",
+      "evo-icon-clear-16"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Omit<TextboxInput, \"size\">"
+      ],
+      "a11yProps": [
+        {
+          "name": "a11yClearButtonText",
+          "optional": true,
+          "type": "string",
+          "category": "a11y"
+        },
+        {
+          "name": "a11yControlsId",
+          "optional": false,
+          "type": "string",
+          "category": "a11y"
+        }
+      ],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [],
+      "regularProps": [
+        {
+          "name": "size",
+          "optional": true,
+          "type": "\"large\" | \"small\"",
+          "category": "prop"
+        },
+        {
+          "name": "placeholder",
+          "optional": false,
+          "type": "NonNullable<TextboxInput[\"placeholder\"]>",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-controls",
+        "value": "a11yControlsId"
+      }
+    ],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "base",
+      "color-token",
+      "icon"
+    ],
+    "bemElements": [],
+    "bemModifiers": [
+      "icon--attention-filled",
+      "icon--confirmation-filled",
+      "icon--disabled",
+      "icon--information-filled"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--color-media-disabled-filter"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-icon-button.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-icon-button.json
new file mode 100644
index 0000000000..c8add292c6
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-icon-button.json
@@ -0,0 +1,161 @@
+{
+  "name": "evo-icon-button",
+  "skinModules": [
+    "icon-button",
+    "button",
+    "link"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/icon-button",
+      "@ebay/skin/button",
+      "@ebay/skin/link"
+    ],
+    "makeupImports": [],
+    "internalImports": [
+      "evo-button",
+      "evo-badge"
+    ],
+    "subComponents": [
+      "evo-button",
+      "evo-badge"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Omit<Marko.HTML.Button, \"aria-label\">",
+        "Omit<Marko.HTML.A, \"type\" | `on${string}` | \"aria-label\">"
+      ],
+      "a11yProps": [
+        {
+          "name": "a11yText",
+          "optional": false,
+          "type": "string | null",
+          "category": "a11y"
+        }
+      ],
+      "ariaProps": [],
+      "eventCallbacks": [
+        {
+          "name": "onEscape",
+          "optional": true,
+          "type": "ButtonInput[\"onEscape\"]",
+          "category": "event"
+        }
+      ],
+      "attrTagSlots": [
+        {
+          "name": "badge",
+          "optional": true,
+          "type": "Marko.AttrTag<Omit<BadgeInput, \"a11yText\" | \"type\">>",
+          "category": "slot"
+        }
+      ],
+      "regularProps": [
+        {
+          "name": "href",
+          "optional": true,
+          "type": "string",
+          "category": "prop"
+        },
+        {
+          "name": "transparent",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "priority",
+          "optional": true,
+          "type": "ButtonInput[\"priority\"]",
+          "category": "prop"
+        },
+        {
+          "name": "size",
+          "optional": true,
+          "type": "ButtonInput[\"size\"]",
+          "category": "prop"
+        },
+        {
+          "name": "partiallyDisabled",
+          "optional": true,
+          "type": "ButtonInput[\"partiallyDisabled\"]",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-label",
+        "value": "a11yText"
+      },
+      {
+        "attr": "aria-disabled",
+        "value": "partiallyDisabled"
+      }
+    ],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "badge",
+      "icon-btn",
+      "icon-link",
+      "progress-spinner",
+      "standard",
+      "transparent"
+    ],
+    "bemElements": [],
+    "bemModifiers": [
+      "icon--attention-filled-16",
+      "icon--attention-filled-24",
+      "icon--confirmation-filled-16",
+      "icon--confirmation-filled-24",
+      "icon--information-filled-16",
+      "icon--information-filled-24",
+      "icon-blinktn--secondary",
+      "icon-btn--badged",
+      "icon-btn--large",
+      "icon-btn--primary",
+      "icon-btn--secondary",
+      "icon-btn--small",
+      "icon-btn--tertiary",
+      "icon-btn--transparent",
+      "icon-link--badged",
+      "icon-link--large",
+      "icon-link--primary",
+      "icon-link--secondary",
+      "icon-link--small",
+      "icon-link--tertiary",
+      "icon-link--transparent"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--color-background-accent",
+      "--color-background-disabled",
+      "--color-background-primary",
+      "--color-background-secondary",
+      "--color-border-accent",
+      "--color-border-disabled",
+      "--color-border-medium",
+      "--color-foreground-accent",
+      "--color-foreground-attention",
+      "--color-foreground-disabled",
+      "--color-foreground-on-accent",
+      "--color-foreground-primary",
+      "--color-foreground-success"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [
+      "[aria-disabled=\"true\"]",
+      "[disabled]"
+    ],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-icon.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-icon.json
new file mode 100644
index 0000000000..213f525385
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-icon.json
@@ -0,0 +1,114 @@
+{
+  "name": "evo-icon",
+  "skinModules": [
+    "icon",
+    "star-rating"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/icon",
+      "@ebay/skin/star-rating"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Marko.SVG.SVG"
+      ],
+      "a11yProps": [
+        {
+          "name": "a11yText",
+          "optional": true,
+          "type": "string",
+          "category": "a11y"
+        }
+      ],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [],
+      "regularProps": [
+        {
+          "name": "_symbol",
+          "optional": false,
+          "type": "string",
+          "category": "prop"
+        },
+        {
+          "name": "_name",
+          "optional": false,
+          "type": "string",
+          "category": "prop"
+        },
+        {
+          "name": "_size",
+          "optional": true,
+          "type": "string",
+          "category": "prop"
+        },
+        {
+          "name": "_type",
+          "optional": true,
+          "type": "string",
+          "category": "prop"
+        },
+        {
+          "name": "_def",
+          "optional": true,
+          "type": "() => IconDefs",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-hidden",
+        "value": "!hasA11yText"
+      },
+      {
+        "attr": "aria-labelledby",
+        "value": "hasTitle"
+      }
+    ],
+    "templateRoleUsages": [
+      "!!hasA11yText"
+    ]
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "base",
+      "color-token",
+      "icon"
+    ],
+    "bemElements": [],
+    "bemModifiers": [
+      "icon--attention-filled",
+      "icon--confirmation-filled",
+      "icon--disabled",
+      "icon--information-filled"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--color-media-disabled-filter"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": true,
+    "props": [],
+    "a11yProps": [],
+    "ariaProps": [],
+    "eventHandlers": [],
+    "ariaUsages": [
+      "aria-hidden"
+    ],
+    "roleUsages": [],
+    "makeupImports": []
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-image-placeholder.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-image-placeholder.json
new file mode 100644
index 0000000000..85c98d70bc
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-image-placeholder.json
@@ -0,0 +1,49 @@
+{
+  "name": "evo-image-placeholder",
+  "skinModules": [
+    "icon",
+    "star-rating"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/icon",
+      "@ebay/skin/star-rating"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [
+      "evo-icon"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": null,
+    "templateAriaUsages": [],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "base",
+      "color-token",
+      "icon"
+    ],
+    "bemElements": [],
+    "bemModifiers": [
+      "icon--attention-filled",
+      "icon--confirmation-filled",
+      "icon--disabled",
+      "icon--information-filled"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--color-media-disabled-filter"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-infotip.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-infotip.json
new file mode 100644
index 0000000000..4d6c1bd048
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-infotip.json
@@ -0,0 +1,191 @@
+{
+  "name": "evo-infotip",
+  "skinModules": [
+    "icon-button",
+    "infotip"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/icon-button",
+      "@ebay/skin/infotip"
+    ],
+    "makeupImports": [],
+    "internalImports": [
+      "evo-expander"
+    ],
+    "subComponents": [
+      "evo-expander",
+      "evo-icon-information-16",
+      "evo-icon-close-16"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Marko.HTML.Span"
+      ],
+      "a11yProps": [
+        {
+          "name": "a11yIconText",
+          "optional": false,
+          "type": "string",
+          "category": "a11y"
+        },
+        {
+          "name": "a11yCloseText",
+          "optional": false,
+          "type": "string",
+          "category": "a11y"
+        }
+      ],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "icon",
+          "optional": true,
+          "type": "Marko.AttrTag<Marko.HTML.Span>",
+          "category": "slot"
+        },
+        {
+          "name": "heading",
+          "optional": true,
+          "type": "Marko.AttrTag< Marko.HTML.Span & { as?: Marko.Renderable; } >",
+          "category": "slot"
+        }
+      ],
+      "regularProps": [
+        {
+          "name": "open",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "openChange",
+          "optional": true,
+          "type": "(open: boolean) => void",
+          "category": "prop"
+        },
+        {
+          "name": "placement",
+          "optional": true,
+          "type": "ExpanderInput[\"placement\"]",
+          "category": "prop"
+        },
+        {
+          "name": "offset",
+          "optional": true,
+          "type": "number",
+          "category": "prop"
+        },
+        {
+          "name": "flip",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "shift",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "inline",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "disabled",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-label",
+        "value": "a11yIconText"
+      },
+      {
+        "attr": "aria-expanded",
+        "value": "expander.ariaExpanded"
+      },
+      {
+        "attr": "aria-labelledby",
+        "value": "(heading && headingId)"
+      },
+      {
+        "attr": "aria-label",
+        "value": "a11yCloseText"
+      }
+    ],
+    "templateRoleUsages": [
+      "tooltip"
+    ]
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "badge",
+      "icon-btn",
+      "icon-link",
+      "progress-spinner",
+      "standard",
+      "transparent"
+    ],
+    "bemElements": [],
+    "bemModifiers": [
+      "icon--attention-filled-16",
+      "icon--attention-filled-24",
+      "icon--confirmation-filled-16",
+      "icon--confirmation-filled-24",
+      "icon--information-filled-16",
+      "icon--information-filled-24",
+      "icon-blinktn--secondary",
+      "icon-btn--badged",
+      "icon-btn--large",
+      "icon-btn--primary",
+      "icon-btn--secondary",
+      "icon-btn--small",
+      "icon-btn--tertiary",
+      "icon-btn--transparent",
+      "icon-link--badged",
+      "icon-link--large",
+      "icon-link--primary",
+      "icon-link--secondary",
+      "icon-link--small",
+      "icon-link--tertiary",
+      "icon-link--transparent"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--color-background-accent",
+      "--color-background-disabled",
+      "--color-background-primary",
+      "--color-background-secondary",
+      "--color-border-accent",
+      "--color-border-disabled",
+      "--color-border-medium",
+      "--color-foreground-accent",
+      "--color-foreground-attention",
+      "--color-foreground-disabled",
+      "--color-foreground-on-accent",
+      "--color-foreground-primary",
+      "--color-foreground-success"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [
+      "[aria-disabled=\"true\"]",
+      "[disabled]"
+    ],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-layout-grid.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-layout-grid.json
new file mode 100644
index 0000000000..d53d6bc88d
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-layout-grid.json
@@ -0,0 +1,138 @@
+{
+  "name": "evo-layout-grid",
+  "skinModules": [
+    "layout-grid"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/layout-grid"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [],
+    "helperInterfaces": [
+      {
+        "name": "LayoutOptions",
+        "props": [
+          {
+            "name": "min",
+            "optional": true,
+            "type": "number",
+            "category": "prop"
+          },
+          {
+            "name": "xs",
+            "optional": true,
+            "type": "number",
+            "category": "prop"
+          },
+          {
+            "name": "sm",
+            "optional": true,
+            "type": "number",
+            "category": "prop"
+          },
+          {
+            "name": "md",
+            "optional": true,
+            "type": "number",
+            "category": "prop"
+          },
+          {
+            "name": "lg",
+            "optional": true,
+            "type": "number",
+            "category": "prop"
+          },
+          {
+            "name": "xl",
+            "optional": true,
+            "type": "number",
+            "category": "prop"
+          },
+          {
+            "name": "xl2",
+            "optional": true,
+            "type": "number",
+            "category": "prop"
+          },
+          {
+            "name": "xl3",
+            "optional": true,
+            "type": "number",
+            "category": "prop"
+          },
+          {
+            "name": "xl4",
+            "optional": true,
+            "type": "number",
+            "category": "prop"
+          }
+        ]
+      }
+    ],
+    "inputInterface": {
+      "extends": [
+        "Marko.HTML.UL"
+      ],
+      "a11yProps": [],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "item",
+          "optional": true,
+          "type": "Marko.AttrTag<Marko.HTML.LI>",
+          "category": "slot"
+        }
+      ],
+      "regularProps": [
+        {
+          "name": "columns",
+          "optional": true,
+          "type": "LayoutOptions",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "layout-grid"
+    ],
+    "bemElements": [],
+    "bemModifiers": [],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--layout-grid-cell-gap",
+      "--layout-grid-cell-height-min",
+      "--layout-grid-columns-lg",
+      "--layout-grid-columns-md",
+      "--layout-grid-columns-min",
+      "--layout-grid-columns-sm",
+      "--layout-grid-columns-xl",
+      "--layout-grid-columns-xl2",
+      "--layout-grid-columns-xl3",
+      "--layout-grid-columns-xl4",
+      "--layout-grid-columns-xs",
+      "--spacing-100"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [
+      "[data-columns-#{$breakpoint}=\"#{$i}\"]",
+      "[data-columns-min=\"1\"]",
+      "[data-columns-min=\"2\"]",
+      "[data-columns-min=\"3\"]",
+      "[data-columns-min=\"4\"]"
+    ],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-list.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-list.json
new file mode 100644
index 0000000000..ab780a0fc8
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-list.json
@@ -0,0 +1,71 @@
+{
+  "name": "evo-list",
+  "skinModules": [
+    "list"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/list"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [],
+    "helperInterfaces": [
+      {
+        "name": "ListItem",
+        "props": []
+      }
+    ],
+    "inputInterface": {
+      "extends": [
+        "Marko.HTML.Div"
+      ],
+      "a11yProps": [],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "item",
+          "optional": true,
+          "type": "Marko.AttrTag<ListItem>",
+          "category": "slot"
+        }
+      ],
+      "regularProps": []
+    },
+    "templateAriaUsages": [],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "background-color-token",
+      "list",
+      "standard"
+    ],
+    "bemElements": [
+      "list__body",
+      "list__leading",
+      "list__trailing"
+    ],
+    "bemModifiers": [],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--color-border-subtle",
+      "--color-foreground-primary",
+      "--font-size-medium",
+      "--spacing-150",
+      "--spacing-200",
+      "--spacing-300",
+      "--spacing-600"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [],
+    "rtlOverrides": true
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-listbox-button.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-listbox-button.json
new file mode 100644
index 0000000000..a3bdeb0c1c
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-listbox-button.json
@@ -0,0 +1,272 @@
+{
+  "name": "evo-listbox-button",
+  "skinModules": [
+    "listbox-button",
+    "button"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/listbox-button",
+      "@ebay/skin/button"
+    ],
+    "makeupImports": [],
+    "internalImports": [
+      "evo-listbox",
+      "evo-button"
+    ],
+    "subComponents": [
+      "evo-listbox",
+      "evo-button",
+      "evo-expander",
+      "evo-icon-chevron-down-16"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Marko.HTML.Div"
+      ],
+      "a11yProps": [
+        {
+          "name": "a11ySelectedText",
+          "optional": false,
+          "type": "string",
+          "category": "a11y"
+        },
+        {
+          "name": "a11yDescribedBy",
+          "optional": true,
+          "type": "string",
+          "category": "a11y"
+        }
+      ],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [],
+      "regularProps": [
+        {
+          "name": "selected",
+          "optional": true,
+          "type": "ListboxInput<Index>[\"selected\"]",
+          "category": "prop"
+        },
+        {
+          "name": "selectedChange",
+          "optional": true,
+          "type": "ListboxInput<Index>[\"selectedChange\"]",
+          "category": "prop"
+        },
+        {
+          "name": "open",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "openChange",
+          "optional": true,
+          "type": "(newOpen: boolean) => void",
+          "category": "prop"
+        },
+        {
+          "name": "option",
+          "optional": true,
+          "type": "ListboxInput<Index>[\"option\"]",
+          "category": "prop"
+        },
+        {
+          "name": "name",
+          "optional": true,
+          "type": "ListboxInput<Index>[\"name\"]",
+          "category": "prop"
+        },
+        {
+          "name": "listSelection",
+          "optional": true,
+          "type": "ListboxInput<Index>[\"listSelection\"]",
+          "category": "prop"
+        },
+        {
+          "name": "prefixId",
+          "optional": true,
+          "type": "string",
+          "category": "prop"
+        },
+        {
+          "name": "unselectedText",
+          "optional": true,
+          "type": "string",
+          "category": "prop"
+        },
+        {
+          "name": "variant",
+          "optional": true,
+          "type": "\"standard\" | \"form\"",
+          "category": "prop"
+        },
+        {
+          "name": "truncate",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "fluid",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "strategy",
+          "optional": true,
+          "type": "\"fixed\" | \"absolute\"",
+          "category": "prop"
+        },
+        {
+          "name": "borderless",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "floatingLabel",
+          "optional": true,
+          "type": "string",
+          "category": "prop"
+        },
+        {
+          "name": "disabled",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "buttonName",
+          "optional": true,
+          "type": "string",
+          "category": "prop"
+        },
+        {
+          "name": "split",
+          "optional": true,
+          "type": "ButtonInput[\"split\"]",
+          "category": "prop"
+        },
+        {
+          "name": "invalid",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "hasError",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "prefixLabel",
+          "optional": true,
+          "type": "string",
+          "category": "prop"
+        },
+        {
+          "name": "postfixLabel",
+          "optional": true,
+          "type": "string",
+          "category": "prop"
+        },
+        {
+          "name": "collapseOnSelect",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-haspopup",
+        "value": "\"listbox\""
+      },
+      {
+        "attr": "aria-describedby",
+        "value": "a11yDescribedBy"
+      },
+      {
+        "attr": "aria-labelledby",
+        "value": "prefixId"
+      },
+      {
+        "attr": "aria-invalid",
+        "value": "invalid"
+      },
+      {
+        "attr": "aria-expanded",
+        "value": "expander.ariaExpanded"
+      }
+    ],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "background-color-token",
+      "base",
+      "border-color-token",
+      "border-radius-token",
+      "btn",
+      "color-token",
+      "com",
+      "disabled",
+      "expand-btn",
+      "icon",
+      "item-border-radius",
+      "listbox-button",
+      "paciellogroup",
+      "selection-list-item-base",
+      "selector-hover",
+      "status"
+    ],
+    "bemElements": [
+      "btn__floating-label",
+      "btn__label",
+      "btn__text",
+      "listbox-button__description",
+      "listbox-button__listbox",
+      "listbox-button__option",
+      "listbox-button__option--active",
+      "listbox-button__options",
+      "listbox-button__value"
+    ],
+    "bemModifiers": [
+      "btn--borderless",
+      "btn--form",
+      "expand-btn--borderless",
+      "listbox-button--error",
+      "listbox-button--expanded",
+      "listbox-button--fluid",
+      "listbox-button--form"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--font-size-small",
+      "--spacing-100"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [
+      "[aria-disabled=\"true\"]",
+      "[aria-expanded=\"true\"]",
+      "[aria-invalid=\"true\"]",
+      "[aria-selected=\"true\"]",
+      "[disabled]",
+      "[role=\"listbox\"]",
+      "[role=\"option\"]"
+    ],
+    "rtlOverrides": true
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-listbox.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-listbox.json
new file mode 100644
index 0000000000..2c50fb4bfb
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-listbox.json
@@ -0,0 +1,162 @@
+{
+  "name": "evo-listbox",
+  "skinModules": [
+    "listbox"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/listbox"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [
+      "evo-roving-tabindex",
+      "evo-typeahead",
+      "evo-icon-tick-16"
+    ],
+    "helperInterfaces": [
+      {
+        "name": "Option",
+        "props": [
+          {
+            "name": "value",
+            "optional": false,
+            "type": "Marko.HTML.Option[\"value\"]",
+            "category": "prop"
+          },
+          {
+            "name": "disabled",
+            "optional": true,
+            "type": "boolean",
+            "category": "prop"
+          },
+          {
+            "name": "description",
+            "optional": true,
+            "type": "Marko.AttrTag<Marko.HTML.Span>",
+            "category": "slot"
+          },
+          {
+            "name": "icon",
+            "optional": true,
+            "type": "Marko.AttrTag<{ content?: Marko.Body }>",
+            "category": "slot"
+          }
+        ]
+      }
+    ],
+    "inputInterface": {
+      "extends": [
+        "Marko.HTML.Div"
+      ],
+      "a11yProps": [
+        {
+          "name": "a11ySelectedText",
+          "optional": false,
+          "type": "string",
+          "category": "a11y"
+        }
+      ],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "option",
+          "optional": true,
+          "type": "Marko.AttrTag<Option>",
+          "category": "slot"
+        }
+      ],
+      "regularProps": [
+        {
+          "name": "selected",
+          "optional": true,
+          "type": "Index",
+          "category": "prop"
+        },
+        {
+          "name": "selectedChange",
+          "optional": true,
+          "type": "(selected: Index) => void",
+          "category": "prop"
+        },
+        {
+          "name": "listSelection",
+          "optional": true,
+          "type": "\"auto\" | \"manual\"",
+          "category": "prop"
+        },
+        {
+          "name": "typeaheadTimeoutLength",
+          "optional": true,
+          "type": "number",
+          "category": "prop"
+        },
+        {
+          "name": "name",
+          "optional": true,
+          "type": "string",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-disabled",
+        "value": "disabled"
+      },
+      {
+        "attr": "aria-selected",
+        "value": "isSelected"
+      }
+    ],
+    "templateRoleUsages": [
+      "listbox",
+      "option"
+    ]
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "background-color-token",
+      "base",
+      "color-token",
+      "com",
+      "disabled",
+      "icon",
+      "listbox",
+      "paciellogroup",
+      "selector-hover",
+      "status"
+    ],
+    "bemElements": [
+      "listbox__description",
+      "listbox__option",
+      "listbox__option--active",
+      "listbox__options",
+      "listbox__options--fix-width",
+      "listbox__options--reverse",
+      "listbox__value"
+    ],
+    "bemModifiers": [],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--font-size-small",
+      "--spacing-100",
+      "--spacing-200"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [
+      "[aria-disabled=\"true\"]",
+      "[aria-selected=\"true\"]",
+      "[role=\"listbox\"]",
+      "[role=\"option\"]"
+    ],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-menu-button.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-menu-button.json
new file mode 100644
index 0000000000..26285b9ccd
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-menu-button.json
@@ -0,0 +1,236 @@
+{
+  "name": "evo-menu-button",
+  "skinModules": [
+    "menu-button",
+    "filter-chip"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/menu-button",
+      "@ebay/skin/filter-chip"
+    ],
+    "makeupImports": [],
+    "internalImports": [
+      "evo-icon-button",
+      "evo-filter-chip",
+      "evo-button",
+      "evo-menu"
+    ],
+    "subComponents": [
+      "evo-icon-button",
+      "evo-filter-chip",
+      "evo-button",
+      "evo-menu",
+      "evo-expander",
+      "evo-icon-chevron-down-12"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Omit<MenuInput<Index>, \"variant\">"
+      ],
+      "a11yProps": [],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "label",
+          "optional": true,
+          "type": "Marko.AttrTag<Marko.HTML.Span>",
+          "category": "slot"
+        },
+        {
+          "name": "footerButton",
+          "optional": true,
+          "type": "Marko.AttrTag<ButtonInput>",
+          "category": "slot"
+        }
+      ],
+      "regularProps": [
+        {
+          "name": "open",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "openChange",
+          "optional": true,
+          "type": "(open: boolean) => void",
+          "category": "prop"
+        },
+        {
+          "name": "collapseOnSelect",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "prefixId",
+          "optional": true,
+          "type": "string",
+          "category": "prop"
+        },
+        {
+          "name": "variant",
+          "optional": true,
+          "type": "\"form\" | \"button\" | \"icon\" | \"filter\"",
+          "category": "prop"
+        },
+        {
+          "name": "borderless",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "partiallyDisabled",
+          "optional": true,
+          "type": "ButtonInput[\"partiallyDisabled\"]",
+          "category": "prop"
+        },
+        {
+          "name": "priority",
+          "optional": true,
+          "type": "\"primary\" | \"secondary\" | \"tertiary\" | \"delete\" | \"none\"",
+          "category": "prop"
+        },
+        {
+          "name": "size",
+          "optional": true,
+          "type": "ButtonInput[\"size\"]",
+          "category": "prop"
+        },
+        {
+          "name": "transparent",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "disabled",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "split",
+          "optional": true,
+          "type": "ButtonInput[\"split\"]",
+          "category": "prop"
+        },
+        {
+          "name": "noToggleIcon",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "reverse",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "strategy",
+          "optional": true,
+          "type": "\"absolute\" | \"fixed\"",
+          "category": "prop"
+        },
+        {
+          "name": "fixWidth",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-haspopup",
+        "value": "\"true\""
+      },
+      {
+        "attr": "aria-expanded",
+        "value": "expander.ariaExpanded"
+      },
+      {
+        "attr": "aria-labelledby",
+        "value": "prefixId"
+      }
+    ],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "background-color-token",
+      "badge",
+      "base",
+      "border-bottom-left-radius-token",
+      "border-bottom-right-radius-token",
+      "border-color-token",
+      "border-top-left-radius-token",
+      "border-top-right-radius-token",
+      "btn",
+      "color-token",
+      "com",
+      "expand-btn",
+      "fake-menu-button",
+      "filter",
+      "filter-chip",
+      "footer",
+      "icon",
+      "item-border-radius",
+      "menu-button",
+      "paciellogroup",
+      "reverse",
+      "status",
+      "truncate"
+    ],
+    "bemElements": [
+      "fake-menu-button__button",
+      "fake-menu-button__item",
+      "fake-menu-button__item--badged",
+      "fake-menu-button__menu",
+      "fake-menu-button__menu--fix-width",
+      "fake-menu-button__menu--reverse",
+      "fake-menu-button__menu--static",
+      "menu-button__button",
+      "menu-button__footer",
+      "menu-button__item",
+      "menu-button__item--badged",
+      "menu-button__menu",
+      "menu-button__menu--fix-width",
+      "menu-button__menu--reverse",
+      "menu-button__menu--scroll",
+      "menu-button__menu--static",
+      "menu-button__option--active",
+      "menu-button__separator"
+    ],
+    "bemModifiers": [
+      "menu-button--filter"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--spacing-100",
+      "--spacing-50"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [
+      "[aria-checked=\"true\"]",
+      "[aria-current=\"page\"]",
+      "[aria-disabled=\"true\"]",
+      "[aria-expanded=\"true\"]",
+      "[disabled]",
+      "[role=\"option\"]",
+      "[role^=\"menuitem\"]"
+    ],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-menu.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-menu.json
new file mode 100644
index 0000000000..57b5a269ae
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-menu.json
@@ -0,0 +1,206 @@
+{
+  "name": "evo-menu",
+  "skinModules": [
+    "menu"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/menu"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [
+      "evo-roving-tabindex",
+      "evo-typeahead",
+      "evo-icon-radio-unchecked-18",
+      "evo-icon-radio-checked-18",
+      "evo-icon-checkbox-unchecked-18",
+      "evo-icon-checkbox-checked-18",
+      "evo-badge",
+      "evo-icon-tick-16",
+      "evo-button"
+    ],
+    "helperInterfaces": [
+      {
+        "name": "Item",
+        "props": [
+          {
+            "name": "value",
+            "optional": true,
+            "type": "string",
+            "category": "prop"
+          },
+          {
+            "name": "separator",
+            "optional": true,
+            "type": "boolean",
+            "category": "prop"
+          },
+          {
+            "name": "badgeNumber",
+            "optional": true,
+            "type": "number",
+            "category": "prop"
+          },
+          {
+            "name": "disabled",
+            "optional": true,
+            "type": "boolean",
+            "category": "prop"
+          }
+        ]
+      }
+    ],
+    "inputInterface": {
+      "extends": [
+        "Marko.HTML.Span"
+      ],
+      "a11yProps": [],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "item",
+          "optional": true,
+          "type": "Marko.AttrTag<Item>",
+          "category": "slot"
+        },
+        {
+          "name": "footerButton",
+          "optional": true,
+          "type": "Marko.AttrTag<ButtonInput>",
+          "category": "slot"
+        }
+      ],
+      "regularProps": [
+        {
+          "name": "selected",
+          "optional": true,
+          "type": "Index",
+          "category": "prop"
+        },
+        {
+          "name": "selectedChange",
+          "optional": true,
+          "type": "(selected: Index) => void",
+          "category": "prop"
+        },
+        {
+          "name": "variant",
+          "optional": true,
+          "type": "\"filter\" | \"none\"",
+          "category": "prop"
+        },
+        {
+          "name": "classPrefix",
+          "optional": true,
+          "type": "string",
+          "category": "prop"
+        },
+        {
+          "name": "typeaheadTimeoutLength",
+          "optional": true,
+          "type": "number",
+          "category": "prop"
+        },
+        {
+          "name": "reverse",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "fixed",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "fixWidth",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-label",
+        "value": "ariaLabel"
+      },
+      {
+        "attr": "aria-labelledby",
+        "value": "ariaLabelledby"
+      },
+      {
+        "attr": "aria-checked",
+        "value": "isCheckable"
+      },
+      {
+        "attr": "aria-disabled",
+        "value": "disabled"
+      }
+    ],
+    "templateRoleUsages": [
+      "menu",
+      "separator",
+      "itemRole"
+    ]
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "background-color-token",
+      "badge",
+      "base",
+      "border-color-token",
+      "color-token",
+      "com",
+      "fake-menu",
+      "filter",
+      "footer",
+      "icon",
+      "menu",
+      "paciellogroup",
+      "status"
+    ],
+    "bemElements": [
+      "fake-menu__item",
+      "fake-menu__item--badged",
+      "fake-menu__items",
+      "fake-menu__items--fix-width",
+      "fake-menu__items--reverse",
+      "menu__footer",
+      "menu__item",
+      "menu__item--badged",
+      "menu__items",
+      "menu__items--fix-width",
+      "menu__items--reverse",
+      "menu__items--scroll",
+      "menu__separator"
+    ],
+    "bemModifiers": [
+      "expand-btn--borderless",
+      "menu--filter"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--spacing-100"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [
+      "[aria-checked=\"true\"]",
+      "[aria-current=\"page\"]",
+      "[aria-disabled=\"true\"]",
+      "[disabled]",
+      "[role=\"menu\"]",
+      "[role^=\"menuitem\"]"
+    ],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-number-input.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-number-input.json
new file mode 100644
index 0000000000..97804be7a3
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-number-input.json
@@ -0,0 +1,68 @@
+{
+  "name": "evo-number-input",
+  "skinModules": [
+    "icon",
+    "textbox",
+    "number-input"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/icon",
+      "@ebay/skin/textbox",
+      "@ebay/skin/number-input"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [
+      "evo-textbox",
+      "evo-icon-button",
+      "evo-icon-remove-24",
+      "evo-icon-delete-24",
+      "evo-icon-add-24"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": null,
+    "templateAriaUsages": [
+      {
+        "attr": "aria-label",
+        "value": "(!a11yText && !label ? \"Number Input\" : a11yText)"
+      },
+      {
+        "attr": "aria-hidden",
+        "value": "\"true\""
+      },
+      {
+        "attr": "aria-hidden",
+        "value": "\"true\""
+      }
+    ],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "base",
+      "color-token",
+      "icon"
+    ],
+    "bemElements": [],
+    "bemModifiers": [
+      "icon--attention-filled",
+      "icon--confirmation-filled",
+      "icon--disabled",
+      "icon--information-filled"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--color-media-disabled-filter"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-pagination.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-pagination.json
new file mode 100644
index 0000000000..65c6c1e147
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-pagination.json
@@ -0,0 +1,152 @@
+{
+  "name": "evo-pagination",
+  "skinModules": [
+    "pagination",
+    "utility",
+    "icon",
+    "icon-button"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/pagination",
+      "@ebay/skin/utility",
+      "@ebay/skin/icon",
+      "@ebay/skin/icon-button"
+    ],
+    "makeupImports": [],
+    "internalImports": [
+      "evo-icon-button"
+    ],
+    "subComponents": [
+      "evo-icon-button",
+      "evo-icon-arrow-left-16",
+      "evo-fake-menu-button",
+      "evo-icon-overflow-horizontal-24",
+      "evo-icon-arrow-right-16"
+    ],
+    "helperInterfaces": [
+      {
+        "name": "Item",
+        "props": [
+          {
+            "name": "current",
+            "optional": true,
+            "type": "boolean",
+            "category": "prop"
+          },
+          {
+            "name": "href",
+            "optional": true,
+            "type": "string",
+            "category": "prop"
+          }
+        ]
+      }
+    ],
+    "inputInterface": {
+      "extends": [
+        "Marko.HTML.Nav"
+      ],
+      "a11yProps": [
+        {
+          "name": "a11yCurrentText",
+          "optional": false,
+          "type": "Marko.HTMLAttributes[\"aria-label\"]",
+          "category": "a11y"
+        }
+      ],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "item",
+          "optional": true,
+          "type": "Marko.AttrTag<Item>",
+          "category": "slot"
+        },
+        {
+          "name": "prev",
+          "optional": true,
+          "type": "Marko.AttrTag<Omit<IconButtonInput, \"content\">>",
+          "category": "slot"
+        },
+        {
+          "name": "next",
+          "optional": true,
+          "type": "Marko.AttrTag<Omit<IconButtonInput, \"content\">>",
+          "category": "slot"
+        }
+      ],
+      "regularProps": [
+        {
+          "name": "variant",
+          "optional": true,
+          "type": "\"show-range\" | \"show-last\" | \"overflow\"",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-labelledby",
+        "value": "headingId"
+      },
+      {
+        "attr": "aria-live",
+        "value": "\"polite\""
+      },
+      {
+        "attr": "aria-current",
+        "value": "item.current"
+      }
+    ],
+    "templateRoleUsages": [
+      "navigation",
+      "status",
+      "separator"
+    ]
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "color-token",
+      "com",
+      "flex-items-centered",
+      "inline-flex-items-centered",
+      "paciellogroup",
+      "pagination",
+      "standard"
+    ],
+    "bemElements": [
+      "pagination__item",
+      "pagination__items",
+      "pagination__next",
+      "pagination__previous"
+    ],
+    "bemModifiers": [
+      "icon--arrow-left-16",
+      "icon--arrow-right-16",
+      "icon-btn--transparent",
+      "pagination--fluid"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--font-weight-400",
+      "--font-weight-600",
+      "--spacing-100",
+      "--spacing-200",
+      "--spacing-600"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [
+      "[aria-current=\"page\"]",
+      "[hidden]"
+    ],
+    "rtlOverrides": true
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-progress-spinner.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-progress-spinner.json
new file mode 100644
index 0000000000..b50dafb532
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-progress-spinner.json
@@ -0,0 +1,74 @@
+{
+  "name": "evo-progress-spinner",
+  "skinModules": [
+    "progress-spinner"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/progress-spinner"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [
+      "evo-icon-spinner-30",
+      "evo-icon-spinner-20",
+      "evo-icon-spinner-24"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Omit<Marko.HTML.Span, \"role\" | \"aria-label\">"
+      ],
+      "a11yProps": [
+        {
+          "name": "a11yText",
+          "optional": false,
+          "type": "string | null",
+          "category": "a11y"
+        }
+      ],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [],
+      "regularProps": [
+        {
+          "name": "size",
+          "optional": true,
+          "type": "\"large\" | \"small\"",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-label",
+        "value": "a11yText"
+      }
+    ],
+    "templateRoleUsages": [
+      "img"
+    ]
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "icon",
+      "progress-spinner"
+    ],
+    "bemElements": [],
+    "bemModifiers": [
+      "progress-spinner--large",
+      "progress-spinner--small"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-progress-stepper.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-progress-stepper.json
new file mode 100644
index 0000000000..380d1815d2
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-progress-stepper.json
@@ -0,0 +1,127 @@
+{
+  "name": "evo-progress-stepper",
+  "skinModules": [
+    "progress-stepper"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/progress-stepper"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [
+      "evo-icon-stepper-confirmation-24",
+      "evo-icon-stepper-attention-24",
+      "evo-icon-stepper-upcoming-24"
+    ],
+    "helperInterfaces": [
+      {
+        "name": "Step",
+        "props": []
+      }
+    ],
+    "inputInterface": {
+      "extends": [
+        "Marko.HTML.Div"
+      ],
+      "a11yProps": [
+        {
+          "name": "a11yHeadingText",
+          "optional": false,
+          "type": "string",
+          "category": "a11y"
+        }
+      ],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "step",
+          "optional": true,
+          "type": "Marko.AttrTag<Step>",
+          "category": "slot"
+        }
+      ],
+      "regularProps": [
+        {
+          "name": "direction",
+          "optional": true,
+          "type": "\"row\" | \"column\"",
+          "category": "prop"
+        },
+        {
+          "name": "defaultState",
+          "optional": true,
+          "type": "\"active\" | \"complete\" | \"upcoming\" | \"attention\" | \"current\"",
+          "category": "prop"
+        },
+        {
+          "name": "headingAs",
+          "optional": true,
+          "type": "keyof Marko.NativeTags",
+          "category": "prop"
+        },
+        {
+          "name": "stepContentAs",
+          "optional": true,
+          "type": "keyof Marko.NativeTags",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-labelledby",
+        "value": "stepperHeading"
+      },
+      {
+        "attr": "aria-current",
+        "value": "current"
+      }
+    ],
+    "templateRoleUsages": [
+      "list",
+      "presentation",
+      "listitem"
+    ]
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "background-color-token",
+      "color-token",
+      "progress-stepper"
+    ],
+    "bemElements": [
+      "progress-stepper__icon",
+      "progress-stepper__item",
+      "progress-stepper__item--attention",
+      "progress-stepper__items",
+      "progress-stepper__items--current",
+      "progress-stepper__items--upcoming",
+      "progress-stepper__separator",
+      "progress-stepper__text"
+    ],
+    "bemModifiers": [
+      "progress-stepper--vertical"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--color-background-accent",
+      "--color-background-disabled",
+      "--font-size-body",
+      "--spacing-200",
+      "--spacing-50"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [
+      "[aria-current]"
+    ],
+    "rtlOverrides": true
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-radio.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-radio.json
new file mode 100644
index 0000000000..3f884a8d16
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-radio.json
@@ -0,0 +1,75 @@
+{
+  "name": "evo-radio",
+  "skinModules": [
+    "radio",
+    "field"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/radio",
+      "@ebay/skin/field"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [
+      "evo-icon-radio-unchecked-24",
+      "evo-icon-radio-checked-24",
+      "evo-icon-radio-unchecked-18",
+      "evo-icon-radio-checked-18"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Marko.HTML.Input"
+      ],
+      "a11yProps": [],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [],
+      "regularProps": [
+        {
+          "name": "size",
+          "optional": true,
+          "type": "\"large\"",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "base",
+      "color-token",
+      "com",
+      "fill-token",
+      "outline-color-token",
+      "paciellogroup",
+      "radio"
+    ],
+    "bemElements": [
+      "radio__checked",
+      "radio__control",
+      "radio__icon",
+      "radio__unchecked"
+    ],
+    "bemModifiers": [
+      "radio--large"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [
+      "[disabled]",
+      "[hidden]"
+    ],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-segmented-buttons.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-segmented-buttons.json
new file mode 100644
index 0000000000..3a6478ca30
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-segmented-buttons.json
@@ -0,0 +1,113 @@
+{
+  "name": "evo-segmented-buttons",
+  "skinModules": [
+    "segmented-buttons"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/segmented-buttons"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [],
+    "helperInterfaces": [
+      {
+        "name": "SegmentedButton",
+        "props": [
+          {
+            "name": "name",
+            "optional": true,
+            "type": "string",
+            "category": "prop"
+          },
+          {
+            "name": "icon",
+            "optional": true,
+            "type": "Marko.AttrTag<{ content: Marko.Body }>",
+            "category": "slot"
+          }
+        ]
+      }
+    ],
+    "inputInterface": {
+      "extends": [
+        "Marko.HTML.Div"
+      ],
+      "a11yProps": [],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "button",
+          "optional": true,
+          "type": "Marko.AttrTag<SegmentedButton>",
+          "category": "slot"
+        }
+      ],
+      "regularProps": [
+        {
+          "name": "selected",
+          "optional": true,
+          "type": "Selected",
+          "category": "prop"
+        },
+        {
+          "name": "selectedChange",
+          "optional": true,
+          "type": "(selected: Selected) => void",
+          "category": "prop"
+        },
+        {
+          "name": "size",
+          "optional": true,
+          "type": "(typeof validSizes)[number]",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-current",
+        "value": "isSelected"
+      }
+    ],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "cell-base",
+      "icon",
+      "icon-base",
+      "segmented-buttons",
+      "standard"
+    ],
+    "bemElements": [
+      "segmented-buttons__button",
+      "segmented-buttons__button-cell"
+    ],
+    "bemModifiers": [
+      "segmented-buttons--large"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--color-border-medium",
+      "--color-foreground-on-inverse",
+      "--color-foreground-primary",
+      "--font-size-body",
+      "--spacing-100",
+      "--spacing-200",
+      "--spacing-50"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [
+      "[aria-current]"
+    ],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-select.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-select.json
new file mode 100644
index 0000000000..515d2c8df9
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-select.json
@@ -0,0 +1,116 @@
+{
+  "name": "evo-select",
+  "skinModules": [
+    "select",
+    "icon",
+    "floating-label"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/select",
+      "@ebay/skin/icon",
+      "@ebay/skin/floating-label"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [
+      "evo-floating-label",
+      "evo-icon-chevron-down-12"
+    ],
+    "helperInterfaces": [
+      {
+        "name": "Option",
+        "props": [
+          {
+            "name": "optgroup",
+            "optional": true,
+            "type": "string",
+            "category": "prop"
+          }
+        ]
+      }
+    ],
+    "inputInterface": {
+      "extends": [
+        "Marko.HTML.Select"
+      ],
+      "a11yProps": [],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "option",
+          "optional": true,
+          "type": "Marko.AttrTag<Option>",
+          "category": "slot"
+        }
+      ],
+      "regularProps": [
+        {
+          "name": "floatingLabel",
+          "optional": true,
+          "type": "string",
+          "category": "prop"
+        },
+        {
+          "name": "size",
+          "optional": true,
+          "type": "\"regular\" | \"large\"",
+          "category": "prop"
+        },
+        {
+          "name": "fluid",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "borderless",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "background-color-token",
+      "border-color-token",
+      "color-token",
+      "icon",
+      "select"
+    ],
+    "bemElements": [],
+    "bemModifiers": [
+      "select--borderless",
+      "select--fluid",
+      "select--large",
+      "select--underline"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--border-radius-50",
+      "--font-size-body",
+      "--font-size-medium",
+      "--select-border-radius",
+      "--spacing-200",
+      "--spacing-400"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [
+      "[aria-invalid=\"true\"]",
+      "[disabled]",
+      "[readonly]"
+    ],
+    "rtlOverrides": true
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-selection-chip.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-selection-chip.json
new file mode 100644
index 0000000000..2dcc4f0c7d
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-selection-chip.json
@@ -0,0 +1,84 @@
+{
+  "name": "evo-selection-chip",
+  "skinModules": [
+    "selection-chip"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/selection-chip"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [
+      "evo-icon-close-12"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Marko.HTML.Button"
+      ],
+      "a11yProps": [],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [],
+      "regularProps": [
+        {
+          "name": "selected",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "selectedChange",
+          "optional": true,
+          "type": "(selected: boolean) => void",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-pressed",
+        "value": "(selected ? \"true\" : \"false\")"
+      }
+    ],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "background-keyframes",
+      "base",
+      "interactive",
+      "selected",
+      "selected-animation",
+      "selection-chip",
+      "standard",
+      "strong",
+      "text"
+    ],
+    "bemElements": [
+      "selection-chip__text",
+      "selection-chip__trailing"
+    ],
+    "bemModifiers": [
+      "selection-chip--animated"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--border-radius-50",
+      "--motion-duration-medium-3",
+      "--motion-easing-standard"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [
+      "[aria-pressed=\"true\"]"
+    ],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-signal.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-signal.json
new file mode 100644
index 0000000000..01d74c14a7
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-signal.json
@@ -0,0 +1,66 @@
+{
+  "name": "evo-signal",
+  "skinModules": [
+    "signal"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/signal"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Marko.HTML.Span"
+      ],
+      "a11yProps": [],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [],
+      "regularProps": [
+        {
+          "name": "status",
+          "optional": true,
+          "type": "\"trustworthy\" | \"recent\" | \"time-sensitive\" | \"neutral\"",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "signal"
+    ],
+    "bemElements": [],
+    "bemModifiers": [
+      "signal--neutral",
+      "signal--recent",
+      "signal--time-sensitive",
+      "signal--trustworthy"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--border-radius-100",
+      "--color-foreground-accent",
+      "--color-foreground-attention",
+      "--color-foreground-secondary",
+      "--color-foreground-success",
+      "--font-size-smallest",
+      "--spacing-100",
+      "--spacing-150"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-skeleton.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-skeleton.json
new file mode 100644
index 0000000000..c58c29a0d0
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-skeleton.json
@@ -0,0 +1,96 @@
+{
+  "name": "evo-skeleton",
+  "skinModules": [
+    "skeleton"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/skeleton"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Omit<Marko.HTML.Div, \"role\" | \"aria-label\">"
+      ],
+      "a11yProps": [
+        {
+          "name": "a11yText",
+          "optional": false,
+          "type": "string | null",
+          "category": "a11y"
+        }
+      ],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [],
+      "regularProps": []
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-label",
+        "value": "a11yText"
+      }
+    ],
+    "templateRoleUsages": [
+      "img"
+    ]
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "background-token",
+      "border-radius-token",
+      "skeleton"
+    ],
+    "bemElements": [
+      "skeleton__avatar",
+      "skeleton__button",
+      "skeleton__button--large",
+      "skeleton__button--small",
+      "skeleton__image",
+      "skeleton__text",
+      "skeleton__text--large",
+      "skeleton__text--multiline",
+      "skeleton__textbox"
+    ],
+    "bemModifiers": [
+      "skeleton--blue",
+      "skeleton--green",
+      "skeleton--on-secondary",
+      "skeleton--purple"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--avatar-border-radius",
+      "--color-gradient-ai-blue-subtle",
+      "--color-gradient-ai-green-subtle",
+      "--color-gradient-ai-purple-subtle",
+      "--color-loading-fill-on-secondary",
+      "--color-loading-on-primary-state-1",
+      "--color-loading-on-primary-state-2",
+      "--color-loading-on-secondary-state-1",
+      "--color-loading-on-secondary-state-2",
+      "--motion-duration-long-3",
+      "--motion-duration-medium-2",
+      "--motion-duration-short-3",
+      "--motion-easing-continuous",
+      "--spacing-100",
+      "--spacing-150",
+      "--spacing-300",
+      "--spacing-400",
+      "--spacing-700",
+      "--text-border-radius"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [],
+    "rtlOverrides": true
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-switch.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-switch.json
new file mode 100644
index 0000000000..ef3639dd44
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-switch.json
@@ -0,0 +1,64 @@
+{
+  "name": "evo-switch",
+  "skinModules": [
+    "switch"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/switch"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Omit<Marko.HTML.Input, \"type\" | \"role\">"
+      ],
+      "a11yProps": [],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [],
+      "regularProps": []
+    },
+    "templateAriaUsages": [],
+    "templateRoleUsages": [
+      "switch"
+    ]
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "background-color-token",
+      "before-base",
+      "before-hover",
+      "border-color-token",
+      "com",
+      "outline-token",
+      "paciellogroup",
+      "switch"
+    ],
+    "bemElements": [
+      "switch__button",
+      "switch__control"
+    ],
+    "bemModifiers": [],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--color-background-accent",
+      "--color-background-primary"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [
+      "[aria-checked=\"true\"]",
+      "[aria-disabled=\"true\"]",
+      "[disabled]"
+    ],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-tabs.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-tabs.json
new file mode 100644
index 0000000000..9e4024eda1
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-tabs.json
@@ -0,0 +1,132 @@
+{
+  "name": "evo-tabs",
+  "skinModules": [
+    "tabs"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/tabs"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [
+      "evo-roving-tabindex"
+    ],
+    "helperInterfaces": [
+      {
+        "name": "Tab",
+        "props": [
+          {
+            "name": "panel",
+            "optional": false,
+            "type": "Marko.AttrTag<Marko.HTML.Div>",
+            "category": "slot"
+          }
+        ]
+      }
+    ],
+    "inputInterface": {
+      "extends": [
+        "Marko.HTML.Div"
+      ],
+      "a11yProps": [],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "tab",
+          "optional": true,
+          "type": "Marko.AttrTag<Tab>",
+          "category": "slot"
+        }
+      ],
+      "regularProps": [
+        {
+          "name": "activation",
+          "optional": true,
+          "type": "\"auto\" | \"manual\"",
+          "category": "prop"
+        },
+        {
+          "name": "index",
+          "optional": true,
+          "type": "number",
+          "category": "prop"
+        },
+        {
+          "name": "indexChange",
+          "optional": true,
+          "type": "(index: number) => void",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-controls",
+        "value": "`${tabpanelId}-${i}`"
+      },
+      {
+        "attr": "aria-selected",
+        "value": "isSelected"
+      },
+      {
+        "attr": "aria-labelledby",
+        "value": "`${tabId}-${i}`"
+      }
+    ],
+    "templateRoleUsages": [
+      "tablist",
+      "tab",
+      "tabpanel"
+    ]
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "color-token",
+      "com",
+      "fake-tabs",
+      "paciellogroup",
+      "tabs"
+    ],
+    "bemElements": [
+      "fake-tabs__cell",
+      "fake-tabs__item",
+      "fake-tabs__items",
+      "tabs__cell",
+      "tabs__item",
+      "tabs__items"
+    ],
+    "bemModifiers": [
+      "fake-tabs--large",
+      "tabs--large"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--color-background-secondary",
+      "--color-foreground-disabled",
+      "--color-foreground-secondary",
+      "--font-size-body",
+      "--font-size-medium",
+      "--font-weight-600",
+      "--spacing-150",
+      "--spacing-200",
+      "--spacing-50"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [
+      "[aria-current]",
+      "[aria-disabled=\"true\"]",
+      "[aria-selected=\"true\"]",
+      "[role=\"tab\"]",
+      "[role=\"tablist\"]"
+    ],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-textbox.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-textbox.json
new file mode 100644
index 0000000000..0c58ae7362
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-textbox.json
@@ -0,0 +1,161 @@
+{
+  "name": "evo-textbox",
+  "skinModules": [
+    "icon",
+    "floating-label",
+    "textbox",
+    "icon-button"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/icon",
+      "@ebay/skin/floating-label",
+      "@ebay/skin/textbox",
+      "@ebay/skin/icon-button"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [
+      "evo-floating-label"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Marko.HTML.Input"
+      ],
+      "a11yProps": [],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "prefixIcon",
+          "optional": true,
+          "type": "Marko.AttrTag<{ content: Marko.Body }>",
+          "category": "slot"
+        },
+        {
+          "name": "prefixText",
+          "optional": true,
+          "type": "Marko.AttrTag<Marko.HTML.Span>",
+          "category": "slot"
+        },
+        {
+          "name": "postfixText",
+          "optional": true,
+          "type": "Marko.AttrTag<Marko.HTML.Span>",
+          "category": "slot"
+        },
+        {
+          "name": "postfixIcon",
+          "optional": true,
+          "type": "Marko.AttrTag<Marko.HTML.Button & { a11yText?: string; }>",
+          "category": "slot"
+        }
+      ],
+      "regularProps": [
+        {
+          "name": "multiline",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "inputSize",
+          "optional": true,
+          "type": "\"regular\" | \"large\"",
+          "category": "prop"
+        },
+        {
+          "name": "fluid",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "opaqueLabel",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "floatingLabel",
+          "optional": true,
+          "type": "string",
+          "category": "prop"
+        },
+        {
+          "name": "floatingLabelStatic",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "invalid",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "autocorrect",
+          "optional": true,
+          "type": "Marko.HTML.TextArea[\"autocorrect\"]",
+          "category": "prop"
+        },
+        {
+          "name": "cols",
+          "optional": true,
+          "type": "Marko.HTML.TextArea[\"cols\"]",
+          "category": "prop"
+        },
+        {
+          "name": "rows",
+          "optional": true,
+          "type": "Marko.HTML.TextArea[\"rows\"]",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-describedby",
+        "value": "(\n                [prefixId, postfixId].filter(Boolean)"
+      },
+      {
+        "attr": "aria-invalid",
+        "value": "invalid"
+      },
+      {
+        "attr": "aria-label",
+        "value": "a11yText"
+      }
+    ],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "base",
+      "color-token",
+      "icon"
+    ],
+    "bemElements": [],
+    "bemModifiers": [
+      "icon--attention-filled",
+      "icon--confirmation-filled",
+      "icon--disabled",
+      "icon--information-filled"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--color-media-disabled-filter"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-toggle-button-group.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-toggle-button-group.json
new file mode 100644
index 0000000000..820c616e0d
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-toggle-button-group.json
@@ -0,0 +1,178 @@
+{
+  "name": "evo-toggle-button-group",
+  "skinModules": [
+    "toggle-button-group"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [
+      "evo-toggle-button"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Marko.HTML.Div"
+      ],
+      "a11yProps": [
+        {
+          "name": "a11yText",
+          "optional": true,
+          "type": "string",
+          "category": "a11y"
+        },
+        {
+          "name": "a11yLabelId",
+          "optional": true,
+          "type": "string",
+          "category": "a11y"
+        }
+      ],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "button",
+          "optional": true,
+          "type": "Marko.AttrTag< Omit<ToggleButtonInput, \"pressed\" | \"pressedChange\"> & { name?: string | number; } >",
+          "category": "slot"
+        }
+      ],
+      "regularProps": [
+        {
+          "name": "pressed",
+          "optional": true,
+          "type": "Pressed",
+          "category": "prop"
+        },
+        {
+          "name": "pressedChange",
+          "optional": true,
+          "type": "(pressed: Pressed) => void",
+          "category": "prop"
+        },
+        {
+          "name": "required",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "columnsMin",
+          "optional": true,
+          "type": "number",
+          "category": "prop"
+        },
+        {
+          "name": "columnsXS",
+          "optional": true,
+          "type": "number",
+          "category": "prop"
+        },
+        {
+          "name": "columnsSM",
+          "optional": true,
+          "type": "number",
+          "category": "prop"
+        },
+        {
+          "name": "columnsMD",
+          "optional": true,
+          "type": "number",
+          "category": "prop"
+        },
+        {
+          "name": "columnsXL",
+          "optional": true,
+          "type": "number",
+          "category": "prop"
+        },
+        {
+          "name": "layoutType",
+          "optional": true,
+          "type": "ToggleButtonInput[\"layoutType\"]",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-label",
+        "value": "a11yText"
+      },
+      {
+        "attr": "aria-labelledby",
+        "value": "a11yLabelId"
+      }
+    ],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "e",
+      "toggle-button",
+      "toggle-button-group"
+    ],
+    "bemElements": [
+      "toggle-button__content",
+      "toggle-button__icon",
+      "toggle-button__image",
+      "toggle-button__image-container"
+    ],
+    "bemModifiers": [
+      "toggle-button-group--gallery-layout",
+      "toggle-button-group--list-layout"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--row-gallery-toggle-buttons-md",
+      "--row-gallery-toggle-buttons-min",
+      "--row-gallery-toggle-buttons-sm",
+      "--row-gallery-toggle-buttons-xl",
+      "--row-gallery-toggle-buttons-xs",
+      "--row-list-toggle-buttons-md",
+      "--row-list-toggle-buttons-min",
+      "--row-list-toggle-buttons-sm",
+      "--row-list-toggle-buttons-xl",
+      "--row-list-toggle-buttons-xs",
+      "--row-min-toggle-buttons-md",
+      "--row-min-toggle-buttons-min",
+      "--row-min-toggle-buttons-sm",
+      "--row-min-toggle-buttons-xl",
+      "--row-min-toggle-buttons-xs",
+      "--spacing-100",
+      "--toggle-button-height-min"
+    ],
+    "cssCustomPropertyDefinitions": [
+      "--row-gallery-toggle-buttons-md",
+      "--row-gallery-toggle-buttons-min",
+      "--row-gallery-toggle-buttons-sm",
+      "--row-gallery-toggle-buttons-xl",
+      "--row-gallery-toggle-buttons-xs",
+      "--row-list-toggle-buttons-md",
+      "--row-list-toggle-buttons-min",
+      "--row-list-toggle-buttons-sm",
+      "--row-list-toggle-buttons-xl",
+      "--row-list-toggle-buttons-xs",
+      "--row-min-toggle-buttons-md",
+      "--row-min-toggle-buttons-min",
+      "--row-min-toggle-buttons-sm",
+      "--row-min-toggle-buttons-xl",
+      "--row-min-toggle-buttons-xs"
+    ],
+    "stateSelectors": [
+      "[data-columns-#{$breakpoint}=\"#{$i}\"]",
+      "[data-columns-min=\"1\"]",
+      "[data-columns-min=\"2\"]",
+      "[data-columns-min=\"3\"]"
+    ],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-toggle-button.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-toggle-button.json
new file mode 100644
index 0000000000..9d7b8864ab
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-toggle-button.json
@@ -0,0 +1,142 @@
+{
+  "name": "evo-toggle-button",
+  "skinModules": [
+    "toggle-button"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/toggle-button"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Marko.HTML.Button"
+      ],
+      "a11yProps": [],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "icon",
+          "optional": true,
+          "type": "Marko.AttrTag<Marko.HTML.Span>",
+          "category": "slot"
+        },
+        {
+          "name": "image",
+          "optional": true,
+          "type": "Marko.AttrTag<{ src: string; alt: string; fillPlacement?: string; }>",
+          "category": "slot"
+        },
+        {
+          "name": "subtitle",
+          "optional": true,
+          "type": "Marko.AttrTag<Marko.HTML.Span>",
+          "category": "slot"
+        }
+      ],
+      "regularProps": [
+        {
+          "name": "pressed",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "pressedChange",
+          "optional": true,
+          "type": "(pressed: boolean) => void",
+          "category": "prop"
+        },
+        {
+          "name": "layoutType",
+          "optional": true,
+          "type": "\"minimal\" | \"list\" | \"gallery\"",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-pressed",
+        "value": "pressed"
+      },
+      {
+        "attr": "aria-label",
+        "value": "image.alt"
+      }
+    ],
+    "templateRoleUsages": [
+      "img"
+    ]
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "icon",
+      "toggle-button"
+    ],
+    "bemElements": [
+      "toggle-button__content",
+      "toggle-button__icon",
+      "toggle-button__image",
+      "toggle-button__image-container",
+      "toggle-button__subtitle",
+      "toggle-button__title"
+    ],
+    "bemModifiers": [
+      "toggle-button--gallery-layout",
+      "toggle-button--list-layout"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--color-background-primary",
+      "--color-background-secondary",
+      "--color-border-disabled",
+      "--color-border-medium",
+      "--color-border-strong",
+      "--color-foreground-disabled",
+      "--color-foreground-primary",
+      "--color-foreground-secondary",
+      "--font-size-body",
+      "--font-size-large-1",
+      "--font-size-large-2",
+      "--font-size-medium",
+      "--spacing-100",
+      "--spacing-200",
+      "--spacing-50",
+      "--state-layer-hover",
+      "--state-layer-pressed",
+      "--toggle-button-gallery-width-max",
+      "--toggle-button-gallery-width-min",
+      "--toggle-button-height-min",
+      "--toggle-button-list-width-max",
+      "--toggle-button-list-width-min",
+      "--toggle-button-width-max",
+      "--toggle-button-width-min"
+    ],
+    "cssCustomPropertyDefinitions": [
+      "--toggle-button-gallery-width-max",
+      "--toggle-button-gallery-width-min",
+      "--toggle-button-height-min",
+      "--toggle-button-list-width-max",
+      "--toggle-button-list-width-min",
+      "--toggle-button-width-max",
+      "--toggle-button-width-min"
+    ],
+    "stateSelectors": [
+      "[aria-disabled=\"true\"]",
+      "[aria-pressed=\"true\"]",
+      "[disabled]"
+    ],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-tooltip.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-tooltip.json
new file mode 100644
index 0000000000..2723c57568
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-tooltip.json
@@ -0,0 +1,163 @@
+{
+  "name": "evo-tooltip",
+  "skinModules": [
+    "tooltip"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/tooltip"
+    ],
+    "makeupImports": [],
+    "internalImports": [
+      "evo-expander"
+    ],
+    "subComponents": [
+      "evo-expander"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Marko.HTML.Span"
+      ],
+      "a11yProps": [],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "host",
+          "optional": false,
+          "type": "Marko.AttrTag< Marko.HTML.Span & { as?: Marko.Renderable; } >",
+          "category": "slot"
+        },
+        {
+          "name": "heading",
+          "optional": true,
+          "type": "Marko.AttrTag< Marko.HTML.Span & { as?: Marko.Renderable; } >",
+          "category": "slot"
+        }
+      ],
+      "regularProps": [
+        {
+          "name": "open",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "openChange",
+          "optional": true,
+          "type": "(open: boolean) => void",
+          "category": "prop"
+        },
+        {
+          "name": "placement",
+          "optional": true,
+          "type": "ExpanderInput[\"placement\"]",
+          "category": "prop"
+        },
+        {
+          "name": "offset",
+          "optional": true,
+          "type": "number",
+          "category": "prop"
+        },
+        {
+          "name": "flip",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "shift",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "inline",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "noHover",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-expanded",
+        "value": "expander.ariaExpanded/"
+      }
+    ],
+    "templateRoleUsages": [
+      "tooltip"
+    ]
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "background-color-token",
+      "base",
+      "cell",
+      "close",
+      "color-token",
+      "content",
+      "large-screen",
+      "mask",
+      "pointer-base",
+      "pointer-bottom-center",
+      "pointer-bottom-left",
+      "pointer-bottom-right",
+      "pointer-left",
+      "pointer-left-bottom",
+      "pointer-left-top",
+      "pointer-right",
+      "pointer-right-bottom",
+      "pointer-right-top",
+      "pointer-top-center",
+      "pointer-top-left",
+      "pointer-top-right",
+      "tooltip"
+    ],
+    "bemElements": [
+      "tooltip__cell",
+      "tooltip__close",
+      "tooltip__content",
+      "tooltip__host",
+      "tooltip__mask",
+      "tooltip__overlay",
+      "tooltip__pointer",
+      "tooltip__pointer--bottom",
+      "tooltip__pointer--bottom-left",
+      "tooltip__pointer--bottom-right",
+      "tooltip__pointer--left",
+      "tooltip__pointer--left-bottom",
+      "tooltip__pointer--left-top",
+      "tooltip__pointer--right",
+      "tooltip__pointer--right-bottom",
+      "tooltip__pointer--right-top",
+      "tooltip__pointer--top",
+      "tooltip__pointer--top-left",
+      "tooltip__pointer--top-right"
+    ],
+    "bemModifiers": [
+      "tooltip--expanded"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [
+      "[aria-expanded=\"true\"]"
+    ],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-tourtip.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-tourtip.json
new file mode 100644
index 0000000000..5126c79d59
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-tourtip.json
@@ -0,0 +1,176 @@
+{
+  "name": "evo-tourtip",
+  "skinModules": [
+    "icon-button",
+    "tourtip"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/icon-button",
+      "@ebay/skin/tourtip"
+    ],
+    "makeupImports": [],
+    "internalImports": [
+      "evo-expander"
+    ],
+    "subComponents": [
+      "evo-expander",
+      "evo-icon-close-16"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Marko.HTML.Span"
+      ],
+      "a11yProps": [
+        {
+          "name": "a11yCloseText",
+          "optional": false,
+          "type": "string",
+          "category": "a11y"
+        }
+      ],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [
+        {
+          "name": "host",
+          "optional": false,
+          "type": "Marko.AttrTag< Marko.HTML.Span & { as?: Marko.Renderable; } >",
+          "category": "slot"
+        },
+        {
+          "name": "heading",
+          "optional": true,
+          "type": "Marko.AttrTag< Marko.HTML.H2 & { as?: Marko.Renderable; } >",
+          "category": "slot"
+        },
+        {
+          "name": "footer",
+          "optional": true,
+          "type": "Marko.AttrTag< Marko.HTML.Span & { index?: string; } >",
+          "category": "slot"
+        }
+      ],
+      "regularProps": [
+        {
+          "name": "open",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "openChange",
+          "optional": true,
+          "type": "(open: boolean) => void",
+          "category": "prop"
+        },
+        {
+          "name": "placement",
+          "optional": true,
+          "type": "ExpanderInput[\"placement\"]",
+          "category": "prop"
+        },
+        {
+          "name": "offset",
+          "optional": true,
+          "type": "number",
+          "category": "prop"
+        },
+        {
+          "name": "flip",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "shift",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "inline",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-labelledby",
+        "value": "heading"
+      },
+      {
+        "attr": "aria-label",
+        "value": "a11yCloseText"
+      }
+    ],
+    "templateRoleUsages": [
+      "region"
+    ]
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "badge",
+      "icon-btn",
+      "icon-link",
+      "progress-spinner",
+      "standard",
+      "transparent"
+    ],
+    "bemElements": [],
+    "bemModifiers": [
+      "icon--attention-filled-16",
+      "icon--attention-filled-24",
+      "icon--confirmation-filled-16",
+      "icon--confirmation-filled-24",
+      "icon--information-filled-16",
+      "icon--information-filled-24",
+      "icon-blinktn--secondary",
+      "icon-btn--badged",
+      "icon-btn--large",
+      "icon-btn--primary",
+      "icon-btn--secondary",
+      "icon-btn--small",
+      "icon-btn--tertiary",
+      "icon-btn--transparent",
+      "icon-link--badged",
+      "icon-link--large",
+      "icon-link--primary",
+      "icon-link--secondary",
+      "icon-link--small",
+      "icon-link--tertiary",
+      "icon-link--transparent"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [
+      "--color-background-accent",
+      "--color-background-disabled",
+      "--color-background-primary",
+      "--color-background-secondary",
+      "--color-border-accent",
+      "--color-border-disabled",
+      "--color-border-medium",
+      "--color-foreground-accent",
+      "--color-foreground-attention",
+      "--color-foreground-disabled",
+      "--color-foreground-on-accent",
+      "--color-foreground-primary",
+      "--color-foreground-success"
+    ],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [
+      "[aria-disabled=\"true\"]",
+      "[disabled]"
+    ],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-tri-state-checkbox.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-tri-state-checkbox.json
new file mode 100644
index 0000000000..a114752b7b
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/components/evo-tri-state-checkbox.json
@@ -0,0 +1,118 @@
+{
+  "name": "evo-tri-state-checkbox",
+  "skinModules": [
+    "checkbox",
+    "field"
+  ],
+  "marko": {
+    "hasImplementation": true,
+    "skinImports": [
+      "@ebay/skin/checkbox",
+      "@ebay/skin/field"
+    ],
+    "makeupImports": [],
+    "internalImports": [],
+    "subComponents": [
+      "evo-icon-checkbox-mixed-24",
+      "evo-icon-checkbox-mixed-18",
+      "evo-icon-checkbox-checked-24",
+      "evo-icon-checkbox-checked-18",
+      "evo-icon-checkbox-unchecked-24",
+      "evo-icon-checkbox-unchecked-18"
+    ],
+    "helperInterfaces": [],
+    "inputInterface": {
+      "extends": [
+        "Omit<Marko.HTML.Input, \"checked\" | \"checkedChange\" | \"checkedValue\" | \"checkedValueChange\">"
+      ],
+      "a11yProps": [],
+      "ariaProps": [],
+      "eventCallbacks": [],
+      "attrTagSlots": [],
+      "regularProps": [
+        {
+          "name": "checked",
+          "optional": true,
+          "type": "Marko.HTMLAttributes[\"aria-checked\"]",
+          "category": "prop"
+        },
+        {
+          "name": "checkedChange",
+          "optional": true,
+          "type": "(checked: \"true\" | \"false\" | \"mixed\") => void",
+          "category": "prop"
+        },
+        {
+          "name": "values",
+          "optional": true,
+          "type": "string[]",
+          "category": "prop"
+        },
+        {
+          "name": "checkedValues",
+          "optional": true,
+          "type": "string[]",
+          "category": "prop"
+        },
+        {
+          "name": "checkedValuesChange",
+          "optional": true,
+          "type": "(checkedValues: string[]) => void",
+          "category": "prop"
+        },
+        {
+          "name": "skipMixed",
+          "optional": true,
+          "type": "boolean",
+          "category": "prop"
+        },
+        {
+          "name": "size",
+          "optional": true,
+          "type": "\"regular\" | \"large\"",
+          "category": "prop"
+        }
+      ]
+    },
+    "templateAriaUsages": [
+      {
+        "attr": "aria-checked",
+        "value": "effectiveChecked"
+      }
+    ],
+    "templateRoleUsages": []
+  },
+  "skin": {
+    "hasImplementation": true,
+    "bemBlocks": [
+      "base",
+      "checkbox",
+      "color-token",
+      "com",
+      "fill-token",
+      "outline-color-token",
+      "paciellogroup"
+    ],
+    "bemElements": [
+      "checkbox__checked",
+      "checkbox__control",
+      "checkbox__icon",
+      "checkbox__unchecked"
+    ],
+    "bemModifiers": [
+      "checkbox--large"
+    ],
+    "nestedBemElementSuffixes": [],
+    "nestedBemModifierSuffixes": [],
+    "cssCustomProperties": [],
+    "cssCustomPropertyDefinitions": [],
+    "stateSelectors": [
+      "[disabled]",
+      "[hidden]"
+    ],
+    "rtlOverrides": false
+  },
+  "react": {
+    "hasImplementation": false
+  }
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/phase2-categorization.md b/.claude/skills/evo-create-component-manifest/scripts/audit-output/phase2-categorization.md
new file mode 100644
index 0000000000..ffa90c803f
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/phase2-categorization.md
@@ -0,0 +1,221 @@
+# Phase 2 — Component Categorization
+
+Generated from Phase 1 static analysis of 52 evo-marko components.
+
+---
+
+## Category Map
+
+| # | Category | Components | Key patterns |
+|---|---|---|---|
+| 1 | Simple Presentational | 8 | decorative/informative aria-hidden split |
+| 2 | Simple Interactive | 10 | aria-pressed, role="switch", aria-disabled |
+| 3 | Form Inputs | 6 | aria-invalid, aria-describedby, prefix/postfix slots |
+| 4 | Navigation | 5 | aria-current, aria-selected, roving tabindex |
+| 5 | Overlays | 6 | aria-modal, aria-labelledby, aria-describedby, focus trap |
+| 6 | Complex Interactive | 7 | widget roles (menu/listbox), aria-haspopup, keyboard models |
+| 7 | Compound / Parent-Child | 10 | multi-level AttrTag slots, helper interfaces |
+| — | Special / Miscellaneous | 1 | 3d-viewer (third-party embed) |
+
+---
+
+## 1 — Simple Presentational
+
+**Already covered by baseline (avatar).**
+These are display-only components with no interactive keyboard model.
+The main new sub-pattern is the **decorative vs. informative aria-hidden split** on `evo-icon`.
+
+| Component | New patterns vs baseline |
+|---|---|
+| evo-badge | `a11yText` → visually-hidden text appended for screen readers |
+| evo-ccd | `role="figure"`, `aria-label` on figure |
+| evo-eek | Decorative/informative split (`aria-hidden` vs `aria-label`) |
+| evo-icon | Same split as eek; `aria-labelledby` when used with a label element |
+| evo-image-placeholder | No ARIA — purely decorative placeholder |
+| evo-progress-spinner | `a11yText`, `aria-label` — used as sub-component in button loading state |
+| evo-signal | No ARIA — status dot purely visual |
+| evo-skeleton | `a11yText`, `aria-label` — loading placeholder |
+
+**Schema gaps:** None critical. The `a11yText` pattern (renders a visually hidden `<span>`) is not in the current schema. Should be added as a standard field type.
+
+---
+
+## 2 — Simple Interactive
+
+**Partially covered by baseline (button).**
+Single-action controls with straightforward ARIA. New patterns: `aria-pressed`, `role="switch"`, `aria-checked` for indeterminate state.
+
+| Component | Key patterns |
+|---|---|
+| evo-button | `aria-disabled`, conditional `aria-label` (loading state) — baseline |
+| evo-checkbox | Native `<input type="checkbox">` — no custom ARIA |
+| evo-cta-button | Button variant, no additional patterns |
+| evo-details | Native `<details>`/`<summary>` — browser-native disclosure |
+| evo-icon-button | `a11yText` required, `aria-label` required, `aria-disabled`, `onEscape` |
+| evo-radio | Native `<input type="radio">` — no custom ARIA |
+| evo-selection-chip | `aria-pressed` (toggle chip) |
+| evo-switch | `role="switch"` |
+| evo-toggle-button | `aria-pressed`, `aria-label`, icon/image/subtitle slots |
+| evo-tri-state-checkbox | `aria-checked="mixed"` (indeterminate — not expressible as native boolean) |
+
+**Schema gaps:**
+- `aria-pressed` toggle pattern (binary state, not open/close)
+- `role="switch"` (boolean role on a control)
+- `aria-checked` with three states (`true` / `false` / `"mixed"`)
+- `aria-disabled` vs native `disabled` distinction (both used in button)
+
+---
+
+## 3 — Form Inputs
+
+**Not covered by baseline.** Form controls that participate in a form validation flow. Key new ARIA: `aria-invalid`, `aria-describedby` for error-message linking, and `aria-live` for dynamic character counts.
+
+| Component | Key patterns |
+|---|---|
+| evo-textbox | `aria-invalid`, `aria-describedby` (error), `aria-label`, prefixIcon/prefixText/postfixText/postfixIcon slots |
+| evo-select | `option` AttrTag slots — wraps native `<select>` |
+| evo-number-input | `aria-label` on up/down buttons (both `aria-hidden` in some contexts), increment/decrement |
+| evo-file-input | header/subheader AttrTag slots, drag-and-drop zone |
+| evo-character-count | `a11yText`, `role="status"` (live region) — counts characters for a sibling textbox |
+| evo-filter-input | `a11yClearButtonText`, `aria-controls` (links to the list it filters) |
+
+**Schema gaps:**
+- `aria-invalid` / `aria-errormessage` validation state pattern
+- `aria-describedby` cross-element linking (error message, hint text)
+- `aria-live` / `role="status"` live region pattern
+- `aria-controls` linking (filter → list relationship)
+- Prefix/postfix slot pattern with associated ARIA
+
+---
+
+## 4 — Navigation
+
+**Not covered by baseline.** Components managing spatial or linear navigation. New patterns: `role="navigation"`, `aria-current`, `aria-selected` with roving tabindex.
+
+| Component | Key patterns |
+|---|---|
+| evo-tabs | `role="tablist"/"tab"/"tabpanel"`, `aria-controls`, `aria-selected`, roving tabindex via `evo-roving-tabindex` |
+| evo-breadcrumbs | `role="navigation"`, `aria-labelledby`, `aria-current="page"`, overflow menu (`a11yMenuButtonText`) |
+| evo-pagination | `role="navigation"`, `aria-live="polite"`, `aria-current`, prev/next/item AttrTag slots |
+| evo-segmented-buttons | `aria-current`, button group (no tabindex management — relies on click) |
+| evo-fake-tabs | `aria-current` only — lightweight tabs without full ARIA widget roles |
+
+**Schema gaps:**
+- `aria-current` (page, step, date — not just boolean)
+- `aria-selected` (distinct from `aria-pressed` — used in widget contexts)
+- Roving tabindex coordination pattern (delegated to `evo-roving-tabindex`)
+- `role="tablist"/"tab"/"tabpanel"` widget role trio
+- `aria-live` on pagination counters
+
+---
+
+## 5 — Overlays
+
+**Not covered by baseline.** Triggered or persistent surfaces requiring focus management. The native `<dialog>` element handles most of the focus trap; tooltip/infotip use a manual expand pattern via `evo-expander`.
+
+| Component | Key patterns |
+|---|---|
+| evo-dialog | Native `<dialog>` (showModal), `aria-labelledby`, `closedby` attr, animation lifecycle events |
+| evo-alert-dialog | `role="alertdialog"`, `aria-modal`, `aria-labelledby`, `aria-describedby` (body text) |
+| evo-confirm-dialog | Same as alert-dialog + reject/confirm AttrTag actions |
+| evo-tooltip | `role="tooltip"`, `aria-expanded` (via `evo-expander`), host AttrTag |
+| evo-infotip | `role="tooltip"`, `aria-expanded`, `aria-labelledby`, trigger icon button + popover content |
+| evo-tourtip | `role="region"`, `aria-labelledby`, `aria-label` — guided tour tooltip, closeable |
+
+**Schema gaps:**
+- `aria-modal` flag (alerts/dialogs)
+- `role="alertdialog"` vs `role="dialog"` distinction
+- `aria-describedby` on dialog pointing to body text (different from form error linking)
+- Focus trap lifecycle (open → trap → close → restore)
+- `evo-expander` delegation pattern (tooltip trigger/content relationship)
+- `closedby` HTML attribute (new spec — evo-dialog uses it)
+
+---
+
+## 6 — Complex Interactive
+
+**Not covered by baseline.** Full keyboard models with ARIA widget roles, type-ahead, and multi-component coordination. This is where most schema gaps will be.
+
+| Component | Key patterns |
+|---|---|
+| evo-listbox | `role="listbox"/"option"`, `aria-selected`, `aria-disabled`, roving tabindex + type-ahead via internal tags |
+| evo-listbox-button | `aria-haspopup="listbox"`, `aria-expanded`, `aria-describedby`, `aria-invalid`, `aria-labelledby` — trigger for listbox popup |
+| evo-menu | `role="menu"/"menuitem"`, `aria-checked` (checkable items), `aria-disabled`, separator, keyboard model |
+| evo-menu-button | `aria-haspopup="menu"`, `aria-expanded`, `aria-labelledby`, trigger for menu popup |
+| evo-fake-menu | `aria-disabled`, `aria-current` — static list styled as menu, no keyboard widget |
+| evo-fake-menu-button | `aria-haspopup`, `aria-expanded`, trigger for fake-menu |
+| evo-filter-chip | `aria-selected`, `aria-expanded` — can act as a multi-select chip that opens a panel |
+
+**Schema gaps:**
+- `aria-haspopup` with specific value (`"menu"`, `"listbox"`) — not just boolean
+- `aria-activedescendant` (expected on listbox/menu host — not yet confirmed in template, needs Phase 3)
+- `role="menu"/"menuitem"/"menuitemcheckbox"` widget trio
+- `aria-checked` on menuitemcheckbox (distinct from checkbox `aria-checked`)
+- Type-ahead delegation (`evo-typeahead` internal tag)
+- Roving tabindex + keyboard navigation model
+- Popup anchor/trigger relationship
+
+---
+
+## 7 — Compound / Parent-Child
+
+**Partially covered (dialog has AttrTag slots).** Components that orchestrate child components through typed AttrTag slots, often with helper interface definitions for child prop types.
+
+| Component | AttrTag slots | Child helper interface | Key patterns |
+|---|---|---|---|
+| evo-accordion | `details` | — | `aria-roledescription` on wrapper |
+| evo-avatar | `image` | — | Conditional slot for image vs text avatar |
+| evo-card | `overline`, `title`, `description`, `action`, `image` | — | Content composition only |
+| evo-file-preview-card | `deleteAction`, `action`, `seeMoreAction`, `cancelAction` | `FilePreviewCardEvent` | Multiple action types, icon-button wiring |
+| evo-file-preview-card-group | `card` | — | Passes children to grid layout |
+| evo-layout-grid | `item` | `LayoutOptions` | Grid config via helper interface |
+| evo-list | `item` | `ListItem` | `role="list"/"listitem"`, item type union |
+| evo-progress-stepper | `step` | `Step` | `role="list"/"listitem"`, `aria-current` on active step |
+| evo-toggle-button-group | `button` | — | Group aria-label/labelledby, passes selection state to children |
+| evo-toggle-button | `icon`, `image`, `subtitle` | — | `aria-pressed`, part of group or standalone |
+
+**Schema gaps:**
+- Helper interface pattern (child component types defined separately from parent Input)
+- Multi-slot composition (5+ AttrTag slots with different types)
+- Group-level ARIA (`aria-label` / `aria-labelledby` on container that wraps individual controls)
+- `aria-current` on the active step in a stepper
+
+---
+
+## 8 — Special / Miscellaneous
+
+| Component | Notes |
+|---|---|
+| evo-3d-viewer | Third-party embed (model-viewer). Loading/error lifecycle only. `a11yLoadingText`, `onLoadError`. Not a UI design system component — schema likely does not need to cover it. |
+
+---
+
+## Skin-only components (not yet in evo-marko)
+
+38 skin components have no evo-marko counterpart. Notable ones that represent patterns absent from the current schema:
+
+| Skin module | Pattern category | Why it matters |
+|---|---|---|
+| `combobox` / `chips-combobox` | Complex interactive | `aria-activedescendant`, expanded input+listbox pattern — the most complex ARIA widget |
+| `carousel` | Complex interactive | Roving tabindex, `aria-live` on slide counter |
+| `drawer-dialog` / `fullscreen-dialog` / `lightbox-dialog` / `panel-dialog` | Overlays | Dialog variants with different size/position; same ARIA as dialog |
+| `snackbar-dialog` / `toast-dialog` | Overlays | `role="status"` / `role="alert"` — non-blocking live notifications |
+| `star-rating` / `star-rating-select` | Simple interactive | `role="radiogroup"`, individual stars as radios |
+| `field` | Form inputs | `<fieldset>`/`<legend>` pattern — the root wrapper for form inputs |
+| `floating-label` | Form inputs | Internal tag used by textbox; label animation |
+
+---
+
+## Phase 3 Deep-Dive Candidates
+
+From each uncovered category, one representative:
+
+| Category | Chosen component | Why |
+|---|---|---|
+| Form inputs | **evo-textbox** | `aria-invalid`, `aria-describedby`, prefix/postfix slots — densest form-input patterns |
+| Navigation | **evo-tabs** | tab/tablist/tabpanel trio, roving tabindex, parent-child coordination |
+| Overlays | **evo-dialog** | Native `<dialog>`, focus trap, `aria-labelledby`, lifecycle |
+| Complex interactive | **evo-listbox** | Closest analog to combobox; listbox/option widget, roving tabindex, type-ahead |
+| Compound | **evo-menu-button** | Orchestrates menu + button + filter-chip; most complex AttrTag slot composition |
+
+Phases 3 and 4 (website docs mining) can run in parallel once this file is reviewed.
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/phase3-deep-audit.md b/.claude/skills/evo-create-component-manifest/scripts/audit-output/phase3-deep-audit.md
new file mode 100644
index 0000000000..5e4d4ffb70
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/phase3-deep-audit.md
@@ -0,0 +1,517 @@
+# Phase 3 — Deep Manual Audit
+
+Five representative components read across all three layers (skin SCSS, evo-marko, evo-react)
+and the website docs pages. Each section records confirmed patterns, new discoveries,
+surprises/discrepancies, and concrete schema gaps.
+
+---
+
+## 1 — evo-textbox
+
+### What it does
+
+Wraps `<input>` (or `<textarea>` when `multiline=true`) inside a `.textbox` container.
+Supports prefix/postfix icons and text, floating label, invalid state, and readonly.
+
+### New patterns vs baseline
+
+**1. Validation state → dual output (CSS modifier + ARIA attribute)**
+`invalid` prop drives two things simultaneously:
+- CSS modifier on the wrapper: `textbox--invalid` (visual styling)
+- `aria-invalid="true"` on the `<input>` element (ARIA)
+
+These are linked but live on different elements. The schema has no concept of a prop
+that produces both a CSS modifier and an ARIA attribute.
+
+**2. Auto-computed `aria-describedby` from slot IDs**
+The `<input>` gets `aria-describedby` automatically:
+```js
+aria-describedby=([prefixId, postfixId].filter(Boolean).join(" ") || undefined)
+```
+The IDs are generated via `<id/>` tag variables. The consumer never provides these.
+This is an internal ARIA linking pattern — not a prop.
+
+**3. Sub-element accessibility (postfixIcon button)**
+When `postfixIcon.a11yText` is provided, an icon-button renders with that text as `aria-label`.
+This is an accessibility prop on a **slot** (not on the component root):
+```ts
+postfixIcon?: Marko.AttrTag<Marko.HTML.Button & { a11yText?: string }>;
+```
+The schema has no mechanism for "a11y props on a slot's inner element."
+
+**4. `aria-required` as passthrough**
+`aria-required` is documented in the a11y docs and works, but is NOT in the `Input` interface.
+Callers pass it via `...htmlInput`. The schema needs to document which ARIA attributes
+are managed internally vs. which are consumer passthrough.
+
+**5. `:has()` migration in progress**
+Comments in SCSS and template note that modifier classes (`textbox--disabled`, `textbox--invalid`,
+`textbox--readonly`) are being phased out in favor of CSS `:has()`. Schema should note this
+as a transitional state, not the permanent design.
+
+**6. Floating label delegation**
+Floating label behavior is fully delegated to `evo-floating-label` (internal tag). The
+`floatingLabel`, `floatingLabelStatic`, `opaqueLabel`, `value`, and `focused` state are
+all passed through. Schema needs a `delegatedBehaviors` concept.
+
+### Discrepancies / surprises
+- The `placeholder` is managed reactively: only shown when focused AND input is empty
+  (not standard browser behavior). This is a non-obvious behavior the schema needs to capture.
+- There is no `aria-errormessage` prop — error message linking is purely through
+  `aria-describedby` pointed at external elements the caller provides.
+
+### Schema gaps
+
+| ID | Gap description |
+|---|---|
+| T1 | `validationState` concept: a single prop (`invalid`) that drives both a CSS modifier on the wrapper AND `aria-invalid` on the control element |
+| T2 | `internalAriaLinks`: auto-computed `aria-describedby` from slot IDs (not a prop, not caller-controlled) |
+| T3 | `slotA11yProps`: a11y text strings that live on a slot definition, not on the component root |
+| T4 | `passthroughAriaList`: which ARIA attributes are managed internally vs. caller passthrough |
+| T5 | `delegatedBehavior`: internal sub-component that handles a major feature (floating label) |
+| T6 | `nonStandardBehavior`: placeholder reactive visibility (only shows when focused + empty) |
+
+---
+
+## 2 — evo-tabs
+
+### What it does
+
+Renders a tab list + tab panels. Uses roving tabindex for keyboard navigation. Supports
+auto-selection (arrow key moves focus AND selects) or manual activation (arrow key moves
+focus; SPACE/ENTER selects).
+
+### New patterns vs baseline
+
+**1. Two-level slot nesting (AttrTag inside AttrTag)**
+`Tab` is a helper interface whose `panel` slot is itself an AttrTag:
+```ts
+export interface Tab extends Marko.HTML.Div {
+    panel: Marko.AttrTag<Marko.HTML.Div>;
+}
+export interface Input extends Marko.HTML.Div {
+    tab?: Marko.AttrTag<Tab>;
+}
+```
+Usage: `<@tab><@panel>...</@panel></@tab>`. The schema's slot model only handles one level
+of nesting.
+
+**2. Cross-element ARIA relationships (tab ↔ panel)**
+Each tab is linked to its panel via generated IDs:
+- Tab element: `id="${tabId}-${i}"` + `aria-controls="${tabpanelId}-${i}"`
+- Panel element: `id="${tabpanelId}-${i}"` + `aria-labelledby="${tabId}-${i}"`
+
+This is a bidirectional, index-keyed relationship across two iteration loops.
+The schema has no way to express cross-element ARIA ID relationships.
+
+**3. Roving tabindex pattern**
+Only one tab is keyboard-focusable at a time (`tabindex=0`, rest are `-1`). This is managed
+by `evo-roving-tabindex`. The focused tab receives physical DOM focus (not aria-activedescendant).
+Keyboard: arrow keys move focus; if `autoSelect=true`, also selects; SPACE/ENTER selects
+when `autoSelect=false`.
+
+**4. State-lifting callback (`indexChange`)**
+`indexChange` is not a DOM event — it's a state-lifting function called when the selected
+index changes:
+```ts
+indexChange?: (index: number) => void;
+```
+Pattern used also in: `openChange`, `selectedChange`, `selectedChange` throughout the library.
+The schema's `events` array currently mixes DOM events and state-lifting callbacks.
+
+**5. `hidden` attribute for panel visibility**
+Non-selected panels use `hidden` (not `display:none` / CSS class):
+```marko
+hidden=!isSelected
+```
+This is semantically correct (hidden removes from AT tree) and differs from a purely CSS
+approach.
+
+**6. Undocumented offscreen heading requirement**
+The a11y docs say tab panels SHOULD contain an offscreen heading matching the tab text.
+This is NOT enforced by the component. It's a caller contract documented only in the
+accessibility page. The schema needs a concept for "caller obligations" not enforced
+by the component.
+
+### Discrepancies / surprises
+- `activation` prop maps to `autoSelect` in `evo-roving-tabindex`. The external API
+  name and the internal implementation name differ.
+- There is no `aria-label` or `aria-labelledby` on the `tablist` element. The docs
+  say the tablist must be preceded by a heading — that heading is not linked programmatically.
+  This may be a missing ARIA connection.
+
+### Schema gaps
+
+| ID | Gap description |
+|---|---|
+| TB1 | `nestedSlots`: slot whose definition itself contains named AttrTag slots (two-level nesting) |
+| TB2 | `crossElementAriaLinks`: ARIA relationships between elements within an iteration (tab ↔ panel) |
+| TB3 | `rovingTabindex` behavior: which elements participate, what keys navigate, physical focus vs aria-activedescendant |
+| TB4 | `stateLiftingCallbacks`: callbacks like `indexChange` that are state-lifting not DOM events (separate from `events`) |
+| TB5 | `panelVisibility`: `hidden` attribute vs CSS (impacts AT behavior, not just visual) |
+| TB6 | `callerObligations`: accessibility requirements imposed on the consumer that the component cannot enforce |
+| TB7 | `widgetRole`: composite ARIA role system — role trio tab/tablist/tabpanel |
+
+---
+
+## 3 — evo-dialog
+
+### What it does
+
+Wraps the native `<dialog>` element with showModal() behavior, CSS animation lifecycle,
+a required close button, and optional banner/header/footer slots.
+
+### New patterns vs baseline
+
+**1. Native element with JavaScript lifecycle management**
+Dialog uses `<dialog>` with `showModal()` called from a `<script>` block:
+```marko
+<script>
+  if (open && !$dialog().open) {
+    $dialog().showModal();
+  }
+</script>
+```
+The focus trap is browser-native (from `showModal()`), not implemented in the component.
+
+**2. Two-step close lifecycle (animation-aware)**
+Close is not immediate:
+1. `open = false` → adds `dialog--close` CSS class → starts exit animation
+2. `onAnimationEnd` fires → calls `el.close()` → removes from DOM/AT
+
+The schema has no concept of an animation-gated lifecycle phase.
+
+**3. `closedby` attribute (emerging browser API)**
+`closedby="any"` enables browser-native light dismiss (Escape key or click outside).
+The docs warn this is not yet widely supported. This is a new HTML attribute not
+in the baseline schema.
+
+**4. Required slot (close)**
+The `close` AttrTag slot is NOT optional:
+```ts
+close: Marko.AttrTag<IconButtonInput>;  // no `?`
+```
+A11y docs also mandate: "dialog must contain a dismiss button."
+The schema schema marks slots as `required: true/false` but the distinction between
+"required for functionality" vs "required for accessibility" is not captured.
+
+**5. Heading element type override on slot**
+`header` slot accepts `as?: string` to override the heading element:
+```ts
+header: Marko.AttrTag<Marko.Input<"h2"> & { as?: string }>;
+```
+Rendered as: `<${headerAs || "h2"}>`. This allows the heading hierarchy to be adapted.
+The a11y docs require starting at h2 — this is an enforced default.
+
+**6. Auto-linked `aria-labelledby` (not a prop)**
+`aria-labelledby` is auto-computed:
+```marko
+aria-labelledby=(inputLabelledBy ? `${inputLabelledBy} ${headerId}` : headerId)
+```
+The consumer can prepend an additional ID, but the component always appends its own
+generated header ID. This is a managed + extensible ARIA link.
+
+**7. Focus return: caller responsibility**
+When dialog closes, focus must return to the element that triggered it. This is NOT
+in the component code — the caller must handle it. The docs do not mention this.
+
+**8. Banner slot: CSS background-image (no `<img>` element)**
+The banner is applied as a CSS `background-image` on a `<div>`, not as an `<img>`.
+This means it is not announced by screen readers (purely decorative).
+
+### Discrepancies / surprises
+- `requestClose()` is used instead of direct `el.close()` in the close button handler.
+  This routes through the browser's close pipeline and fires `cancel` event, which the
+  component intercepts to manage the animated close sequence.
+- `open=null` is passed to the dialog element with a comment explaining Marko would
+  otherwise include it in the spread, conflicting with browser DOM management.
+
+### Schema gaps
+
+| ID | Gap description |
+|---|---|
+| D1 | `nativeElementLifecycle`: native browser element (dialog) whose key API is called from a script block, not component logic |
+| D2 | `animationGatedClose`: two-phase close (state change → animation → DOM close), `onAnimationEnd` hook |
+| D3 | `lightDismiss`: `closedby` attribute behavior, browser support caveat |
+| D4 | `requiredSlotSemantics`: distinguish "required for functionality" vs "required for a11y compliance" |
+| D5 | `slotElementTypeOverride`: slot accepts `as` to override the rendered HTML element |
+| D6 | `managedPlusExtensibleAriaLink`: aria-labelledby that the component manages but consumer can prepend to |
+| D7 | `callerObligation_focusReturn`: focus-return-to-trigger on close — not component behavior |
+| D8 | `decorativeSlot`: slot rendered as CSS background, not semantic HTML (no AT announcement) |
+
+---
+
+## 4 — evo-listbox
+
+### What it does
+
+Renders a `role="listbox"` widget for selecting one or multiple options. Supports keyboard
+navigation (arrow keys, type-ahead). Also renders a hidden native `<select>` for form
+submission. Exposes its root DOM element via `<return>` for parent components to use as
+anchor.
+
+### New patterns vs baseline
+
+**1. Roving tabindex (NOT aria-activedescendant)**
+The a11y docs mention `aria-activedescendant` as the expected pattern. The actual
+implementation uses **physical focus movement** via `evo-roving-tabindex` — each option
+gets `tabindex=0/-1` and physical DOM focus.
+
+This is an intentional, documented tradeoff: physical focus provides better cross-browser
+screen reader support than aria-activedescendant.
+
+**2. Dual output: custom widget + hidden native form control**
+Listbox renders both:
+- `<div role="listbox">` — the visible, accessible widget
+- `<select hidden>` — invisible native select with `name` prop for form submission
+
+The native select is not announced (hidden from AT) but participates in form submission.
+
+**3. `aria-selected` (not `aria-checked`)**
+Selected options use `aria-selected="true"`. This is the correct ARIA attribute for
+listbox (vs `aria-checked` which is used for menuitemcheckbox).
+
+**4. `a11ySelectedText` — visually hidden text in selected options**
+Instead of relying on a checkmark icon (which could be visually-hidden anyway), a
+`<span class="clipped">` with the text (default: "selected") is appended inside the
+option. This is an i18n-able text string required by all consumers:
+```marko
+<span class="clipped">
+    ${a11ySelectedText}
+</span>
+```
+
+**5. Tag variable exposure (`<return=$root>`)**
+The listbox exposes its root DOM element to parent components:
+```marko
+<return=$root>
+```
+This allows `evo-listbox-button` to position a floating overlay anchored to the listbox.
+Not a React concept — purely a Marko compound component pattern.
+
+**6. `data-value` attribute as internal identifier**
+Each option gets `data-value=value`. The roving-tabindex reads this to identify elements.
+This is an internal data attribute protocol not visible in the Input interface.
+
+**7. Type-ahead via `evo-typeahead`**
+`evo-typeahead` is a separate internal tag that handles type-ahead search. It:
+- Accumulates typed characters into a string
+- Clears after `typeaheadTimeoutLength` ms (default 2000ms)
+- Returns the index of the first matching option
+
+**8. `listbox__option--active` CSS class**
+The focused (not selected) option gets a CSS class for visual keyboard focus styling.
+This is separate from `aria-selected` and from browser `:focus` — it's a component-managed
+visual indicator.
+
+### Discrepancies / surprises
+- `a11ySelectedText` is typed as required (no `?`) but has a default value in the
+  destructuring. This means TypeScript type says required, but runtime has a fallback.
+  This is an inconsistency — probably should be `required: false` with `default: "selected"`.
+
+### Schema gaps
+
+| ID | Gap description |
+|---|---|
+| L1 | `rovingTabindexVsAriaActivedescendant`: schema must document which strategy is used and why (tradeoff reasoning) |
+| L2 | `dualOutput`: component renders both a custom accessible widget AND a hidden native form control |
+| L3 | `ariaSelectedVsChecked`: distinguish `aria-selected` (listbox) vs `aria-checked` (menu) — schema must state which applies |
+| L4 | `internalDataProtocol`: `data-value` attribute used internally for item identification |
+| L5 | `typeaheadDelegation`: evo-typeahead internal tag, configurable timeout, match algorithm |
+| L6 | `tagVariableExposure`: `<return>` exposes DOM element to parent — compound component anchoring pattern |
+| L7 | `activeStateCssClass`: CSS class for keyboard focus (separate from aria-selected and :focus) |
+| L8 | `requiredWithDefault`: a11yProps that TypeScript types as required but has a runtime default |
+
+---
+
+## 5 — evo-menu / evo-menu-button
+
+### What they do
+
+`evo-menu` renders a floating menu with keyboard navigation. `evo-menu-button` wraps
+it with a trigger button and positions the menu using `evo-expander` (which uses
+@floating-ui/dom for positioning).
+
+### New patterns vs baseline
+
+**1. Dynamic item role based on `selected` prop type**
+Menu items render with different ARIA roles depending on the parent's `selected` prop:
+```js
+const itemRole = (
+    isRadio ? "menuitemradio" :
+    isCheckbox ? "menuitemcheckbox" :
+    "menuitem"
+)
+```
+Where:
+- `typeof selected === "number" | "string"` → radio mode → `menuitemradio`
+- `Array.isArray(selected)` → checkbox mode → `menuitemcheckbox`
+- `selected === undefined` → plain mode → `menuitem`
+
+This is a runtime polymorphic role system — the menu component renders fundamentally
+different ARIA roles based on input type.
+
+**2. `aria-checked` on menu items (not `aria-selected`)**
+Checkable menu items use `aria-checked`, not `aria-selected`:
+```marko
+aria-checked=isCheckable && (checked ? "true" : "false")
+```
+Even when `selected === false` (unchecked), `aria-checked="false"` is set. This differs
+from listbox where unselected options omit `aria-selected` entirely.
+
+**3. Floating positioning via `evo-expander`**
+Menu positioning uses `evo-expander` which wraps `@floating-ui/dom`:
+- Computes position (flip, shift, offset)
+- Returns `floatingStyles` and `ariaExpanded`
+- No `aria-controls` — evo-expander does NOT add ARIA relationships
+
+**4. `aria-haspopup="true"` (not `"menu"` or `"listbox"`)**
+The trigger button uses:
+```marko
+aria-haspopup="true"
+```
+Not the specific value `"menu"` or `"listbox"`. This is a simpler declaration.
+
+**5. Polymorphic trigger (3 button variants)**
+`evo-menu-button` renders one of three trigger types based on `variant`:
+- `"icon"` → `evo-icon-button`
+- `"filter"` → `evo-filter-chip`
+- else → `evo-button` (default)
+
+Each has different ARIA behavior. The schema has no concept of a polymorphic trigger.
+
+**6. `classPrefix` for BEM namespace flexibility**
+`evo-menu` accepts `classPrefix` to change its BEM block name:
+```marko
+const baseClass = classPrefix || "menu";
+```
+When used inside `evo-menu-button`, `classPrefix="menu-button"` is passed, so menu
+items render as `menu-button__item` not `menu__item`. This is a CSS scoping mechanism.
+
+**7. `aria-labelledby` on trigger referencing external prefix element**
+When `prefixId` is provided, the button's `aria-labelledby` concatenates:
+- For icon variant: just `prefixId`
+- For others: `${prefixId} ${labelId}` (external + internal)
+
+**8. Escape key in `evo-menu-button`'s wrapper span**
+The wrapping `<span>` handles Escape to close the menu:
+```marko
+onKeyDown(e, el) {
+    if (open && e.key === "Escape") open = false;
+}
+```
+This means Escape is handled on the container, not the button or menu itself.
+
+**9. `collapseOnSelect` behavior**
+When enabled, clicking any menu item closes the menu. This is a behavioral mode not
+expressed in the current schema.
+
+**10. `footerButton` slot pinned outside menu scroll**
+A button slot that renders outside the scrollable menu items, pinned at the bottom.
+This is architecturally different from regular item slots.
+
+### Discrepancies / surprises
+- There is no explicit `aria-controls` from the trigger to the menu. The menu button
+  relies on visual proximity and `aria-haspopup` + `aria-expanded` only.
+- The menu's `role="menu"` is on an inner `<div>`, not on the outer `<span>` root
+  element returned. The outer element is just a positioning container.
+
+### Schema gaps
+
+| ID | Gap description |
+|---|---|
+| M1 | `polymorphicItemRole`: item role determined at runtime by the type of `selected` prop |
+| M2 | `ariaCheckedOnAllStates`: `aria-checked="false"` always set on checkable items (unlike listbox which omits aria-selected on unselected) |
+| M3 | `floatingPositioner`: delegation to evo-expander / @floating-ui/dom — placement, strategy, flip/shift |
+| M4 | `aria-haspopup` value semantics: "true" vs "menu" vs "listbox" — which is used and when |
+| M5 | `polymorphicTrigger`: trigger element changes based on variant prop (icon-button, filter-chip, button) |
+| M6 | `classPrefixNamespace`: BEM class namespace override for embedding component in another's CSS scope |
+| M7 | `escapeKeyOnContainer`: Escape handled on wrapper element, not button or menu |
+| M8 | `collapseOnSelect`: behavioral mode — auto-close menu after selection |
+| M9 | `pinnedFooterSlot`: slot that renders outside scrollable area, pinned at bottom |
+
+---
+
+## Consolidated schema gaps (all 5 components)
+
+Grouped by the schema section they affect.
+
+### A. New top-level fields needed
+
+| Field | Type | Notes |
+|---|---|---|
+| `widgetRole` | object | Composite ARIA role system: primary role + child roles (tablist/tab/tabpanel, menu/menuitem*, listbox/option) |
+| `keyboardModel` | object | Which keys do what; whether roving tabindex or aria-activedescendant; autoSelect vs manual |
+| `stateLiftingCallbacks` | array | State-lifting callbacks (`indexChange`, `openChange`, `selectedChange`) separate from DOM event callbacks |
+| `dualOutput` | object | When component renders both a custom widget AND a hidden native form control |
+| `floatingPositioner` | object | Expander/positioning info: placement, strategy, @floating-ui reference |
+| `callerObligations` | array | A11y requirements imposed on the consumer that the component cannot enforce (heading before tablist, focus return on dialog close) |
+
+### B. Additions to existing `a11y` section
+
+| Addition | Notes |
+|---|---|
+| `focusTrap` | "browser-native" (via showModal) vs "javascript" vs "none" |
+| `rovingTabindexVsAriaActivedescendant` | Which strategy is used; if roving tabindex, which elements participate |
+| `ariaAttributeOwnership` | Which aria-* are managed internally, which are consumer passthrough |
+| `crossElementAriaLinks` | Bidirectional ARIA relationships (tab ↔ panel) with ID generation pattern |
+| `internalAriaLinks` | Auto-computed aria-describedby from slot IDs (not props) |
+
+### C. Additions to existing `slots` section
+
+| Addition | Notes |
+|---|---|
+| `nestedSlots` | Slot whose definition itself contains AttrTag slots |
+| `slotA11yProps` | A11y text strings belonging to a slot, not the component root |
+| `slotElementTypeOverride` | Slot accepts `as` to override the rendered HTML element |
+| `decorativeSlot` | Slot rendered as CSS background-image — not announced by AT |
+| `pinnedSlot` | Slot rendered outside scrollable area |
+| `requiredReason` | "functionality" vs "accessibility" — why a slot is required |
+
+### D. Additions to existing `props` section
+
+| Addition | Notes |
+|---|---|
+| `validationStateProp` | A prop that drives both a CSS modifier on wrapper AND aria-* on inner control element |
+| `polymorphicRoleProp` | Prop whose type (number/string/array) determines ARIA role at runtime |
+| `classPrefixProp` | BEM class namespace override |
+
+### E. New `behaviors` entries (kinds of behaviors to document)
+
+| Behavior kind | Example |
+|---|---|
+| `animationGatedClose` | Dialog two-phase close: state → animation → DOM close |
+| `typeaheadSearch` | evo-typeahead delegation, timeout, match algorithm |
+| `lightDismiss` | closedby attribute / click-outside close |
+| `collapseOnSelect` | Auto-close menu after item selection |
+| `reactiveVisibility` | Placeholder only shown when focused + empty |
+| `dualOutputSync` | Hidden native select mirrors custom widget state |
+
+### F. New field: `internalDataProtocol`
+
+Some components attach internal data attributes to child elements for use by
+internal tags. Example: `data-value` on listbox options (read by evo-roving-tabindex).
+This protocol is invisible to consumers but essential for code generation.
+
+---
+
+## Phase 3 → Phase 5 handoff notes
+
+1. **Listbox vs menu `aria-selected`/`aria-checked`** — the schema must explicitly
+   document this distinction so code gen doesn't confuse them.
+
+2. **`evo-roving-tabindex` as a schema concept** — it appears in tabs, listbox, and menu.
+   The schema should have a standard `keyboardModel.rovingTabindex` block that all three
+   reference, rather than re-speccing it per component.
+
+3. **Dialog `closedby`** — should be noted as emerging spec, document that the component
+   uses it but it's not yet reliable. Schema needs a way to flag spec-edge features.
+
+4. **State-lifting callbacks** — `indexChange`, `openChange`, `selectedChange` all follow
+   the same pattern but are currently confused with DOM events in the schema. Need a
+   distinct type field: `"type": "stateLift"` vs `"type": "domEvent"`.
+
+5. **The `callerObligations` concept** — this will be the most impactful addition to the
+   contract template. Many a11y requirements that look like component features are actually
+   consumer responsibilities: offscreen heading in tabs, focus return in dialog, label
+   element before listbox. The contract template additions file must add a section for these.
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/phase4-docs-mining.md b/.claude/skills/evo-create-component-manifest/scripts/audit-output/phase4-docs-mining.md
new file mode 100644
index 0000000000..89baaa238b
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/phase4-docs-mining.md
@@ -0,0 +1,247 @@
+# Phase 4 — Website Docs Mining
+
+Scanned `/src/routes/_index/components/*/accessibility+page.marko` (76 files) and
+`/src/routes/_index/accessibility/` (techniques, patterns, anti-patterns, FAQ).
+
+Output organized into five themes that directly feed Phase 5 schema updates.
+
+---
+
+## Theme 1 — Caller obligations not enforceable by the component
+
+These are accessibility requirements that the docs mandate but the component code
+cannot enforce. They belong in a new `callerObligations` schema field.
+
+### Form context requirements
+Several components require being inside a `<form>` with a submit button — not validated
+by the component:
+- **checkbox, radio, select**: "must belong inside a form element, and that form element must have a submit button"
+- **checkbox**: "Toggling a checkbox should not cause an app update until the related form is submitted"
+- **radio**: "Toggling a radio button should not trigger a page reload, popup or any change of context until the related form is explicitly submitted"
+- **select**: "select must support form-autofill behaviour of browser"
+- **switch**: contrast to checkbox — switch IS appropriate for instant updates (different contract)
+
+**Schema impact**: `callerObligations` needs a `formContext: true` flag and a note about submit-vs-instant-update semantics.
+
+### Visible label requirements
+- **checkbox, radio**: "must have a visible, onscreen label" via `<label>` tag
+- **checkbox group, radio group, switch group**: "must have a group label" via `<fieldset>`/`<legend>`
+- **textbox**: "every textbox must have an associated visible label" via `<label for=...>`; placeholder is NOT a substitute
+
+**Schema impact**: `labelRequirement` field: whether a `<label>` is required, whether a `<fieldset>/<legend>` group is required.
+
+### Structural context requirements
+- **pagination**: "must have a heading element" (can be offscreen)
+- **tabs**: tablist must be preceded by a heading (from Phase 3 docs)
+- **tabs**: panels SHOULD contain an offscreen heading one level below the tablist heading
+- **accordion**: Tab navigates through headers; auto-collapse mode "should be used cautiously — it prevents users from comparing content"
+
+**Schema impact**: `callerObligations` needs `precedingHeading` and `panelHeading` fields.
+
+### Open/close behavior obligations
+- **infotip**: "must remain expanded until explicitly closed with the close button or programmatically closed by another component" — must NOT collapse on mouseout, blur, or page click
+- **infotip**: "must not have overlay content duplicated within an aria-describedby attribute"
+- **dialog**: "must not be opened on hover or focus of button" — only on click or application event
+- **alert/confirm-dialog**: "should be opened as a result of a user action or critical system event" — not proactively
+
+**Schema impact**: `dismissBehavior` field — when the overlay can and cannot be dismissed.
+
+### Focus placement obligations
+- **alert-dialog**: "Initial keyboard focus should be placed on the acknowledgement button"
+- **dialog**: "focus must return to the trigger element when dialog is closed" (from Phase 3)
+- **menu**: "focus must go to the first item in the menu" when it opens (the menu itself does not receive focus)
+
+**Schema impact**: `initialFocus` field (where focus goes when component opens) and `focusReturn` field (where focus returns on close).
+
+---
+
+## Theme 2 — ARIA patterns documented with explicit guidance
+
+### aria-haspopup rules
+- **infotip**: "must NOT have aria-haspopup attribute. Despite the name of this property, it is actually intended specifically for a menu"
+- **tooltip**: "must not use aria-haspopup attribute. Tooltips are not considered 'popups' in this context"
+- **menu-button**: does use `aria-haspopup` (the correct case)
+
+**Schema impact**: `aria-haspopup` is NOT generic "has popup" — it is specifically for menu/listbox patterns. The schema must document when it is and is not appropriate.
+
+### aria-labelledby composition pattern
+Menu-button docs show the pattern for stitching an external label with an internal value:
+```html
+<span id="el1">Sort by</span>
+<button aria-labelledby="el1 el2"><span id="el2">blue</span></button>
+```
+- The button's label = "Sort by blue" (concatenation of two elements)
+- The accessible label must always reflect the current function/value
+
+**Schema impact**: `aria-labelledby` can reference multiple IDs (space-separated) to compose a label from external + internal elements. Schema needs `compoundLabelledBy` pattern.
+
+### aria-invalid + aria-describedby as a pair
+From form-validation and input-validation docs:
+- `aria-invalid="true"` on the input → announces invalid state
+- `aria-describedby` on the input → references the error message element
+- These ALWAYS appear together for validation errors
+- `aria-required` also works as a CSS hook (not just ARIA)
+- `novalidate` on the `<form>` is required to disable browser built-in validation
+
+**Schema impact**: Validation state is a 3-part pattern: `aria-invalid` + `aria-describedby` + `aria-required`. The schema should document them together.
+
+### aria-current vs aria-selected vs aria-pressed
+Docs clarify when each is used:
+- `aria-current`: used for navigation items (breadcrumb = `aria-current="page"`; active step = `aria-current="step"`; selected tab in fake-tabs)
+- `aria-selected`: used for widget selection (real tabs, listbox options)
+- `aria-pressed`: used for toggle buttons with two states
+
+These three are mutually exclusive patterns for conveying "this item is active/selected."
+
+**Schema impact**: Schema needs a `selectionAttribute` field that explicitly states which of the three applies, with a note distinguishing when each is correct.
+
+### Badge aria-label composition rule
+From icon-button docs:
+- Badge count MUST be included in the host button's `aria-label`, not just on the badge
+- The badge element itself uses `role="img"` + `aria-label` for standalone use
+- When inside a button, badge is typically `aria-hidden`
+
+**Schema impact**: `contextualAriaLabel` — when a component's a11y text must be composed into the parent's label rather than announced independently.
+
+---
+
+## Theme 3 — Roving tabindex vs aria-activedescendant decision matrix
+
+The docs explicitly distinguish the two approaches:
+
+**Roving tabindex** (physical focus movement):
+- Focus physically moves to each item
+- Each item gets `tabindex=0` when focused, `-1` when not
+- Used by: **menu**, **tabs**, **listbox** (implementation), **toggle-button-group** (inferred)
+- Characteristic: user can TAB out of the widget from the currently focused item
+
+**aria-activedescendant** (pseudo-focus):
+- Focus always stays on one host element (usually a textbox)
+- Arrow keys move a visual focus indicator while `aria-activedescendant` tracks which item is "active"
+- Used by: **combobox** (docs), **grid** (docs)
+- Characteristic: textbox retains focus so user can continue typing
+
+This is a schema-level decision:
+
+| Component category | Strategy | Why |
+|---|---|---|
+| Menu | Roving tabindex | No typing — pure command list |
+| Tabs | Roving tabindex | No typing — panel switching |
+| Listbox (standalone) | Roving tabindex | Implementation choice — better cross-browser SR support |
+| Combobox / chips-combobox | aria-activedescendant | Textbox must retain focus for continued input |
+
+**Schema impact**: `keyboardModel.focusStrategy: "roving-tabindex" | "aria-activedescendant"` with a `reason` field explaining why.
+
+---
+
+## Theme 4 — Live region rules
+
+From live-region technique page and FAQ:
+
+### When to use
+- Dynamic content changes **upstream** from the current focus (error messages, notification counts)
+- NOT for downstream changes (the user will encounter them naturally in tab order)
+- Snackbar/Toast patterns are the canonical use case — inform without stealing focus
+
+### When NOT to use
+- On a focused element (double announcement with some screen readers)
+- For content the user just activated (they'll encounter it naturally)
+- For every dynamic update — "think about the experience" before adding
+
+### Critical implementation rule
+The CSS `display` change must happen on a **descendant** of the live region, NOT on the live
+region node itself:
+```html
+<!-- CORRECT -->
+<div aria-live="polite">
+  <p style="display:block">Goal!</p>  <!-- descendant changes -->
+</div>
+
+<!-- WRONG -->
+<div aria-live="polite" style="display:block">  <!-- changing the region itself -->
+  <p>Goal!</p>
+</div>
+```
+
+### Loading state note (from FAQ)
+"If visually conveying a loading/waiting state within a button, change the label to 'Busy'. 
+If wishing to also convey a final completion state, do that outside of the button (in a 
+Snackbar/Toast) using a live-region."
+
+**Schema impact**: `liveRegion` field: `{ type: "polite" | "assertive", reason: string, descendantToggle: boolean }`. The `descendantToggle` flag documents whether the region is shown/hidden by toggling a descendant (not the region itself).
+
+---
+
+## Theme 5 — Toggle button constraint
+
+From toggle-button docs:
+- "must be a button (not a link) when using `aria-pressed`"
+- "must have only two states (whether conveyed via aria-pressed or text)"
+- "The toggle button that uses **visible text** to convey state change must NOT also use `aria-pressed`"
+
+This is an either-or contract:
+1. Use `aria-pressed` → state is hidden, button text stays constant
+2. Use visible text to convey state → no `aria-pressed`
+
+**Schema impact**: `toggleStateStrategy: "aria-pressed" | "visible-text"` with a note that these are mutually exclusive.
+
+---
+
+## Theme 6 — Offscreen text (`.clipped`) conventions
+
+From offscreen-text technique page:
+- The `.clipped` CSS class is the standard for visually hidden text (not `display:none` or `visibility:hidden`)
+- **Always append** after visible text — never prepend
+- Same rule for `aria-label`: beginning of the `aria-label` must match the visual label
+- Use cases: disambiguating links, strikethrough prices, offscreen headings for sections
+
+**Schema impact**: When a component appends offscreen text (like `a11ySelectedText` in listbox), document the pattern as `offscreenTextAppend` with `position: "after"`.
+
+---
+
+## Theme 7 — Icon accessibility rules
+
+From icon and icon-button docs:
+
+**Decorative icon** (inside a labeled button or adjacent to text):
+- Must have `aria-hidden="true"`
+- The parent context provides the accessible name
+
+**Informative icon** (standalone, conveys meaning):
+- Must have `role="img"` and `aria-label`
+- No `aria-hidden`
+
+**Icon button**:
+- Icon must have `aria-hidden="true"` (button label comes from `aria-label`)
+- Badge inside icon button: badge element itself gets `aria-hidden`, count included in button's `aria-label`
+
+**Schema impact**: `iconTreatment: "decorative" | "informative"` on any component that contains icons. `decorative` → `aria-hidden="true"`; `informative` → `role="img"` + `aria-label`.
+
+---
+
+## Theme 8 — Known limitations and spec-edge items
+
+| Item | Source | Schema treatment |
+|---|---|---|
+| `aria-errormessage` not well supported — use `aria-describedby` | input-validation docs | Note in `validationAriaLinks` |
+| HTML5 input type validation (number, date, url) should be avoided | input-validation docs | Caller obligation note |
+| `novalidate` on form required to suppress browser validation UI | form-validation docs | Caller obligation for form context |
+| `closedby` attribute on dialog — not yet widely supported | dialog overview docs (Phase 3) | `specEdge: true` flag on the behavior |
+| Chromium listbox/listbox-button bugs (2 open issues) | known-issues page | Note in `knownIssues` field |
+| Active-descendant not used in listbox implementation despite docs describing it | Phase 3 audit | `implementationNote` on keyboardModel |
+
+---
+
+## Cross-cutting additions to contract template
+
+These are guidance items that the design contract MUST supply but currently has no
+section for (inputs for `contract-template-additions.md` update in Phase 5):
+
+1. **Form context**: Is this a form control? Must it be inside `<form>`? With submit button?
+2. **Label mechanism**: Is a visible `<label>` required? A `<fieldset>/<legend>` group?
+3. **Preceding/surrounding structure**: Does this component require a heading before it? An offscreen heading inside it?
+4. **Focus placement**: Where should focus go when this component opens? Where should focus return on close?
+5. **Open/close trigger rules**: What user actions may open this component? What may close it (light dismiss, explicit button only, etc.)?
+6. **Toggle state strategy**: If toggle, use `aria-pressed` or visible text — which?
+7. **Icon treatment**: Decorative or informative? Consequence for aria-hidden vs role="img"
+8. **Live region justification**: If the component updates content dynamically, does the update need a live region? Upstream or downstream?
diff --git a/.claude/skills/evo-create-component-manifest/scripts/audit-output/summary.json b/.claude/skills/evo-create-component-manifest/scripts/audit-output/summary.json
new file mode 100644
index 0000000000..ccb4b9bc9b
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/audit-output/summary.json
@@ -0,0 +1,469 @@
+{
+  "counts": {
+    "total": 52,
+    "withMarko": 52,
+    "withSkin": 50,
+    "withReact": 2
+  },
+  "makeupPackages": [],
+  "a11yPropNames": [
+    "a11yClearButtonText",
+    "a11yCloseText",
+    "a11yControlsId",
+    "a11yCurrentText",
+    "a11yDescribedBy",
+    "a11yHeadingTag",
+    "a11yHeadingText",
+    "a11yIconText",
+    "a11yLabelId",
+    "a11yLoadingText",
+    "a11yMenuButtonText",
+    "a11ySelectedText",
+    "a11yText"
+  ],
+  "ariaProps": [],
+  "eventCallbacks": [
+    "onEscape",
+    "onLoadError"
+  ],
+  "attrTagSlots": [
+    "action",
+    "badge",
+    "banner",
+    "button",
+    "cancelAction",
+    "card",
+    "close",
+    "confirm",
+    "deleteAction",
+    "description",
+    "details",
+    "footer",
+    "footerButton",
+    "header",
+    "heading",
+    "host",
+    "icon",
+    "image",
+    "item",
+    "label",
+    "next",
+    "option",
+    "overline",
+    "postfixIcon",
+    "postfixText",
+    "prefixIcon",
+    "prefixText",
+    "prev",
+    "previous",
+    "reject",
+    "seeMoreAction",
+    "step",
+    "subheader",
+    "subtitle",
+    "summary",
+    "tab",
+    "title"
+  ],
+  "templateAriaAttrs": [
+    "aria-checked",
+    "aria-controls",
+    "aria-current",
+    "aria-describedby",
+    "aria-disabled",
+    "aria-expanded",
+    "aria-haspopup",
+    "aria-hidden",
+    "aria-invalid",
+    "aria-label",
+    "aria-labelledby",
+    "aria-live",
+    "aria-modal",
+    "aria-pressed",
+    "aria-roledescription",
+    "aria-selected"
+  ],
+  "templateRoles": [
+    "!!hasA11yText",
+    "alertdialog",
+    "figure",
+    "img",
+    "itemRole",
+    "list",
+    "listbox",
+    "listitem",
+    "menu",
+    "navigation",
+    "option",
+    "presentation",
+    "region",
+    "separator",
+    "status",
+    "switch",
+    "tab",
+    "tablist",
+    "tabpanel",
+    "tooltip",
+    "type"
+  ],
+  "allBemBlocks": [
+    "accordion",
+    "animations",
+    "avatar",
+    "background-color-token",
+    "background-keyframes",
+    "background-token",
+    "badge",
+    "base",
+    "before-base",
+    "before-hover",
+    "border-bottom-left-radius-token",
+    "border-bottom-right-radius-token",
+    "border-color-token",
+    "border-left-color-token",
+    "border-radius-token",
+    "border-right-color-token",
+    "border-top-left-radius-token",
+    "border-top-right-radius-token",
+    "breadcrumbs",
+    "btn",
+    "card",
+    "ccd",
+    "cell",
+    "cell-base",
+    "cell-fixed-height",
+    "cell-truncated",
+    "checkbox",
+    "chevron-close",
+    "chevron-keyframes",
+    "chevron-open",
+    "close",
+    "color-token",
+    "com",
+    "content",
+    "cta-btn",
+    "details",
+    "dialog",
+    "disabled",
+    "e",
+    "ebaystatic",
+    "eek",
+    "expand-btn",
+    "fake-btn",
+    "fake-menu",
+    "fake-menu-button",
+    "fake-tabs",
+    "file",
+    "file-input",
+    "file-preview-card",
+    "file-preview-card-group",
+    "fill-token",
+    "filter",
+    "filter-chip",
+    "flex-items-centered",
+    "footer",
+    "icon",
+    "icon-base",
+    "icon-btn",
+    "icon-link",
+    "image-treatment",
+    "inline-flex-items-centered",
+    "interactive",
+    "item-border-radius",
+    "large",
+    "large-screen",
+    "layout-grid",
+    "list",
+    "listbox",
+    "listbox-button",
+    "mask",
+    "menu",
+    "menu-button",
+    "outline-color-token",
+    "outline-token",
+    "paciellogroup",
+    "pagination",
+    "pointer-base",
+    "pointer-bottom-center",
+    "pointer-bottom-left",
+    "pointer-bottom-right",
+    "pointer-left",
+    "pointer-left-bottom",
+    "pointer-left-top",
+    "pointer-right",
+    "pointer-right-bottom",
+    "pointer-right-top",
+    "pointer-top-center",
+    "pointer-top-left",
+    "pointer-top-right",
+    "progress-spinner",
+    "progress-stepper",
+    "radio",
+    "reverse",
+    "segmented-buttons",
+    "select",
+    "selected",
+    "selected-animation",
+    "selection-chip",
+    "selection-list-item-base",
+    "selector-hover",
+    "signal",
+    "skeleton",
+    "sqrt",
+    "standard",
+    "status",
+    "strong",
+    "switch",
+    "tabs",
+    "text",
+    "toggle-button",
+    "toggle-button-group",
+    "tooltip",
+    "transparent",
+    "truncate",
+    "ttf"
+  ],
+  "allStateSelectors": [
+    "[aria-checked=\"true\"]",
+    "[aria-current=\"page\"]",
+    "[aria-current]",
+    "[aria-disabled=\"true\"]",
+    "[aria-expanded=\"false\"]",
+    "[aria-expanded=\"true\"]",
+    "[aria-invalid=\"true\"]",
+    "[aria-live=\"polite\"]",
+    "[aria-pressed=\"true\"]",
+    "[aria-selected=\"true\"]",
+    "[data-columns-#{$breakpoint}=\"#{$i}\"]",
+    "[data-columns-min=\"1\"]",
+    "[data-columns-min=\"2\"]",
+    "[data-columns-min=\"3\"]",
+    "[data-columns-min=\"4\"]",
+    "[disabled]",
+    "[hidden]",
+    "[open]",
+    "[readonly]",
+    "[role=\"listbox\"]",
+    "[role=\"menu\"]",
+    "[role=\"option\"]",
+    "[role=\"tab\"]",
+    "[role=\"tablist\"]",
+    "[role^=\"menuitem\"]"
+  ],
+  "allCssVars": [
+    "--avatar-border-radius",
+    "--border-radius-100",
+    "--border-radius-150",
+    "--border-radius-50",
+    "--btn-secondary-background-color",
+    "--color-background-accent",
+    "--color-background-attention",
+    "--color-background-disabled",
+    "--color-background-inverse",
+    "--color-background-primary",
+    "--color-background-secondary",
+    "--color-border-accent",
+    "--color-border-attention",
+    "--color-border-disabled",
+    "--color-border-medium",
+    "--color-border-on-attention",
+    "--color-border-strong",
+    "--color-border-subtle",
+    "--color-foreground-accent",
+    "--color-foreground-attention",
+    "--color-foreground-disabled",
+    "--color-foreground-on-accent",
+    "--color-foreground-on-attention",
+    "--color-foreground-on-inverse",
+    "--color-foreground-on-strong",
+    "--color-foreground-primary",
+    "--color-foreground-secondary",
+    "--color-foreground-success",
+    "--color-gradient-ai-blue-subtle",
+    "--color-gradient-ai-green-subtle",
+    "--color-gradient-ai-purple-subtle",
+    "--color-loading-fill-on-secondary",
+    "--color-loading-on-primary-state-1",
+    "--color-loading-on-primary-state-2",
+    "--color-loading-on-secondary-state-1",
+    "--color-loading-on-secondary-state-2",
+    "--color-media-disabled-filter",
+    "--dialog-max-width",
+    "--dialog-narrow-max-width",
+    "--dialog-scrim-color",
+    "--dialog-wide-max-width",
+    "--font-size-body",
+    "--font-size-giant-1",
+    "--font-size-giant-2",
+    "--font-size-giant-3",
+    "--font-size-giant-4",
+    "--font-size-large-1",
+    "--font-size-large-2",
+    "--font-size-medium",
+    "--font-size-small",
+    "--font-size-smallest",
+    "--font-weight-400",
+    "--font-weight-600",
+    "--layout-grid-cell-gap",
+    "--layout-grid-cell-height-min",
+    "--layout-grid-columns-lg",
+    "--layout-grid-columns-md",
+    "--layout-grid-columns-min",
+    "--layout-grid-columns-sm",
+    "--layout-grid-columns-xl",
+    "--layout-grid-columns-xl2",
+    "--layout-grid-columns-xl3",
+    "--layout-grid-columns-xl4",
+    "--layout-grid-columns-xs",
+    "--motion-duration-long-3",
+    "--motion-duration-medium-2",
+    "--motion-duration-medium-3",
+    "--motion-duration-short-3",
+    "--motion-easing-continuous",
+    "--motion-easing-quick-enter",
+    "--motion-easing-soft-exit",
+    "--motion-easing-standard",
+    "--row-gallery-toggle-buttons-md",
+    "--row-gallery-toggle-buttons-min",
+    "--row-gallery-toggle-buttons-sm",
+    "--row-gallery-toggle-buttons-xl",
+    "--row-gallery-toggle-buttons-xs",
+    "--row-list-toggle-buttons-md",
+    "--row-list-toggle-buttons-min",
+    "--row-list-toggle-buttons-sm",
+    "--row-list-toggle-buttons-xl",
+    "--row-list-toggle-buttons-xs",
+    "--row-min-toggle-buttons-md",
+    "--row-min-toggle-buttons-min",
+    "--row-min-toggle-buttons-sm",
+    "--row-min-toggle-buttons-xl",
+    "--row-min-toggle-buttons-xs",
+    "--select-border-radius",
+    "--spacing-100",
+    "--spacing-150",
+    "--spacing-200",
+    "--spacing-250",
+    "--spacing-300",
+    "--spacing-400",
+    "--spacing-50",
+    "--spacing-600",
+    "--spacing-700",
+    "--spacing-75",
+    "--state-layer-hover",
+    "--state-layer-pressed",
+    "--text-border-radius",
+    "--toggle-button-gallery-width-max",
+    "--toggle-button-gallery-width-min",
+    "--toggle-button-height-min",
+    "--toggle-button-list-width-max",
+    "--toggle-button-list-width-min",
+    "--toggle-button-width-max",
+    "--toggle-button-width-min"
+  ],
+  "withMakeup": [],
+  "withAttrTagSlots": [
+    "evo-accordion",
+    "evo-alert-dialog",
+    "evo-avatar",
+    "evo-breadcrumbs",
+    "evo-card",
+    "evo-confirm-dialog",
+    "evo-details",
+    "evo-dialog",
+    "evo-fake-menu",
+    "evo-fake-menu-button",
+    "evo-fake-tabs",
+    "evo-file-input",
+    "evo-file-preview-card",
+    "evo-file-preview-card-group",
+    "evo-filter-chip",
+    "evo-icon-button",
+    "evo-infotip",
+    "evo-layout-grid",
+    "evo-list",
+    "evo-listbox",
+    "evo-menu",
+    "evo-menu-button",
+    "evo-pagination",
+    "evo-progress-stepper",
+    "evo-segmented-buttons",
+    "evo-select",
+    "evo-tabs",
+    "evo-textbox",
+    "evo-toggle-button",
+    "evo-toggle-button-group",
+    "evo-tooltip",
+    "evo-tourtip"
+  ],
+  "withRtl": [
+    "evo-alert-dialog",
+    "evo-breadcrumbs",
+    "evo-button",
+    "evo-confirm-dialog",
+    "evo-cta-button",
+    "evo-dialog",
+    "evo-eek",
+    "evo-list",
+    "evo-listbox-button",
+    "evo-pagination",
+    "evo-progress-stepper",
+    "evo-select",
+    "evo-skeleton"
+  ],
+  "withHelperInterfaces": [
+    "evo-breadcrumbs",
+    "evo-fake-menu",
+    "evo-file-preview-card",
+    "evo-layout-grid",
+    "evo-list",
+    "evo-listbox",
+    "evo-menu",
+    "evo-pagination",
+    "evo-progress-stepper",
+    "evo-segmented-buttons",
+    "evo-select",
+    "evo-tabs"
+  ],
+  "withSubComponents": [
+    "evo-3d-viewer",
+    "evo-accordion",
+    "evo-alert-dialog",
+    "evo-avatar",
+    "evo-breadcrumbs",
+    "evo-button",
+    "evo-ccd",
+    "evo-checkbox",
+    "evo-confirm-dialog",
+    "evo-cta-button",
+    "evo-details",
+    "evo-dialog",
+    "evo-eek",
+    "evo-fake-menu",
+    "evo-fake-menu-button",
+    "evo-file-input",
+    "evo-file-preview-card",
+    "evo-file-preview-card-group",
+    "evo-filter-chip",
+    "evo-filter-input",
+    "evo-icon-button",
+    "evo-image-placeholder",
+    "evo-infotip",
+    "evo-listbox",
+    "evo-listbox-button",
+    "evo-menu",
+    "evo-menu-button",
+    "evo-number-input",
+    "evo-pagination",
+    "evo-progress-spinner",
+    "evo-progress-stepper",
+    "evo-radio",
+    "evo-select",
+    "evo-selection-chip",
+    "evo-tabs",
+    "evo-textbox",
+    "evo-toggle-button-group",
+    "evo-tooltip",
+    "evo-tourtip",
+    "evo-tri-state-checkbox"
+  ]
+}
\ No newline at end of file
diff --git a/.claude/skills/evo-create-component-manifest/scripts/component-audit.js b/.claude/skills/evo-create-component-manifest/scripts/component-audit.js
new file mode 100644
index 0000000000..1c04e4f79c
--- /dev/null
+++ b/.claude/skills/evo-create-component-manifest/scripts/component-audit.js
@@ -0,0 +1,586 @@
+#!/usr/bin/env node
+'use strict';
+
+/**
+ * Phase 1 Static Analysis Script
+ *
+ * Scans all three package layers (evo-marko, skin, evo-react) and produces:
+ *   - audit-output/components/<name>.json  — per-component summary
+ *   - audit-output/summary.json            — cross-component aggregate
+ *
+ * Run from repo root:
+ *   node .claude/skills/evo-create-component-manifest/scripts/component-audit.js
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+// ── Paths ──────────────────────────────────────────────────────────────────────
+const REPO_ROOT = path.resolve(__dirname, '../../../../');
+const EVO_MARKO_TAGS = path.join(REPO_ROOT, 'packages/evo-marko/src/tags');
+const SKIN_SASS = path.join(REPO_ROOT, 'packages/skin/src/sass');
+const EVO_REACT_SRC = path.join(REPO_ROOT, 'packages/evo-react/src');
+const OUT_DIR = path.join(__dirname, 'audit-output');
+const COMP_DIR = path.join(OUT_DIR, 'components');
+
+// ── Utils ──────────────────────────────────────────────────────────────────────
+function readFile(p) {
+  try { return fs.readFileSync(p, 'utf8'); } catch { return null; }
+}
+function exists(p) { return fs.existsSync(p); }
+function listDir(p) {
+  try { return fs.readdirSync(p); } catch { return []; }
+}
+function unique(arr) { return [...new Set(arr)]; }
+
+// ── Brace-block extractor ──────────────────────────────────────────────────────
+// Starts at `openBraceIdx` (the `{`), returns { body, endIdx }
+// endIdx points one past the closing `}`.
+function extractBracedBlock(content, openBraceIdx) {
+  let depth = 1;
+  let i = openBraceIdx + 1;
+  while (i < content.length && depth > 0) {
+    const ch = content[i];
+    if (ch === '{') { depth++; i++; continue; }
+    if (ch === '}') { depth--; i++; continue; }
+    // Skip string literals to avoid counting braces inside them
+    if (ch === '"' || ch === "'" || ch === '`') {
+      const q = ch; i++;
+      while (i < content.length && content[i] !== q) {
+        if (content[i] === '\\') i++;
+        i++;
+      }
+      i++;
+      continue;
+    }
+    i++;
+  }
+  return { body: content.slice(openBraceIdx + 1, i - 1), endIdx: i };
+}
+
+// ── TypeScript prop parser ─────────────────────────────────────────────────────
+//
+// Splits the interface body into individual prop strings, then parses each.
+// Tracks angle-bracket and brace depth so semicolons inside generics / object
+// literals don't trigger a split. `=>` in arrow-function types is handled by
+// not decrementing angle depth when the `>` is immediately preceded by `=`.
+
+function parseProps(body) {
+  const segments = [];
+  let cur = '';
+  let angleDepth = 0;
+  let braceDepth = 0;
+
+  for (let i = 0; i < body.length; i++) {
+    const ch = body[i];
+    if (ch === '<') { angleDepth++; }
+    else if (ch === '>' && body[i - 1] !== '=') { angleDepth = Math.max(0, angleDepth - 1); }
+    else if (ch === '{') { braceDepth++; }
+    else if (ch === '}') { braceDepth = Math.max(0, braceDepth - 1); }
+    else if (ch === ';' && angleDepth === 0 && braceDepth === 0) {
+      const t = cur.trim();
+      if (t) segments.push(t);
+      cur = '';
+      continue;
+    }
+    cur += ch;
+  }
+  if (cur.trim()) segments.push(cur.trim());
+
+  return segments.map(parsePropDef).filter(Boolean);
+}
+
+function parsePropDef(raw) {
+  const clean = raw
+    .replace(/\/\*[\s\S]*?\*\//g, '')
+    .replace(/\/\/[^\n]*/g, '')
+    .trim();
+  if (!clean) return null;
+
+  // `"aria-label"?: type`  or  `propName?: type`
+  const m = clean.match(/^(?:"([^"]+)"|([a-zA-Z_$][\w$]*))\s*(\??):\s*([\s\S]+)$/);
+  if (!m) return null;
+
+  const name = (m[1] || m[2]).trim();
+  const optional = m[3] === '?';
+  const type = m[4].replace(/\s+/g, ' ').trim();
+
+  const category =
+    name.startsWith('a11y') ? 'a11y' :
+    name.startsWith('aria-') ? 'aria' :
+    /^on[A-Z]/.test(name) ? 'event' :
+    type.includes('Marko.AttrTag') ? 'slot' : 'prop';
+
+  return { name, optional, type, category };
+}
+
+// ── evo-marko analysis ─────────────────────────────────────────────────────────
+
+function parseSkinImports(styleContent) {
+  if (!styleContent) return [];
+  const re = /import\s+["'](@ebay\/skin\/[^"']+)["']/g;
+  const out = [];
+  let m;
+  while ((m = re.exec(styleContent)) !== null) out.push(m[1]);
+  return out;
+}
+
+function parseMakeupImports(src) {
+  if (!src) return [];
+  const re = /["'](@ebay\/makeup-[^"']+)["']/g;
+  const out = new Set();
+  let m;
+  while ((m = re.exec(src)) !== null) out.add(m[1]);
+  return [...out];
+}
+
+function parseInternalTagImports(src) {
+  // Static imports: import ... from "<evo-*>"
+  const re = /from\s+["']<(evo-[a-z][a-z0-9-]*)>["']/g;
+  const out = new Set();
+  let m;
+  while ((m = re.exec(src)) !== null) out.add(m[1]);
+  return [...out];
+}
+
+function parseSubComponentTags(src, selfName) {
+  // <evo-* tags used in the template (includes icons like <evo-icon-chevron-down-16>)
+  const re = /<(evo-[a-z][a-z0-9-]*)/g;
+  const out = new Set();
+  let m;
+  while ((m = re.exec(src)) !== null) {
+    if (m[1] !== selfName) out.add(m[1]);
+  }
+  return [...out];
+}
+
+// Splits a comma-separated list while respecting angle-bracket nesting and
+// template literals (e.g. `on${string}` in TypeScript utility types).
+function splitGenericAwareComma(str) {
+  const parts = [];
+  let current = '';
+  let depth = 0;
+  for (let i = 0; i < str.length; i++) {
+    const ch = str[i];
+    if (ch === '<') { depth++; current += ch; }
+    else if (ch === '>') { depth = Math.max(0, depth - 1); current += ch; }
+    else if (ch === ',' && depth === 0) {
+      if (current.trim()) parts.push(current.trim());
+      current = '';
+    } else {
+      current += ch;
+    }
+  }
+  if (current.trim()) parts.push(current.trim());
+  return parts;
+}
+
+function extractInputInterface(src) {
+  if (!src) return null;
+  // Find `export interface Input` (with optional generic parameter)
+  const headerRe = /export\s+interface\s+Input(?:<[^>]*>)?\s*/g;
+  const headerMatch = headerRe.exec(src);
+  if (!headerMatch) return null;
+
+  // Walk character-by-character from after the header to find:
+  //   - the optional `extends Foo, Bar<Baz>` clause
+  //   - the opening `{` of the interface body
+  // We must handle template literals (`...${...}...`) and quoted strings so
+  // that a `{` inside `\`on${string}\`` doesn't fool us.
+  let i = headerMatch.index + headerMatch[0].length;
+  let extendsStr = '';
+  let inExtends = false;
+
+  if (src.slice(i).match(/^\s*extends\s/)) {
+    // Skip 'extends '
+    i += src.slice(i).match(/^\s*extends\s/)[0].length;
+    inExtends = true;
+  }
+
+  let angleDepth = 0;
+
+  while (i < src.length) {
+    const ch = src[i];
+
+    // Skip quoted strings and template literals so `{` inside them is ignored
+    if (ch === '"' || ch === "'") {
+      const q = ch;
+      extendsStr += ch; i++;
+      while (i < src.length && src[i] !== q) {
+        if (src[i] === '\\') { extendsStr += src[i]; i++; }
+        extendsStr += src[i]; i++;
+      }
+      extendsStr += src[i] || ''; i++;
+      continue;
+    }
+    if (ch === '`') {
+      extendsStr += ch; i++;
+      while (i < src.length && src[i] !== '`') {
+        if (src[i] === '\\') { extendsStr += src[i]; i++; }
+        extendsStr += src[i]; i++;
+      }
+      extendsStr += src[i] || ''; i++;
+      continue;
+    }
+
+    if (ch === '<') { angleDepth++; }
+    else if (ch === '>') { angleDepth = Math.max(0, angleDepth - 1); }
+    else if (ch === '{' && angleDepth === 0) {
+      // This is the interface body opening brace
+      const extendsClause = inExtends
+        ? splitGenericAwareComma(extendsStr).map(s => s.replace(/\s+/g, ' ').trim())
+        : [];
+      const block = extractBracedBlock(src, i);
+      return { extends: extendsClause, endIdx: block.endIdx, props: parseProps(block.body) };
+    }
+
+    if (inExtends) extendsStr += ch;
+    i++;
+  }
+  return null;
+}
+
+// Also look for helper interfaces defined above Input (e.g. `export interface Tab`)
+function extractHelperInterfaces(src) {
+  const re = /export\s+interface\s+((?!Input\b)\w+)(?:<[^>]*>)?(?:\s+extends\s+[^{]+)?\s*\{/g;
+  const results = [];
+  let m;
+  while ((m = re.exec(src)) !== null) {
+    const braceIdx = m.index + m[0].length - 1;
+    const block = extractBracedBlock(src, braceIdx);
+    results.push({
+      name: m[1],
+      props: parseProps(block.body),
+    });
+  }
+  return results;
+}
+
+function parseTemplateAriaUsages(src, interfaceEndIdx) {
+  const template = interfaceEndIdx ? src.slice(interfaceEndIdx) : (src || '');
+  // Match aria-attr=value where value is: unquoted-token, (expr), or "string"
+  const re = /(aria-[\w-]+)=("(?:[^"]*)"|'(?:[^']*)'|\([^)]*\)|[^\s>]+)/g;
+  const results = [];
+  let m;
+  while ((m = re.exec(template)) !== null) {
+    results.push({ attr: m[1], value: m[2] });
+  }
+  return results;
+}
+
+function parseMarkoRoleUsages(src, interfaceEndIdx) {
+  const template = interfaceEndIdx ? src.slice(interfaceEndIdx) : (src || '');
+  const re = /\brole=("(?:[^"]*)"|'(?:[^']*)'|[^\s>]+)/g;
+  const roles = new Set();
+  let m;
+  while ((m = re.exec(template)) !== null) roles.add(m[1].replace(/['"]/g, ''));
+  return [...roles];
+}
+
+function analyzeMarko(componentName) {
+  const dir = path.join(EVO_MARKO_TAGS, componentName);
+  const src = readFile(path.join(dir, 'index.marko'));
+  if (!src) return null;
+
+  const styleContent = readFile(path.join(dir, 'style.ts'));
+  const skinImports = parseSkinImports(styleContent);
+  const makeupImports = parseMakeupImports(src);
+  const internalImports = parseInternalTagImports(src);
+  const subComponents = parseSubComponentTags(src, componentName);
+
+  const iface = extractInputInterface(src);
+  const helperInterfaces = extractHelperInterfaces(src);
+
+  let inputInterface = null;
+  if (iface) {
+    inputInterface = {
+      extends: iface.extends,
+      a11yProps: iface.props.filter(p => p.category === 'a11y'),
+      ariaProps: iface.props.filter(p => p.category === 'aria'),
+      eventCallbacks: iface.props.filter(p => p.category === 'event'),
+      attrTagSlots: iface.props.filter(p => p.category === 'slot'),
+      regularProps: iface.props.filter(p => p.category === 'prop'),
+    };
+  }
+
+  return {
+    hasImplementation: true,
+    skinImports,
+    makeupImports,
+    internalImports,
+    subComponents: unique(subComponents),
+    helperInterfaces,
+    inputInterface,
+    templateAriaUsages: parseTemplateAriaUsages(src, iface?.endIdx),
+    templateRoleUsages: parseMarkoRoleUsages(src, iface?.endIdx),
+  };
+}
+
+// ── Skin analysis ──────────────────────────────────────────────────────────────
+
+function analyzeSkin(skinModule) {
+  const dir = path.join(SKIN_SASS, skinModule);
+  if (!exists(dir)) return { hasImplementation: false };
+
+  const scssContent = listDir(dir)
+    .filter(f => f.endsWith('.scss'))
+    .map(f => readFile(path.join(dir, f)))
+    .filter(Boolean)
+    .join('\n');
+
+  if (!scssContent) return { hasImplementation: false };
+
+  // ── BEM extraction ──
+  // Full explicit class names (e.g. `.btn__cell`, `.btn--primary`)
+  const allClassNames = new Set();
+  const classRe = /\.([a-z][a-z0-9]*(?:-[a-z0-9]+)*(?:__[a-z][a-z0-9]*(?:-[a-z0-9]+)*)?(?:--[a-z][a-z0-9]*(?:-[a-z0-9]+)*)?)\b/g;
+  let m;
+  while ((m = classRe.exec(scssContent)) !== null) allClassNames.add(m[1]);
+
+  const bemBlocks = new Set();
+  const bemElements = new Set();
+  const bemModifiers = new Set();
+  for (const cls of allClassNames) {
+    if (cls.includes('__')) bemElements.add(cls);
+    else if (cls.includes('--')) bemModifiers.add(cls);
+    else bemBlocks.add(cls);
+  }
+
+  // SCSS `&__element` and `&--modifier` nested selectors (partial — needs parent context)
+  const nestedElementSuffixes = unique(
+    (scssContent.match(/&__([a-z][a-z0-9]*(?:-[a-z0-9]+)*)/g) || [])
+      .map(s => s.replace('&__', ''))
+  ).sort();
+  const nestedModifierSuffixes = unique(
+    (scssContent.match(/&--([a-z][a-z0-9]*(?:-[a-z0-9]+)*)/g) || [])
+      .map(s => s.replace('&--', ''))
+  ).sort();
+
+  // ── State selectors ──
+  const stateAttrs = [
+    'aria-', 'data-', 'role', 'disabled', 'hidden', 'readonly',
+    'required', 'checked', 'selected', 'open', 'expanded', 'invalid',
+  ];
+  const stateRe = new RegExp(
+    `\\[((?:${stateAttrs.join('|')})[^\\]]*)\\]`, 'g'
+  );
+  const stateSelectors = new Set();
+  while ((m = stateRe.exec(scssContent)) !== null) stateSelectors.add(`[${m[1]}]`);
+
+  // ── CSS custom properties ──
+  const varRe = /var\((--[a-z][a-z0-9-]*)/g;
+  const cssVars = new Set();
+  while ((m = varRe.exec(scssContent)) !== null) cssVars.add(m[1]);
+
+  // ── :root custom property definitions ──
+  const rootVarRe = /:root\s*\{([^}]+)\}/g;
+  const rootVarDefs = new Set();
+  while ((m = rootVarRe.exec(scssContent)) !== null) {
+    const block = m[1];
+    const defRe = /(--[a-z][a-z0-9-]*):/g;
+    let dm;
+    while ((dm = defRe.exec(block)) !== null) rootVarDefs.add(dm[1]);
+  }
+
+  return {
+    hasImplementation: true,
+    bemBlocks: [...bemBlocks].sort(),
+    bemElements: [...bemElements].sort(),
+    bemModifiers: [...bemModifiers].sort(),
+    nestedBemElementSuffixes: nestedElementSuffixes,
+    nestedBemModifierSuffixes: nestedModifierSuffixes,
+    cssCustomProperties: [...cssVars].sort(),
+    cssCustomPropertyDefinitions: [...rootVarDefs].sort(),
+    stateSelectors: [...stateSelectors].sort(),
+    rtlOverrides: /\[dir=['"]rtl['"]\]/.test(scssContent),
+  };
+}
+
+// ── evo-react analysis ─────────────────────────────────────────────────────────
+
+function analyzeReact(componentName) {
+  const dir = path.join(EVO_REACT_SRC, componentName);
+  if (!exists(dir)) return { hasImplementation: false };
+
+  const src = listDir(dir)
+    .filter(f => /\.(tsx?|ts)$/.test(f) && !/\.(spec|stories)\./.test(f))
+    .map(f => readFile(path.join(dir, f)))
+    .filter(Boolean)
+    .join('\n');
+
+  if (!src) return { hasImplementation: false };
+
+  // Extract TypeScript interface/type bodies
+  const allProps = [];
+  // Match `interface FooProps extends ... { ... }` or `type FooProps = { ... }`
+  const ifaceRe = /(?:interface\s+\w+(?:\s+extends\s+[^{]+)?\s*\{|type\s+\w+\s*=\s*\{)([^}]+)\}/g;
+  let m;
+  while ((m = ifaceRe.exec(src)) !== null) {
+    allProps.push(...parseProps(m[1]));
+  }
+
+  // aria-* usages in JSX
+  const ariaRe = /(aria-[\w-]+)=/g;
+  const ariaUsages = new Set();
+  while ((m = ariaRe.exec(src)) !== null) ariaUsages.add(m[1]);
+
+  // role= usages in JSX
+  const roleRe = /\brole=["'{]([^"'}\s]+)/g;
+  const roles = new Set();
+  while ((m = roleRe.exec(src)) !== null) roles.add(m[1]);
+
+  return {
+    hasImplementation: true,
+    props: allProps.filter(Boolean),
+    a11yProps: allProps.filter(p => p?.category === 'a11y'),
+    ariaProps: allProps.filter(p => p?.category === 'aria'),
+    eventHandlers: allProps.filter(p => p && /^on[A-Z]/.test(p.name)),
+    ariaUsages: [...ariaUsages].sort(),
+    roleUsages: [...roles].sort(),
+    makeupImports: parseMakeupImports(src),
+  };
+}
+
+// ── Per-component audit ────────────────────────────────────────────────────────
+
+function auditComponent(name) {
+  const marko = analyzeMarko(name);
+
+  const skinImportModules = marko?.skinImports?.map(i => i.replace('@ebay/skin/', '')) ?? [];
+  const skinModules = skinImportModules.length > 0
+    ? skinImportModules
+    : [name.replace(/^evo-/, '')];
+
+  const skin = analyzeSkin(skinModules[0]);
+  const react = analyzeReact(name);
+
+  return { name, skinModules, marko: marko ?? { hasImplementation: false }, skin, react };
+}
+
+// ── Cross-component summary ────────────────────────────────────────────────────
+
+function buildSummary(all) {
+  const counts = { total: all.length, withMarko: 0, withSkin: 0, withReact: 0 };
+  const makeupPackages = new Set();
+  const a11yPropNames = new Set();
+  const ariaProps = new Set();
+  const eventCallbacks = new Set();
+  const attrTagSlots = new Set();
+  const templateAriaAttrs = new Set();
+  const templateRoles = new Set();
+  const allBemBlocks = new Set();
+  const allStateSelectors = new Set();
+  const allCssVars = new Set();
+
+  const withMakeup = [];
+  const withAttrTagSlots = [];
+  const withRtl = [];
+  const withHelperInterfaces = [];
+  const withSubComponents = [];
+
+  for (const comp of all) {
+    if (comp.marko?.hasImplementation) {
+      counts.withMarko++;
+
+      comp.marko.makeupImports?.forEach(p => {
+        makeupPackages.add(p);
+        if (!withMakeup.includes(comp.name)) withMakeup.push(comp.name);
+      });
+
+      if (comp.marko.subComponents?.length) withSubComponents.push(comp.name);
+      if (comp.marko.helperInterfaces?.length) withHelperInterfaces.push(comp.name);
+
+      const iface = comp.marko.inputInterface;
+      if (iface) {
+        iface.a11yProps?.forEach(p => a11yPropNames.add(p.name));
+        iface.ariaProps?.forEach(p => ariaProps.add(p.name));
+        iface.eventCallbacks?.forEach(p => eventCallbacks.add(p.name));
+        if (iface.attrTagSlots?.length) {
+          iface.attrTagSlots.forEach(p => attrTagSlots.add(p.name));
+          withAttrTagSlots.push(comp.name);
+        }
+      }
+
+      comp.marko.templateAriaUsages?.forEach(u => templateAriaAttrs.add(u.attr));
+      comp.marko.templateRoleUsages?.forEach(r => templateRoles.add(r));
+    }
+
+    if (comp.skin?.hasImplementation) {
+      counts.withSkin++;
+      comp.skin.bemBlocks?.forEach(b => allBemBlocks.add(b));
+      comp.skin.stateSelectors?.forEach(s => allStateSelectors.add(s));
+      comp.skin.cssCustomProperties?.forEach(v => allCssVars.add(v));
+      if (comp.skin.rtlOverrides) withRtl.push(comp.name);
+    }
+
+    if (comp.react?.hasImplementation) counts.withReact++;
+  }
+
+  const toArr = s => [...s].sort();
+
+  return {
+    counts,
+    makeupPackages: toArr(makeupPackages),
+    a11yPropNames: toArr(a11yPropNames),
+    ariaProps: toArr(ariaProps),
+    eventCallbacks: toArr(eventCallbacks),
+    attrTagSlots: toArr(attrTagSlots),
+    templateAriaAttrs: toArr(templateAriaAttrs),
+    templateRoles: toArr(templateRoles),
+    allBemBlocks: toArr(allBemBlocks),
+    allStateSelectors: toArr(allStateSelectors),
+    allCssVars: toArr(allCssVars),
+    withMakeup,
+    withAttrTagSlots,
+    withRtl,
+    withHelperInterfaces,
+    withSubComponents,
+  };
+}
+
+// ── Entry point ────────────────────────────────────────────────────────────────
+
+function main() {
+  fs.mkdirSync(COMP_DIR, { recursive: true });
+
+  const components = listDir(EVO_MARKO_TAGS).filter(name => {
+    const p = path.join(EVO_MARKO_TAGS, name);
+    return fs.statSync(p).isDirectory() && name.startsWith('evo-');
+  });
+
+  console.log(`\nPhase 1 — Static Analysis (${components.length} components)\n`);
+
+  const results = components.map(name => {
+    process.stdout.write(`  ${name.padEnd(36)}`);
+    const result = auditComponent(name);
+    const flags = [
+      result.marko.hasImplementation ? 'marko' : '     ',
+      result.skin.hasImplementation  ? 'skin'  : '    ',
+      result.react.hasImplementation ? 'react' : '     ',
+    ].join(' ');
+    console.log(flags);
+    fs.writeFileSync(
+      path.join(COMP_DIR, `${name}.json`),
+      JSON.stringify(result, null, 2)
+    );
+    return result;
+  });
+
+  const summary = buildSummary(results);
+  fs.writeFileSync(path.join(OUT_DIR, 'summary.json'), JSON.stringify(summary, null, 2));
+
+  const rel = path.relative(process.cwd(), OUT_DIR);
+  console.log(`\nOutput written to ${rel}/`);
+  console.log(`  ${components.length} component files + summary.json`);
+  console.log(`\nSummary:`);
+  console.log(`  ${summary.counts.withMarko}/${summary.counts.total} have evo-marko implementation`);
+  console.log(`  ${summary.counts.withSkin}/${summary.counts.total}  have skin CSS`);
+  console.log(`  ${summary.counts.withReact}/${summary.counts.total}  have evo-react implementation`);
+  console.log(`  ${summary.a11yPropNames.length} unique a11y prop names`);
+  console.log(`  ${summary.eventCallbacks.length} unique event callback names`);
+  console.log(`  ${summary.attrTagSlots.length} unique AttrTag slot names`);
+  console.log(`  ${summary.makeupPackages.length} MakeupJS packages used`);
+  console.log(`  ${summary.withRtl.length} components with RTL overrides`);
+}
+
+main();
diff --git a/.claude/skills/evo-css-storybook/SKILL.md b/.claude/skills/evo-css-storybook/SKILL.md
new file mode 100644
index 0000000000..116218a997
--- /dev/null
+++ b/.claude/skills/evo-css-storybook/SKILL.md
@@ -0,0 +1,287 @@
+---
+name: evo-css-storybook
+description: >
+  Generate Skin (CSS) Storybook story files for a new evo-web component.
+  Reads manifest.json for BEM structure and variants, writes CSF2 story files
+  under packages/skin/src/sass/<block>/stories/.
+  Use this whenever the user says "generate skin stories", "create CSS stories",
+  "scaffold the skin storybook", or when the evo-component orchestrator invokes Step 7.
+---
+
+# evo-css-storybook
+
+You are scaffolding the Skin Storybook for a new component. Stories are raw HTML strings —
+no framework, no args, no controls. The output documents every visual permutation so designers
+and engineers can review the CSS in isolation.
+
+## Step 1 — Read the manifest
+
+Read `src/routes/_index/components/$COMPONENT/manifest.json`. Extract:
+
+- `component.displayName` — used in the Storybook title (e.g. `"Accordion"`)
+- `bem.block` — the root CSS class (e.g. `"accordion"`)
+- `bem.elements[]` — element names (e.g. `["item", "title", "content"]`)
+- `bem.modifiers[]` — modifier names and descriptions
+- `variants[]` — named rendering modes from the manifest
+- `states[]` — visual states (expanded, disabled, collapsed, etc.)
+
+Also read the generated SCSS file at
+`packages/skin/src/sass/<block>/<block>.scss` to see what selectors were actually
+written — use this as the ground truth for what stories to cover.
+
+## Step 2 — Read the docs page (if it exists)
+
+Check for `src/routes/_index/components/<block>/css+page.marko`.
+
+**If it exists:** Read it in full. This is the canonical visual catalogue — it takes precedence
+over manifest inference for story content. Extract:
+
+- **Story names** — each `<h3 id="...">` heading defines a story. The `id` is the slug
+  (e.g. `id="button-partially-disabled"`) and the heading text is the human name.
+
+- **Exact markup** — the `<highlight-code type="html">` block immediately following each
+  heading contains the canonical HTML. This is what the story function should return.
+  Strip the `<highlight-code>` wrapper; use the inner HTML string verbatim.
+
+- **Accessibility constraints in demos** — the live demo `<div class="demo__inner">` often
+  includes `role`, `aria-label`, `aria-expanded` etc. that must be in the story markup.
+  Cross-check with the highlight-code block — if the demo has ARIA attributes the
+  highlight-code block omits, add them (the demo is the more authoritative for ARIA).
+
+- **Experimental / progressive-enhancement flags** — any prose noting `EXPERIMENTAL`,
+  browser-conditional behavior, or JS-required state. Flag these in a comment above the
+  story export so engineers know the story is aspirational without JS.
+
+- **Also read** `accessibility+page.marko` for the same component — it surfaces ARIA
+  attribute requirements (e.g. `role="img"` + `aria-label` on badge) that belong in every
+  story's HTML, not just the accessibility story.
+
+**How docs findings override manifest-derived stories:**
+
+| Situation | Action |
+|---|---|
+| Docs has a named section the manifest didn't list | Add it as a new story |
+| Docs markup differs from what you'd infer from SCSS | Use the docs markup |
+| Docs shows a state combo the manifest doesn't (e.g. `aria-disabled` ≠ `disabled`) | Create separate stories for each |
+| Docs marks something EXPERIMENTAL | Include story, add `// EXPERIMENTAL` comment |
+| Docs references icon names or children structure | Use exactly those icon names in story HTML |
+
+**If the docs page does not exist:** Note it in the final summary and proceed using
+manifest + SCSS as the sole sources. Do not block generation.
+
+## Step 3 — Decide story file structure
+
+**Source priority for this decision:** prefer the docs page structure over the manifest. If the
+docs has clearly distinct named sections (e.g. primary, secondary, destructive, cascade), mirror
+that grouping in the story files.
+
+**Single file** — use when the component has ≤ 8 total stories (base + modifiers + states):
+```
+packages/skin/src/sass/<block>/stories/<block>.stories.js
+```
+
+**Split files** — use when the component has more than ~8 stories or has clearly distinct
+sub-groupings (e.g. button has Primary, Secondary, Destructive, Cascade each as separate files):
+```
+packages/skin/src/sass/<block>/stories/<block>/base.stories.js
+packages/skin/src/sass/<block>/stories/<block>/cascade.stories.js
+packages/skin/src/sass/<block>/stories/<block>/text-spacing.stories.js
+```
+
+RTL always goes either as a named export in the base/cascade file, or in its own
+`rtl.stories.js` for components with complex bidirectional layouts.
+
+## Step 3 — Write the story files
+
+### File format (CSF2 — always)
+
+```js
+export default { title: "Skin/<DisplayName>" };
+
+export const base = () => `
+<div class="<block>">
+    <!-- minimal semantic HTML demonstrating the component -->
+</div>
+`;
+```
+
+**Rules:**
+- Default export has `title` only — no `component`, `parameters`, `decorators`, or `argTypes`
+- Every named export is a **zero-argument arrow function returning an HTML string**
+- No `args`, no `argTypes`, no controls
+- Use template literals for multi-line HTML; single-line is fine for truly simple markup
+
+### Story naming
+
+| What to story | Export name | Title path |
+|---|---|---|
+| Base/default state | `base` or descriptive name | `"Skin/<DisplayName>"` |
+| A modifier | camelCase modifier name | same file |
+| A state (disabled, expanded) | camelCase state name | same file |
+| RTL layout | `RTL` | same file, or `"Skin/<DisplayName>/RTL"` |
+| Text spacing | `textSpacing` | same file, or `"Skin/<DisplayName>/Text Spacing"` |
+| Sub-group of variants | — | `"Skin/<DisplayName>/<SubGroup>"` |
+
+### Required stories (every component must have these)
+
+**1. Base story** — shows the component in its default/resting state with minimal markup:
+```js
+export const base = () => `
+<span class="badge">1</span>
+`;
+```
+
+**2. One story per BEM modifier** — use the modifier's name as the export name:
+```js
+export const dot = () => `
+<span class="badge badge--dot"></span>
+`;
+```
+
+**3. Disabled / state stories** — if the manifest has states like `disabled`, `expanded`:
+```js
+export const disabled = () => `
+<button class="btn btn--primary" disabled>Disabled</button>
+`;
+// Prefer HTML attribute selectors over BEM modifier classes for state:
+// [disabled], [aria-disabled], [aria-expanded], [aria-checked]
+```
+
+**4. RTL** — wrap the base markup in `<div dir="rtl">`. If the component has no
+directional layout (text only, symmetric shapes), still include it — it verifies
+nothing breaks under RTL:
+```js
+export const RTL = () => `
+<div dir="rtl">
+    <span class="badge">1</span>
+</div>
+`;
+```
+
+**5. textSpacing** — apply `demo-a11y-text-spacing` class directly on the root BEM element
+(not a wrapper). Pick the most representative variant (usually base):
+```js
+export const textSpacing = () => `
+<span class="badge demo-a11y-text-spacing">99+</span>
+`;
+```
+The `demo-a11y-text-spacing` class simulates WCAG 1.4.12 (Text Spacing) by forcing
+`line-height: 1.5`, `letter-spacing: 0.12em`, `word-spacing: 0.16em`. Verify the component
+doesn't break under these constraints.
+
+### HTML in stories — conventions
+
+- Use real, semantic HTML (not `<div>` soup) — stories double as accessibility references
+- Match the element type to `manifest.rootElement.default`
+- Include realistic content (real labels, realistic numbers) — not "Lorem ipsum" or "Component"
+- For compound components (accordion, tabs): show a full working example with all required
+  child elements, not just the wrapper
+- Use `[aria-expanded]`, `[disabled]`, `[aria-selected]` etc. to represent state — these
+  are the actual CSS hooks used in the SCSS, not modifier classes
+
+### Compound component example (accordion)
+
+```js
+export default { title: "Skin/Accordion" };
+
+export const singleExpanded = () => `
+<div class="accordion">
+    <div class="accordion__item" aria-expanded="true">
+        <button class="accordion__title" aria-expanded="true" aria-controls="acc-1-content">
+            Section one
+        </button>
+        <div class="accordion__content" id="acc-1-content">
+            <p>Content for section one.</p>
+        </div>
+    </div>
+    <div class="accordion__item">
+        <button class="accordion__title" aria-expanded="false" aria-controls="acc-2-content">
+            Section two
+        </button>
+        <div class="accordion__content" id="acc-2-content" hidden>
+            <p>Content for section two.</p>
+        </div>
+    </div>
+</div>
+`;
+
+export const allCollapsed = () => `
+<div class="accordion">
+    <div class="accordion__item">
+        <button class="accordion__title" aria-expanded="false" aria-controls="acc-3-content">
+            Section one
+        </button>
+        <div class="accordion__content" id="acc-3-content" hidden>
+            <p>Content for section one.</p>
+        </div>
+    </div>
+</div>
+`;
+
+export const disabled = () => `
+<div class="accordion">
+    <div class="accordion__item">
+        <button class="accordion__title" aria-expanded="false" aria-controls="acc-4-content" disabled>
+            Disabled section
+        </button>
+        <div class="accordion__content" id="acc-4-content" hidden>
+            <p>Content.</p>
+        </div>
+    </div>
+</div>
+`;
+
+export const RTL = () => `
+<div dir="rtl">
+    <div class="accordion">
+        <div class="accordion__item" aria-expanded="true">
+            <button class="accordion__title" aria-expanded="true" aria-controls="acc-rtl-content">
+                محتوى
+            </button>
+            <div class="accordion__content" id="acc-rtl-content">
+                <p>النص هنا</p>
+            </div>
+        </div>
+    </div>
+</div>
+`;
+
+export const textSpacing = () => `
+<div class="accordion demo-a11y-text-spacing">
+    <div class="accordion__item" aria-expanded="true">
+        <button class="accordion__title" aria-expanded="true" aria-controls="acc-ts-content">
+            Section one
+        </button>
+        <div class="accordion__content" id="acc-ts-content">
+            <p>Content for section one.</p>
+        </div>
+    </div>
+</div>
+`;
+```
+
+## Step 5 — Verify
+
+Stories are non-blocking (a missing story is a warning, not a build failure). Still:
+
+- Run `npm start` briefly to confirm stories appear in the skin storybook sidebar under `Skin/<DisplayName>`
+- Check that RTL and textSpacing stories render without visual breakage
+- If the storybook server is already running, refresh — Vite HMR will pick up new files
+
+If `npm start` is not feasible in this context, note it in the summary and move on.
+
+---
+
+## Output checklist
+
+- [ ] `packages/skin/src/sass/<block>/stories/<block>.stories.js` created (or split files)
+- [ ] `css+page.marko` read and its sections reflected in stories (or noted as absent)
+- [ ] Base story covers the default rendering
+- [ ] One story per named section / BEM modifier (docs take precedence over manifest)
+- [ ] State stories for disabled, expanded, selected etc. (using HTML attribute selectors)
+- [ ] ARIA attributes from docs/accessibility page present in story HTML
+- [ ] `RTL` story included
+- [ ] `textSpacing` story included with `demo-a11y-text-spacing` on root BEM element
+- [ ] EXPERIMENTAL stories flagged with a `// EXPERIMENTAL` comment
+- [ ] All story exports are zero-argument functions returning HTML strings (CSF2)
+- [ ] No args, argTypes, parameters, or decorators in default export
diff --git a/.claude/skills/evo-docs-hookup/SKILL.md b/.claude/skills/evo-docs-hookup/SKILL.md
new file mode 100644
index 0000000000..7e6f915935
--- /dev/null
+++ b/.claude/skills/evo-docs-hookup/SKILL.md
@@ -0,0 +1,257 @@
+---
+name: evo-docs-hookup
+description: >
+  Generates documentation site files for a new evo-web component in two modes.
+  css-only mode (Step 6): writes css+page.marko and css+meta.json immediately
+  after the static layer while the HTML is fresh in context. Full mode (Step 13):
+  writes +page.marko, +meta.json, and updates component-metadata.json after all
+  layers are complete. Use this whenever the user says "hook up the docs",
+  "wire up the docs site", "create the docs page", "add the component to the
+  docs", or when the evo-component orchestrator invokes Step 6 or Step 13.
+---
+
+# evo-docs-hookup
+
+You run in two modes within the pipeline, called at different points:
+
+- **css-only** (Step 6, after static storybook): writes the CSS tab docs while
+  static HTML is fresh in context
+- **full** (Step 13, after all layers): writes the Overview tab and updates the
+  component registry
+
+The orchestrator tells you which mode to run. Do not write files outside your
+declared mode's scope.
+
+---
+
+## Mode: css-only (Step 6)
+
+**Writes:** `css+page.marko` + `css+meta.json`
+**Does not write:** `+page.marko`, `+meta.json`, `component-metadata.json`
+
+### Step 1 — Read the manifest
+
+Extract: `bem.block`, `component.displayName`, `variants[]`, `states[]`
+
+### Step 1b — Check for existing css+page.marko
+
+Before writing anything, check whether `src/routes/_index/components/<block>/css+page.marko` already exists.
+
+**If the file does not exist:** proceed to Step 2 and write from scratch.
+
+**If the file already exists**, determine what is new by diffing the specs:
+
+```bash
+git show HEAD:src/routes/_index/components/<block>/<block>.spec.json
+```
+
+- **If the committed spec exists** (command returns content): parse its `states.type[]`
+  and `props.type.enum[]` arrays. Compare against the same fields in the current on-disk
+  spec. The delta — values present in the current spec but absent in the committed one —
+  are the variants new to this run. Add documentation sections only for those variants.
+
+- **If no committed spec exists** (new component or spec never committed): fall back to
+  extracting section IDs already present in `css+page.marko` (e.g. `id="badge-dot"`)
+  and adding sections for any variant in `manifest.variants[]` not yet represented.
+
+For each variant that needs to be added, locate its HTML — in this order:
+
+1. Step 4 context: look for a labelled block (`=== <VariantName> ===`) in the current conversation
+2. If not in context: read `packages/skin/src/sass/<block>/stories/<block>.stories.js`
+   and extract the HTML string from the matching story export
+
+Insert each new section (heading + demo + highlight-code block) immediately before the
+closing `</div>` of the root element. Do not touch existing sections.
+
+If nothing is new, print:
+
+```
+⏭  css+page.marko already up to date — no new variant sections needed.
+```
+
+and skip to css+meta.json (Step 3). Do not rewrite the file.
+
+**In all cases:** do not rewrite sections that already exist. The goal is additive.
+
+### Step 2 — Build css+page.marko
+
+The canonical HTML is in your context from `/evo-static-component` (Step 4).
+Use the labelled HTML blocks directly — do not re-derive from the manifest.
+
+```marko
+<div id="<block>">
+  <section-header/>
+
+  <h3 id="<block>-default">
+    Default
+  </h3>
+  <div class="demo">
+    <div class="demo__inner">
+      <!-- HTML from static component output, === Default === block -->
+    </div>
+  </div>
+  <highlight-code type="html">
+    <!-- same HTML repeated -->
+  </highlight-code>
+  <!-- one <h3> + demo + highlight-code per variant from static component output -->
+</div>
+export const metadata = {
+  component: "<block>",
+  "ds-component": {
+    name: "<block>",
+    version: 1,
+  },
+};
+```
+
+**Rules:**
+
+- `<section-header/>` always first — renders the `<h1>`
+- `export const metadata` block always at the bottom — required by Marko Router
+- Section IDs: `<block>-<variant-name>` (e.g. `badge-dot`, `accordion-expanded`)
+- Use HTML from Step 4 context exactly — it is the canonical source
+- Do NOT import `{urls}` unless actually linking to another component
+
+### Step 3 — Write css+meta.json
+
+```json
+{
+  "pageTitle": "<DisplayName> CSS Component",
+  "pageDescription": "A <DisplayName> CSS component is a <brief description>."
+}
+```
+
+---
+
+## Mode: full (Step 13)
+
+**Writes:** `+page.marko` + `+meta.json` + updates `component-metadata.json`
+**Does not rewrite:** `css+page.marko` or `css+meta.json` (already written in Step 6)
+
+### Step 1 — Write +page.marko (Overview tab)
+
+```marko
+<div id="<block>-overview">
+  <component-banner-img/>
+</div>
+```
+
+Add prose after `<component-banner-img/>` only when the manifest has:
+
+- `callerObligations[]` with a11y-critical category → add a brief accessibility note
+- Notable related components in `component.description` → add cross-links using `${urls.components}/<name>`
+
+### Step 2 — Write +meta.json
+
+```json
+{
+  "pageTitle": "<DisplayName> Component",
+  "pageDescription": "<component.description from manifest>. Available in Evo Web's CSS, React, and Marko implementations."
+}
+```
+
+### Step 3 — Update component-metadata.json
+
+Run the deterministic metadata script first — it writes the correct entry with byte-identical
+JSON rather than having the AI generate it:
+
+```bash
+npx tsx scripts/codegen/update-component-metadata.ts $COMPONENT
+```
+
+The script writes: component key, description, ds-component name/version, and null storybook
+paths. After the script runs, check if any storybook paths can be determined from session
+context and update them:
+
+- Skin: `/story/skin-<block>--<story-name>` (kebab-case story name)
+- Marko/React: `/docs/<category>-evo<displayname>--documentation`
+
+If the script errors, fall back to writing the JSON entry manually with the same field set.
+Surface any null storybook paths as 🟡 warnings in the output summary.
+
+Set to `null` if unknown — tabs simply won't appear until filled. Surface as 🟡 warning.
+
+Do NOT remove or modify existing entries.
+
+---
+
+## Output summary
+
+**css-only mode:**
+
+```
+CSS docs written:
+  ✅  src/routes/_index/components/<block>/css+page.marko
+  ✅  src/routes/_index/components/<block>/css+meta.json
+```
+
+**full mode:**
+
+```
+Docs wired:
+  ✅  src/routes/_index/components/<block>/+page.marko
+  ✅  src/routes/_index/components/<block>/+meta.json
+  ✅  src/data/component-metadata.json — entry added/updated
+  [✅ storybook paths set | 🟡 paths null — fill after deploy]
+```
+
+---
+
+## Completion record — mandatory final step
+
+After all output files are verified on disk, write the completion record.
+The step ID depends on which mode was declared at invocation.
+This is the signal the orchestrator reads to advance — do not skip this step.
+
+### css-only mode (Step 6)
+
+> **Before running:** Substitute the actual component name for `$COMPONENT` and the actual BEM block name for `<BLOCK>`.
+
+```bash
+node -e "
+const fs = require('fs');
+const comp = '$COMPONENT';
+const p = \`src/routes/_index/components/\${comp}/pipeline-state.json\`;
+const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+const block = '<BLOCK>';
+s.steps['6'] = {
+  status: 'complete',
+  completedAt: new Date().toISOString(),
+  outputs: [
+    \`src/routes/_index/components/\${block}/css+page.marko\`,
+    \`src/routes/_index/components/\${block}/css+meta.json\`,
+  ]
+};
+s.updatedAt = new Date().toISOString();
+fs.writeFileSync(p, JSON.stringify(s, null, 2));
+console.log('Step 6 completion record written.');
+"
+```
+
+### full mode (Step 13)
+
+> **Before running:** Substitute the actual component name for `$COMPONENT` and the actual BEM block name for `<BLOCK>`.
+
+```bash
+node -e "
+const fs = require('fs');
+const comp = '$COMPONENT';
+const p = \`src/routes/_index/components/\${comp}/pipeline-state.json\`;
+const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+const block = '<BLOCK>';
+s.steps['13'] = {
+  status: 'complete',
+  completedAt: new Date().toISOString(),
+  outputs: [
+    \`src/routes/_index/components/\${block}/+page.marko\`,
+    \`src/routes/_index/components/\${block}/+meta.json\`,
+    'src/data/component-metadata.json',
+  ]
+};
+s.updatedAt = new Date().toISOString();
+fs.writeFileSync(p, JSON.stringify(s, null, 2));
+console.log('Step 13 completion record written.');
+"
+```
+
+If any output file could not be written, set `status: "failed"` with an `error` field describing what failed instead of `status: "complete"`. Use the same step ID (`'6'` or `'13'`) as the mode that was invoked.
diff --git a/.claude/skills/evo-icon/SKILL.md b/.claude/skills/evo-icon/SKILL.md
new file mode 100644
index 0000000000..618016ff16
--- /dev/null
+++ b/.claude/skills/evo-icon/SKILL.md
@@ -0,0 +1,364 @@
+---
+name: evo-icon
+description: >
+  Icon pipeline for evo-web: add new icons, deprecate icons, or delete icons (major
+  version only). Manages the full chain from SVG source through skin sprite assembly,
+  evo-react component generation, evo-marko tag generation, and docs data.
+  Use this whenever the user says "add an icon", "deprecate an icon", "delete an icon",
+  "remove an icon", "new icon", or describes any icon asset work.
+  Also invoked by /evo-component when a major version icon deletion requires
+  framework layer removal.
+---
+
+# evo-icon
+
+You manage icons across three layers: the SVG source in skin, auto-generated React
+components in evo-react, and auto-generated Marko tags in evo-marko. The React and
+Marko layers are entirely script-generated — you never edit those files manually.
+
+## Step 1 — Parse the action
+
+`$ARGUMENTS` format: `<action> <icon-name>` — e.g. `add add-24` or `deprecate cart-16`
+
+| Action      | Meaning                                                   |
+| ----------- | --------------------------------------------------------- |
+| `add`       | Add a new SVG and regenerate all layers                   |
+| `edit`      | Replace an existing SVG and regenerate                    |
+| `deprecate` | Mark as deprecated in docs; keep in sprite and components |
+| `delete`    | Remove permanently (major version only)                   |
+
+If the issue says "rename", "replaced by", or "renamed to", treat this as **deprecate**
+(not delete). The old icon is deprecated; the new name either already exists or is a
+separate add action.
+
+If `$ARGUMENTS` is empty or ambiguous, ask:
+
+> "Which icon action? (add / edit / deprecate / delete) and what is the icon name?"
+
+---
+
+## Add or Edit
+
+### Step 2a — Validate and place the SVG
+
+**Naming convention** — strict, enforced by the build:
+
+```
+icon-{name}-{size}.svg           (monochrome)
+icon-{name}-{size}-colored.svg   (multi-color)
+```
+
+Valid sizes: `12`, `16`, `18`, `20`, `24`, `30`, `32`, `40`, `48`, `64`
+
+Examples: `icon-add-24.svg`, `icon-afterpay-32-colored.svg`
+
+**SVG requirements:**
+
+- Must have a `viewBox` attribute
+- Must NOT have `width` or `height` attributes (the build strips them, but omitting is cleaner)
+- Inner content should be optimized SVG paths — no `<title>`, no `id` on child elements
+- `fill` and `stroke` should use `currentColor` where possible so the CSS color cascade works
+
+Place the SVG at:
+
+```
+packages/skin/src/svg/icon/<icon-name>.svg
+```
+
+If this is an **edit** (replacing an existing icon), confirm the file exists before overwriting.
+
+### Step 3a — Run the pipeline
+
+Run these commands in order:
+
+```bash
+# 1. Rebuild skin sprite + update icons.json
+cd packages/skin && npm run build:icons
+
+# 2. Full skin build — compiles SCSS and copies to dist/ (required before legacy scripts,
+#    which read from @ebay/skin/dist/svg/icons.svg not the source)
+cd packages/skin && npm run build
+
+# 3. Regenerate new React icon components (wipes + rewrites the entire icons/ dir)
+cd packages/evo-react && npm run update-icons
+
+# 4. Regenerate new Marko icon tags (wipes + rewrites all evo-icon-*.marko files)
+cd packages/evo-marko && npm run importSVG
+
+# 5. Regenerate legacy React icon components (reads from skin dist/, same wipe+rewrite)
+cd packages/ebayui-core-react && npm run update-icons
+
+# 6. Regenerate legacy Marko 5 icon tags (reads from skin dist/)
+cd packages/ebayui-core && npm run importSVG
+```
+
+**Important:** Steps 3–6 wipe and regenerate the entire icon component directory for each
+package. Do not manually create or edit files in:
+
+- `packages/evo-react/src/evo-icon/icons/`
+- `packages/evo-marko/src/tags/evo-icon/tags/`
+- `packages/ebayui-core-react/src/ebay-icon/icons/`
+- `packages/ebayui-core/src/components/ebay-icon/icons/`
+
+### Step 4a — Verify
+
+After the pipeline completes:
+
+1. **Sprite**: confirm `packages/skin/src/svg/icons.svg` contains a `<symbol id="<icon-name>">` entry
+2. **Icons data**: confirm `src/data/icons.json` → `icons.list` contains the new icon
+3. **New React component**: confirm `packages/evo-react/src/evo-icon/icons/evo-icon-<name>.tsx` exists
+4. **New Marko tag**: confirm `packages/evo-marko/src/tags/evo-icon/tags/evo-icon-<name>.marko` exists
+5. **Legacy React component**: confirm `packages/ebayui-core-react/src/ebay-icon/icons/ebay-icon-<name>.tsx` exists
+6. **Legacy Marko tag**: confirm `packages/ebayui-core/src/components/ebay-icon/icons/ebay-<name>-icon/` directory exists with `symbol.ts` and `index.marko`
+7. **CSS class**: the icon renders via `<svg class="icon icon--{size}">` — no per-icon CSS class needed
+8. **Colored icons**: if the SVG is a `-colored` variant, verify it uses `icon--{size}-colored` class (`width: fit-content`)
+
+### Step 5a — Usage reference
+
+Generated components are consumed as:
+
+**React:**
+
+```tsx
+import { EvoIconAdd24 } from "@evo-web/react/evo-icon-add-24";
+// Component name: EvoIcon + PascalCase name (e.g. EvoIconAdd24, EvoIconAfterPay32Colored)
+```
+
+**Marko:**
+
+```marko
+<evo-icon-add-24/>
+// Tag name: evo-icon-{name} (matches the filename exactly)
+```
+
+**Skin (HTML):**
+
+```html
+<svg class="icon icon--24" focusable="false">
+  <use href="#icon-add-24" />
+</svg>
+```
+
+---
+
+## Deprecate
+
+Deprecation hides an icon from the main docs grid and shows it in a "Deprecated Icons"
+warning section. The icon remains in the sprite and in all generated framework components
+until a future major-version deletion.
+
+**Do NOT manually add `@deprecated` JSDoc to any auto-generated icon file.** The four
+generated packages (`evo-react`, `evo-marko`, `ebayui-core-react`, `ebayui-core`) wipe
+and rewrite their icon directories on every pipeline run — any manual annotation will be
+silently deleted the next time any icon job runs. Deprecation is data-driven via
+`icons.json`; that is the only file you edit for the deprecation step.
+
+**Rename scenario:** if an issue says an icon was renamed or replaced, this is a two-part
+operation — **add the new icon first** (using the full Add pipeline in Steps 2a–3a above),
+then deprecate the old name using this Deprecate workflow. Do not skip the Add pipeline.
+The Add pipeline (build:icons + update-icons + importSVG) is required to generate the
+React and Marko components for the new icon name and to add it to the sprite.
+
+### Step 2b — Update icons.json
+
+Edit `src/data/icons.json`. Two fields must be updated:
+
+**1. Add to `icons.deprecated`** (create the array if it is `null`):
+
+The entry must be an **object** matching the same shape as entries in `icons.list` — all
+values are **strings**, including `size`, `height`, and `width`. Copy the exact values
+from the entry you are about to remove from `icons.list`:
+
+```json
+"deprecated": [
+  { "name": "cart-old-16", "size": "16", "height": "16", "width": "16" }
+]
+```
+
+This entry is used by the docs page to render the "Deprecated Icons" section with the
+correct icon dimensions. If you put strings instead of objects, or numbers instead of
+string values, the docs section will render blank.
+
+**2. Add to `icons.skipDocs`**:
+
+The value is the icon's **full name without the `icon-` prefix** — this includes the size
+suffix. It matches the `name` field in `icons.list` exactly:
+
+```json
+"skipDocs": ["cart-old-16"]
+```
+
+`skipDocs` is what the build script actually uses to exclude the icon from `icons.list`.
+The `deprecated` array check in `generate-images.ts` is unreliable for objects — always
+use `skipDocs` to control list exclusion.
+
+**Do NOT manually edit `icons.list`.** That field is fully auto-generated by
+`build:icons` and any manual changes will be overwritten on the next run.
+
+### Step 3b — Rebuild sprite
+
+```bash
+cd packages/skin && npm run build:icons
+```
+
+This re-reads `src/data/icons.json`, filters out `skipDocs` entries, and rebuilds
+`icons.list`. The deprecated icon stays in `icons.svg` (the sprite) for backwards
+compatibility — that is correct and intentional.
+
+**Do NOT run `update-icons` or `importSVG`** for the deprecation step itself — the
+deprecated icon must remain in the framework components. Removing it from generated code
+is a breaking change reserved for the delete workflow.
+
+If this is a rename (add + deprecate), you will have already run `update-icons` and
+`importSVG` in the Add step. Do not run them again here — the framework components from
+the Add step are already correct.
+
+### Step 4b — Verify
+
+- `src/data/icons.json` → `icons.deprecated` contains the full object entry with string values
+- `src/data/icons.json` → `icons.skipDocs` contains the icon name
+- `src/data/icons.json` → `icons.list` does NOT contain the icon (auto-removed by build script)
+- `packages/skin/src/svg/icons.svg` DOES still contain `<symbol id="icon-<name>">` (correct — kept for compat)
+- The docs page deprecated section will show the icon at runtime (reads from `icons.json`)
+
+### Step 5b — Changeset
+
+Create a changeset at `.changeset/<description>.md`. Use **minor** level — deprecation
+is a consumer-visible API surface change signalling future removal.
+
+For a pure deprecation (no new icon added), only skin needs a bump:
+
+```markdown
+---
+"@ebay/skin": minor
+---
+
+Deprecate `<icon-name>` icon; use `<replacement-name>` instead.
+```
+
+For a rename (add + deprecate), all five packages are affected:
+
+```markdown
+---
+"@ebay/skin": minor
+"@evo-web/react": minor
+"@evo-web/marko": minor
+"@ebay/ebayui-core": minor
+"@ebay/ui-core-react": minor
+---
+
+Add `<new-name>` icon; deprecate `<old-name>` (use `<new-name>` instead).
+```
+
+If there is no known replacement, omit the "use X instead" clause.
+
+---
+
+## Delete (major version only)
+
+**This is a breaking change.** Consumers using the icon will get a build error. Only do
+this as part of a planned major version release.
+
+### Step 2c — Confirm major version context
+
+Before proceeding, confirm with the engineer:
+
+> "Deleting an icon is a breaking change that requires a major version bump.
+> Is this part of a planned major release?"
+
+Do not proceed until confirmed.
+
+### Step 3c — Remove the SVG
+
+Delete the file:
+
+```
+packages/skin/src/svg/icon/<icon-name>.svg
+```
+
+### Step 4c — Clean up icons.json
+
+Edit `src/data/icons.json`:
+
+- Remove the entry from `icons.deprecated` (if present)
+- Remove the name from `icons.skipDocs` (if present)
+- Remove the name from `icons.skip` (if present — some internal icons live here)
+
+### Step 5c — Run the full pipeline
+
+```bash
+# 1. Rebuild sprite (removed SVG will be absent from icons.svg)
+cd packages/skin && npm run build:icons
+
+# 2. Full skin build (updates dist/ which legacy packages read)
+cd packages/skin && npm run build
+
+# 3. Regenerate new React components (deleted icon's .tsx will not be recreated)
+cd packages/evo-react && npm run update-icons
+
+# 4. Regenerate new Marko tags (deleted icon's .marko will not be recreated)
+cd packages/evo-marko && npm run importSVG
+
+# 5. Regenerate legacy React components (deleted icon's .tsx will not be recreated)
+cd packages/ebayui-core-react && npm run update-icons
+
+# 6. Regenerate legacy Marko 5 tags (deleted icon's directory will not be recreated)
+cd packages/ebayui-core && npm run importSVG
+```
+
+### Step 6c — Verify removal
+
+1. `packages/skin/src/svg/icons.svg` does NOT contain a `<symbol id="<icon-name>">` entry
+2. `src/data/icons.json` does NOT contain the icon anywhere
+3. `packages/evo-react/src/evo-icon/icons/evo-icon-<name>.tsx` does NOT exist
+4. `packages/evo-marko/src/tags/evo-icon/tags/evo-icon-<name>.marko` does NOT exist
+5. `packages/ebayui-core-react/src/ebay-icon/icons/ebay-icon-<name>.tsx` does NOT exist
+6. `packages/ebayui-core/src/components/ebay-icon/icons/ebay-<name>-icon/` does NOT exist
+7. Run `npm run build` from the repo root — the build must pass
+
+### Step 7c — Migration note
+
+Surface a migration note for the engineer to include in the changeset:
+
+```
+BREAKING: icon-{name} has been removed.
+Consumers using EvoIcon{Name} (React) or <evo-icon-{name}/> (Marko) or
+EbayIcon{Name} (legacy React) or <ebay-{name}-icon/> (legacy Marko) or
+<use href="#icon-{name}"/> (HTML) must update to an alternative icon.
+```
+
+---
+
+## Key system facts
+
+- **Four packages generate icon components from the skin sprite.** All four are 100%
+  auto-generated — never edit their icon files manually:
+  - `@evo-web/react` (`evo-react`) — `npm run update-icons` → reads `packages/skin/src/svg/icons.svg`
+  - `@evo-web/marko` (`evo-marko`) — `npm run importSVG` → reads `packages/skin/src/svg/icons.svg`
+  - `@ebay/ui-core-react` (`ebayui-core-react`) — `npm run update-icons` → reads `@ebay/skin/dist/svg/icons.svg`
+  - `@ebay/ebayui-core` (`ebayui-core`) — `npm run importSVG` → reads `@ebay/skin/dist/svg/icons.svg`
+
+  The legacy packages (`ebayui-core-react`, `ebayui-core`) read from the compiled `dist/`
+  output, so `packages/skin && npm run build` must run before their scripts.
+
+- **One SVG → one sprite symbol → four sets of components (two new, two legacy).**
+  The name `icon-add-24.svg` produces `<symbol id="icon-add-24">`, `EvoIconAdd24`,
+  `<evo-icon-add-24/>`, `EbayIconAdd24`, and `<ebay-add-24-icon/>`.
+
+- **No per-icon CSS.** Icons render using the shared `svg.icon` block and size modifiers
+  (`icon--24`, `icon--32-colored`). Color inherits from `currentColor`.
+
+- **Colored icons** use `width: fit-content` (aspect-ratio-variable). The CSS class suffix
+  is `-colored` (e.g. `icon--32-colored`).
+
+- **`skipDocs`** hides an icon from the public docs grid but keeps it in the sprite and
+  framework components. The value is the full icon name without the `icon-` prefix
+  (e.g. `"bank-group-logo-24-colored"`, NOT `"bank-group-logo"`).
+
+- **`deprecated`** controls the "Deprecated Icons" docs section. Must be an array of
+  objects matching `icons.list` shape — all string values.
+
+- **`skip`** prevents the SVG from entering the sprite at all (star-rating, flags, etc.
+  have separate pipelines).
+
+- **`icons.list` is fully auto-generated** by `build:icons`. Never edit it by hand.
diff --git a/.claude/skills/evo-marko-component/SKILL.md b/.claude/skills/evo-marko-component/SKILL.md
new file mode 100644
index 0000000000..c66f924e98
--- /dev/null
+++ b/.claude/skills/evo-marko-component/SKILL.md
@@ -0,0 +1,414 @@
+---
+name: evo-marko-component
+description: >
+  Generates the Marko 6 structural layer for a new evo-web component from an
+  approved manifest.json. Produces index.marko (Marko 6 template), style.ts
+  (skin CSS import), test/test.server.ts (SSR snapshot scaffold), and
+  test/test.browser.ts (browser interaction scaffold, only for interactive
+  components). Called inline by /evo-component as Step 4. Use this skill
+  whenever the user says "generate the Marko layer", "create the Marko files
+  from the manifest", "generate the evo-marko component", or when /evo-component
+  delegates Step 4 to this skill. Do NOT confuse with /evo-migrate-marko which
+  ports existing Marko 5 components — this skill generates new components from scratch.
+---
+
+# Marko 6 Generation from manifest.json
+
+This skill translates a locked `manifest.json` into production-ready Marko 6
+source files. All design decisions were made by the engineer during manifest
+review. Your job is accurate translation, not interpretation.
+
+**Output location:** `packages/evo-marko/src/tags/[component.name]/`
+
+**Output files:**
+
+- `index.marko` — Marko 6 single-file component (types + logic + template)
+- `style.ts` — skin CSS import
+- `test/test.server.ts` — SSR snapshot tests via vitest
+- `test/test.browser.ts` — browser interaction tests (only if the manifest has
+  events or keyboard behaviors)
+- `util.ts` — standalone helper functions (only if behaviors require non-trivial
+  logic that would clutter the template)
+
+There is **no** `component.ts` and **no** `browser.json` in evo-marko — those
+are Marko 5 patterns. Everything lives in `index.marko`.
+
+---
+
+## Step 1 — Check for scaffold files, then read the manifest
+
+**Check for scaffold files first.** If the orchestrator ran `generate-component-scaffold.ts`
+(Step 6.5), scaffold files already exist at the target paths. If they exist, read them
+before proceeding — do not regenerate the deterministic parts they contain.
+
+```
+packages/evo-marko/src/tags/<name>/style.ts          — if present, it's complete (skip generation)
+packages/evo-marko/src/tags/<name>/index.marko        — if present, read and complete the TODO sections only
+packages/evo-marko/src/tags/<name>/test/test.server.ts — if present, it's complete (skip generation)
+packages/evo-marko/src/tags/<name>/test/test.browser.ts — if present, add interaction test content only
+```
+
+When scaffold files exist, your job for those files is **completion, not generation**:
+read the existing file, find the `// TODO:` sections, and fill them in. The Input interface,
+BEM modifier names, ARIA attribute names, and test structure are already correct — do not
+re-derive or overwrite them.
+
+Read `src/routes/_index/components/[component-name]/manifest.json` in full. Note:
+
+- `component.name` — kebab-case name (e.g. `evo-avatar`)
+- `rootElement.default` — which HTML element to extend in the `Input` interface
+- `rootElement.excludedAttributes` — which attributes to `Omit<>` from the spread
+- `props` + `a11yProps` — Input interface prop definitions
+- `slots` — named slots → `Marko.AttrTag<>` types
+- `bem` — block/elements/modifiers → class array
+- `a11y` — role, label strategy, aria attributes
+- `behaviors` — custom logic (determines whether to create `util.ts`)
+- `gaps` — medium-confidence fields become `// TODO: verify` inline comments
+
+---
+
+## Step 2 — Generate `index.marko`
+
+Build the file in this order:
+
+### Imports
+
+Import utilities only if behaviors require them:
+
+```marko
+import { helperFunction } from "./util";
+```
+
+Import evo-icon tags via their tag name — Marko resolves them automatically.
+No explicit import needed for `<evo-icon-*>` tags.
+
+### Static types
+
+Define compile-time constants and type guards with `static`:
+
+```marko
+static type Size = 32 | 40 | 48 | 56 | 64 | 96 | 128;
+static export const validSizes = ["large", "small"] as const;
+```
+
+### Input interface
+
+Translate manifest props into the TypeScript `Input` interface:
+
+```marko
+export interface Input extends Omit<Marko.HTML.Div, "role" | "aria-label"> {
+  // from manifest.props[]
+  size?: Size | `${Size}`;
+  color?: string;
+  // from manifest.a11yProps[]
+  a11yText: string | null;
+  // from manifest.slots[] where type === "named-attrtag"
+  image?: Marko.AttrTag<Omit<Marko.HTML.Img, "alt">>;
+  // default slot is via input.content — no type declaration needed
+}
+```
+
+**Prop type mapping:**
+
+| manifest `type`    | TypeScript type                             |
+| ------------------ | ------------------------------------------- |
+| `"string"`         | `string`                                    |
+| `"number"`         | `number`                                    |
+| `"boolean"`        | `boolean`                                   |
+| `"enum"` + values  | union of string literals                    |
+| `"string \| null"` | `string \| null`                            |
+| `"function"`       | `(event: Event) => void` or appropriate sig |
+
+**Omit rules:** Only `Omit<>` attributes that the component hardcodes and must
+not accept from consumers. Read `manifest.rootElement.excludedAttributes` for
+the exact list.
+
+**Slot mapping:**
+
+| manifest slot `type` | Input type                                   |
+| -------------------- | -------------------------------------------- |
+| `"named-attrtag"`    | `Marko.AttrTag<Marko.HTML.Img>` etc          |
+| `"default"`          | No declaration — accessed as `input.content` |
+
+**AttrTag generic — critical:** The generic parameter controls what the slot's tag accepts.
+An empty generic `Marko.AttrTag<{}>` rejects child content at compile time (TS2353).
+
+| Slot purpose | Correct type |
+| --- | --- |
+| Arbitrary child HTML (links, buttons, text) | `Marko.AttrTag<{ content?: Marko.Body }>` |
+| Specific HTML element with known props | `Marko.AttrTag<Omit<Marko.HTML.Img, "alt">>` |
+| AttrTag with both props and body | `Marko.AttrTag<{ src: string; content?: Marko.Body }>` |
+
+**❌ Never:** `Marko.AttrTag<{}>` — always fails when the consumer puts children inside `<@slotName>`.
+
+### Template body
+
+**Destructure at the top, then compute:**
+
+```marko
+<const/{
+  class: inputClass,
+  size,
+  color,
+  image,
+  content,
+  a11yText = "default label",
+  ...htmlInput
+}=input>
+```
+
+Declare tag variables close to where they are first used (not all grouped at
+the top), except variables needed in multiple distant locations.
+
+**Root element with BEM and ARIA:**
+
+```marko
+<div
+    ...htmlInput
+    role="img"
+    aria-label=(a11yText !== null ? a11yText : undefined)
+    aria-hidden=(a11yText === null ? "true" : undefined)
+    class=[
+        "avatar",
+        size && `avatar--${size}`,
+        inputClass,
+    ]>
+```
+
+**Translate `manifest.bem`:**
+
+- Block: `manifest.bem.block` — always applied
+- Elements: `manifest.bem.elements[]` — applied to child elements
+- Modifiers: `manifest.bem.modifiers[]` — conditional expressions in the class array
+
+**Translate `manifest.a11y.ariaAttributes[]`:**
+Map each entry: if `condition === "always"` it's unconditional; otherwise it's
+a conditional expression. The `manifest.a11y.labelStrategy` tells you how the
+label is applied:
+
+- `"aria-label-prop"` → `aria-label=a11yText`
+- `"aria-labelledby"` → `<id/labelId>` on the label element, then `aria-labelledby=labelId`
+
+**Rendering slots:**
+
+```marko
+// named slot: <@image src="..."> → rendered as:
+<if=image>
+  <img ...image alt="">
+</if>
+// default slot: content between component tags → rendered as:
+<${content}/>
+```
+
+**State and two-way binding:**
+
+Mutable state uses `<let/>`. If the manifest has a prop that consumers can
+control externally (e.g., `open`), use two-way binding syntax:
+
+```marko
+<let/open:=input.open>
+```
+
+The `:=` creates a controllable prop — consumers can pass `open` and
+`openChange` to control it, or leave it uncontrolled.
+
+**Behaviors from `manifest.behaviors[]`:**
+
+If a behavior is a deterministic pure function (e.g., `getColorForText`), put
+it in `util.ts` and import it. If it's event-driven inline logic, write it
+directly as an inline handler:
+
+```marko
+onLoad(_, el) {
+  aspectRatio = el.naturalWidth / el.naturalHeight;
+}
+```
+
+**ID generation:** Use `<id/>` for any element that needs a stable generated ID:
+
+```marko
+<id/headerId=input.id>
+<h2 id=headerId .../>
+```
+
+**Medium-confidence gaps** (from `manifest.gaps` where `confidence === "medium"`):
+Add a `// TODO: verify — [gap note]` comment next to the affected field.
+
+---
+
+## Step 3 — Generate `style.ts`
+
+Always:
+
+```ts
+import "@ebay/skin/[manifest.bem.block]";
+```
+
+If the skin module name differs from the BEM block, check
+`packages/skin/src/sass/` for the correct directory name.
+
+---
+
+## Step 4 — Generate `test/test.server.ts`
+
+Scaffold SSR snapshot tests for each entry in `manifest.variants` and key
+states from `manifest.states`. The tests import stories — write the story names
+as they will exist (Default, plus one per variant).
+
+```ts
+import { describe, it } from "vitest";
+import { composeStories } from "@storybook/marko";
+import { snapshotHTML } from "../../../common/test-utils/snapshots";
+import * as stories from "../[name].stories";
+
+const { Default, WithImage } = composeStories(stories);
+
+describe("[component-name]", () => {
+  it("renders defaults", async () => {
+    await snapshotHTML(Default);
+  });
+  it("renders with image", async () => {
+    await snapshotHTML(WithImage);
+  });
+});
+```
+
+---
+
+## Step 5 — Generate `test/test.browser.ts` (conditional)
+
+Only generate this file if `manifest.behaviors[]` contains event-driven
+interactions, or if `manifest.keyboardModel` is present.
+
+Use `@marko/testing-library` + vitest:
+
+```ts
+import { describe, it, expect, afterEach } from "vitest";
+import { render, fireEvent, cleanup } from "@marko/testing-library";
+import { composeStories } from "@storybook/marko";
+import * as stories from "../[name].stories";
+
+const { Default } = composeStories(stories);
+
+afterEach(cleanup);
+
+describe("[component-name]", () => {
+  it("should render correctly", async () => {
+    const { container } = await render(Default);
+    expect(container.querySelector(".[bem-block]")).toBeTruthy();
+  });
+
+  // One describe("when...") + it("then...") block per behavior/keyboard interaction
+});
+```
+
+---
+
+## Critical Marko 6 syntax rules
+
+**Tag variables — NOT scriptlets:**
+
+```marko
+// ✅ Marko 6
+<const/{ class: inputClass, size, ...htmlInput }=input>
+<let/aspectRatio=knownAspectRatio>
+// ❌ Marko 5 — never use
+$ const { class: inputClass } = input;
+$ let aspectRatio = knownAspectRatio;
+```
+
+**Conditionals:**
+
+```marko
+// ✅ Marko 6
+<if=condition>  <else-if=other>  <else>
+
+// ❌ Marko 5
+<if(condition)>  <else-if(other)>
+```
+
+**Events — inline, not string refs:**
+
+```marko
+// ✅ Marko 6
+<button onClick(e) { input.onEscape?.(e); }>
+
+// ❌ Marko 5
+<button onClick("handleClick")>
+```
+
+**Attribute containing `>` — wrap in parens:**
+
+```marko
+// ✅ Required
+<const/x=(a > b ? 1 : 0)>
+// ❌ Parser error
+<const/x=a>
+-- ${" "}b ? 1 : 0>
+```
+
+**Slots — `content` not `renderBody`:**
+
+```marko
+// ✅ Marko 6
+<${content}/>
+// ❌ Marko 5
+<${input.renderBody}/>
+```
+
+**No `component.ts`, no `browser.json`:** These do not exist in evo-marko.
+
+---
+
+## Output verification
+
+After generating, confirm:
+
+- `index.marko` exports an `Input` interface
+- All manifest props and a11yProps are in the interface with correct types/optionality
+- All named slots appear as `Marko.AttrTag<>` types
+- BEM block class always applied to root element; modifiers conditional
+- All `manifest.a11y.ariaAttributes[]` entries are present
+- No `$ var`, `$ let`, `$ const` scriptlets; no `this.emit()`; no `renderBody`
+- `style.ts` imports the correct skin module
+- Tests reference story names that match `manifest.variants[]`
+
+Report generated file paths to the orchestrator.
+
+---
+
+## Completion record — mandatory final step
+
+After output verification passes, write the completion record.
+This is the signal the orchestrator reads to advance — do not skip this step.
+
+> **Before running:** Substitute the actual component name for `$COMPONENT` and the full Marko tag name (e.g. `evo-accordion`) for `<NAME>`.
+
+```bash
+node -e "
+const fs = require('fs');
+const comp = '$COMPONENT';
+const p = \`src/routes/_index/components/\${comp}/pipeline-state.json\`;
+const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+const name = '<NAME>';
+const outputs = [
+  \`packages/evo-marko/src/tags/\${name}/index.marko\`,
+  \`packages/evo-marko/src/tags/\${name}/style.ts\`,
+  \`packages/evo-marko/src/tags/\${name}/test/test.server.ts\`,
+];
+if (fs.existsSync(\`packages/evo-marko/src/tags/\${name}/test/test.browser.ts\`)) {
+  outputs.push(\`packages/evo-marko/src/tags/\${name}/test/test.browser.ts\`);
+}
+s.steps['8'] = {
+  status: 'complete',
+  completedAt: new Date().toISOString(),
+  outputs
+};
+s.updatedAt = new Date().toISOString();
+fs.writeFileSync(p, JSON.stringify(s, null, 2));
+console.log('Step 8 completion record written.');
+"
+```
+
+If any output verification check failed (missing prop, Marko 5 pattern found, etc.),
+write `status: "failed"` with the failing check as the `error` field instead.
diff --git a/.claude/skills/evo-marko-storybook/SKILL.md b/.claude/skills/evo-marko-storybook/SKILL.md
new file mode 100644
index 0000000000..77e58e4a1e
--- /dev/null
+++ b/.claude/skills/evo-marko-storybook/SKILL.md
@@ -0,0 +1,352 @@
+---
+name: evo-marko-storybook
+description: >
+  Generate Marko Storybook story files for a new evo-web component in the evo-marko package.
+  Reads manifest.json for props/slots/argTypes, writes a .stories.ts file and example .marko
+  templates under packages/evo-marko/src/tags/<name>/.
+  Use this whenever the user says "generate Marko stories", "create Marko storybook", "scaffold
+  the Marko stories", or when the evo-component orchestrator invokes Step 8.
+---
+
+# evo-marko-storybook
+
+You are scaffolding the Marko Storybook for a new evo-marko component. Every story is backed
+by a standalone `.marko` example template — the story file just wires them to Storybook.
+
+## Step 1 — Read the manifest
+
+Read `src/routes/_index/components/$COMPONENT/manifest.json`. Extract:
+
+- `component.name` — the tag name (e.g. `evo-accordion`); strip `evo-` for the directory name
+- `component.displayName` — human name for the Storybook title (e.g. `Accordion`)
+- `component.category` — maps to the Storybook title prefix (see categories below)
+- `props[]` — each prop's name, type, values (enum), default, required, description
+- `a11yProps[]` — required i18n text strings; always `required: true` in argTypes
+- `slots[]` — named content regions; drives example template structure
+- `variants[]` — named rendering modes that need separate example templates
+- `states[]` — interactive states that need separate examples (expanded, open, checked)
+- `stateLiftingCallbacks[]` — controllable props (need `controllable: true` in argTypes)
+
+Also read `packages/evo-marko/src/tags/<name>/index.marko` to confirm the exact `Input`
+interface — the manifest is authoritative, but seeing the generated types catches any
+discrepancy before writing stories.
+
+## Step 2 — Check the docs page
+
+Check for `src/routes/_index/components/<block>/marko+page.marko`.
+
+If it exists, read it. The Marko docs pages mostly link to external storybooks — they
+rarely contain markup examples. But scan for: any prose describing specific variants or
+behaviors that aren't in the manifest, and any evo-marko-specific usage notes.
+
+The `css+page.marko` (from the CSS storybook step) is more signal-rich for story content.
+If you have access to those findings from a prior step in this session, apply them here to
+determine which variants need dedicated example templates.
+
+## Step 3 — Determine Storybook title category
+
+Map `component.category` to the correct Storybook title prefix:
+
+| manifest category  | Storybook prefix          |
+| ------------------ | ------------------------- |
+| `buttons`          | `Buttons`                 |
+| `form`             | `Form`                    |
+| `graphics & icons` | `Graphics & Icons`        |
+| `layout`           | `Layout`                  |
+| `dialogs`          | `Dialogs`                 |
+| `navigation`       | `Navigation & Disclosure` |
+| `notices`          | `Notices & Tips`          |
+| `progress`         | `Progress`                |
+| `building blocks`  | `Building Blocks`         |
+| `media`            | `Media`                   |
+
+Title format: `"<Prefix>/<DisplayName>"` — e.g. `"Buttons/Accordion"` or `"Form/Textbox"`.
+
+## Step 4 — Plan example templates
+
+Each story variant needs a standalone `.marko` file in `examples/`. Decide what to create:
+
+**Always create:** `examples/default.marko` — the base rendering with all required props and
+a realistic content example.
+
+**Create one template per variant when:**
+
+- The manifest has `variants[]` with distinct rendering modes
+- A state (expanded, checked, open) changes the component's structure significantly
+- A slot combination is meaningfully different (e.g. with icon, without icon)
+- The component has an interactive behavior that requires a wrapper with `<let>` state
+
+**Keep to the minimum that demonstrates the full API.** Three to five templates is typical.
+More than eight is a sign to reconsider — engineers can explore variants through controls.
+
+## Step 5 — Write the example templates
+
+Each file in `examples/` is a standalone Marko 6 template. Rules:
+
+**Spread `...input` onto the component root** — this makes all argTypes controllable:
+
+```marko
+<evo-badge ...input/>
+```
+
+**For components with slots**, include realistic hardcoded slot content:
+
+```marko
+<evo-accordion ...input>
+  <@item>
+    <@title>Section one</@title>
+    <@content>
+      <p>Content for section one.</p>
+    </@content>
+  </@item>
+  <@item>
+    <@title>Section two</@title>
+    <@content>
+      <p>Content for section two.</p>
+    </@content>
+  </@item>
+</evo-accordion>
+```
+
+**For controllable/interactive state** (open, expanded, checked), use `<let>` with `:=` binding:
+
+```marko
+<let/open:=input.open>
+
+<evo-button onClick() {
+  open = true;
+}>
+  Open
+</evo-button>
+
+<evo-dialog ...input open:=open>
+  <@header>Dialog Title</@header>
+  <@close a11yText="Close"/>
+  <p>Dialog content.</p>
+</evo-dialog>
+```
+
+Use `:=` for two-way binding on props that the parent controls; use a plain `<let>` local
+variable only when the component manages its own state internally.
+
+**Do not import CSS** — skin CSS is loaded globally by the storybook preview.
+
+**Use realistic content** — real label text, real numbers, not `"string"` or `"content"`.
+
+## Step 6 — Write the stories file
+
+Create `packages/evo-marko/src/tags/<name>/<name>.stories.ts`:
+
+```ts
+import type { Meta, StoryObj } from "@storybook/marko";
+import type { Input } from "./index.marko";
+import { buildExtensionTemplate } from "../../common/storybook/utils.ts";
+
+import DefaultTemplate from "./examples/default.marko";
+import DefaultTemplateCode from "./examples/default.marko?raw";
+// one pair per additional template:
+// import ExpandedTemplate from "./examples/expanded.marko";
+// import ExpandedTemplateCode from "./examples/expanded.marko?raw";
+
+const meta = {
+  title: "<Category>/<DisplayName>",
+  component: (await import("./index.marko")).default,
+  parameters: {
+    docs: {
+      description: {
+        component: "<one-sentence description from manifest>",
+      },
+    },
+  },
+  argTypes: {
+    // — one entry per prop, a11yProp, and slot —
+  },
+} satisfies Meta<Input>;
+
+export default meta;
+
+export const Default = buildExtensionTemplate(
+  DefaultTemplate,
+  DefaultTemplateCode,
+  {
+    // default arg values — mirror manifest prop defaults
+  },
+);
+```
+
+### argTypes reference
+
+**String prop:**
+
+```ts
+myProp: {
+  type: "string",
+  description: "Description from manifest.",
+  control: "text",
+  table: { defaultValue: { summary: "null" } },
+},
+```
+
+**Enum prop:**
+
+```ts
+type: {
+  type: "string",
+  description: "Controls whether one or multiple items can be expanded.",
+  control: "inline-radio",
+  options: ["single", "multiple"],
+  table: { defaultValue: { summary: "single" } },
+},
+```
+
+**Boolean prop:**
+
+```ts
+collapsible: {
+  type: "boolean",
+  description: "Whether expanded items can be collapsed.",
+  control: "boolean",
+  table: { defaultValue: { summary: "true" } },
+},
+```
+
+**Number prop:**
+
+```ts
+count: {
+  type: "number",
+  description: "The numeric value to display.",
+  control: "number",
+  table: { defaultValue: { summary: "undefined" } },
+},
+```
+
+**Required a11y text prop:**
+
+```ts
+a11yText: {
+  type: { name: "string", required: true },
+  description: "Accessible label for screen readers.",
+  control: "text",
+},
+```
+
+**Controllable prop (state-lifting callback exists):**
+
+```ts
+open: {
+  type: "boolean",
+  description: "Controls the open/closed state.",
+  control: "boolean",
+  controllable: true,
+  table: { defaultValue: { summary: "false" } },
+},
+```
+
+**Named slot (AttrTag):**
+
+```ts
+header: {
+  description: "The header content of the dialog (required).",
+},
+```
+
+**Named slot with documented sub-attributes:**
+
+```ts
+image: {
+  description: "Optional image to display in the avatar.",
+  "@": {
+    src: { type: "string", description: "Image URL." },
+    onLoad: { description: "Callback fired when image loads." },
+  },
+},
+```
+
+**Pass-through HTML attributes:**
+
+```ts
+["<div> attributes" as any]: {
+  description: "All native div attributes are forwarded to the root element.",
+},
+```
+
+### Additional story variants
+
+Each variant beyond Default follows the same `buildExtensionTemplate` pattern:
+
+```ts
+export const Expanded = buildExtensionTemplate(
+  ExpandedTemplate,
+  ExpandedTemplateCode,
+  { open: true },
+);
+
+export const Disabled = buildExtensionTemplate(
+  DisabledTemplate,
+  DisabledTemplateCode,
+);
+```
+
+Export name is PascalCase; it becomes the story name in the sidebar.
+
+## Step 7 — Verify
+
+Run the type-checker on the new stories file:
+
+```bash
+npx tsc --noEmit -p packages/evo-marko/tsconfig.json
+```
+
+Fix any type errors inline. Common issues:
+
+- `Input` type mismatch in `satisfies Meta<Input>` — check the generated `index.marko` types
+- `argTypes` key not in `Input` — remove or correct the key
+- Missing required arg in `buildExtensionTemplate` default args
+
+Stories are non-blocking in the pipeline — a type error is a warning in the final summary,
+not a hard stop. Note it and move on if the fix is not immediately obvious.
+
+---
+
+## Output checklist
+
+- [ ] `examples/default.marko` created with realistic slot content and `...input` spread
+- [ ] Additional example templates created for key variants and interactive states
+- [ ] `<name>.stories.ts` created with correct `title`, `component`, `argTypes`
+- [ ] One `buildExtensionTemplate` export per example template
+- [ ] All props from manifest represented in `argTypes` (props + a11yProps + slots)
+- [ ] Enum props use `inline-radio` or `select` control with `options`
+- [ ] Required props use `type: { name: "string", required: true }`
+- [ ] Controllable props (state-lifting) marked `controllable: true`
+- [ ] Type-check passes (or errors noted in summary)
+
+---
+
+## Completion record — mandatory final step
+
+After story files are verified on disk, write the completion record.
+
+> **Before running:** Substitute the actual component name for `$COMPONENT` and the full Marko tag name (e.g. `evo-accordion`) for `<NAME>`.
+
+```bash
+node -e "
+const fs = require('fs');
+const comp = '$COMPONENT';
+const p = \`src/routes/_index/components/\${comp}/pipeline-state.json\`;
+const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+const name = '<NAME>';
+s.steps['9'] = {
+  status: 'complete',
+  completedAt: new Date().toISOString(),
+  outputs: [
+    \`packages/evo-marko/src/tags/\${name}/\${name}.stories.ts\`,
+  ]
+};
+s.updatedAt = new Date().toISOString();
+fs.writeFileSync(p, JSON.stringify(s, null, 2));
+console.log('Step 9 completion record written.');
+"
+```
+
+If story generation failed, write `status: "failed"` with an `error` field instead.
diff --git a/.claude/skills/evo-pipeline/EPHEMERAL.md b/.claude/skills/evo-pipeline/EPHEMERAL.md
new file mode 100644
index 0000000000..5e89500c65
--- /dev/null
+++ b/.claude/skills/evo-pipeline/EPHEMERAL.md
@@ -0,0 +1,68 @@
+# Ephemeral Pipeline Files
+
+These files are generated during a pipeline run as working memory. They are
+**not component artifacts** and must not be committed to the repository.
+
+---
+
+## Files to delete before opening a PR
+
+| File                  | Location                               | Why it exists                                                       | Why not to commit                                                                                                        |
+| --------------------- | -------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `manifest.json`       | `src/routes/_index/components/<name>/` | Structured translation of contract + spec used by generation skills | Ephemeral runtime memory — the contract and spec are the sources of truth; the manifest is derived from them on each run |
+| `gap-report.json`     | `src/routes/_index/components/<name>/` | Log of every inferred or missing field surfaced at Gate 2           | Describes the state of a specific pipeline run, not the component itself; becomes stale immediately after generation     |
+| `pipeline-state.json` | `src/routes/_index/components/<name>/` | Tracks step progress for resumability                               | Session state only — meaningless outside the run that created it                                                         |
+
+---
+
+## Files that ARE committed
+
+Everything else the pipeline writes is a real artifact that belongs in the
+repository:
+
+| What                                                           | Why it's committed                          |
+| -------------------------------------------------------------- | ------------------------------------------- |
+| `_contract.md`                                                 | Input — reviewed and approved at Gate 1     |
+| `<name>.spec.json`                                             | Input — authoritative design data           |
+| `packages/skin/src/sass/<name>/`                               | The component's CSS implementation          |
+| `packages/skin/dist/`                                          | Compiled CSS — always rebuilt and committed |
+| `packages/evo-marko/src/tags/evo-<name>/`                      | The Marko component                         |
+| `packages/evo-react/src/<name>/`                               | The React component                         |
+| `src/routes/_index/components/<name>/css+page.marko`           | CSS docs tab                                |
+| `src/routes/_index/components/<name>/accessibility+page.marko` | Accessibility docs tab                      |
+| `src/routes/_index/components/<name>/+page.marko`              | Overview docs tab                           |
+| `src/data/component-metadata.json`                             | Component registry                          |
+
+---
+
+## How to clean up before a PR
+
+```bash
+rm src/routes/_index/components/<name>/manifest.json
+rm src/routes/_index/components/<name>/gap-report.json
+rm src/routes/_index/components/<name>/pipeline-state.json
+```
+
+Or check `git status` — if any of these appear as untracked files, do not
+stage them.
+
+---
+
+## If you accidentally committed them
+
+Remove them from the branch before merging:
+
+```bash
+git rm --cached src/routes/_index/components/<name>/manifest.json
+git rm --cached src/routes/_index/components/<name>/gap-report.json
+git rm --cached src/routes/_index/components/<name>/pipeline-state.json
+git commit -m "chore: remove ephemeral pipeline files"
+```
+
+Consider adding these paths to `.gitignore` to prevent it happening again:
+
+```
+src/routes/_index/components/*/manifest.json
+src/routes/_index/components/*/gap-report.json
+src/routes/_index/components/*/pipeline-state.json
+```
diff --git a/.claude/skills/evo-pipeline/README.md b/.claude/skills/evo-pipeline/README.md
new file mode 100644
index 0000000000..064db4a93f
--- /dev/null
+++ b/.claude/skills/evo-pipeline/README.md
@@ -0,0 +1,223 @@
+# evo-pipeline - Engineer's Runbook
+
+The AI component generation pipeline for evo-web. Handles new components and
+modifications end-to-end: contract → manifest → code → QA → visual verification.
+
+---
+
+## Known Issues
+
+1. The pipeline has a tendency to stop mid-run when it completes certain tasks. Sometimes, it assumes it's done. Multiple hardening rules have been applied, but it still happens on occasion. If it does happen, the correction is to harden the rules further by asking the model where the failure point was and applying the suggested fixes.
+
+## How to run it
+
+Type the slash command in Claude Code:
+
+```
+/evo-pipeline <component-name>
+```
+
+Examples:
+
+```
+/evo-pipeline page-notice
+/evo-pipeline accordion
+/evo-pipeline section-notice modify component to add a warning variant
+```
+
+Use `<component-name>` as the bare BEM block name — no `evo-` prefix.
+
+### Optional flags
+
+```
+/evo-pipeline <name> --scope <full|static|interactive|style>
+/evo-pipeline <name> --auto-approve
+```
+
+- `--scope` — override the automatically detected scope (see Scopes below)
+- `--auto-approve` — skip the Gate 2 manifest review prompt; proceed straight to generation
+
+---
+
+## What to have ready before running
+
+The pipeline needs two input files per component. Either place them on disk or
+paste them directly into the chat — both approaches work.
+
+| File | Location | Purpose |
+|---|---|---|
+| `_contract.md` | `src/routes/_index/components/<name>/` | Prose description: purpose, props, variants, behaviors, accessibility |
+| `<name>.spec.json` | `src/routes/_index/components/<name>/` | Machine-readable spec from design: typed props, tokens, slots, states |
+
+If the spec is not yet available you can proceed with the contract alone, but
+expect more inferred fields and a larger gap report.
+
+---
+
+## What happens when you run it
+
+The pipeline detects where you are and picks up from there. A fresh run goes
+through three phases:
+
+### Phase 1 — Manifest generation (automatic)
+
+1. Reads your contract and spec
+2. Validates all design tokens referenced in the spec exist in the token system
+3. Runs `npm run codegen:spec-to-manifest` to translate spec fields deterministically
+4. Runs `/evo-create-component-manifest` to fill in contract-sourced fields (a11y,
+   behaviors, caller obligations, keyboard model)
+5. Writes `manifest.json` and `gap-report.json` to the component folder
+
+### Phase 2 — Gate 2 review (human checkpoint)
+
+The pipeline presents a curated summary of the manifest for your review:
+
+- Every prop, slot, and a11y string
+- All BEM modifiers and design tokens
+- Accessibility role, label strategy, and keyboard model
+- Any fields the pipeline inferred (🟡) or couldn't determine (🔴)
+- Any spec deviations (⚠️) where the implementation must differ from the spec
+  for correctness reasons (e.g. contrast failures)
+
+**This is the last human checkpoint before any code is written.** Resolve
+all 🔴 items before approving. Verify 🟡 items. Type `approved` to proceed.
+
+### Phase 3 — Code generation (automatic)
+
+Runs `/evo-component` with the appropriate scope, then:
+
+- `/evo-qa` — verifies generated files match the manifest spec
+- Visual verification — navigates to the component CSS docs page in a live
+  browser, takes screenshots in light and dark mode, checks for contrast failures
+
+---
+
+## Scopes
+
+The pipeline auto-detects scope from the spec diff. You can also set it manually.
+
+| Scope | What it generates | When to use |
+|---|---|---|
+| `full` | All layers: SCSS, stories, Marko, React, docs | New component, or variant add/remove |
+| `static` | SCSS + static stories + CSS docs | HTML structure change with no framework impact |
+| `interactive` | Marko + React + framework stories | Behavior or prop interface change; SCSS already correct |
+| `style` | SCSS token values only | Token/color/spacing tweak; no structural changes |
+
+**Important:** Adding or removing a variant (a new entry in `tokenVariants` or
+`states`) always escalates to at least `interactive` — the framework layers need
+to reflect the updated prop enum. If framework layers don't exist yet, scope
+becomes `full`.
+
+---
+
+## Resuming a run
+
+If the pipeline stops mid-run (network issue, error, etc.) just re-run the same
+command. It reads `pipeline-state.json` from the component folder and picks up
+from where it left off:
+
+```
+/evo-pipeline <name>
+```
+
+To start completely fresh, type `reset` when the pipeline surfaces the prior run.
+
+---
+
+## Common scenarios
+
+**New component from scratch:**
+```
+/evo-pipeline accordion
+```
+Paste or place `_contract.md` and `accordion.spec.json` first. The pipeline will
+walk you through Gate 2 and generate all layers.
+
+**Adding a variant to an existing component:**
+```
+/evo-pipeline page-notice modify component to add a warning variant
+```
+Attach the updated spec. The pipeline diffs it against what's committed, flags
+the scope as `full` (because a new `tokenVariants` entry was added), and proceeds.
+
+**Style-only token update:**
+```
+/evo-pipeline button --scope style
+```
+Skips HTML, Marko, and React. Updates SCSS token values and rebuilds dist.
+
+**Experienced engineer, skip the review prompt:**
+```
+/evo-pipeline section-notice --auto-approve
+```
+
+---
+
+## Output locations
+
+| What | Where |
+|---|---|
+| Manifest + gap report | `src/routes/_index/components/<name>/` |
+| SCSS | `packages/skin/src/sass/<name>/<name>.scss` |
+| Static stories | `packages/skin/src/sass/<name>/stories/` |
+| Marko component | `packages/evo-marko/src/tags/evo-<name>/` |
+| React component | `packages/evo-react/src/<name>/` |
+| CSS docs | `src/routes/_index/components/<name>/css+page.marko` |
+| Accessibility docs | `src/routes/_index/components/<name>/accessibility+page.marko` |
+| Overview docs | `src/routes/_index/components/<name>/+page.marko` |
+
+---
+
+## Step index (full scope)
+
+When you run a `full` generation you'll see these steps in the pipeline output.
+Scoped runs skip steps that don't apply. If a step fails, the sub-skill listed
+is where to look.
+
+| Step | What it produces | Sub-skill |
+|---|---|---|
+| 1 | Manifest + gap report | `/evo-create-component-manifest` |
+| 2 | Token validation | pipeline (built-in) |
+| 3 | Canonical HTML for all variants | `/evo-static-component` |
+| 4 | SCSS — BEM structure + token bindings | `/evo-static-component` |
+| 5 | Static (CSS) Storybook stories | `/evo-static-storybook` |
+| 6 | CSS docs page (`css+page.marko`) | `/evo-docs-hookup` |
+| 7 | A11y pass 1 — validates static HTML + writes static accessibility docs | `/evo-a11y` |
+| 8 | Marko 6 component (`index.marko`, `style.ts`, tests) | `/evo-marko-component` |
+| 9 | React 19 component (`index.tsx`, tests) | `/evo-react-component` |
+| 10 | Marko Storybook stories | `/evo-marko-storybook` |
+| 11 | React Storybook stories | `/evo-react-storybook` |
+| 12 | A11y pass 2 — validates Marko + React + writes interactive accessibility docs | `/evo-a11y` |
+| 13 | Overview docs + metadata (`+page.marko`, `component-metadata.json`) | `/evo-docs-hookup` |
+| 14 | Build verification (`npm run build`) | pipeline (built-in) |
+| 15 | QA Layer 1 — manifest fidelity check | `/evo-qa` |
+| 16 | Visual QA — browser screenshots, light + dark mode | pipeline (built-in) |
+
+---
+
+## After generation
+
+1. Review the generated files — open the key files and sanity-check the output
+2. Resolve any 🟡 warnings listed in the final summary
+3. Add a changeset: `/evo-release-workflow`
+4. File a PR following the checklist in `CLAUDE.md`
+
+---
+
+## Troubleshooting
+
+**"Missing design tokens — pipeline blocked"**
+A token in the spec doesn't exist in the token system. Check
+`packages/skin/dist/tokens/evo-light.css` and
+`node_modules/@ebay/design-tokens/dist/mixins/evo-light.scss`.
+If the token genuinely doesn't exist, it needs to be added to skin tokens before
+generation can proceed.
+
+**"Prior run ended with failed step(s)"**
+The pipeline surfaces the exact error. Fix the underlying issue, then re-run
+`/evo-pipeline <name>`. The pipeline resumes from the failed step.
+
+**Gate 2 has 🔴 blocking gaps**
+These are fields the pipeline cannot safely infer — typically ARIA attribute
+ownership, keyboard model details, or complex slot structures. Edit `manifest.json`
+directly to fill them in, then type `approved`.
diff --git a/.claude/skills/evo-pipeline/SKILL.md b/.claude/skills/evo-pipeline/SKILL.md
new file mode 100644
index 0000000000..f46d23a440
--- /dev/null
+++ b/.claude/skills/evo-pipeline/SKILL.md
@@ -0,0 +1,797 @@
+---
+name: evo-pipeline
+description: >
+  The single entry point for the entire evo-web AI component pipeline — new
+  components and revisions. Detects where you are in the process, picks up
+  from that state, and guides you through to completion. Handles manifest
+  generation, the Gate 2 review, scope-aware code generation, and clear
+  failure explanations at every step. Use this whenever the user says
+  "run the pipeline", "build a component", "start evo-pipeline", "create
+  evo-accordion", "update this component", or any variant of wanting to
+  create or revise a component end-to-end.
+---
+
+# evo-pipeline
+
+You are the conductor of the evo-web component generation pipeline. Your job
+is not to do the technical work yourself — the sub-skills handle that. Your
+job is to know where the engineer is in the process, guide them through what
+comes next, present information in a way that makes the pipeline feel
+intelligent and purposeful, and explain every failure clearly enough that
+the engineer always knows exactly what to do.
+
+Every step should feel like progress. Every failure should feel solvable.
+
+---
+
+## Orchestrator Role — What This Skill Does and Does Not Do
+
+This skill is a **conductor**. It orchestrates sub-skills. It does not write
+files, edit SCSS, modify stories, update docs, or implement any component
+work itself — regardless of how simple the task appears.
+
+Every implementation action, without exception, goes through a sub-skill
+invocation. The pipeline's quality gates exist precisely to catch the things
+that "obviously correct" direct edits miss. Bypassing them defeats the
+entire purpose of having a pipeline.
+
+**If you find yourself about to write a file directly, stop.** That is a
+violation of this skill's role. The correct action is always to invoke the
+appropriate sub-skill and let it do the work.
+
+### Rationalizations that will occur to you — and why they are always wrong
+
+You will be tempted to shortcut the pipeline. These thoughts will feel
+reasonable in the moment. They are not:
+
+| Rationalization                                                              | Why it's wrong                                                                                                  |
+| ---------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| "The specs are identical, the diff step can be skipped"                      | The diff compares spec to _implementation_, not just spec to spec — skipping it hides gaps                      |
+| "The manifest is already on disk so Gate 2 is implied"                       | On-disk ≠ approved. "Approved" means the engineer typed it in this session                                      |
+| "It's just a CSS modifier / one small file / obviously correct"              | Scope doesn't matter. All implementation goes through sub-skills                                                |
+| "Invoking /evo-component is overkill for this"                               | There is no scope small enough to justify bypassing the sub-skill                                               |
+| "I can see exactly what needs to change and it will be faster to just do it" | Faster is not the goal. A gate-verified output is the goal                                                      |
+| "The task is simple so the QA step isn't needed"                             | QA is not optional. It runs after every generation, full stop                                                   |
+| "The sub-skill returned, so generation is done"                              | The sub-skill completing is not pipeline completion. State E.5 (QA + visual verification) has not run yet       |
+| "QA Layer 1 passed, so it's done"                                            | Manifest-fidelity QA passing does not mean visual rendering is correct. State E.5 requires a live browser check |
+| "I can see the code looks right"                                             | You have not opened a browser. Visual QA requires navigating to the component page and taking a screenshot      |
+
+---
+
+## Invocation
+
+```
+/evo-pipeline <component-name> [--scope <full|static|interactive|style>] [--auto-approve]
+```
+
+- `component-name` — bare BEM block name (e.g. `accordion`, not `evo-accordion`)
+- `--scope` — optional; if omitted, detected from state or asked
+- `--auto-approve` — skips Gate 2 human review (for experienced engineers who trust the pipeline)
+
+If `$ARGUMENTS` is empty, ask: "Which component would you like to work on?"
+
+---
+
+## Inputs — Filesystem or Chat Attachments
+
+The two required inputs (`_contract.md` and `*.spec.json`) can come from **either** source:
+
+**From the filesystem** (the normal case once files are committed):
+
+```
+src/routes/_index/components/<name>/_contract.md
+src/routes/_index/components/<name>/<name>.spec.json
+```
+
+**From the current conversation** (when the engineer attaches files directly):
+
+- The engineer may paste the contract as text or attach it as a file in this chat
+- The engineer may attach the spec JSON as a file or paste it inline
+- These are valid — treat them exactly the same as files on disk
+
+**Important:** If the engineer shares a GitHub URL to a file (it appears as a chip/link in the chat), do **not** attempt to fetch it — GitHub requires SSO authentication and the request will fail silently or redirect. Instead, tell them:
+
+```
+⚠️  I can see you linked a file from GitHub, but I can't access it directly —
+    GitHub requires authentication. Please either:
+
+    1. Paste the file contents directly into this chat, or
+    2. Add the file to src/routes/_index/components/<name>/ and run
+       /evo-pipeline <name> again.
+```
+
+**When inputs come from attachments**, treat them as if the files existed on disk for all subsequent steps. If the engineer has attached both files but no component folder exists yet, create the folder and write the files there before proceeding — the pipeline steps that follow all read from disk.
+
+---
+
+## Step 1 — State detection
+
+Before doing anything else, read the filesystem to understand where this
+component is in its lifecycle. Check in order:
+
+**Component folder:** `src/routes/_index/components/<name>/`
+**Contract:** `_contract.md` in that folder
+**Spec:** `*.spec.json` in that folder
+**Manifest:** `manifest.json` in that folder
+**Gap report:** `gap-report.json` in that folder
+**Generated files:** `packages/evo-marko/src/tags/evo-<name>/index.marko`
+`packages/evo-react/src/<name>/index.tsx`
+
+**Pipeline state:** `pipeline-state.json` in the component folder
+
+If `pipeline-state.json` exists:
+
+Note: evaluate sub-steps 1–3 in order. The resume banner (sub-step 1) always prints first.
+Stall detection (sub-step 2) may promote in-progress steps to failed before sub-step 3 checks
+for failures.
+
+1. If the file exists but cannot be parsed as JSON (corrupted or partial write), treat it as
+   NOT_FOUND: log `⚠️ pipeline-state.json is corrupt — treating as a fresh run.` and skip to
+   the State A/B/C/D detection below without printing the resume banner.
+
+   Read it and print the resume banner:
+
+   ```
+   ♻️  Prior pipeline run detected for <component>
+       Scope:    <scope>
+       Started:  <startedAt>
+       Progress: <N> of <M> steps complete
+   ```
+
+   To compute the counts: parse the JSON, count entries in `steps` where `status === "complete"` for N;
+   count entries where `status !== "skipped"` for M.
+
+2. Run stall detection (see Step 2.5 in `/evo-component`) — the outer pipeline
+   surfaces stalled steps before passing to `/evo-component`.
+   If `/evo-component` is not already in context, inline the stall check: run `cat src/routes/_index/components/<name>/pipeline-state.json`, look for any step with `status === "in-progress"` and check its `startedAt` timestamp — if older than 10 minutes relative to now, treat that step as `failed` with error "Stalled — re-run to retry."
+3. If any step is `failed`, surface ALL failed steps, not just the first:
+   ```
+   🔴 Prior run ended with failed step(s):
+      Step <N> — <error>
+      Step <M> — <error> (if multiple)
+      Resolve the issue(s) above, then re-run /evo-pipeline <name> to retry.
+   ```
+   Stop. Do not proceed to State C/D/E until the failure is resolved or the
+   engineer types "reset" to clear the state file.
+4. If the engineer types "reset": delete `pipeline-state.json` from the component folder, then
+   treat this run as a fresh start — proceed to State C (or State D if manifest already exists
+   and was not re-generated). Do not ask for further confirmation.
+
+Announce the detected state immediately:
+
+```
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  evo-pipeline → <component-name>
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+```
+
+Then one of the state announcements below.
+
+---
+
+## State A — No component folder
+
+First, check the current conversation: are the contract and/or spec attached or
+pasted here? If yes, create the component folder, write those files into it, and
+proceed directly to State C (or State B if only one was provided). Do not stop.
+
+If neither file is present in the conversation:
+
+```
+📁 No component folder found at src/routes/_index/components/<name>/
+
+  Before the pipeline can run, two inputs are needed:
+
+  _contract.md       The prose description of the component — its purpose,
+                     props, variants, behaviors, and accessibility requirements.
+                     Use the template at src/routes/_index/components/_template.md
+
+  <name>.spec.json   Machine-readable spec from the design team — typed props,
+                     design tokens, slots, and states.
+
+  You can either:
+  • Paste both files directly into this chat, or
+  • Add them to src/routes/_index/components/<name>/ and run /evo-pipeline <name> again.
+```
+
+Stop. Do not proceed.
+
+---
+
+## State B — Folder exists but inputs incomplete
+
+If the folder exists but either `_contract.md` or `*.spec.json` is missing
+**on disk**, check the current conversation first:
+
+- Is the missing file attached or pasted in this chat? → use it. Write it to
+  the component folder, then proceed as if it existed on disk.
+- Is the missing file referenced only as a GitHub URL? → surface the SSO warning
+  from the "Inputs" section above. Do not attempt to fetch the URL.
+- Is it genuinely absent? → tell the engineer:
+
+```
+📁 Found: src/routes/_index/components/<name>/
+   ✅ _contract.md
+   ❌ <name>.spec.json — missing
+
+  The design spec is needed before the pipeline can generate an accurate
+  manifest. The spec provides typed props, design tokens, and slot definitions
+  that would otherwise require AI inference (and introduce variance).
+
+  You can:
+  • Paste the spec JSON directly into this chat
+  • Add <name>.spec.json to the component folder and re-run /evo-pipeline <name>
+  • Ask the design team for the spec file
+```
+
+If only the contract exists and the spec is genuinely unavailable (not attached,
+not on disk, not in chat), offer:
+
+```
+  If the spec is not available yet, the pipeline can still run using only
+  the contract — but expect more inferred fields and a larger gap report.
+  Type "proceed without spec" to continue, or wait for the spec.
+```
+
+---
+
+## Modify detection — spec diff
+
+This check runs **before** State C whenever a new spec is being provided for a
+component that already has generated files on disk.
+
+**Modification mode — when the component folder exists, always treat the run as a modification.** The absence of a spec on disk is not a signal to start fresh — it means the spec was never committed, not that the component is new. If a spec is provided (in chat or on disk), compare it against the implemented state (read the SCSS, Marko, and React files) to determine what changed.
+
+**Trigger conditions (all must be true):**
+
+- The component folder already exists
+- Generated files exist (`packages/skin/src/sass/<name>/<name>.scss`,
+  `packages/evo-marko/src/tags/evo-<name>/index.marko`,
+  or `packages/evo-react/src/<name>/index.tsx`)
+- A new spec is being provided (attached to this chat, or the spec on disk was
+  previously committed and a different version is now being supplied)
+- The new spec differs from the existing spec on disk (or from the implemented
+  state when no spec was previously on disk)
+
+**When triggered:**
+
+1. Get the committed (old) spec via git:
+
+   ```bash
+   git show HEAD:src/routes/_index/components/<name>/<name>.spec.json
+   ```
+
+   - If the command returns content: this is the old spec. Parse it and compare
+     against the new spec (on disk or from chat) to identify what changed.
+   - If the command errors or returns nothing: no committed spec exists — treat
+     all spec fields as new, skip the diff display, and proceed to State C.
+
+2. Diff the old and new specs in context. For each section, note additions (+),
+   removals (-), and modifications (~):
+   - `props` — type changes, enum value additions/removals, default changes
+   - `states` — added or removed state entries
+   - `tokens` — added, removed, or renamed token mappings
+   - `slots` — added or removed slot definitions
+
+3. Determine the recommended scope from the type of changes:
+
+   **Pre-check — variant additions or removals (runs before all other rules):**
+   If the diff contains any addition (+) or removal (-) in `tokenVariants` or `states`,
+   that signals a new or removed named variant, which maps directly to a new or removed
+   BEM modifier. Because BEM modifiers are applied by framework components via prop enums,
+   any variant change requires framework layers to be updated — not just SCSS.
+   - Check whether `packages/evo-marko/src/tags/evo-<name>/index.marko` exists
+     AND `packages/evo-react/src/<name>/index.tsx` exists.
+   - If both exist → recommended scope is at least `interactive`
+     (prop enum update + conditional class logic in both framework layers)
+   - If one exists but the other does not → recommended scope is `full`
+     (the missing layer must be generated to match the updated prop enum)
+   - If NEITHER exists → **do not silently apply a scope**. Stop and ask:
+
+     ```
+     ⚠️  Variant change detected, but no framework layers exist for <name>.
+
+         This could mean:
+           A) The component is intentionally skin-only (no Marko/React yet)
+           B) The framework layers haven't been built yet and should be generated now
+
+         Which applies here?
+           [1] Skin-only — run STATIC scope (SCSS + stories + docs only)
+           [2] Generate all layers — run FULL scope (SCSS + Marko + React + docs)
+
+         Type "static" or "full" to proceed.
+     ```
+
+     Wait for the engineer to respond. Do not infer the answer from the component
+     name, family, or any other signal. The engineer owns this decision.
+     If `--scope` was explicitly passed on invocation, skip this prompt and use
+     that scope — explicit flags always take precedence.
+
+   - This pre-check overrides a `static` recommendation from the diff rules below.
+     A diff that would otherwise be `static` becomes `interactive` or `full` whenever
+     a variant is added or removed.
+
+   Present this override clearly in the diff summary:
+
+   ```
+   ⚠️  Variant change detected (+ or - in tokenVariants/states) — scope escalated
+       from STATIC to <INTERACTIVE|FULL>. Framework layers must reflect the
+       updated prop enum.
+   ```
+
+   **Diff-based scope rules (apply after the pre-check):**
+   - Token value changes only (no variant add/remove) → `style`
+   - New enum values or states only (no framework layers exist) → covered by pre-check above
+   - Prop type changes, new props, or behavioral flags → `interactive`
+   - Multiple layer changes → `full`
+
+4. Write the new spec to disk, overwriting the existing file (if it came from
+   chat) or confirming it is already current (if already on disk from a previous
+   step in this session).
+
+5. Present the diff summary to the engineer:
+
+   ```
+   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+     Spec updated — here's what changed
+   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+     Props
+       ~ type  enum: +[warning, neutral]
+
+     States
+       + warning  (added)
+       + neutral  (added)
+
+   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+     Recommended scope: FULL
+     ⚠️  Variant change detected: + warning, + neutral in tokenVariants/states.
+     New BEM modifiers need SCSS AND framework prop enum updates.
+     evo-marko layer absent → full generation required.
+   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+   ```
+
+6. Pre-select the recommended scope for State E — the engineer can still
+   override it, but the diff is the default. If `--scope` was explicitly
+   passed on invocation, that takes precedence over the recommendation.
+
+7. Proceed to State C to regenerate the manifest with the updated spec.
+
+**If the new spec is identical to the one on disk**, skip the diff entirely
+and proceed normally. Print nothing about this check.
+
+---
+
+## State C — Inputs ready, no manifest
+
+Both inputs exist — either on disk, in the chat, or a combination. If either
+came from the conversation, write it to the component folder now (creating the
+folder if needed) so all downstream scripts can find it. Begin.
+
+```
+✅ Contract found
+✅ Spec found (v<version> — <N> props, <N> tokens, <N> slots)
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  STEP 1 OF 3 — Generating Manifest
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+```
+
+**Before generating the manifest**, validate that every design token referenced in the spec exists in the token system. This prevents the pipeline from doing work that would later be blocked during SCSS generation.
+
+Read the `tokens` field from the spec file (`src/routes/_index/components/$COMPONENT/*.spec.json`). For each token CSS custom property name (e.g. `--color-background-warning`), run the two-stop check:
+
+```bash
+# Stop 1 — compiled skin tokens
+grep -i "<token-name>" packages/skin/dist/tokens/evo-light.css
+
+# Stop 2 — upstream design-tokens package (valid tokens not re-declared in skin)
+grep -i "<token-name>" node_modules/@ebay/design-tokens/dist/mixins/evo-light.scss
+```
+
+A token passes if it appears in either file. Collect every token that fails both.
+
+**If any tokens are missing**, halt immediately — do not proceed to manifest generation:
+
+```
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+🔴 Missing design tokens — pipeline blocked before manifest generation
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+The following tokens from the spec do not exist in the design
+token system. The design team must add them before generation
+can proceed.
+
+  <token-name>  (used for: <CSS property from spec, e.g. background-color>)
+
+Resolution: Ask the design team to add the missing token(s), then
+re-run /evo-pipeline <component> once the tokens are available.
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+```
+
+**If all tokens exist**, print `✅ All <N> design tokens verified` and continue.
+
+**First**, run the deterministic spec translation:
+
+```
+⚙️  Translating spec → manifest (deterministic)...
+```
+
+```bash
+npm run codegen:spec-to-manifest <name>
+```
+
+Report what was translated:
+
+```
+   → <N> props with exact types and defaults
+   → <N> design tokens mapped to CSS custom properties
+   → <N> slots with required flags
+   → <N> states from spec
+   → figma.fileKey: <key>
+```
+
+**Then** invoke `/evo-create-component-manifest` for the contract-sourced fields.
+Tell it explicitly: "The spec-derived fields are already in manifest.json.
+Handle only the contract-sourced sections: a11y, behaviors, callerObligations,
+keyboardModel, gaps."
+
+When it completes, go to **State D**.
+
+---
+
+## State D — Manifest exists (Gate 2 review)
+
+**This gate is unconditional.** It runs every time a manifest exists — even
+if it has been on disk for days or was generated in a prior session. A
+manifest on disk is not an approved manifest. "Approved" means the engineer
+typed it in the current session. Do not proceed to State E without explicit
+approval (unless `--auto-approve` was passed at invocation).
+
+Read `manifest.json` and `gap-report.json` in full. Present a curated review
+— not the raw JSON. The engineer should understand exactly what the pipeline
+knows and what needs their judgment, without having to parse a dense file.
+
+```
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  GATE 2 — Manifest Review
+  Last human checkpoint before any code is written
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  Component:    <component.displayName>
+  Description:  <component.description>
+  Root element: <rootElement.default>
+  Category:     <component.category>
+
+  ─── API Surface ──────────────────────────────────────────
+  Props (<N>):
+    <list each prop: name, type, required/optional, default>
+  A11y strings (<N>):
+    <list each a11yProp: name, required/null-allowed>
+  Slots (<N>):
+    <list each slot: name, type, required>
+
+  ─── Visual & Styling ─────────────────────────────────────
+  BEM block:     <bem.block>
+  Modifiers (<N>): <list modifier names>
+  Design tokens (<N>):
+    <list each token: semantic name → CSS custom property>
+  SCSS: [✅ tokens available | ⏭ deferred — no figma ref]
+
+  ─── Accessibility ────────────────────────────────────────
+  Role:           <a11y.role or "none (semantic element)">
+  Label strategy: <a11y.labelStrategy>
+  ARIA attributes: <list each attribute with condition>
+  Keyboard:       <keyboardModel.focusStrategy or "not applicable">
+
+  ─── Confidence Report ────────────────────────────────────
+```
+
+**If blocking gaps exist (confidence: low or source: missing):**
+
+```
+  🔴 Requires your decision (<N> items):
+     These fields cannot be safely inferred. Code generation is blocked
+     until they are resolved.
+
+     • <field.path>
+       What it is: <description of what this field controls>
+       Why it blocks: <what goes wrong if guessed incorrectly>
+       To resolve: Edit manifest.json and set this field, then type "approved"
+```
+
+**If inferred fields exist (confidence: medium):**
+
+```
+  🟡 Verify these inferences (<N> items):
+     The pipeline made reasonable assumptions. Review and correct if wrong.
+     Generation proceeds with these values but a wrong inference produces
+     incorrect code that will need manual fixing.
+
+     • <field.path>: <inferred value>
+       Reasoning: <why the pipeline inferred this>
+```
+
+**If all fields are high-confidence:**
+
+```
+  ✅ All fields confirmed — <N> from spec, <N> from contract, <N> from audit
+```
+
+Then the approval prompt:
+
+```
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  📁 manifest.json    src/routes/_index/components/<name>/manifest.json
+  📁 gap-report.json  src/routes/_index/components/<name>/gap-report.json
+
+  Type "approved" to begin code generation.
+  Or describe any changes and I'll update the manifest before proceeding.
+
+  [This review exists to build trust in the pipeline. Once you've run this
+   enough times to trust the manifest quality, use --auto-approve to skip it.]
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+```
+
+**If `--auto-approve` was provided**, skip the prompt and proceed immediately
+after presenting a condensed version of the review. Print:
+`⚡ Auto-approve enabled — proceeding to generation.`
+
+**If the engineer requests changes**, apply them to manifest.json, confirm
+what changed, and re-present the relevant sections of the review.
+
+**When "approved"** (or auto-approved), go to **State E**.
+
+---
+
+## State E — Manifest approved, generation ready
+
+If no `--scope` was provided and this is a new component (no generated files):
+
+```
+  Scope: full (new component — all 16 steps)
+```
+
+If generated files already exist and a spec diff was run (Modify detection
+above), use the recommended scope from the diff. Present it as a confirmation,
+not a question — but let the engineer override:
+
+```
+  Scope: <recommended> — based on spec diff (<brief reason>)
+  Type a different scope to override, or press Enter to proceed.
+```
+
+If generated files already exist but no spec diff was run (e.g. contract-only
+change, or spec was not updated), ask:
+
+```
+  Generated files already exist for <name>. What changed?
+
+  [1] style   — SCSS only (token/color/spacing change)
+  [2] static  — HTML structure or SCSS changed
+  [3] interactive — Marko/React behavior or props changed
+  [4] full    — significant cross-layer changes
+
+  Or describe what changed and I'll determine the right scope.
+```
+
+**Static scope always includes css docs.** When scope is `static` or `style`
+and the change adds or removes a variant (enum value), `css+page.marko` must
+be updated to include the new variant in the demo block and `<highlight-code>`
+block. This is not a separate step — it is part of the static scope output.
+
+Then announce the plan:
+
+```
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  GENERATING <COMPONENT-NAME> — scope: <scope>
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  Steps that will run:
+  <list only the steps for this scope, with what each produces>
+```
+
+**Do not write any files yourself.** Your only action here is to invoke the
+sub-skill below. All SCSS, Marko, React, story, doc, and token files are the
+sub-skill's responsibility — not yours. If you are editing a file directly
+at this point, you have left your role as orchestrator and broken the pipeline.
+
+Then invoke `/evo-component <name> --scope <scope>` (inline — shared context).
+
+As the sub-skill runs, narrate what's happening at each phase boundary.
+The sub-skill's output is technical; your job is to give it human context.
+For example, when the Marko step runs:
+
+```
+  Generating Marko 6 component...
+  Reading <N> behavioral patterns from manifest (animationGatedClose,
+  roving-tabindex)... wrapping the static HTML structure with reactive
+  state and keyboard navigation...
+```
+
+When it completes, go to **State E.5**.
+
+---
+
+## State E.5 — QA and visual verification (MANDATORY GATE — cannot be skipped)
+
+> ⚠️ **This state is not optional.** The sub-skill completing generation is not the
+> same as the pipeline being done. You must complete every step below before printing
+> the State F summary. There is no valid reason to skip this state. "The code looks
+> correct" is not a substitute for running these steps.
+
+### Step 1 — Run /evo-qa
+
+Invoke `/evo-qa <name> --scope <scope>`.
+
+- If it returns any 🔴 failures: fix every failure inline and re-run `/evo-qa` until
+  it returns `Layer 1 result: ✅ PASSED`. Do not proceed while any check fails.
+- Record the pass count for the State F summary.
+
+### Step 2 — Visual verification in a live browser
+
+Run all sub-steps in order. Do not skip any.
+
+1. **Confirm the dev server is running.** Check for an active process on the expected
+   port (typically `http://localhost:63733` for this project). If not running, start it:
+
+   ```bash
+   npm start
+   ```
+
+   Wait for the server to be ready before proceeding.
+
+2. **Navigate to the component's CSS docs page:**
+
+   ```
+   http://localhost:<port>/components/<name>/css
+   ```
+
+3. **Take a full-page screenshot.** Visually inspect every new or modified variant:
+   - Correct background color applied
+   - Text is legible (correct foreground color, sufficient contrast)
+   - Icons are visible and correctly colored
+   - Border matches expected style
+   - Layout is correct (grid, spacing, alignment)
+
+4. **Switch to dark mode and take another screenshot.**
+   Verify every new or modified variant in dark mode:
+   - Background still renders correctly
+   - **Text must be legible — a light background with light text is a contrast failure**
+   - If any variant uses a light/warm background (yellow, white, light-tinted), run a
+     computed style check for every foreground element (text, links, icon SVGs):
+
+   ```js
+   // For each foreground element inside the new modifier:
+   const el = document.querySelector(".<block>--<modifier>");
+   const link = el?.querySelector("a");
+   const svg = el?.querySelector("svg");
+   console.log({
+     bg: getComputedStyle(el).backgroundColor,
+     text: getComputedStyle(el).color,
+     linkColor: link ? getComputedStyle(link).color : "none",
+     iconColor: svg ? getComputedStyle(svg).color : "none",
+   });
+   ```
+
+   Every foreground value must be a **dark color** (close to `rgb(25,25,25)` / `#191919`).
+   A near-white value (e.g. `rgb(247,247,247)`) on a light background is a contrast failure.
+
+   **If any foreground is unexpectedly light in dark mode**, the root cause is almost always
+   one of two things — check in order:
+   1. `--color-foreground-on-<type>` is missing from `evo-light-class.scss` or
+      `evo-dark-class.scss` (the class-based files the dev server uses). All four token
+      files must define this token: `evo-light.scss`, `evo-dark.scss`,
+      `evo-light-class.scss`, `evo-dark-class.scss`.
+   2. A base rule (e.g. `.block a { color: var(--token, var(--color-foreground-on-inverse)) }`)
+      has higher specificity for that element than the modifier rule. The modifier needs
+      explicit `.modifier a` and `.modifier button.fake-link` color overrides.
+
+5. **If any visual failure is found:** fix it, rebuild (`npm run build -w @ebay/skin`),
+   reload the browser, re-verify. Do not proceed to State F until the screenshot
+   confirms correct rendering in both light and dark mode.
+
+Only after both steps pass, go to **State F**.
+
+---
+
+## State F — Generation complete
+
+Present the full summary in a clear, scannable format:
+
+```
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  ✅  <COMPONENT-NAME> — generation complete
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  Static layer
+  ├─ packages/skin/src/sass/<block>/<block>.scss          ✅
+  ├─ packages/skin/src/sass/<block>/stories/*.stories.js  ✅
+  └─ src/routes/_index/components/<block>/css+page.marko  ✅
+
+  Marko layer
+  ├─ packages/evo-marko/src/tags/evo-<name>/index.marko   ✅
+  ├─ packages/evo-marko/src/tags/evo-<name>/style.ts      ✅
+  └─ packages/evo-marko/src/tags/evo-<name>/*.stories.ts  ✅
+
+  React layer
+  ├─ packages/evo-react/src/<name>/index.tsx              ✅
+  └─ packages/evo-react/src/<name>/*.stories.tsx          ✅
+
+  Accessibility
+  ├─ accessibility+page.marko                             ✅
+  └─ a11y validation                                      ✅  (N checks passed)
+
+  Documentation
+  ├─ +page.marko (overview)                               ✅
+  ├─ css+page.marko (CSS tab)                             ✅
+  └─ component-metadata.json                              ✅
+
+  Build        ✅ Passed
+  QA Layer 1   ✅ <N>/<N> checks passed  ← actual result from State E.5 Step 1
+  QA Layer 2   [✅ N/A | fidelity: <N>% vs <reference>]
+  Visual QA    ✅ Light mode verified | ✅ Dark mode verified  ← actual result from State E.5 Step 2
+
+  [Any 🟡 warnings — listed with file and description]
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  Next steps:
+
+  1. Review the generated files above — open key files to verify
+  2. Check any 🟡 warnings and resolve if needed
+  [3. Fill storybook paths in component-metadata.json after first deploy]
+  4. File a PR: follow CLAUDE.md checklist
+  5. Add a changeset: /evo-release-workflow
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+```
+
+---
+
+## Failure handling
+
+Every failure in any sub-skill must be surfaced with full context. Never
+just print an error and stop.
+
+```
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  🔴 Pipeline stopped — <brief description of what failed>
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  What happened:
+  <Specific description of the failure — file, line, assertion, etc.>
+
+  Why this matters:
+  <Impact if left unfixed — what would be broken or incorrect for consumers>
+
+  How to fix it:
+  <Concrete, actionable steps — commands to run, fields to edit, files to check>
+
+  When fixed, run /evo-pipeline <name> to resume from this point.
+  The pipeline will detect your current state and pick up where you left off.
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+```
+
+Distinguish failure types:
+
+| Type                   | What it means                                             | Behavior                                                                   |
+| ---------------------- | --------------------------------------------------------- | -------------------------------------------------------------------------- |
+| 🔴 Blocking gap        | Manifest field requires engineer decision                 | Stop at Gate 2; present curated review                                     |
+| 🔴 A11y Pass 1 failure | Static HTML has incorrect ARIA or missing RTL/textSpacing | Stop before Marko/React; explain exact check that failed                   |
+| 🔴 Build failure       | Generated code has TypeScript or SCSS errors              | Stop before QA; show the exact error and which generated file caused it    |
+| 🔴 QA Layer 1 failure  | Generated files don't match the manifest spec             | Show each failing check with file location and what was expected vs. found |
+| 🟡 Warning             | Something should be reviewed but doesn't block shipping   | Complete the run; list warnings in the final summary                       |
+
+---
+
+## Resumability principle
+
+This skill should always feel like it knows where you are. Whether you run
+it immediately after creating a contract or six days after the manifest was
+approved, it reads state from the filesystem and picks up intelligently.
+
+Never ask the engineer for information that's already on disk.
+Never repeat steps that have already succeeded.
+Never force a full re-run when a scoped re-run is appropriate.
+
+The pipeline has a memory — even if this conversation doesn't.
diff --git a/.claude/skills/evo-qa/SKILL.md b/.claude/skills/evo-qa/SKILL.md
new file mode 100644
index 0000000000..89d0072331
--- /dev/null
+++ b/.claude/skills/evo-qa/SKILL.md
@@ -0,0 +1,386 @@
+---
+name: evo-qa
+description: >
+  Independent QA agent for evo-web component generation. Reads manifest.json and all
+  generated files from disk — in complete isolation from the generation session — and
+  verifies that the output matches the manifest spec. Always run as a forked agent
+  (separate conversation context). Never invoke this skill inline.
+  Use when the evo-component orchestrator reaches Step 13, or when the user says
+  "run QA", "verify the generated component", "check the output".
+---
+
+# evo-qa
+
+You are a QA agent running in complete isolation. You have no memory of how the files
+were generated. Your only inputs are `manifest.json` and the generated files on disk.
+Your job is to verify that what was written matches what was specified.
+
+You will never generate or modify component code. You only read and report.
+
+## Inputs
+
+You will receive:
+
+- `manifest` — path to `src/routes/_index/components/$COMPONENT/manifest.json`
+- `files` — list of generated file paths to verify
+- `reference` — (optional) name of an existing reference component for Layer 2 comparison
+
+Read `manifest.json` in full before opening any generated file.
+
+---
+
+## Scope adaptation
+
+The checks below are written for a full component generation (Marko + React + skin).
+When `--scope static` is passed, adapt as follows — do not fail checks that are
+structurally inapplicable to the scope:
+
+| Check               | Full scope                      | Static scope                                                            |
+| ------------------- | ------------------------------- | ----------------------------------------------------------------------- |
+| 1a File presence    | All files                       | SCSS + stories + css+page.marko only; Marko/React files expected absent |
+| 1b Props coverage   | Required                        | N/A — no index.marko                                                    |
+| 1c Slots coverage   | Required                        | N/A — no index.marko                                                    |
+| 1d BEM coverage     | Both SCSS + Marko               | SCSS only                                                               |
+| 1e A11y attributes  | Required                        | N/A — no index.marko                                                    |
+| 1f Marko 5 patterns | Required                        | N/A — no index.marko                                                    |
+| 1g Style import     | Required                        | N/A — no style.ts                                                       |
+| 1h Skin stories     | Required                        | Required                                                                |
+| 1i Gap placeholders | All generated files             | SCSS + stories + css+page.marko                                         |
+| 1j Dark mode tokens | Required                        | Required                                                                |
+| 1k Contrast ratios  | Required when light-bg modifier | Required when light-bg modifier                                         |
+
+Mark inapplicable checks as `✅ N/A — <scope> scope` in the report.
+
+---
+
+## Layer 1 — Manifest fidelity (always runs)
+
+For each check below, read the relevant generated file and compare against the manifest.
+Record every failure — do not stop at the first one.
+
+### 1a — File presence
+
+Verify every expected file exists on disk. Expected files depend on what the manifest
+indicates was built:
+
+| Condition                                 | Expected files                                                               |
+| ----------------------------------------- | ---------------------------------------------------------------------------- |
+| Always                                    | `packages/evo-marko/src/tags/<name>/index.marko`                             |
+| Always                                    | `packages/evo-marko/src/tags/<name>/style.ts`                                |
+| Always                                    | `packages/evo-marko/src/tags/<name>/test/test.server.ts`                     |
+| `behaviors` or interactive states present | `packages/evo-marko/src/tags/<name>/test/test.browser.ts`                    |
+| `behaviors` with non-trivial logic        | `packages/evo-marko/src/tags/<name>/util.ts`                                 |
+| Always                                    | `packages/evo-react/src/<name>/index.tsx`                                    |
+| `figma.*` or `tokens` non-null            | `packages/skin/src/sass/<block>/<block>.scss`                                |
+| Always                                    | `packages/skin/src/sass/<block>/stories/<block>.stories.js` (or split files) |
+| Always                                    | `packages/evo-marko/src/tags/<name>/<name>.stories.ts`                       |
+| Always                                    | `packages/evo-react/src/<name>/<basename>.stories.tsx`                       |
+
+**Failure:** any expected file is missing.
+
+### 1b — Props coverage (index.marko)
+
+Read `index.marko`. For each prop in `manifest.props[]`:
+
+- The `Input` interface must declare the prop with the correct type
+- Enum props must use a union literal type (e.g. `"single" | "multiple"`)
+- Required props must not have `?` optional marker
+- Optional props must have `?`
+
+For each `a11yProp` in `manifest.a11yProps[]`:
+
+- Must appear in the `Input` interface
+- If `required: true` → no `?`
+- If `allowNull: true` → type must include `| null`
+
+**Failure:** prop missing from `Input`, wrong type, wrong optionality.
+
+### 1c — Slots coverage (index.marko)
+
+For each slot in `manifest.slots[]`:
+
+- `type: "named-attrtag"` → must appear as `Marko.AttrTag<...>` in `Input`
+- `type: "default"` → component uses `input.content` (no declaration in `Input`)
+- `required: true` → no `?` on the slot prop
+
+**Failure:** named slot missing from `Input`, wrong type.
+
+### 1d — BEM coverage (index.marko + scss)
+
+Read `manifest.bem`. Check `index.marko`:
+
+- Root element must apply `manifest.bem.block` as a class
+- Each modifier in `manifest.bem.modifiers[]` must have conditional class logic
+- Each element in `manifest.bem.elements[]` must appear somewhere in the template
+
+Check `<block>.scss` (if generated):
+
+- `.${block}` rule must exist
+- Each modifier in `manifest.bem.modifiers[]` must have a `.${block}--${modifier}` rule
+- Each element in `manifest.bem.elements[]` must have a `.${block}__${element}` rule
+
+**Failure:** BEM block/modifier/element missing from template or SCSS.
+
+### 1e — A11y attributes (index.marko)
+
+Read `manifest.a11y`. Check `index.marko`:
+
+- If `a11y.role` is non-null and `a11y.explicitRole: true` → `role="..."` attribute present on root
+- If `a11y.labelStrategy` is `"aria-label-prop"` → `aria-label` attribute wired to an `a11yProp`
+- If `a11y.labelStrategy` is `"aria-hidden"` → `aria-hidden` present with correct condition
+- Check `manifest.a11y.ariaAttributes[]` — each listed attribute must appear in the template
+
+**Failure:** required ARIA attribute missing or wired to wrong prop.
+
+### 1f — No Marko 5 patterns (index.marko)
+
+Scan `index.marko` for forbidden patterns:
+
+- `$ let` or `$ const` or `$ var` (scriptlet syntax)
+- `this.emit(`, `this.state`, `this.setState`
+- `renderBody` (use `content` instead)
+- `<if(` (must be `<if=`)
+- `browser.json` or `component.ts` referenced or imported
+
+**Failure:** any forbidden pattern found.
+
+### 1g — Style import (style.ts)
+
+Read `style.ts`. Must contain exactly:
+
+```ts
+import "@ebay/skin/<block>";
+```
+
+where `<block>` matches `manifest.bem.block`.
+
+**Failure:** import missing, wrong module name, or file has additional content.
+
+### 1h — Skin storybook required stories (stories js file)
+
+Read the skin stories file. Verify:
+
+- At least one story covers the base/default rendering
+- An export named `RTL` exists
+- An export named `textSpacing` exists and applies `demo-a11y-text-spacing` to the root element
+- All exports are zero-argument functions (no `args`, no `argTypes` in default export)
+
+**Failure:** `RTL` or `textSpacing` missing; stories use wrong format.
+
+### 1i — No unresolved gap placeholders in code
+
+Scan all generated files for strings that suggest a gap was left unresolved:
+
+- `TODO:`, `FIXME:`, `<ENGINEER>`, `<FILL IN>`, `???`, `__PLACEHOLDER__`
+
+Also scan SCSS files for hardcoded value variables — these are a sign a missing token was worked around instead of blocked:
+
+```bash
+grep -rn "^\$_" packages/skin/src/sass/<block>/
+```
+
+**Failure:** any such string found (note exact file and line). Hardcoded `$_` variables in SCSS are a blocking failure — they indicate the missing token blocker in evo-static-component was bypassed.
+
+### 1j — Dark mode foreground token coverage (always runs when SCSS was generated)
+
+For every BEM modifier that was added or modified in this run, inspect the SCSS to
+determine its background color token. Then:
+
+1. **Identify whether the background is light or dark** by checking the token's resolved
+   value in `packages/skin/dist/bundles/skin-default.css` or the token dist files.
+   - Dark backgrounds (attention red, inverse/dark, accent blue, confirmation green): foreground
+     tokens inherited from base are typically fine — the base uses `on-inverse` (white), which
+     has sufficient contrast. Mark this sub-check ✅.
+   - Light/warm backgrounds (yellow, white, cream, light-tinted — e.g. `--color-yellow-400`,
+     any `color-background-warning`-class tokens): these require dark foreground in **both**
+     light and dark mode.
+
+2. **For light-background modifiers**, grep all four theme token source files:
+
+   ```bash
+   grep "foreground-on-<type>" packages/skin/src/tokens/evo-light.scss
+   grep "foreground-on-<type>" packages/skin/src/tokens/evo-dark.scss
+   grep "foreground-on-<type>" packages/skin/src/tokens/evo-light-class.scss
+   grep "foreground-on-<type>" packages/skin/src/tokens/evo-dark-class.scss
+   ```
+
+   where `<type>` is the modifier name or the semantic category (e.g. `warning`).
+
+   **All four files must define the token.** The `evo-light-class` and `evo-dark-class`
+   files scope their definitions to `.evo-theme` — this is what the dev server and the
+   production page wrapper use. Tokens defined only in `evo-light`/`evo-dark` (`:root`
+   scope) are invisible to `.evo-theme` elements in the page.
+
+3. **Verify the token value is stable across modes.** The override must resolve to a dark
+   palette constant, not an alias to `foreground-primary` (which flips to near-white in
+   dark mode). Acceptable: `var(--color-neutral-800)`. Not acceptable: `var(--color-foreground-primary)`.
+
+4. **Check for link/button specificity gaps.** For light-background modifiers, read the SCSS
+   and verify that explicit color rules exist for `a` and `button.fake-link` within the modifier:
+   ```bash
+   grep "\.${block}--<modifier> a\b\|\.${block}--<modifier> button\.fake-link" \
+     packages/skin/src/sass/<block>/<block>.scss
+   ```
+   The base `.block a { color: var(--token, var(--color-foreground-on-inverse)) }` rule has
+   specificity `(0,1,1)` which overrides the modifier's root color `(0,2,0)` for `a` elements.
+   Without explicit `.modifier a` and `.modifier button.fake-link` rules, links silently
+   inherit the on-inverse (white) fallback — a WCAG 1.4.3 failure on a light background.
+
+**Failure conditions:**
+
+- A light-background modifier's foreground token is absent from any of the four theme files
+- The token's value is an alias to `foreground-primary` or another adaptive token
+- No explicit `.modifier a` / `.modifier button.fake-link` color rules in the SCSS
+
+### 1k — WCAG contrast ratios for light-background modifiers
+
+**Only runs when 1j identifies at least one light-background modifier.**
+
+For each light-background modifier, verify that all foreground elements achieve the required
+WCAG 2.2 AA contrast ratios against the resolved background color. Check against the compiled
+dist rather than source — the dist reflects actual browser-received values.
+
+1. **Get the resolved background color** from `skin-default.css`:
+
+   ```bash
+   grep -A 3 "\.${block}--<modifier>" packages/skin/dist/bundles/skin-default.css | grep background-color
+   ```
+
+   Resolve the token chain to a hex value using `dist/tokens/evo-light.css`.
+
+2. **For each foreground element**, verify minimum contrast ratios (WCAG 2.2 AA):
+   | Element | Minimum ratio |
+   |---|---|
+   | Title / body text | 4.5:1 |
+   | Link text (`a`) | 4.5:1 |
+   | Button-as-link (`.fake-link`) | 4.5:1 |
+   | Icon / non-text graphic (SVG) | 3.0:1 |
+   | Focus outline | 3.0:1 |
+
+3. **Calculate contrast ratio** using the WCAG relative luminance formula, or look up the
+   token pair in the design system's contrast table. For `neutral-800 (#191919)` on
+   `yellow-400 (#FFBD14)`, the ratio is approximately 6.3:1 (passes all thresholds).
+
+4. **Check dark mode separately.** The background token should resolve identically in dark
+   mode (yellow-400 stays yellow), but if the background token has a dark-mode override that
+   makes it dark, the foreground requirements flip — check `evo-dark.css` to confirm.
+
+**Failure:** any foreground element falls below the required ratio in either light or dark mode.
+Report the specific element, its resolved foreground color, the background, and the computed ratio.
+
+---
+
+## Layer 2 — Reference fidelity (only when `reference` is provided)
+
+Compare the generated component against the reference component at
+`packages/ebayui-core/src/components/<reference>/` (Marko 5 source).
+
+This layer is **informational only** — it does not block. Report findings, do not fail.
+
+### 2a — Structural delta
+
+Compare `index.marko` against the reference template:
+
+- List props present in the reference but absent from the generated component
+- List props present in the generated component but absent from the reference
+- Note any significant structural differences (different root element, missing branches)
+
+### 2b — BEM delta
+
+Compare BEM classes used in the generated `index.marko` against the reference:
+
+- Missing classes (in reference, not in generated)
+- Added classes (in generated, not in reference)
+
+### 2c — Deviation score
+
+Compute a rough fidelity score: `matching_features / total_reference_features * 100`.
+Features = props + slots + BEM modifiers + a11y attributes.
+
+Report as: `Fidelity: 87% (13/15 features matched)` with a brief delta summary.
+
+---
+
+## Output format
+
+Print a structured report and stop. Do not suggest fixes inline — the engineer decides
+what to do with failures.
+
+```
+## QA Report: $COMPONENT  [scope: <full|static|interactive|style>]
+
+─── Layer 1: Manifest Fidelity ────────────────────────────────
+
+1a  File presence      [✅ All present | ✅ N/A — <scope> scope | 🔴 Missing: <file>]
+1b  Props coverage     [✅ Passed | ✅ N/A — static scope | 🔴 N issue(s)]
+1c  Slots coverage     [✅ Passed | ✅ N/A — static scope | 🔴 N issue(s)]
+1d  BEM coverage       [✅ Passed | 🔴 N issue(s)]
+1e  A11y attributes    [✅ Passed | ✅ N/A — static scope | 🔴 N issue(s)]
+1f  Marko 5 patterns   [✅ None found | ✅ N/A — static scope | 🔴 Found: <pattern> in <file>:<line>]
+1g  Style import       [✅ Correct | ✅ N/A — static scope | 🔴 <issue>]
+1h  Skin stories       [✅ Passed | 🔴 N issue(s)]
+1i  Gap placeholders   [✅ None found | 🔴 Found in <file>:<line>]
+1j  Dark mode tokens   [✅ Passed | ✅ N/A — no light-bg modifiers | 🔴 N issue(s)]
+1k  Contrast ratios    [✅ Passed | ✅ N/A — no light-bg modifiers | 🔴 N issue(s): <element> <fg>/<bg> = X.X:1, need Y.Y:1]
+
+Layer 1 result: [✅ PASSED | 🔴 FAILED — N check(s) failed]
+
+[If failures: list each with file path, specific field/line, and what was expected vs. found]
+
+─── Layer 2: Reference Fidelity ───────────────────────────────
+
+[✅ N/A — no reference provided]
+
+[or:]
+
+Fidelity: XX% (N/M features matched)
+
+Props delta:
+  + Added:   <list>
+  − Missing: <list>
+
+BEM delta:
+  + Added:   <list>
+  − Missing: <list>
+
+Structural notes:
+  <any significant differences worth flagging>
+
+Layer 2 result: Informational only — does not block.
+
+────────────────────────────────────────────────────────────────
+```
+
+---
+
+## Completion record — mandatory final step
+
+After printing the QA Report, write the result to the pipeline state file.
+The orchestrator reads this record — it does not read your prose output.
+
+> **Before running:** Substitute the actual value of `$COMPONENT`.
+> Populate `issues[]` with the failed check IDs (e.g. `"1b"`, `"1d"`) if any checks failed.
+
+```bash
+node -e "
+const fs = require('fs');
+const comp = '$COMPONENT';
+const p = \`src/routes/_index/components/\${comp}/pipeline-state.json\`;
+const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+const issues = [];
+// Add each failed check ID to issues[] (e.g. issues.push('1b: Props coverage — aria-label missing'))
+s.steps['15'] = {
+  status: issues.length === 0 ? 'complete' : 'failed',
+  completedAt: new Date().toISOString(),
+  checks: 11,
+  issues
+};
+s.updatedAt = new Date().toISOString();
+fs.writeFileSync(p, JSON.stringify(s, null, 2));
+console.log('Step 15 QA completion record written.');
+"
+```
+
+**If all checks passed:** `issues` is empty → `status: "complete"`.
+**If any Layer 1 checks failed:** populate `issues[]` → `status: "failed"`.
+Layer 2 failures are informational and do not set `status: "failed"`.
diff --git a/.claude/skills/evo-react-component/SKILL.md b/.claude/skills/evo-react-component/SKILL.md
new file mode 100644
index 0000000000..15d18b252e
--- /dev/null
+++ b/.claude/skills/evo-react-component/SKILL.md
@@ -0,0 +1,333 @@
+---
+name: evo-react-component
+description: >
+  Generates the React 19 structural layer for a new evo-web component from an
+  approved manifest.json. Produces index.tsx (React 19 component), and
+  __tests__/index.spec.tsx (Vitest test scaffold). Called inline by /evo-component
+  as Step 5. Use this skill whenever the user says "generate the React layer",
+  "create the React files from the manifest", "generate the evo-react component",
+  or when /evo-component delegates Step 5 to this skill. Do NOT confuse with
+  /evo-migrate-react which ports existing ebayui-core-react components — this
+  skill generates new components from scratch.
+---
+
+# React 19 Generation from manifest.json
+
+This skill translates a locked `manifest.json` into a production-ready React 19
+component in the `@evo-web/react` package. All design decisions were made by
+the engineer during manifest review. Your job is accurate translation, not
+interpretation.
+
+**Output location:** `packages/evo-react/src/<component-name>/`
+
+**Output files:**
+
+- `index.tsx` — React 19 component (ESM, native `ref`, no `forwardRef`)
+- `__tests__/index.spec.tsx` — Vitest + Testing Library test scaffold
+
+There is **no** CommonJS build target, no `forwardRef`, no external MakeupJS
+dependency — those are ebayui-core-react patterns. This is the new ESM stack.
+
+---
+
+## Step 1 — Check for scaffold files, then read the manifest
+
+**Check for scaffold files first.** If the orchestrator ran `generate-component-scaffold.ts`
+(Step 6.5), a scaffold file already exists at the target path. If it exists, read it
+before proceeding — do not regenerate the deterministic parts it contains.
+
+```
+packages/evo-react/src/<name>/index.tsx — if present, read and complete the TODO sections only
+```
+
+When the scaffold file exists, your job is **completion, not generation**: read the existing
+file, find the `// TODO:` sections, and fill them in. The Props interface, skin CSS import,
+and ARIA comment are already correct — do not re-derive or overwrite them. Only write the
+component body (the JSX return, state, event handlers) and any imports the body requires.
+
+Read `src/routes/_index/components/[component-name]/manifest.json` in full. Extract:
+
+- `component.name` — kebab-case name (e.g. `evo-avatar`)
+- `component.displayName` — PascalCase component name (e.g. `EvoAvatar`)
+- `rootElement.default` — the underlying HTML element (`div`, `button`, `span`, etc.)
+- `rootElement.excludedAttributes` — which native attrs the component manages internally
+- `props[]` + `a11yProps[]` — component prop definitions
+- `slots[]` — how content regions map to React children patterns
+- `bem.block` — for the skin CSS import path
+- `a11y` — role, label strategy, aria attributes
+- `behaviors[]` + `keyboardModel` — whether event handlers / keyboard logic is needed
+- `stateLiftingCallbacks[]` — controlled props (need both value prop + onChange handler)
+- `gaps` — medium-confidence fields become `// TODO: verify` inline comments
+
+---
+
+## Step 2 — Generate `index.tsx`
+
+### File structure
+
+```tsx
+import "@ebay/skin/<bem.block>";
+import React from "react";
+
+// Props type
+export interface <DisplayName>Props extends Omit<React.ComponentProps<"div">, "role"> {
+    // props from manifest
+}
+
+// Component
+export function <DisplayName>({ ..., ref, ...rest }: <DisplayName>Props) {
+    // ...
+    return (
+        <div ref={ref} {...rest} ...>
+            {/* ... */}
+        </div>
+    );
+}
+```
+
+### Skin CSS import
+
+Always import skin CSS directly in the component file (not in a separate style file):
+
+```tsx
+import "@ebay/skin/<bem.block>";
+```
+
+### Props interface
+
+Derive from `manifest.props[]` + `manifest.a11yProps[]`:
+
+```tsx
+export interface EvoAvatarProps extends Omit<
+  React.ComponentProps<"div">,
+  "role" | "aria-label"
+> {
+  size?: 32 | 40 | 48 | 56 | 64 | 96 | 128;
+  color?: string;
+  username?: string;
+  a11yText: string | null; // required a11yProp
+  onLoad?: (event: Event) => void; // event from manifest.events[]
+}
+```
+
+**Prop type mapping:**
+
+| manifest `type`    | TypeScript type          |
+| ------------------ | ------------------------ |
+| `"string"`         | `string`                 |
+| `"number"`         | `number`                 |
+| `"boolean"`        | `boolean`                |
+| `"enum"` + values  | union of string literals |
+| `"string \| null"` | `string \| null`         |
+
+**`Omit<>` rules:** Only omit attributes that the component hardcodes and must
+not accept from consumers (e.g. `"role"` if `a11y.explicitRole` is true and
+a fixed role is always applied). Read `manifest.rootElement.excludedAttributes`.
+
+**Slots:** Named slots from `manifest.slots[]` become named `ReactNode` props
+(e.g. `header?: ReactNode`) or a standard `children` prop for the default slot.
+If a slot has `type: "named-attrtag"` in the manifest, it maps to a named prop
+in React, not `children`.
+
+**Controlled props:** If `manifest.stateLiftingCallbacks[]` is present, the prop
+is controllable. Follow React's controlled/uncontrolled pattern:
+
+```tsx
+// e.g. for open: controlled if onOpenChange is provided, otherwise internal state
+const [isOpen, setIsOpen] = React.useState(defaultOpen ?? false);
+const open = onOpenChange !== undefined ? (openProp ?? false) : isOpen;
+```
+
+**Required a11yProps:** These are always required (no `?`). A11yProps with
+`allowNull: true` use `string | null` type.
+
+### Component function
+
+Use React 19's native `ref` — no `forwardRef`:
+
+```tsx
+export function EvoAvatar({
+    size,
+    color,
+    username,
+    a11yText,
+    className,
+    children,
+    ref,
+    ...rest
+}: EvoAvatarProps) {
+```
+
+**BEM classes:**
+
+```tsx
+const classes = ["avatar", size && `avatar--${size}`, className]
+  .filter(Boolean)
+  .join(" ");
+```
+
+**ARIA from `manifest.a11y`:**
+
+- If `labelStrategy === "aria-label-prop"`: `aria-label={a11yText ?? undefined}`
+- If `allowNull: true` on a11yText: also `aria-hidden={a11yText === null ? "true" : undefined}`
+- Each entry in `manifest.a11y.ariaAttributes[]` maps to a JSX attribute
+
+**Spread to root:** Always spread `...rest` onto the root element so consumers
+can pass native HTML attributes:
+
+```tsx
+<div {...rest} ref={ref} className={classes} role="img" aria-label={...}>
+```
+
+**Keyboard handlers:** If `manifest.keyboardModel` is present, wire `onKeyDown`
+on the appropriate element. Map `manifest.keyboardInteractions[]` to key checks:
+
+```tsx
+onKeyDown={(e) => {
+    if (e.key === "Escape") onEscape?.(e);
+    if (e.key === "Enter" || e.key === " ") onActivate?.(e);
+}}
+```
+
+**Medium-confidence gaps:** Add `{/* TODO: verify — [gap note] */}` next to
+the affected JSX attribute or prop.
+
+### Return value
+
+Return JSX matching `manifest.rootElement.default`. Render slots/children in
+the correct position:
+
+```tsx
+return (
+  <div
+    {...rest}
+    ref={ref}
+    className={classes}
+    role="img"
+    aria-label={a11yText ?? undefined}
+  >
+    {image ? (
+      <img src={image.src} alt="" onLoad={image.onLoad} />
+    ) : username ? (
+      <span>{username.charAt(0).toUpperCase()}</span>
+    ) : (
+      <EvoIconAvatarSignedOut />
+    )}
+    {children}
+  </div>
+);
+```
+
+---
+
+## Step 3 — Generate `__tests__/index.spec.tsx`
+
+Scaffold Vitest + Testing Library tests. One describe block, tests for each
+key variant from `manifest.variants[]` and key states from `manifest.states[]`.
+
+```tsx
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { EvoAvatar } from "../index";
+
+describe("EvoAvatar", () => {
+  it("renders with accessible label", () => {
+    render(<EvoAvatar a11yText="Profile photo of Alex" />);
+    expect(
+      screen.getByRole("img", { name: "Profile photo of Alex" }),
+    ).toBeInTheDocument();
+  });
+
+  it("renders decorative when a11yText is null", () => {
+    const { container } = render(<EvoAvatar a11yText={null} />);
+    const el = container.querySelector(".avatar");
+    expect(el).toHaveAttribute("aria-hidden", "true");
+  });
+
+  // One it() per variant/state that has a distinct visual or ARIA change
+  // Structure: render → query → assert. Do not assert implementation details.
+});
+```
+
+If `manifest.keyboardModel` is present, add keyboard interaction tests:
+
+```tsx
+import userEvent from "@testing-library/user-event";
+
+it("closes on Escape", async () => {
+  render(<EvoDialog open a11yCloseText="Close" />);
+  await userEvent.keyboard("{Escape}");
+  // assert closed state
+});
+```
+
+---
+
+## Key React 19 / evo-react conventions
+
+**No `forwardRef`:** React 19 supports native `ref` as a prop. Never wrap with
+`React.forwardRef()`.
+
+**ESM only:** No `require()`, no CommonJS exports.
+
+**Skin CSS in component file:** `import "@ebay/skin/<block>"` at the top of
+`index.tsx` — not in a separate file.
+
+**No MakeupJS:** Unlike ebayui-core-react, evo-react does not depend on
+`@ebay/makeup-*` utilities. Implement focus management directly if needed.
+
+**Spread `...rest` always:** Consumers must be able to pass `data-*`, `id`,
+`tabIndex`, etc. to the root element. Always include `{...rest}` on the root.
+
+**`ref` on root:** The `ref` prop should attach to the root DOM element via
+`<div ref={ref} ...>`.
+
+---
+
+## Output verification
+
+After generating, confirm:
+
+- `index.tsx` exports a named function component matching `component.displayName`
+- Props interface covers all manifest props + a11yProps with correct types
+- `Omit<>` only for attributes in `manifest.rootElement.excludedAttributes`
+- `...rest` spread on root element; `ref` on root
+- ARIA attributes from `manifest.a11y` are present with correct conditions
+- Skin CSS imported directly in the component file
+- No `forwardRef`, no CommonJS, no MakeupJS
+- Test file has at least one test per key variant
+- `// TODO: verify` comments present for medium-confidence gaps
+
+Report generated file paths to the orchestrator.
+
+---
+
+## Completion record — mandatory final step
+
+After output verification passes, write the completion record.
+
+> **Before running:** Substitute the actual component name for `$COMPONENT` and the bare kebab-case component name (e.g. `accordion`) for `<NAME>`.
+
+```bash
+node -e "
+const fs = require('fs');
+const comp = '$COMPONENT';
+const p = \`src/routes/_index/components/\${comp}/pipeline-state.json\`;
+const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+const name = '<NAME>';
+s.steps['10'] = {
+  status: 'complete',
+  completedAt: new Date().toISOString(),
+  outputs: [
+    \`packages/evo-react/src/\${name}/index.tsx\`,
+    \`packages/evo-react/src/\${name}/__tests__/index.spec.tsx\`,
+  ]
+};
+s.updatedAt = new Date().toISOString();
+fs.writeFileSync(p, JSON.stringify(s, null, 2));
+console.log('Step 10 completion record written.');
+"
+```
+
+If any output verification check failed (forwardRef found, export missing, etc.),
+write `status: "failed"` with the failing check as the `error` field instead.
diff --git a/.claude/skills/evo-react-storybook/SKILL.md b/.claude/skills/evo-react-storybook/SKILL.md
new file mode 100644
index 0000000000..23646ec5aa
--- /dev/null
+++ b/.claude/skills/evo-react-storybook/SKILL.md
@@ -0,0 +1,292 @@
+---
+name: evo-react-storybook
+description: >
+  Generate React Storybook story files for a new evo-web component in the evo-react package.
+  Reads manifest.json for props/argTypes and the generated index.tsx for component types,
+  writes a CSF3 .stories.tsx file under packages/evo-react/src/<name>/.
+  Use this whenever the user says "generate React stories", "create React storybook",
+  "scaffold the React stories", or when the evo-component orchestrator invokes Step 9.
+---
+
+# evo-react-storybook
+
+You are scaffolding the React Storybook for a new evo-react component. Stories are CSF3
+TypeScript objects — no external helpers, no decorator imports, everything self-contained.
+
+## Step 1 — Read the manifest and component types
+
+Read `src/routes/_index/components/$COMPONENT/manifest.json`. Extract:
+
+- `component.name` — tag name (e.g. `evo-accordion`)
+- `component.displayName` — for the Storybook title (e.g. `EvoAccordion`)
+- `component.category` — maps to the Storybook title prefix
+- `component.description` — for the docs description block
+- `props[]` — name, type, values (enum), default, required, description
+- `a11yProps[]` — required i18n string props
+- `slots[]` — determines how children/render props are handled
+
+Also read the generated `packages/evo-react/src/<name>/index.tsx` to confirm the exported
+component name(s) and prop types — these drive `Meta<typeof EvoXxx>` and `argTypes`.
+
+## Step 2 — Check the docs page
+
+Check for `src/routes/_index/components/<block>/react+page.marko`.
+
+These pages rarely contain markup examples — they link to the external storybook. Scan for
+any evo-react-specific usage notes. More useful: the CSS docs findings from `css+page.marko`
+(if available from an earlier step) tell you which variants deserve dedicated stories.
+
+## Step 3 — Determine Storybook title
+
+Map `component.category` to the sidebar category using these exact strings (they match the
+`storySort` order in `preview.tsx`):
+
+| manifest category  | Storybook title prefix    |
+| ------------------ | ------------------------- |
+| `buttons`          | `buttons`                 |
+| `form`             | `form input`              |
+| `graphics & icons` | `Graphics & Icons`        |
+| `layout`           | `building blocks`         |
+| `dialogs`          | `dialogs`                 |
+| `navigation`       | `navigation & disclosure` |
+| `notices`          | `notices & tips`          |
+| `progress`         | `progress`                |
+| `building blocks`  | `building blocks`         |
+| `media`            | `media`                   |
+| `data display`     | `data display`            |
+
+Title format: `"<prefix>/<ComponentName>"` — e.g. `"buttons/EvoAccordion"` or `"form input/EvoTextbox"`.
+
+## Step 4 — Write the stories file
+
+Create `packages/evo-react/src/<name>/<basename>.stories.tsx`.
+The basename matches the component file name (e.g. if the component is `accordion.tsx`,
+the stories file is `accordion.stories.tsx`).
+
+### File structure
+
+```tsx
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { EvoAccordion } from "./accordion"; // adjust to actual export name(s)
+
+const meta: Meta<typeof EvoAccordion> = {
+  title: "<prefix>/<ComponentName>",
+  component: EvoAccordion,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+<one-sentence description from manifest>
+
+## Usage
+\`\`\`tsx
+import { EvoAccordion } from "@evo-web/react";
+\`\`\`
+        `,
+      },
+    },
+  },
+  argTypes: {
+    // — one entry per prop — see reference below
+  },
+  args: {
+    // meta-level defaults applied to every story
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EvoAccordion>;
+
+export const Default: Story = {
+  args: {
+    // story-level overrides; usually just children for simple components
+  },
+};
+```
+
+### argTypes reference
+
+**String enum (select):**
+
+```tsx
+type: {
+  control: "select",
+  options: ["single", "multiple"],
+  description: "Controls whether one or multiple items can be expanded.",
+  table: { defaultValue: { summary: '"single"' } },
+},
+```
+
+**Boolean:**
+
+```tsx
+collapsible: {
+  control: "boolean",
+  description: "Whether expanded items can be collapsed.",
+  table: { defaultValue: { summary: "true" } },
+},
+```
+
+**Free string (including `children` and `a11yText`):**
+
+```tsx
+children: {
+  control: "text",
+  description: "Content rendered inside the component.",
+},
+a11yText: {
+  control: "text",
+  description: "Accessible label for screen readers. Required.",
+},
+```
+
+**Number:**
+
+```tsx
+count: {
+  control: "number",
+  description: "The numeric value to display.",
+  table: { defaultValue: { summary: "undefined" } },
+},
+```
+
+**Event callbacks:** Do NOT define explicit argTypes for event callbacks — `react-docgen-typescript`
+auto-discovers them from the TypeScript types. Only add an argType for an event if you
+want it explicitly in the controls panel (uncommon).
+
+**Pass-through HTML attributes:** Not listed individually — they are discovered automatically
+from the TypeScript types when the component extends native HTML props.
+
+### `args` defaults
+
+Set `args` at the meta level for props that every story should have a sensible default for:
+
+- `children` → a realistic label string (`"Accordion"`, `"Submit"`, not `"string"`)
+- Required a11y props → realistic English defaults (`"Close dialog"`, `"Loading"`)
+- Enum props → the manifest default value
+
+Story-level `args` only override what differs from the meta defaults.
+
+### Additional stories
+
+**Simple override:** Just add `args`:
+
+```tsx
+export const Secondary: Story = {
+  args: { priority: "secondary" },
+};
+```
+
+**Complex children or JSX wrapper:** Use `render`:
+
+```tsx
+export const WithIcon: Story = {
+  render: (args) => (
+    <EvoAccordion {...args}>
+      <EvoAccordionItem>
+        <EvoAccordionTitle>Section one</EvoAccordionTitle>
+        <EvoAccordionContent>Content here.</EvoAccordionContent>
+      </EvoAccordionItem>
+    </EvoAccordion>
+  ),
+};
+```
+
+Use `render` when:
+
+- Children must be JSX nodes, not a string
+- The component requires a context provider or layout wrapper
+- Multiple sub-components must be composed together (compound component)
+
+**Controlled/stateful example:** Use React state inside `render`:
+
+```tsx
+export const Controlled: Story = {
+  render: (args) => {
+    const [open, setOpen] = React.useState(false);
+    return (
+      <>
+        <EvoButton onClick={() => setOpen(true)}>Open</EvoButton>
+        <EvoDialog {...args} open={open} onClose={() => setOpen(false)} />
+      </>
+    );
+  },
+};
+```
+
+Import `React` from `"react"` at the top of the file when using hooks.
+
+### How many stories to create
+
+| Component complexity                      | Minimum stories                                    |
+| ----------------------------------------- | -------------------------------------------------- |
+| Static, no variants                       | `Default` only                                     |
+| Has enum prop with distinct visual states | `Default` + one per meaningful option              |
+| Interactive (open/close, check/uncheck)   | `Default` + `Controlled`                           |
+| Compound (accordion, tabs, dialog)        | `Default` with full child structure + key variants |
+
+Keep to ≤ 6 stories — engineers explore variants through the controls panel. Stories
+are for documenting intent and verifying the key visual states, not exhaustive enumeration.
+
+## Step 5 — Verify
+
+Run the type-checker on the new stories file:
+
+```bash
+npx tsc --noEmit -p packages/evo-react/tsconfig.json
+```
+
+Fix type errors inline. Common issues:
+
+- Incorrect import path or export name from the component file
+- `argTypes` key not matching a prop in the component's TypeScript type
+- `args` value of wrong type for a prop
+
+Stories are non-blocking — note type errors in the summary and move on if the fix requires
+resolving an upstream type issue in the component itself.
+
+---
+
+## Output checklist
+
+- [ ] `packages/evo-react/src/<name>/<basename>.stories.tsx` created
+- [ ] `Meta<typeof EvoXxx>` with correct `title`, `component`, `tags: ["autodocs"]`
+- [ ] `parameters.docs.description.component` includes description + Usage import block
+- [ ] `argTypes` covers all props from manifest (enum → `"select"`, bool → `"boolean"`, string → `"text"`)
+- [ ] Required a11y props included in `argTypes` and `args` with realistic defaults
+- [ ] `Default` story present with sensible `args`
+- [ ] Additional stories added for key variants and interactive states
+- [ ] Complex children/stateful examples use `render` function
+- [ ] No shared utilities imported (self-contained)
+- [ ] Type-check passes (or errors noted in summary)
+
+---
+
+## Completion record — mandatory final step
+
+After story files are verified on disk, write the completion record.
+
+> **Before running:** Substitute the actual component name for `$COMPONENT` and the bare kebab-case component name (e.g. `accordion`) for `<NAME>`. Replace `<basename>` with the actual story filename (typically the component name).
+
+```bash
+node -e "
+const fs = require('fs');
+const comp = '$COMPONENT';
+const p = \`src/routes/_index/components/\${comp}/pipeline-state.json\`;
+const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+const name = '<NAME>';
+s.steps['11'] = {
+  status: 'complete',
+  completedAt: new Date().toISOString(),
+  outputs: [
+    \`packages/evo-react/src/\${name}/<basename>.stories.tsx\`,
+  ]
+};
+s.updatedAt = new Date().toISOString();
+fs.writeFileSync(p, JSON.stringify(s, null, 2));
+console.log('Step 11 completion record written.');
+"
+```
+
+If story generation failed, write `status: "failed"` with an `error` field instead.
diff --git a/.claude/skills/evo-static-component/SKILL.md b/.claude/skills/evo-static-component/SKILL.md
new file mode 100644
index 0000000000..0e7dd496dc
--- /dev/null
+++ b/.claude/skills/evo-static-component/SKILL.md
@@ -0,0 +1,480 @@
+---
+name: evo-static-component
+description: >
+  Generates the static layer for a new evo-web component: canonical HTML
+  structure for every variant (always) and SCSS when design tokens or Figma
+  info is available (conditional). Always runs first in the pipeline — the
+  HTML it establishes is the authoritative reference that /evo-static-storybook,
+  /evo-marko-component, /evo-react-component, and /evo-docs-hookup all read
+  from. Use this whenever the user says "generate the static layer", "create
+  the static component", "build the CSS component", "write the skin layer", or
+  when the evo-component orchestrator invokes Step 4.
+---
+
+# evo-static-component
+
+You are generating the static (CSS) layer — the foundation that all other
+layers wrap. This skill always runs and always produces HTML. SCSS is
+conditional on token/Figma availability.
+
+**Two phases:**
+
+- **Phase 1 (always):** Establish canonical HTML structure for every variant
+- **Phase 2 (conditional):** Generate SCSS when `manifest.tokens` or
+  `figma.fileKey` / `figmaUrl` is present
+
+The HTML produced in Phase 1 is the authoritative source of truth.
+Downstream skills read from this output — they do not re-derive structure
+from the manifest independently.
+
+---
+
+## Step 1 — Read the manifest
+
+Read `src/routes/_index/components/$COMPONENT/manifest.json`. Extract:
+
+- `bem.block` — root CSS class (e.g. `"accordion"`)
+- `bem.elements[]` — element names and descriptions
+- `bem.modifiers[]` — modifier names and when they apply
+- `rootElement.default` — HTML element for the root (`div`, `button`, `span`, etc.)
+- `variants[]` — distinct rendering modes needing separate HTML examples
+- `states[]` — visual/interactive states (disabled, expanded, selected, etc.)
+- `a11y` — role, label strategy, ariaAttributes (for correct ARIA in HTML)
+- `a11yProps[]` — required text strings that drive `aria-label` etc.
+- `component.displayName` — human name for section headings
+- `tokens` — named CSS custom property map (triggers Phase 2)
+- `figma.fileKey` / `figmaUrl` — Figma reference (triggers Phase 2)
+
+---
+
+## Phase 1 — Canonical HTML structure (always runs)
+
+Produce the canonical HTML markup for each variant. This is the source of
+truth for all downstream skills — write it clearly and completely.
+
+### Rules for generating the HTML
+
+**Root element:** Use `manifest.rootElement.default`. Apply the BEM block
+class and required ARIA from `manifest.a11y`:
+
+```html
+<!-- Non-interactive, informational -->
+<div class="avatar" role="img" aria-label="Profile photo of Alex Chen">...</div>
+
+<!-- Interactive -->
+<button class="btn btn--primary" type="button">Submit</button>
+```
+
+**BEM class application:**
+
+- Block: always on root — `class="<block>"`
+- Modifier: conditional — `class="<block> <block>--<modifier>"` for each variant
+- Element: on child elements — `class="<block>__<element>"`
+
+**ARIA from `manifest.a11y`:**
+
+- Apply `role` if `a11y.explicitRole: true`
+- Apply `aria-label` / `aria-hidden` per `a11y.labelStrategy` with realistic placeholder values
+- Apply each entry in `a11y.ariaAttributes[]`
+
+**States:** Use HTML attribute selectors — not modifier classes:
+
+- Disabled: `disabled` on button; `aria-disabled="true"` on non-button
+- Expanded: `aria-expanded="true"` / `"false"`
+- Selected: `aria-selected="true"` / `"false"`
+
+**Content:** Realistic — real words and numbers, not "lorem ipsum" or "Component".
+
+### Variant catalogue
+
+Produce one clearly-labelled HTML block per variant:
+
+1. **Default** — base rendering, no modifiers
+2. One block per `manifest.variants[]` entry
+3. Key states from `manifest.states[]` that change the HTML structure
+4. **Disabled** if present in states
+5. **RTL** — base HTML wrapped in `<div dir="rtl">`
+
+Format:
+
+```
+=== Default ===
+<span class="badge" role="img" aria-label="2 notifications">2</span>
+
+=== Dot (no number) ===
+<span class="badge badge--dot" role="img" aria-label="New activity"/>
+
+=== RTL ===
+<div dir="rtl">
+  <span class="badge" role="img" aria-label="إشعاران">2</span>
+</div>
+```
+
+This labelled output is what `/evo-static-storybook`, `/evo-marko-component`,
+`/evo-react-component`, and `/evo-docs-hookup` consume directly.
+
+---
+
+## Phase 2 — SCSS (conditional)
+
+**Skip if neither `manifest.tokens` nor any Figma reference is present:**
+
+```
+⏭  SCSS deferred: no design tokens or Figma reference in manifest.
+   When the design spec is ready:
+   1. Ensure src/routes/_index/components/$COMPONENT/*.spec.json exists with a 'tokens' field
+   2. Re-run /evo-create-component-manifest $COMPONENT to update manifest.json
+   3. Re-run /evo-static-component $COMPONENT
+```
+
+### Token resolution
+
+**Gap-filling priority order — follow this strictly:**
+
+1. `manifest.tokens` map — trust it; use these directly without question
+2. `get_variable_defs` Figma call — use to catch tokens present in the design but missing from the manifest
+3. `get_design_context` screenshot + annotations — use for spacing math, border widths, typographic scale, and edge-case state details
+4. Token lookup fallback list (below) — reference for common properties when none of the above provides a value
+5. **STOP — missing token blocker:** if all four levels above fail to provide a value, do not hardcode. Document every missing token (property name + raw value from Figma) and halt with the banner below.
+
+**Token lookup — two-stop check before declaring a token missing:**
+
+When a token referenced in the manifest or spec is not found in `packages/skin/dist/tokens/`, check `node_modules/@ebay/design-tokens/dist/mixins/` before concluding it is absent. Evo themes inherit from that package without re-declaring every token, so a token can be valid and available even if it does not appear in the compiled skin token files.
+
+```bash
+grep -i "<token-name>" node_modules/@ebay/design-tokens/dist/mixins/evo-light.scss
+```
+
+Only after both checks come up empty should you treat the token as missing and fall back to the next priority level.
+
+### Figma validation (when `figma.fileKey` or `figmaUrl` present)
+
+**Determine Figma coordinates:**
+
+- If `figmaUrl` is present: extract `fileKey` and `nodeId` directly from the URL.
+  URL format: `https://www.figma.com/design/:fileKey/:fileName?node-id=1-2`
+  Convert the `node-id` query param from `-` to `:` (e.g. `1-2` → `1:2`).
+- If only `figma.fileKey` is present (no full URL): call `search_design_system` to locate the nodeId:
+  ```
+  search_design_system(query=<component display name>, fileKey=<figma.fileKey>)
+  ```
+  Use the first matching component result's nodeId.
+- If neither is available: skip Figma, proceed with manifest tokens + fallback list only, note gaps.
+
+**Run these calls in parallel:**
+
+```
+get_design_context(nodeId, fileKey, clientLanguages="scss,css", clientFrameworks="unknown")
+get_variable_defs(nodeId, fileKey)
+```
+
+**What to do with each result:**
+
+From `get_design_context` — visual confirmation and gap-filling:
+
+- Study the screenshot to verify spacing, shape, border widths, and typographic scale
+- Check if reference code mentions tokens not in your manifest `tokens` map — add them
+- Note design annotations for edge-case states (hover, disabled, focus)
+
+From `get_variable_defs` — token cross-check:
+
+- Compare manifest token names against Figma variable names
+  (translation: `color/background/primary` → `--color-background-primary`)
+- If a Figma variable is used in the design but absent from the manifest `tokens` map, add it and note it came from Figma validation
+- If a Figma value has no matching CSS custom property (e.g. a hardcoded hex), treat this as a **missing token blocker** — do not proceed to SCSS generation. Document it and halt (see missing token blocker below).
+
+### Missing token blocker
+
+When all four priority levels above fail to resolve a value, **do not generate SCSS**. Instead halt with:
+
+```
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+🔴 Missing design tokens — SCSS generation blocked
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+The following values from the design have no corresponding
+design token. The design team must add these tokens before
+SCSS can be generated — do not hardcode these values.
+
+<for each missing value>
+  Property: <CSS property, e.g. background-color>
+  Used on:  <BEM selector, e.g. .badge--warning>
+  Raw value from Figma: <hex or literal>
+  Required token name (suggested): <e.g. --color-background-warning>
+
+Resolution: Ask the design team to add the token(s) above to the
+design token system, then update manifest.json and re-run this skill.
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+```
+
+Write `status: "failed"` with an `error` field listing the missing tokens to the pipeline state file (step '4'), then stop.
+
+### Token gap-filling reference
+
+Use these only when manifest, Figma variable defs, and `@ebay/design-tokens` all fail to provide a value for **layout, spacing, and typographic properties** (not brand colors — those must have tokens):
+
+- **Background:** `--color-background-primary`, `--color-background-accent`, `--color-background-attention`, `--color-background-disabled`
+- **Foreground:** `--color-foreground-primary`, `--color-foreground-accent`, `--color-foreground-on-accent`, `--color-foreground-disabled`
+- **Border:** `--color-border-medium`, `--color-border-accent`, `--color-border-disabled`
+- **Border radius:** `--border-radius-50` (8px), `--border-radius-100` (16px), `--border-radius-150` (24px), `--border-radius-full` (9999px)
+- **Spacing:** `--spacing-25` (2px), `--spacing-50` (4px), `--spacing-100` (8px), `--spacing-150` (12px), `--spacing-200` (16px), `--spacing-300` (24px)
+- **Typography:** `--font-size-small`, `--font-size-body`, `--font-size-medium`, `--font-size-large-1`, `--font-size-large-2`
+
+### SCSS file
+
+Write `packages/skin/src/sass/<block>/<block>.scss`:
+
+```scss
+@use "../mixins/private/token-mixins";
+/* add other @use lines only if needed — e.g. @use "../variables/variables"; */
+
+.<block > {
+  /* base layout and visual styles */
+}
+
+.<block > --<modifier > {
+  /* modifier overrides — flat, never nested */
+}
+
+.<block > __<element > {
+  /* element styles */
+}
+```
+
+**Token usage — two approaches:**
+
+For most properties, use CSS custom properties directly:
+
+```scss
+.badge {
+  border-radius: var(--border-radius-50);
+  font-size: var(--font-size-body);
+  padding: var(--spacing-50) var(--spacing-100);
+}
+```
+
+For brand-critical color properties (`background-color`, `color`, `border-color`) on the
+root block — where consumers may want component-level overrides — use the two-tier mixin:
+
+```scss
+@include token-mixins.background-color-token(
+  badge-background-color,
+  color-background-attention
+);
+/* compiles to: background-color: var(--badge-background-color, var(--color-background-attention)); */
+```
+
+Skip the mixin for layout properties (padding, margin, border-radius, font-size) — those go
+as plain `var(--)`.
+
+**Hardcoded values:** Not permitted. If you find yourself reaching for a raw hex or pixel value with no token backing it, stop and trigger the missing token blocker above. Do not use `$_` file-scoped variables.
+
+**ARIA attributes as styling hooks** — prefer attribute selectors over modifier classes for state:
+
+```scss
+.btn[disabled],
+.btn[aria-disabled="true"] {
+  background-color: var(--color-background-disabled);
+  color: var(--color-foreground-disabled);
+}
+```
+
+**Do not:**
+
+- Nest BEM selectors (`&--modifier` inside the block is wrong — keep them flat)
+- Chain BEM modifiers (`.avatar--fit.avatar--green` is wrong)
+- Use presentational names (`.btn--green` is wrong; `.btn--primary` is right) — unless the modifier IS a color variant by design (e.g. avatar color variants are intentionally named by color)
+- Use `.disabled` class — use `[disabled]` or `[aria-disabled="true"]`
+- Add commented-out code
+- Write deep nesting beyond pseudo-selectors (`:hover`, `::before`, `:focus-visible`)
+
+### Bundle registration
+
+Add `@use "../<block>/<block>";` to `packages/skin/src/sass/bundles/skin-headless.scss`
+in **alphabetical order** among the existing `@use` lines.
+
+### Build verification
+
+```bash
+npm run build -w @ebay/skin
+```
+
+Fix any errors inline. Do not re-run the skill.
+
+Common failure causes:
+
+- Typo in a `var(--)` token name — cross-check against the two-stop lookup
+- Missing or wrong `@use` path
+- Unclosed brace from a nested block that should be flat
+
+---
+
+## Mandatory completion gate
+
+> ⚠️ **This skill is not done when you finish writing files.**
+> It is done when every item below is explicitly checked off.
+> Returning control to the pipeline with unchecked items is a pipeline violation.
+> Do not print the output summary until this gate is fully passed.
+
+Work through each item in order. Read the file on disk to verify each claim — do not
+rely on memory of what you wrote. If any item fails, fix it before continuing.
+
+**HTML**
+
+- [ ] HTML catalogue is written in the output and covers: Default, every modifier in `manifest.bem.modifiers[]`, RTL, and every state that changes the HTML structure
+
+**SCSS**
+
+- [ ] `packages/skin/src/sass/<block>/<block>.scss` exists on disk
+- [ ] `.${block}` base rule present in the SCSS
+- [ ] Every modifier in `manifest.bem.modifiers[]` has a `.${block}--${modifier}` rule — grep the file to confirm
+- [ ] Every element in `manifest.bem.elements[]` has a `.${block}__${element}` rule — grep the file to confirm
+- [ ] Token mixin used for `background-color`, `color`, `border-color` on root block; plain `var(--)` for layout properties
+- [ ] No BEM nesting (`&--modifier` inside block is forbidden — keep rules flat)
+
+**Dark mode token check** — run this for every modifier that sets a background-color:
+
+- [ ] If the modifier introduces a **light or warm background** (yellow, white, cream, light-tinted):
+
+  **Step 1 — Verify the token is defined in all four theme files.**
+  The skin theming system has two parallel implementations that must both be updated:
+  - `evo-light.scss` / `evo-dark.scss` — `:root`-scoped, media-query themes (production bundles)
+  - `evo-light-class.scss` / `evo-dark-class.scss` — `.evo-theme`-scoped, class-based themes (dev server and `.evo-theme` wrapper in production)
+
+  **All four files must define `--color-foreground-on-<type>`.** Missing it in the class-based pair means the dev site silently inherits the wrong foreground color even when the production bundle is correct.
+
+  ```bash
+  grep "foreground-on-<type>" packages/skin/src/tokens/evo-light.scss
+  grep "foreground-on-<type>" packages/skin/src/tokens/evo-dark.scss
+  grep "foreground-on-<type>" packages/skin/src/tokens/evo-light-class.scss
+  grep "foreground-on-<type>" packages/skin/src/tokens/evo-dark-class.scss
+  ```
+
+  If any file is missing the definition, add `--color-foreground-on-<type>: var(--color-neutral-800)` to it. **Never alias to `--color-foreground-primary`** — that token resolves to `#f7f7f7` (near-white) in dark mode and will silently fail contrast on any light background.
+
+  **Step 2 — Verify the token resolves correctly in the browser.**
+  File-level grep confirms the source exists but not that the browser receives it. The token scope must match what the page loads — `evo-light-class.scss` defines within `.evo-theme`, while `evo-light.scss` defines on `:root`. After rebuild, navigate to the CSS docs page and run:
+
+  ```js
+  getComputedStyle(
+    document.querySelector(".evo-theme") || document.documentElement,
+  )
+    .getPropertyValue("--color-foreground-on-<type>")
+    .trim();
+  // Must return a dark hex value (e.g. "#191919") — not empty string, not a light color
+  ```
+
+  An empty string means the token is missing from the class-based file. A light color (e.g. `#f7f7f7`) means it is aliasing `foreground-primary` or another adaptive token.
+
+- [ ] If the modifier only uses dark backgrounds (attention, inverse, etc.), both sub-steps pass automatically
+
+**Foreground specificity check** — run this when a modifier sets `color-token` on its root element:
+
+- [ ] If the new modifier sets text color via `color-token` on the root AND the block has existing `.${block} a { color: ... }` or `.${block} button.fake-link { color: ... }` rules:
+
+  The base `.block a` rule has specificity `(0,1,1)`, which beats the modifier's root color `(0,2,0)` for `a` elements. The modifier's text color **does not cascade to links** without an explicit override — links will silently inherit the base fallback (often `on-inverse` / white), which fails WCAG AA on a light background.
+
+  Verify explicit link/button overrides exist for the modifier:
+
+  ```bash
+  grep "\.${block}--<modifier> a\b\|\.${block}--<modifier> button\.fake-link" \
+    packages/skin/src/sass/<block>/<block>.scss
+  ```
+
+  For light-background modifiers (warning, etc.), if both `.modifier a` and `.modifier button.fake-link` color rules are absent, this is a **blocking WCAG 1.4.3 failure** — add them before proceeding.
+
+**Stories** (check only — do NOT write or edit the stories file)
+
+- [ ] Check whether `packages/skin/src/sass/<block>/stories/<block>.stories.js` exists.
+      If `RTL`, `textSpacing`, or modifier stories are absent, add a ⚠️ WARNING
+      in your output summary: "Stories incomplete — evo-static-storybook will add
+      missing exports in Step 5." Do NOT add them yourself. Story files are
+      evo-static-storybook's sole responsibility.
+
+**Docs**
+
+- [ ] `src/routes/_index/components/<name>/css+page.marko` updated with a live demo block and `<highlight-code>` snippet for every new modifier or variant
+
+**Build**
+
+- [ ] `npm run build -w @ebay/skin` passes with no errors
+- [ ] Grep `packages/skin/dist/bundles/skin-default.css` to confirm the new modifier selector is present in the compiled output
+
+Only after every box is checked, print the output summary and return.
+
+---
+
+## Output summary
+
+```
+## Static component: $COMPONENT
+
+Phase 1 — HTML structure:
+  Variants: Default, [list]
+  Root element: <element>
+  BEM block: <block>
+  ARIA: [label strategy summary]
+  [Full HTML catalogue above]
+
+Phase 2 — SCSS:
+  [✅ packages/skin/src/sass/<block>/<block>.scss written]
+  [✅ skin-headless.scss updated]
+  [⏭  Deferred — no tokens or Figma reference]
+
+Completion gate: ✅ All items passed
+```
+
+The HTML catalogue above is the canonical reference for all downstream skills.
+
+---
+
+## Completion record — mandatory final step
+
+After the output summary is printed and all items in the mandatory completion gate
+are checked off, write the completion record to the pipeline state file.
+
+This is the signal the orchestrator reads to advance — it does not read your prose output.
+Do not skip this step. Do not write `status: "complete"` until the output files are confirmed on disk.
+
+> **Before running:** Substitute the actual component name for `$COMPONENT` and the actual BEM block name for `<BLOCK>`.
+
+```bash
+node -e "
+const fs = require('fs');
+const comp = '$COMPONENT';
+const p = \`src/routes/_index/components/\${comp}/pipeline-state.json\`;
+const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+const block = '<BLOCK>';
+s.steps['4'] = {
+  status: 'complete',
+  completedAt: new Date().toISOString(),
+  outputs: [
+    \`packages/skin/src/sass/\${block}/\${block}.scss\`,
+    'packages/skin/src/sass/bundles/skin-headless.scss',
+  ]
+};
+s.updatedAt = new Date().toISOString();
+fs.writeFileSync(p, JSON.stringify(s, null, 2));
+console.log('Step 4 completion record written.');
+"
+```
+
+**If SCSS was deferred** (no tokens/Figma): still write the completion record but set `outputs` to an empty array and add `"note": "SCSS deferred — no tokens or Figma reference"`.
+
+**If any completion gate item failed**: write `status: "failed"` with an `error` field describing which gate item failed. Do NOT write `status: "complete"`.
+
+> **Before running the failed variant:** Substitute the actual component name for `$COMPONENT` and describe the failing gate item in place of `<describe what gate item failed>`.
+
+```bash
+node -e "
+const fs = require('fs');
+const comp = '$COMPONENT';
+const p = \`src/routes/_index/components/\${comp}/pipeline-state.json\`;
+const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+s.steps['4'] = {
+  status: 'failed',
+  error: '<describe what gate item failed>'
+};
+s.updatedAt = new Date().toISOString();
+fs.writeFileSync(p, JSON.stringify(s, null, 2));
+"
+```
diff --git a/.claude/skills/evo-static-storybook/SKILL.md b/.claude/skills/evo-static-storybook/SKILL.md
new file mode 100644
index 0000000000..378f3a5380
--- /dev/null
+++ b/.claude/skills/evo-static-storybook/SKILL.md
@@ -0,0 +1,209 @@
+---
+name: evo-static-storybook
+description: >
+  Generates Skin (static) Storybook story files for a new evo-web component.
+  Reads the canonical HTML established by /evo-static-component (in shared
+  context) rather than re-deriving from the manifest. Writes CSF2 story files
+  under packages/skin/src/sass/<block>/stories/, including required RTL and
+  textSpacing stories. Also reads the component's css+page.marko docs when it
+  exists for additional variant context. Use this whenever the user says
+  "generate static stories", "create CSS stories", "scaffold the static
+  storybook", or when the evo-component orchestrator invokes Step 5.
+---
+
+# evo-static-storybook
+
+You are wrapping the canonical HTML established by `/evo-static-component`
+into CSF2 Storybook story files. The HTML is already in your context from
+the previous step — use it directly. Do not re-derive markup from the manifest.
+
+## Step 1 — Read the static component output
+
+The HTML catalogue produced by `/evo-static-component` (Step 4) is in your
+conversation context, labelled by variant (`=== Default ===`, etc.). Use
+these HTML blocks as the story content. They are the authoritative structure.
+
+Also read from the manifest for metadata:
+
+- `component.displayName` — for the Storybook title (e.g. `"Accordion"`)
+- `bem.block` — for file paths
+
+## Step 2 — Check the docs page
+
+Check for `src/routes/_index/components/<block>/css+page.marko`.
+
+If it exists, read it. The `<highlight-code type="html">` blocks may contain
+additional variant examples or interaction notes not yet covered by the static
+component's HTML catalogue. Add any additional stories from the docs that
+aren't already in the catalogue. The docs page is supplementary — the static
+component output is primary.
+
+## Step 3 — Decide file structure
+
+**Single file** — ≤ 8 total stories:
+
+```
+packages/skin/src/sass/<block>/stories/<block>.stories.js
+```
+
+**Split files** — > 8 stories or clearly distinct sub-groupings:
+
+```
+packages/skin/src/sass/<block>/stories/<block>/base.stories.js
+packages/skin/src/sass/<block>/stories/<block>/cascade.stories.js
+```
+
+## Step 3b — Check for existing stories file
+
+Before writing, check whether the stories file already exists.
+
+**If the file does not exist:** proceed to Step 4 and write from scratch.
+
+**If the file already exists**, determine what is new by diffing the specs:
+
+```bash
+git show HEAD:src/routes/_index/components/<block>/<block>.spec.json
+```
+
+- **If the committed spec exists** (command returns content): parse its `states.type[]`
+  and `props.type.enum[]` arrays. Compare against the same fields in the current on-disk
+  spec. The delta — values present in the current spec but absent in the committed one —
+  are the variants new to this run. Add story exports only for those variants.
+
+- **If no committed spec exists** (new component or spec never committed): fall back to
+  comparing the manifest `variants[]` and `states[]` against the existing named exports in
+  the stories file. Add exports for any variant not yet represented.
+
+In both cases:
+
+- Read the current stories file first
+- Append missing exports at the end of the file — do not touch existing exports
+- Do not re-add `RTL` or `textSpacing` if already present
+- Skip to the output checklist — Step 4 applies only to new files
+
+If nothing is new, print:
+
+```
+⏭  Stories file already up to date — no new exports needed.
+```
+
+## Step 4 — Write story files
+
+### Format (CSF2 — always)
+
+```js
+export default { title: "Skin/<DisplayName>" };
+
+export const base = () => `
+<div class="<block>">
+    <!-- HTML from static component output -->
+</div>
+`;
+```
+
+**Rules:**
+
+- Default export has `title` only — no `component`, `parameters`, `decorators`
+- Every named export is a **zero-argument arrow function returning an HTML string**
+- Use the HTML exactly as established by `/evo-static-component`
+- No `args`, no `argTypes`, no controls
+
+### Required stories (always include)
+
+**One story per variant** from the static component HTML catalogue — use the
+label as the export name (camelCase):
+
+```js
+export const base = () =>
+  `<span class="badge" role="img" aria-label="2 notifications">2</span>`;
+export const dot = () =>
+  `<span class="badge badge--dot" role="img" aria-label="New activity"/>`;
+```
+
+**RTL** — wrap the default HTML in `<div dir="rtl">`. Use text content appropriate
+for RTL languages where possible:
+
+```js
+export const RTL = () => `
+<div dir="rtl">
+  <span class="badge" role="img" aria-label="إشعاران">2</span>
+</div>
+`;
+```
+
+**textSpacing** — apply `demo-a11y-text-spacing` directly on the root BEM element
+(the class is already available globally in the Storybook preview):
+
+```js
+export const textSpacing = () => `
+<span class="badge demo-a11y-text-spacing" role="img" aria-label="2 notifications">2</span>
+`;
+```
+
+### Experimental stories
+
+If the docs page marks something as EXPERIMENTAL, include it with a comment:
+
+```js
+// EXPERIMENTAL — requires interpolate-size: allow-keywords in Chrome 123+
+export const animated = () => `...`;
+```
+
+## Output checklist
+
+- [ ] Stories file(s) written at correct path
+- [ ] HTML content sourced from `/evo-static-component` output (not re-derived)
+- [ ] One story per variant from the static component catalogue
+- [ ] `RTL` export present
+- [ ] `textSpacing` export present with `demo-a11y-text-spacing` on root BEM element
+- [ ] All exports are zero-argument functions returning HTML strings
+- [ ] EXPERIMENTAL stories flagged with comment
+
+---
+
+## Completion record — mandatory final step
+
+After all story exports are written and verified on disk, write the completion record.
+This is the signal the orchestrator reads to advance — do not skip this step.
+
+> **Before running:** Substitute the actual component name for `$COMPONENT` and the actual BEM block name for `<BLOCK>`.
+
+```bash
+node -e "
+const fs = require('fs');
+const comp = '$COMPONENT';
+const p = \`src/routes/_index/components/\${comp}/pipeline-state.json\`;
+const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+const block = '<BLOCK>';
+s.steps['5'] = {
+  status: 'complete',
+  completedAt: new Date().toISOString(),
+  outputs: [
+    \`packages/skin/src/sass/\${block}/stories/\${block}.stories.js\`,
+  ]
+};
+s.updatedAt = new Date().toISOString();
+fs.writeFileSync(p, JSON.stringify(s, null, 2));
+console.log('Step 5 completion record written.');
+"
+```
+
+If any required story export (RTL, textSpacing, or a required modifier story) could not be
+generated, write `status: "failed"` with an `error` field describing what is missing instead of `status: "complete"`.
+
+> **Before running the failed variant:** Substitute the actual component name for `$COMPONENT`.
+
+```bash
+node -e "
+const fs = require('fs');
+const comp = '$COMPONENT';
+const p = \`src/routes/_index/components/\${comp}/pipeline-state.json\`;
+const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+s.steps['5'] = {
+  status: 'failed',
+  error: '<describe missing export or failure>'
+};
+s.updatedAt = new Date().toISOString();
+fs.writeFileSync(p, JSON.stringify(s, null, 2));
+"
+```
diff --git a/CLAUDE.md b/CLAUDE.md
index 9a3c1b7c20..abfca576d7 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -108,6 +108,12 @@ Declare `<const/>`, `<let/>`, `<id/>`, and other tag variables close to where th
 
 **Marko 6 AttrTag content:** When already spreading an AttrTag onto a native element with no other body content, use self-closing — `<button ...button/>`. Never `<button ...button><${button.content}/></button>`.
 
+**Marko 6 AttrTag slot types — pick the right generic:**
+- ✅ Body-only slot: `action?: Marko.AttrTag<{ content?: Marko.Body }>` — accepts arbitrary child content
+- ❌ Empty generic: `action?: Marko.AttrTag<{}>` — rejects children at compile time (TS2353)
+- ✅ Typed-props slot: `image?: Marko.AttrTag<Omit<Marko.HTML.Img, "alt">>` — slot has specific props
+- Use `Marko.AttrTag<{ content?: Marko.Body }>` for any named slot whose sole purpose is to wrap caller-provided HTML (links, buttons, icons, text).
+
 **React Package Differences:**
 
 - `ebayui-core-react`: Requires `React.forwardRef` wrapper
diff --git a/docs/adr/0005-ai-skills-design-system.md b/docs/adr/0005-ai-skills-design-system.md
new file mode 100644
index 0000000000..20bdc53b0b
--- /dev/null
+++ b/docs/adr/0005-ai-skills-design-system.md
@@ -0,0 +1,47 @@
+# 5. AI Skills Design System
+
+Date: 2026-04-17
+
+## Status
+
+Accepted
+
+## Context
+
+Claude Code skills are loaded on-demand — every skill activated in a session carries a token cost. Without a shared framework for how skills are structured and scoped, skills grow inconsistently: some too broad (loading irrelevant context for narrow tasks), some too narrow (fragmenting related concerns across multiple invocations), some duplicating what CLAUDE.md already provides as the always-on foundation. Work in evo-web almost always spans multiple package layers simultaneously (e.g., Skin CSS + Marko + React), and no clear distinction existed between skills that should drive autonomous multi-step workflows and those that serve as focused specialists.
+
+Options considered:
+
+- **Per-package skills** (`/evo-skin`, `/evo-marko`, `/evo-react`): rejected because component work spans packages; per-package skills either require loading multiple skills simultaneously or miss critical cross-package context.
+- **Mega-skill**: rejected because it loads too much context for focused tasks — narrow work doesn't benefit from the full skill surface area, and the token cost is unjustifiable.
+- **Cross-cutting skills with a defined taxonomy**: adopted. Skills are scoped to concerns that cut across package boundaries and organized by type based on their role in the system.
+
+## Decision
+
+1. **Naming convention**: All evo-web skills use an `/evo-*` prefix.
+2. **CLAUDE.md is the always-on foundation.** Skills extend it with depth — they never restate or duplicate it.
+3. **Cross-cutting skills over per-package or per-framework skills.** Each skill is scoped to a concern that applies across the stack (e.g., component lifecycle, accessibility, storybook authoring) rather than to an individual package or framework layer.
+4. **Four skill types with defined roles:**
+   - **Composite Agent** — owns and orchestrates a multi-step workflow end-to-end; delegates specific phases to sub-agents and waits for results before continuing.
+   - **Discrete** — covers a single cross-cutting concern; triggered independently; stays lean because it has one job.
+   - **Sub-Agent** — a discrete skill that a composite agent delegates a specific task to; always performs the same focused operation regardless of who invoked it. A skill can be both discrete and a sub-agent simultaneously.
+   - **Ephemeral** — created for a specific time-boxed migration or transformation; may track progress; retired when the triggering work reaches completion (all affected components pass their evals and the skill's trigger no longer matches any active work).
+5. **All new persistent skills require evals** authored via the `skill-creator` skill before being added to settings. This establishes a performance baseline and ensures regressions are caught when skills are updated.
+6. **Adding or significantly changing a persistent skill requires a PR** that includes the skill, its evals, and an update to the relevant design doc.
+
+## Consequences
+
+Positive:
+
+- Minimal surface area per session — the right context loads for the right task, keeping token overhead proportionate to the work.
+- Discrete skills are independently invocable and reusable by multiple orchestrators via the sub-agent pattern.
+- Ephemeral skills operationalize time-boxed work (e.g., framework migrations) without permanently expanding the persistent skill inventory.
+- The `/evo-*` naming convention makes skill discovery consistent and prevents naming drift.
+- The eval requirement establishes a quality floor and surfaces regressions when skills are updated.
+
+Negative:
+
+- Composite agents are harder to debug when something goes wrong mid-workflow — failures may occur inside a delegated sub-agent with limited visibility.
+- Cross-cutting skills can grow large if their scope isn't actively kept narrow; periodic review is needed.
+- Ephemeral skill lifecycle requires operational discipline — skills must be tracked and retired when the triggering work is complete.
+- Eval authorship adds overhead to creating or updating skills.
diff --git a/docs/ai/AI-PIPELINE-CONTEXT.md b/docs/ai/AI-PIPELINE-CONTEXT.md
new file mode 100644
index 0000000000..889a815156
--- /dev/null
+++ b/docs/ai/AI-PIPELINE-CONTEXT.md
@@ -0,0 +1,188 @@
+# Context Package — AI Component Pipeline Skills
+
+Paste this at the start of a new chat to resume work on the evo-web AI component generation pipeline.
+
+---
+
+## What We've Built
+
+An end-to-end AI component generation pipeline for the **evo-web monorepo** (eBay's component library). The pipeline takes a component contract and structured design spec, produces a machine-readable manifest, then generates every layer of a component — static HTML/CSS, Marko 6, React 19, storybooks, accessibility validation, accessibility docs, and site hookups — orchestrated by a single Claude Code skill with scope-aware step selection.
+
+**Current status: All skills built. Pipeline validated on real components (page-notice warning variant addition — static scope modify run complete, including QA catch of dark-mode contrast regression).**
+
+---
+
+## Skill Inventory
+
+Skills live in `.claude/skills/[skill-name]/SKILL.md`.
+
+| Skill                            | Type                         | Invoked By                        | Responsibility                                                                                                             |
+| -------------------------------- | ---------------------------- | --------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `/evo-pipeline`                  | Top-level orchestrator       | Engineer                          | State detection, modify detection (spec diff), Gate 2 presentation, resumability — invokes `/evo-component` after approval |
+| `/evo-create-component-manifest` | Discrete — manifest step     | `/evo-pipeline` (Step 1)          | Reads `_contract.md` + `*.spec.json` → `manifest.json` + `gap-report.json`                                                 |
+| `/evo-component`                 | Composite orchestrator       | `/evo-pipeline` (after Gate 2)    | 16-step scope-aware generation lifecycle                                                                                   |
+| `/evo-static-component`          | Sub-agent                    | Step 4                            | Canonical HTML catalogue for all variants (always) + SCSS (when tokens/Figma available)                                    |
+| `/evo-static-storybook`          | Sub-agent                    | Step 5                            | CSF2 stories from static HTML context; RTL + textSpacing required                                                          |
+| `/evo-docs-hookup` css-only      | Sub-agent                    | Step 6                            | Writes `css+page.marko` + `css+meta.json` while HTML is fresh                                                              |
+| `/evo-a11y` Pass 1               | Sub-agent                    | Step 7                            | Validates static HTML + storybook; writes static sections of `accessibility+page.marko`                                    |
+| `/evo-marko-component`           | Sub-agent                    | Step 8                            | Generates new Marko 6 `index.marko`, `style.ts`, tests from manifest                                                       |
+| `/evo-marko-storybook`           | Sub-agent                    | Step 9                            | `buildExtensionTemplate` + `.marko` example files                                                                          |
+| `/evo-react-component`           | Sub-agent                    | Step 10                           | Generates new React 19 `index.tsx`, tests from manifest                                                                    |
+| `/evo-react-storybook`           | Sub-agent                    | Step 11                           | CSF3 `Meta` + `StoryObj`, self-contained                                                                                   |
+| `/evo-a11y` Pass 2               | Sub-agent                    | Step 12                           | Full validation; fills interactive sections of `accessibility+page.marko`                                                  |
+| `/evo-docs-hookup` full          | Sub-agent                    | Step 13                           | Writes `+page.marko`, `+meta.json`, updates `component-metadata.json`                                                      |
+| `/evo-qa`                        | **Forked** sub-agent         | Step 15                           | Layer 1: manifest fidelity; Layer 2: optional reference delta score                                                        |
+| `/evo-icon`                      | Discrete                     | Engineer or Step 8 (major delete) | Add / deprecate / delete icons; SVG → sprite → React → Marko                                                               |
+| `evo-safe-coding`                | Safety gate (auto-activates) | Every code session                | Scope check, risk rating, minimal diff, merge readiness                                                                    |
+
+---
+
+## Architectural Decisions
+
+1. **Static layer runs first.** `/evo-static-component` establishes canonical HTML for all variants before any framework code is generated. Marko, React, storybooks, and docs all read from this output — they do not re-derive structure from the manifest independently.
+
+2. **Layer + storybook pairing.** Each layer's storybook is generated immediately after the layer itself (Static → storybook → Marko → storybook → React → storybook) for maximum context freshness and consistency.
+
+3. **CSS docs written at Step 6, not at the end.** `css+page.marko` content is entirely derived from the static HTML. Writing it immediately after the static storybook keeps HTML in context and makes docs accurate by construction.
+
+4. **A11y docs are incremental.** Pass 1 (Step 7) writes statically-derivable sections (Best Practices, ARIA Reference table). Pass 2 (Step 12) fills interactive sections (Keyboard, Screen Reader, Pointer). Style-only revisions skip both passes.
+
+5. **Scope is orchestrator-declared, never disk-inferred.** Each sub-skill is explicitly told what has run in this session. This prevents incorrect scoping on component revisions where old files from prior runs exist on disk.
+
+6. **`/evo-qa` is forked and scope-aware.** It runs in isolation (no generation context) and is told the scope so it only audits files generated in this run.
+
+7. **Spec file (`*.spec.json`) is the authoritative data source.** Design team provides typed props, token mappings, slots, and states. The manifest skill uses spec fields directly; contract prose fills the gaps the spec doesn't cover.
+
+---
+
+## Pipeline Flow (16 steps)
+
+```
+[Track A — Human]
+1. Designer + engineer author _contract.md + *.spec.json
+   Both files live in src/routes/_index/components/<name>/
+   (Can also be provided as chat attachments — /evo-pipeline treats them identically)
+2. GATE 1: CODEOWNERS review (designer + engineer approval)
+
+[/evo-pipeline <name> [--scope <scope>] [--auto-approve]]
+   State detection: reads folder, contract, spec, manifest, gap-report, generated files
+   → routes to correct state (no folder / inputs missing / no manifest / pending review / ready)
+   Resumable: picks up from current state without re-running completed steps
+
+   Modification mode: if the component folder exists, the run is ALWAYS a
+   modification — regardless of whether a spec was previously committed.
+   "No spec on disk" means the spec was never committed, not that the
+   component is new. The pipeline reads the existing generated files to
+   understand the implemented state.
+
+   Modify detection (when generated files already exist + new spec provided):
+   Generated files that trigger modify detection: packages/skin/src/sass/<name>/
+   (skin SCSS), packages/evo-marko/src/tags/evo-<name>/, packages/evo-react/src/<name>/
+   At least one must exist. Reads old spec via git show HEAD:<spec-path>, diffs
+   in context against the new spec. When no prior spec was committed, compares
+   new spec against the implemented state (reads existing SCSS/Marko/React files).
+   Recommends scope from diff. Engineer can override. No temp files written.
+
+[/evo-create-component-manifest — invoked by /evo-pipeline]
+3. Runs npm run codegen:spec-to-manifest first (if spec present) — writes
+   spec-derived fields to manifest.json deterministically
+   Then reads _contract.md + manifest.json → completes manifest.json + gap-report.json
+   Spec is authoritative for: props, tokens, slots, states
+   Contract is authoritative for: a11y prose, behaviors, keyboard model
+   Four-tier source system: [CONTRACT] [AUDIT] [INFER] [ENGINEER]
+
+4. GATE 2: Engineer reviews manifest + gap-report (last human gate before codegen)
+   --auto-approve skips interactive prompt; summary still printed
+
+[/evo-component --scope <full|static|interactive|style>]
+
+Step 4:   /evo-static-component   [full, static, style(SCSS only)]
+Step 5:   /evo-static-storybook   [full, static]
+Step 6:   /evo-docs-hookup css    [full, static, style]
+Step 6.5: npm run codegen:scaffold [full, interactive] — deterministic scaffold files:
+          style.ts (complete), index.marko (interface + TODO), index.tsx (props + TODO),
+          test.server.ts (complete structure). Skills read and complete these.
+Step 7:   /evo-a11y Pass 1        [full, static] — 🔴 blocks if issues
+Step 8:   /evo-marko-component    [full, interactive] — completes scaffold
+Step 9:   /evo-marko-storybook    [full, interactive]
+Step 10:  /evo-react-component    [full, interactive] — completes scaffold
+Step 11:  /evo-react-storybook    [full, interactive]
+Step 12:  /evo-a11y Pass 2        [full, interactive]
+Step 13:  /evo-docs-hookup full   [full, static, interactive]
+          Runs npm run codegen:update-metadata for the component-metadata.json entry
+Step 14:  npm run build           [all scopes]
+Step 15:  /evo-qa (forked)        [all scopes]
+Step 16:  Final summary → engineer files PR
+
+[Post-PR]
+GATE 3: Percy visual regression (CSS/SCSS changes)
+GATE 4: CI — npm run build + Playwright/Vitest
+```
+
+---
+
+## Scope Reference
+
+| Scope         | When to use                                   | Steps run         |
+| ------------- | --------------------------------------------- | ----------------- |
+| `full`        | New component or cross-layer revision         | 4–16              |
+| `static`      | HTML structure and/or SCSS changed            | 4–7, 13–16        |
+| `interactive` | Only Marko/React behavior or props changed    | 8–16              |
+| `style`       | SCSS only; no structural or behavioral change | 4(SCSS), 6, 14–16 |
+
+**Static scope css docs rule:** When scope is `static` or `style` and the change adds or removes a variant (enum value on the `type` prop), `css+page.marko` must be updated to include the new variant in the demo block and `<highlight-code>` block. This is not a separate step — it is part of the static scope output, written at Step 6.
+
+**Accessible token selection for fixed-background variants:** When a variant has a background that does not change between light and dark modes (e.g. `color-background-warning` = yellow-400 in both), text and icon colors must use a mode-invariant token (e.g. `color-neutral-800`) rather than a theme-adaptive token (e.g. `color-foreground-primary`, which becomes near-white in dark mode). Theme-adaptive foreground tokens produce inaccessible contrast on fixed bright backgrounds in dark mode. The missing semantic token (e.g. `color-foreground-on-warning`) should be flagged to the design team.
+
+---
+
+## Codegen Scripts (determinism layer)
+
+Five TypeScript scripts produce byte-identical output for spec-derivable content. Run via `npx tsx` or npm shortcuts:
+
+| Script                                           | npm command                                | When it runs                                       |
+| ------------------------------------------------ | ------------------------------------------ | -------------------------------------------------- |
+| `scripts/codegen/spec-to-manifest.ts`            | `npm run codegen:spec-to-manifest <name>`  | Step 3 — before AI manifest inference              |
+| `scripts/codegen/generate-component-scaffold.ts` | `npm run codegen:scaffold <name>`          | Step 6.5 — before framework generation             |
+| `scripts/codegen/validate-manifest.ts`           | `npm run codegen:validate-manifest <name>` | On demand — validates manifest.json against schema |
+| `scripts/codegen/update-component-metadata.ts`   | `npm run codegen:update-metadata <name>`   | Step 13 — inside /evo-docs-hookup full mode        |
+
+All scripts accept the bare component name (`accordion`, not `evo-accordion`). They resolve to `src/routes/_index/components/<name>/` automatically.
+
+---
+
+## Key Manifest Schema Fields
+
+Beyond the basics — these are the non-obvious fields that matter most:
+
+- `figma.fileKey` — from spec `metadata.figma.fileKey`
+- `tokens` — named CSS custom property map from spec: `{ "background": "--color-background-primary" }`
+- `a11y.labelStrategy` — `"aria-label-prop"` | `"aria-hidden"` | `"content"` | `"aria-labelledby"`
+- `callerObligations[]` — a11y responsibilities the consumer (not the component) must fulfill
+- `stateLiftingCallbacks[]` — distinct from `events[]`; receive plain values, not DOM Events
+- `widgetRole` + `keyboardModel` — for WAI-ARIA widget patterns (tabs, menu, listbox, etc.)
+
+---
+
+## Codebase Context
+
+**Package targets:**
+
+- `packages/skin/src/sass/` — static CSS/SCSS (foundation layer, BEM)
+- `packages/evo-marko/src/tags/` — Marko 6 components
+- `packages/evo-react/src/` — React 19 ESM components
+- `src/routes/_index/components/` — docs site pages
+
+**Key conventions:**
+
+- BEM strict: `.btn`, `.btn__cell`, `.btn--primary`
+- Marko 6: `<let/x=0>`, `<const/y=z>`, `onClick() {}` — never `$ let` or `onClick("handler")`
+- Marko 6: attribute values containing `>` must be in parens: `<const/x=(a > b ? 1 : 0)>`
+- React 19: native `ref`, no `forwardRef`, ESM-only, skin CSS imported directly in component file
+- WCAG 2.2 AA on all components; `npm run build` must pass before any work is complete
+
+**Docs site tab system:**
+
+- Tab presence is file-based — creating `css+page.marko` creates the CSS tab
+- Storybook tab links driven by `src/data/component-metadata.json`
+- `accessibility+page.marko` written by `/evo-a11y`; `+page.marko` and `css+page.marko` by `/evo-docs-hookup`
diff --git a/docs/ai/AI-PIPELINE-OVERVIEW.md b/docs/ai/AI-PIPELINE-OVERVIEW.md
new file mode 100644
index 0000000000..9bab61a9c3
--- /dev/null
+++ b/docs/ai/AI-PIPELINE-OVERVIEW.md
@@ -0,0 +1,236 @@
+# evo-web AI Component Generation Pipeline
+
+**Overview for engineers and stakeholders**
+
+---
+
+## What This Is
+
+The evo-web AI pipeline is a supervised, step-by-step workflow that takes a component contract and design spec and generates a complete, production-ready component — including static HTML and CSS, Marko and React implementations, accessibility validation, Storybook stories, and documentation. Engineers stay in control at every gate and review all output before anything ships.
+
+The pipeline is implemented as a set of Claude Code "skills" — specialized AI instruction sets, each responsible for exactly one concern. They run in a fixed sequence through a single orchestrator command, with scope-aware step selection so that a style-only revision doesn't regenerate Marko and React, and an interactive behavior change doesn't regenerate the static CSS layer. Each skill is narrow, independently testable, and invocable on its own outside the full pipeline.
+
+---
+
+## The Two Inputs
+
+**Component Contract (`_contract.md`)** is a prose document written by the designer and engineer together. It captures the component's purpose, variants, behaviors, accessibility requirements, and design rationale in human-readable form. It is reviewed and approved by both parties before any AI work begins.
+
+**Component Spec (`*.spec.json`)** is a structured JSON file provided by the design team alongside the contract. It contains machine-readable definitions of every prop (with type, allowed values, and default), design token mappings (which CSS custom properties drive color, spacing, and typography), slot definitions, and component states. The spec is the authoritative data source for structured fields — it eliminates the guesswork that would otherwise produce inconsistencies between design intent and output.
+
+Both files live alongside the component's documentation in `src/routes/_index/components/<name>/` — the single folder that holds everything about a component: design inputs, approval artifacts, and generated docs pages. Both can be provided either by committing them to the filesystem or by attaching them directly to the chat session, which the pipeline treats identically.
+
+---
+
+## Gate 1 — Contract Review
+
+Before any AI is involved, the contract is submitted as a pull request to the `src/routes/_index/components/` directory. CODEOWNERS enforcement requires approval from both a designer and an engineer. This gate ensures the component's intent, accessibility requirements, and design decisions are agreed upon before being translated into code. It is the team's shared commitment to what is being built.
+
+A contract validator is designed to run as a reusable GitHub Action in CI, checking schema compliance and flagging missing required fields automatically — distinguishing between PR 1 (no Figma URL yet, non-blocking) and PR 2 (Figma URL required for visual layer generation).
+
+---
+
+## Entry Point — `/evo-pipeline`
+
+Engineers interact with the pipeline through a single command: `/evo-pipeline <component-name>`. This orchestrator is responsible for understanding where the component is in its lifecycle and routing accordingly — it is not the code generation engine itself. Every run begins with filesystem state detection.
+
+**State detection** reads the component folder, contract, spec, manifest, gap report, and generated framework files in sequence. Based on what exists, the pipeline announces its current state — no folder, inputs incomplete, no manifest, manifest pending review, generation ready — and either proceeds or explains exactly what is needed to continue. The pipeline never asks for information that's already on disk.
+
+**Resumability** is a first-class property. Whether the pipeline is run immediately after writing a contract or six days after a manifest was approved, it picks up from the correct point without re-running completed steps.
+
+---
+
+## Modification Mode
+
+If a component folder already exists at `src/routes/_index/components/<name>/`, the pipeline always treats the run as a modification — regardless of whether a spec was previously committed to that folder. The absence of a spec on disk means the spec was never committed, not that the component is new. The pipeline uses the existing generated files (SCSS, Marko templates, React components) as the source of truth for what is currently implemented.
+
+## Modify Detection — Spec Diff
+
+When a component already has generated files and a new or updated spec is provided, the pipeline runs a diff before anything else. Generated files that qualify include the skin SCSS stylesheet, the Marko component, and the React component — at least one must exist. The pipeline reads the previously committed spec via `git show HEAD:<spec-path>` and compares it in context against the new spec — no script, no temp files. When no spec was previously committed, it compares the new spec against the implemented state read from the existing generated files.
+
+The diff identifies which props changed type or enum values, which states were added or removed, and which tokens were updated. From this, the pipeline recommends a scope automatically — for example, adding enum values to a type prop recommends `static` (new BEM modifiers needed), while changing only a token value recommends `style`. Engineers can override the recommendation, but the diff is the default. This eliminates the manual judgment call of "what scope do I need?" for the common case of spec-driven revisions.
+
+---
+
+## Step 1 — Manifest Generation
+
+With the approved contract and spec in hand, manifest generation runs in two distinct phases.
+
+**Phase 1 — Deterministic spec translation.** The `spec-to-manifest.ts` codegen script runs first. It reads the spec and writes all machine-derivable fields directly into `manifest.json` without AI inference: props with exact types and defaults, design tokens mapped to CSS custom properties, slot definitions with required flags, and states. These fields are precise because the spec is machine-precise. No AI is involved in this phase.
+
+**Phase 2 — Contract-sourced fields.** The `/evo-create-component-manifest` skill then reads the contract and fills in the fields the spec cannot provide: accessibility rationale, keyboard interaction details, behavioral edge cases, ARIA attribute conditions, and caller obligations. It documents every inference it makes and flags every field it cannot determine with confidence in a `gap-report.json`.
+
+The manifest uses a four-tier source system: `[CONTRACT]` (sourced from the prose document), `[AUDIT]` (sourced from pre-built static analysis of existing component implementations), `[INFER]` (AI-reasoned, confidence-flagged), and `[ENGINEER]` (requires human input to resolve). This makes the confidence level of every manifest field explicit.
+
+---
+
+## Gate 2 — Manifest Review
+
+The engineer reviews `manifest.json` and `gap-report.json`. This is the last human checkpoint before any component code is written. The pipeline presents a curated, readable summary of the manifest — not raw JSON — organized by API surface, visual styling, and accessibility. Blocking gaps (fields tagged `[ENGINEER]` or low-confidence `[INFER]`) are listed with a plain-language explanation of what's missing and why it matters, and generation is held until they are resolved.
+
+Once approved, the orchestrator generates code purely from the manifest — it does not re-read or re-interpret the contract. This separation means the same manifest always produces the same output, regardless of when it runs.
+
+Experienced engineers who trust the pipeline's manifest quality can pass `--auto-approve` to skip the interactive review. The manifest summary is still printed, but generation begins immediately.
+
+---
+
+## The Code Generation Orchestrator — `/evo-component`
+
+After the manifest is approved, `/evo-pipeline` invokes `/evo-component <name> --scope <scope>`. The orchestrator reads the manifest, sequences all downstream sub-skills, and narrates progress at each phase boundary. Each sub-skill receives an explicit declaration of what has run before it in this session — it never guesses from what's on disk, which would produce wrong results on component revisions where old files already exist.
+
+---
+
+## Step 4 — Static Component
+
+The static layer always runs first. This skill produces two things: a **canonical HTML catalogue** — the definitive markup for every visual variant the component can appear in, with correct BEM classes and ARIA attributes — and, when design tokens or a Figma reference are available, the **SCSS stylesheet** that gives the component its visual appearance.
+
+The HTML catalogue is not just for CSS. It becomes the shared reference that every subsequent skill reads from rather than re-deriving independently. Marko templates, React components, Storybooks, and documentation all use it. This is how structural consistency is maintained across layers without manual coordination.
+
+This ordering follows the evo-web architecture: CSS is the source of truth. Framework wrappers wrap the static layer — they do not define it.
+
+---
+
+## Step 5 — Static Storybook
+
+Immediately after the static component is built, its Storybook is generated. The static (CSS) Storybook is a set of self-contained HTML snippets — one per visual variant — displayed in isolation in the Skin Storybook. Every story runs against the live CSS, making it a fast visual regression surface. Two stories are mandatory for every component: an **RTL story** (verifying right-to-left layout support) and a **text spacing story** (verifying WCAG 1.4.12 Text Spacing compliance). Both are generated automatically.
+
+The Storybook is generated immediately after the static component, not batched to the end, because the HTML is still fresh in context. This produces more accurate, complete stories.
+
+---
+
+## Step 6 — CSS Documentation Tab
+
+The evo-web documentation site has a "CSS" tab for every component. This step writes that page using the canonical HTML from Step 4 as its content. Each variant from the HTML catalogue becomes a live demo section paired with a syntax-highlighted code block showing the exact markup a consumer would use. This is written at Step 6 — right after the static Storybook — because the HTML is still in context and this page has no dependency on Marko or React.
+
+---
+
+## Step 6.5 — Deterministic Scaffolding
+
+Before any framework code is written, the `generate-component-scaffold.ts` script runs against the manifest and produces structural scaffolding files with byte-identical precision: the complete `style.ts` (the one-line skin CSS import), the TypeScript `Input` interface for the Marko component, the props type for the React component, and the test file structure. These files are guaranteed correct by the manifest — no AI inference needed. The AI skills that follow read these scaffolds and complete the non-deterministic parts (template body, component body, behavioral logic) on top of the guaranteed foundation. This is what makes the component API surface and type system reliable across runs regardless of other variance in the pipeline.
+
+---
+
+## Step 7 — Accessibility Validation, Pass 1
+
+The first accessibility pass validates the static layer only. It checks that the HTML catalogue has the correct ARIA roles, that the labeling strategy from the manifest is correctly applied, and that the RTL and text spacing stories exist in the static Storybook. If any of these checks fail, **the pipeline stops**. Marko and React should not be built on a broken static foundation.
+
+This pass also writes the static sections of `accessibility+page.marko` — the component's accessibility documentation page. The sections completable at this stage are **Best Practices** (the labeling strategy, decorative vs. informational usage) and the **ARIA Reference table** (every ARIA attribute the component uses, with descriptions). The Keyboard, Screen Reader, and Pointer sections are stubbed and completed in Pass 2 once the interactive layers exist.
+
+For non-interactive components, there is no Pass 2 — all sections are written here.
+
+---
+
+## Step 8 — Marko Component
+
+With a validated static layer as its reference, the Marko 6 component is generated. It wraps the static HTML with dynamic behavior: typed input interfaces for all props and a11y strings, reactive state management using Marko 6 tag variables, slot rendering, event handlers, and ARIA attribute wiring derived directly from the manifest. It reads the BEM class structure established in Step 4 to ensure structural consistency. Server-side snapshot tests and — for interactive components — browser interaction tests are scaffolded alongside the component.
+
+---
+
+## Step 9 — Marko Storybook
+
+The Marko Storybook is generated immediately after the component. Unlike the static Storybook (which is raw HTML), the Marko Storybook is interactive — it uses the real component with live controls. Engineers and designers can explore all prop combinations without writing code. For interactive components (dialogs, accordions, menus), at least one story demonstrates the controlled state pattern using Marko 6's two-way binding syntax.
+
+---
+
+## Step 10 — React Component
+
+The React 19 component is generated in the same spirit as the Marko component, targeting the `@evo-web/react` package. It is a native React 19 component — no `forwardRef`, native `ref` as a prop — that imports skin CSS directly, spreads HTML attributes to the root element, and wires all ARIA attributes and keyboard handlers from the manifest. It references the static HTML from Step 4 for structural consistency. The component is ESM-only and accompanied by a Vitest test scaffold.
+
+---
+
+## Step 11 — React Storybook
+
+The React Storybook follows immediately after the component. It is a CSF3 story file with controls for every prop, a prose description, and a usage import example. For components with interactive behaviors, at least one story demonstrates the controlled pattern with React state. Generated right after the React component while the types and props are in full context.
+
+---
+
+## Step 12 — Accessibility Validation, Pass 2
+
+The second accessibility pass has the full picture — static HTML, Marko template, React component, and all Storybooks. It validates that ARIA attributes are correctly wired in both framework implementations, that keyboard handlers are present and in the correct form, and that interactive stories exist in the Storybooks for keyboard-navigable components.
+
+It then fills in the stubbed sections of the accessibility documentation page: the **Keyboard** section (exact keys and their actions), the **Screen Reader** section (what gets announced in each usage mode), and the **Pointer** section (click/tap behavior). The accessibility meta file is completed here as well. This pass is skipped for non-interactive components and for style-only revisions.
+
+---
+
+## Step 13 — Overview Documentation
+
+The Overview tab of the docs site is written here — the landing page for the component. It includes the component banner (populated from the component registry), a brief description, and cross-links to related components where relevant. The component registry (`component-metadata.json`) is updated at this step via the `update-component-metadata.ts` script, wiring up the Marko Storybook and React Storybook tab links. Storybook paths are set if determinable from the session; otherwise flagged as a follow-up after first deployment.
+
+---
+
+## Step 14 — Build Validation
+
+`npm run build` is run to confirm all generated files compile without errors. TypeScript errors in Marko or React components, SCSS compilation failures, and import path mistakes are caught here. The pipeline does not advance to QA with a failing build — errors are fixed inline before continuing.
+
+---
+
+## Step 15 — QA
+
+The QA agent runs in complete isolation — a fresh context with no access to the generation session's history. This is intentional: the agent that generated the code should not also be the one reviewing it. The QA agent is told which scope ran, so it only audits files generated in this session, not pre-existing files from prior runs.
+
+It runs two layers of checks. **Layer 1** is a manifest compliance check: are all props, slots, BEM classes, and ARIA attributes present in the generated files? Are there Marko 5 syntax patterns, unresolved placeholder comments, or missing Storybook requirements? Layer 1 is pass/fail. **Layer 2** is an optional fidelity comparison against an existing reference component — it computes a similarity score useful during pipeline development to measure how accurately the AI is reproducing established patterns. Layer 2 is informational and does not block.
+
+---
+
+## Accessible Token Selection for Fixed-Background Variants
+
+Some component variants use a background color that does not change between light and dark modes — warning (yellow) is a notable example. In these cases, text and icon colors must use a **mode-invariant token** rather than a theme-adaptive one.
+
+Theme-adaptive tokens like `color-foreground-primary` resolve to near-black in light mode and near-white in dark mode. On a fixed bright background, the dark-mode value produces inaccessible contrast — white text on yellow-400 yields approximately 1.6:1, far below WCAG AA's 4.5:1 requirement. The correct fallback is a mode-invariant dark token such as `color-neutral-800` (#191919), which provides over 10:1 contrast on yellow-400 in both modes.
+
+When the correct semantic token (e.g. `color-foreground-on-warning`) does not yet exist in `@ebay/design-tokens`, use the mode-invariant fallback and flag the missing token to the design team so it can be added. Once the semantic token exists, update the CSS custom property fallback.
+
+---
+
+## Step 16 — Final Summary and PR
+
+The pipeline prints a complete summary of every step: what was written, what was skipped per scope, any warnings requiring engineer attention, and suggested next steps. The engineer reviews all generated files, resolves any warnings, and files a PR following the standard checklist. A changeset entry is added for versioning.
+
+---
+
+## The Four Scopes
+
+Not every pipeline run regenerates everything. The scope is either specified with `--scope` or determined automatically from the spec diff when a revision is being made.
+
+**`full`** (default) — A new component, or a revision significant enough to touch all layers. Runs all 16 steps.
+
+**`static`** — The HTML structure or SCSS changed (a new BEM modifier, a new variant, a layout adjustment). Runs the static layer, its Storybook, CSS docs, and a11y Pass 1. Does not touch Marko or React. If the static changes require framework updates, the engineer follows up with `--scope interactive`. When a variant is added or removed, `css+page.marko` is always updated as part of this scope — the demo block and its accompanying code snippet must reflect all current variants.
+
+**`interactive`** — Only Marko/React behavior or props changed (a new event, a prop type correction). Skips the static layer entirely and runs only the framework layers, their Storybooks, a11y Pass 2, and the docs update.
+
+**`style`** — SCSS only (a color token update, a spacing change). HTML structure and component interfaces are unchanged. Runs only the SCSS generation, updates `css+page.marko`, then builds and runs QA. Storybooks and a11y docs are untouched.
+
+---
+
+## Codegen Scripts
+
+Alongside the AI skills, the pipeline includes a set of deterministic TypeScript scripts that handle the mechanical parts of code generation without AI involvement. All are exposed as npm workspace commands via `npm run codegen:<name>`.
+
+| Script                           | Command                     | Purpose                                                                                                                           |
+| -------------------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| `spec-to-manifest.ts`            | `codegen:spec-to-manifest`  | Translates `*.spec.json` into the structured fields of `manifest.json`. Runs as the first phase of manifest generation.           |
+| `generate-component-scaffold.ts` | `codegen:scaffold`          | Generates the file and folder skeleton for a new component, including scaffolded `style.ts`, type interfaces, and test structure. |
+| `validate-manifest.ts`           | `codegen:validate-manifest` | Validates a `manifest.json` against the manifest schema.                                                                          |
+| `update-component-metadata.ts`   | `codegen:update-metadata`   | Updates `component-metadata.json` with new or revised component entries.                                                          |
+
+---
+
+## Discrete Skill: `/evo-icon`
+
+The icon pipeline is a discrete skill designed as part of this system. Engineers invoke it directly — it is not part of the component generation sequence, but it can be triggered by the orchestrator when a major version icon deletion requires removing the icon from Marko and React simultaneously.
+
+It supports three workflows: **Add/Edit** (place an SVG, run three build scripts, and every React component and Marko tag is automatically regenerated from the sprite); **Deprecate** (mark as deprecated in the docs data so it shows in a warning section rather than the main grid, without touching the framework components); and **Delete** (major versions only — removes the SVG, runs the full sprite rebuild, and the framework component files are automatically dropped in the regeneration).
+
+---
+
+## Post-PR Gates
+
+**Percy visual regression** runs on CSS/SCSS changes, capturing screenshots of every component story and flagging visual differences for human approval. This catches unintended side effects of SCSS changes across the component library.
+
+**CI** runs the full test suite — SSR snapshot tests and browser interaction tests scaffolded in Steps 8 and 10. Green CI is required to merge.
+
+---
+
+## What the Pipeline Doesn't Do
+
+The pipeline generates well-structured, spec-compliant scaffolding. It does not replace engineering judgment on complex business logic, nuanced interaction design, or non-standard patterns. Every generated file is a starting point that engineers review and own. The pipeline's value is eliminating the mechanical, error-prone parts of component creation — ARIA attribute mapping, BEM class wiring across layers, test scaffolding, docs hookup — so engineers can focus on what requires real expertise.
diff --git a/docs/ai/evo-pipeline-reliability-plan.md b/docs/ai/evo-pipeline-reliability-plan.md
new file mode 100644
index 0000000000..863f8b4c51
--- /dev/null
+++ b/docs/ai/evo-pipeline-reliability-plan.md
@@ -0,0 +1,190 @@
+# evo-pipeline Reliability Enhancements
+
+## Background
+
+The `evo-pipeline` orchestrator currently stops mid-stream and requires manual nudges to continue. This is an architectural problem: the model is in the orchestrator role, relying on conversational continuity to track progress and decide when to advance steps. The Local Conductor project (`.claude/projects/local-conductor/`) solved this same problem differently — by putting code in the orchestrator role and Claude in the worker role. This plan applies those lessons to `evo-pipeline`.
+
+**Root cause of pipeline stalls:** Claude decides transitions ("I should now run step 5") by reading prior conversation context. Any attention drift, context window pressure, or ambiguous step boundary causes it to stop or re-run work it already did.
+
+---
+
+## Enhancement 1 — Disk-resident pipeline state
+
+**Problem:** Pipeline progress lives in the conversation. If Claude stops, there's no machine-readable record of which steps completed.
+
+**Solution:** Write a `pipeline-state.json` file alongside `manifest.json` for every component being processed. The orchestrator reads this file at the start of every invocation to know exactly where to resume.
+
+### Schema
+
+```json
+{
+  "component": "evo-accordion",
+  "scope": "full",
+  "startedAt": "2026-06-10T09:00:00.000Z",
+  "updatedAt": "2026-06-10T09:14:22.000Z",
+  "steps": {
+    "1": { "status": "complete", "completedAt": "2026-06-10T09:01:10.000Z" },
+    "2": { "status": "complete", "completedAt": "2026-06-10T09:02:45.000Z" },
+    "3": { "status": "complete", "completedAt": "2026-06-10T09:08:30.000Z" },
+    "4": { "status": "in-progress", "startedAt": "2026-06-10T09:14:00.000Z" },
+    "5": { "status": "pending" },
+    "6": { "status": "pending" }
+  }
+}
+```
+
+**Location:** `src/routes/_index/components/<component>/pipeline-state.json`
+(same directory as `manifest.json` and `_contract.md`)
+
+### Orchestrator behaviour change
+
+At the start of every `evo-pipeline` invocation (and every sub-skill handoff):
+
+1. Check if `pipeline-state.json` exists.
+2. If yes: read it, skip all completed steps, resume from the first `pending` or `in-progress` step.
+3. If no: create it with all steps as `pending`, then begin at step 1.
+4. Mark the current step `in-progress` before invoking it; mark `complete` after verified output exists.
+
+This makes every invocation restartable at any point without re-doing work.
+
+---
+
+## Enhancement 2 — Structured completion signals from each skill
+
+**Problem:** The orchestrator detects step completion by reading the skill's prose output. Natural language is ambiguous — "I've written the files" and "I was unable to write the files" can look similar in accumulated context.
+
+**Solution:** Each skill writes a structured completion record to disk. The orchestrator reads the record, not the prose.
+
+### Completion record format
+
+Each skill writes to `pipeline-state.json` after it finishes:
+
+```json
+{
+  "step": 4,
+  "skill": "evo-static-component",
+  "status": "complete",
+  "outputs": [
+    "packages/skin/src/sass/accordion/accordion.scss",
+    "packages/skin/src/sass/accordion/stories/accordion.stories.js"
+  ],
+  "completedAt": "2026-06-10T09:08:30.000Z"
+}
+```
+
+If a skill fails, it writes `"status": "failed"` with an `"error"` field. The orchestrator treats any non-`complete` status as a signal to stop and surface the issue rather than silently continuing.
+
+### Implementation
+
+Each skill's SKILL.md should end with a mandatory "Write completion record" step:
+
+```
+## Final step — Write completion record
+
+After all files are written and verified, update pipeline-state.json:
+- Set step N status to "complete"
+- List the files written in "outputs"
+- Record the timestamp
+
+If any verification failed, set status to "failed" and record the error.
+Do not mark complete until you have confirmed the output files exist on disk.
+```
+
+---
+
+## Enhancement 3 — Idempotent steps via artifact checks
+
+**Problem:** If a step ran but the next step failed, re-running from the top re-does completed work, wasting time and risking side effects.
+
+**Solution:** Before running any step, check if its output artifacts already exist and are valid. If they do, skip the step and mark it complete.
+
+### Per-step artifact definitions
+
+Add a canonical "expected outputs" list to each step in the orchestrator. Before invoking a skill, check:
+
+```
+Step 4 (evo-static-component):
+  - packages/skin/src/sass/<block>/<block>.scss  exists?
+  - packages/skin/src/sass/<block>/stories/<block>.stories.js  exists?
+  → If both exist and pipeline-state says step 4 is pending: mark complete, skip.
+```
+
+This means the pipeline can always be re-run safely — it will fast-forward through already-completed steps in seconds.
+
+### Practical rule
+
+"An output artifact is a file that the step was supposed to create or modify, whose presence (and non-zero size) confirms the step ran." Steps that only read or plan but don't write files are inherently idempotent and need no artifact check.
+
+---
+
+## Enhancement 4 — Explicit transition table (no model judgment at boundaries)
+
+**Problem:** The orchestrator decides "the previous step is done, I should call the next skill" by evaluating the prior output. This is the exact failure mode — the model may misjudge completion or forget to advance.
+
+**Solution:** Hard-code the step sequence and transition logic in the orchestrator skill itself, not as something Claude reasons about at runtime.
+
+### Transition table (for `full` scope)
+
+```
+Step 1  complete → Step 2
+Step 2  complete → Step 3
+Step 3  complete → Step 4 (evo-static-component)
+Step 4  complete → Step 5 (evo-static-storybook)
+Step 5  complete → Step 6 (evo-docs-hookup css-only mode)
+Step 6  complete → Step 7 (evo-a11y pass 1)
+Step 7  complete → Step 8 (evo-marko-component)
+Step 8  complete → Step 9 (evo-react-component)
+...
+Step N  complete → QA → done
+```
+
+The orchestrator reads the state file, looks up the first non-complete step, and invokes exactly that skill. There is no inference. "Which step next?" is a table lookup, not a judgment call.
+
+---
+
+## Enhancement 5 — Failure as data, not silence
+
+**Problem:** When a step fails (file not written, tool error, skill exits early), the pipeline often continues silently to the next step, producing incomplete components.
+
+**Solution:** Any step that writes `"status": "failed"` halts the pipeline and surfaces the failure explicitly before proceeding.
+
+### Halt behaviour
+
+When the orchestrator reads a `failed` step from `pipeline-state.json`:
+
+1. Do not advance to the next step.
+2. Surface the failure: "Step 4 (evo-static-component) failed — [error]. Fix the issue or mark this step pending to retry."
+3. Wait for explicit user confirmation before re-running.
+
+This is the same principle as Local Conductor's "fail-closed, surface-don't-drop" design.
+
+---
+
+## Implementation order
+
+Build these in sequence — each one makes the next easier:
+
+1. **State file schema + write/read helpers** (Enhancement 1) — the foundation. Even just reading the state at startup to know where to resume eliminates most stalls.
+
+2. **Artifact checks** (Enhancement 3) — implement alongside Enhancement 1. Populate the artifact list for each step as you go.
+
+3. **Transition table** (Enhancement 4) — replace the model's "decide what's next" logic with a table lookup. This is an orchestrator SKILL.md change.
+
+4. **Completion signals from sub-skills** (Enhancement 2) — update each sub-skill's SKILL.md to write the completion record. Do this incrementally; start with the steps that stall most often.
+
+5. **Failure halting** (Enhancement 5) — add the halt check to the orchestrator after Enhancements 1–4 are in place.
+
+---
+
+## Files to read before starting
+
+- `src/routes/_index/components/[component]/` — understand existing pipeline file layout
+- `.claude/skills/evo-pipeline/SKILL.md` — the current orchestrator
+- `.claude/skills/evo-static-component/SKILL.md` — example sub-skill to understand current completion signalling
+- `.claude/projects/local-conductor/src/orchestrator/` — reference implementation of the state machine pattern this plan is based on (specifically `scheduler.ts`, `engineer.ts`, `qa.ts`)
+
+---
+
+## Success criterion
+
+A `full` pipeline run that stalls midway can be re-invoked (same component, same scope) and resumes from the exact step that was interrupted — without re-running completed steps, without losing state, and without a human nudge at every boundary.
diff --git a/docs/superpowers/plans/2026-06-10-evo-pipeline-reliability.md b/docs/superpowers/plans/2026-06-10-evo-pipeline-reliability.md
new file mode 100644
index 0000000000..28c5ca643b
--- /dev/null
+++ b/docs/superpowers/plans/2026-06-10-evo-pipeline-reliability.md
@@ -0,0 +1,1651 @@
+# evo-pipeline Reliability Enhancements Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Transform the evo-web component pipeline from a conversationally-driven process into a state-machine-driven process with disk-resident step state, true Agent-spawned QA isolation, and mechanical hallucination/drift detection.
+
+**Architecture:** `evo-component` owns a `pipeline-state.json` file at `src/routes/_index/components/<name>/pipeline-state.json`. Each step is marked `in-progress` before invocation and `complete` after the sub-skill writes its completion record to that file. The orchestrator reads the record (not conversation prose) to advance. Two micro-QA Agent spawns at phase boundaries verify outputs in genuinely fresh context windows. `evo-pipeline` adds manifest hash locking and stall detection at the outer level.
+
+**Tech Stack:** Skill SKILL.md files (markdown instructions), Bash (node/JSON for state reads/writes), Agent tool (true sub-agent spawning for QA isolation)
+
+---
+
+## File Map
+
+| File                                           | Change                                                                                                                         |
+| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------- |
+| `.claude/skills/evo-component/SKILL.md`        | State file init/resume, transition table, pre-flight, artifact checks, post-step protocol, micro-QA spawns, Agent spawn for QA |
+| `.claude/skills/evo-pipeline/SKILL.md`         | Manifest hash lock, stall detection at State detection step                                                                    |
+| `.claude/skills/evo-static-component/SKILL.md` | Append completion record write                                                                                                 |
+| `.claude/skills/evo-static-storybook/SKILL.md` | Append completion record write                                                                                                 |
+| `.claude/skills/evo-docs-hookup/SKILL.md`      | Append completion record write (both step 6 and step 13 modes)                                                                 |
+| `.claude/skills/evo-a11y/SKILL.md`             | Append completion record write (both Pass 1 and Pass 2)                                                                        |
+| `.claude/skills/evo-marko-component/SKILL.md`  | Append completion record write                                                                                                 |
+| `.claude/skills/evo-marko-storybook/SKILL.md`  | Append completion record write                                                                                                 |
+| `.claude/skills/evo-react-component/SKILL.md`  | Append completion record write                                                                                                 |
+| `.claude/skills/evo-react-storybook/SKILL.md`  | Append completion record write                                                                                                 |
+| `.claude/skills/evo-qa/SKILL.md`               | Add checkpoint mode (`--checkpoint static                                                                                      | framework`) for micro-QA spawns |
+
+---
+
+## Task 1: State File Schema + evo-component Initialization and Resume
+
+**Files:**
+
+- Modify: `.claude/skills/evo-component/SKILL.md` — insert new section after "Step 2 — Gate: resolve blocking gaps"
+
+- [ ] **Step 1: Read the current evo-component skill**
+
+  ```bash
+  cat .claude/skills/evo-component/SKILL.md
+  ```
+
+- [ ] **Step 2: Insert new "Step 2.5 — State file management" section**
+
+  Insert the following block immediately after the `## Step 2 — Gate: resolve blocking gaps` section and before `## ⛔ Execution rule — no pausing between steps`:
+
+  ````markdown
+  ## Step 2.5 — State file management
+
+  The pipeline uses `src/routes/_index/components/$COMPONENT/pipeline-state.json` as a
+  disk-resident record of step progress. Read it at startup, create it if absent, detect
+  stalls, and fast-forward past completed steps.
+
+  ### Schema
+
+  ```json
+  {
+    "component": "accordion",
+    "scope": "full",
+    "manifestHash": "<md5-of-manifest-json>",
+    "startedAt": "2026-06-10T09:00:00.000Z",
+    "updatedAt": "2026-06-10T09:14:22.000Z",
+    "steps": {
+      "4": { "status": "pending" },
+      "5": { "status": "pending" },
+      "6": { "status": "pending" },
+      "6.5": { "status": "pending" },
+      "7": { "status": "pending" },
+      "micro-qa-1": { "status": "pending" },
+      "8": { "status": "pending" },
+      "9": { "status": "pending" },
+      "10": { "status": "pending" },
+      "11": { "status": "pending" },
+      "12": { "status": "pending" },
+      "micro-qa-2": { "status": "pending" },
+      "13": { "status": "pending" },
+      "14": { "status": "pending" },
+      "15": { "status": "pending" }
+    }
+  }
+  ```
+  ````
+
+  `status` values: `pending` | `in-progress` | `complete` | `failed` | `skipped`
+
+  ### Startup procedure
+
+  **1. Compute the manifest hash:**
+
+  ```bash
+  md5 -q src/routes/_index/components/$COMPONENT/manifest.json
+  ```
+
+  Store this value as `$MANIFEST_HASH` for use in subsequent steps.
+
+  **2. Check if the state file exists:**
+
+  ```bash
+  cat src/routes/_index/components/$COMPONENT/pipeline-state.json 2>/dev/null || echo "NOT_FOUND"
+  ```
+
+  **3a. If NOT_FOUND — create the state file:**
+
+  Initialize all steps for the resolved scope as `pending` (steps not in this scope
+  set to `skipped`). See the scope-to-steps table in Step 3.
+
+  ```bash
+  node -e "
+  const fs = require('fs');
+  const path = 'src/routes/_index/components/$COMPONENT/pipeline-state.json';
+  const now = new Date().toISOString();
+  const state = {
+    component: '$COMPONENT',
+    scope: '$SCOPE',
+    manifestHash: '$MANIFEST_HASH',
+    startedAt: now,
+    updatedAt: now,
+    steps: {
+      '4':          { status: 'pending' },
+      '5':          { status: 'pending' },
+      '6':          { status: 'pending' },
+      '6.5':        { status: 'pending' },
+      '7':          { status: 'pending' },
+      'micro-qa-1': { status: 'pending' },
+      '8':          { status: 'pending' },
+      '9':          { status: 'pending' },
+      '10':         { status: 'pending' },
+      '11':         { status: 'pending' },
+      '12':         { status: 'pending' },
+      'micro-qa-2': { status: 'pending' },
+      '13':         { status: 'pending' },
+      '14':         { status: 'pending' },
+      '15':         { status: 'pending' }
+    }
+  };
+  fs.writeFileSync(path, JSON.stringify(state, null, 2));
+  console.log('State file created.');
+  "
+  ```
+
+  **3b. If state file exists — validate and resume:**
+
+  Read the state file. Then:
+
+  **(i) Manifest hash check (Enhancement 8):**
+
+  Compare the stored `manifestHash` against `$MANIFEST_HASH`. If they differ:
+
+  ```
+  ⚠️  Manifest changed since this pipeline run started.
+      Stored hash:   <stored>
+      Current hash:  <current>
+
+      Steps already marked complete were generated from a different manifest.
+      Options:
+        • Type "reset" to clear the state file and restart from Step 4.
+        • Type "continue" to proceed — completed steps will NOT be re-run even
+          though the manifest changed. Use this only if the manifest change is
+          cosmetic and does not affect the layers already generated.
+  ```
+
+  Stop and wait. Do not proceed until the engineer responds.
+
+  If "reset": delete `pipeline-state.json` and re-run Step 2.5 as if NOT_FOUND.
+  If "continue": update `manifestHash` in the state file and proceed normally.
+
+  **(ii) Stall detection (Enhancement 7):**
+
+  For each step where `status === "in-progress"`, check the `startedAt` timestamp.
+  If `startedAt` is more than 10 minutes ago relative to now:
+
+  ```bash
+  node -e "
+  const fs = require('fs');
+  const path = 'src/routes/_index/components/$COMPONENT/pipeline-state.json';
+  const state = JSON.parse(fs.readFileSync(path, 'utf8'));
+  const now = Date.now();
+  const STALL_MS = 10 * 60 * 1000;
+  Object.entries(state.steps).forEach(([stepId, step]) => {
+    if (step.status === 'in-progress') {
+      const age = now - new Date(step.startedAt).getTime();
+      if (age > STALL_MS) {
+        console.log('STALLED:' + stepId);
+        state.steps[stepId] = { status: 'failed', error: 'Stalled — in-progress for >' + Math.round(age/60000) + ' min. Re-run to retry.' };
+      }
+    }
+  });
+  state.updatedAt = new Date().toISOString();
+  fs.writeFileSync(path, JSON.stringify(state, null, 2));
+  "
+  ```
+
+  If any steps were stalled and marked failed, surface them:
+
+  ```
+  ⚠️  Stalled step detected and marked failed:
+      Step <N>: was in-progress for >10 minutes — treated as failed.
+      The pipeline will halt at Step <N>. Fix the issue, then
+      re-run /evo-component $COMPONENT to retry from that step.
+  ```
+
+  **(iii) Print resume state:**
+
+  After stall detection, print a summary of which steps are complete, which
+  will be skipped (wrong scope), and which will now run:
+
+  ```
+  ▶  Resuming <COMPONENT> [scope: <scope>]
+     ✅ Step 4  — complete (from prior run)
+     ✅ Step 5  — complete (from prior run)
+     ⏭  Step 6  — skipped (scope: <scope>)
+     ▶  Step 7  — will run now (first pending step)
+     ...
+  ```
+
+  ### Step marking helpers
+
+  Use these patterns at the start and end of every step execution:
+
+  **Mark step in-progress (before invoking sub-skill):**
+
+  ```bash
+  node -e "
+  const fs = require('fs');
+  const p = 'src/routes/_index/components/$COMPONENT/pipeline-state.json';
+  const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+  s.steps['STEP_ID'] = { status: 'in-progress', startedAt: new Date().toISOString() };
+  s.updatedAt = new Date().toISOString();
+  fs.writeFileSync(p, JSON.stringify(s, null, 2));
+  "
+  ```
+
+  **Read step status after sub-skill returns (to confirm completion record was written):**
+
+  ```bash
+  node -e "
+  const fs = require('fs');
+  const s = JSON.parse(fs.readFileSync('src/routes/_index/components/$COMPONENT/pipeline-state.json', 'utf8'));
+  console.log(JSON.stringify(s.steps['STEP_ID']));
+  "
+  ```
+
+  If the returned status is NOT `complete`, the sub-skill did not finish cleanly.
+  Treat this as a step failure — do NOT advance.
+
+  ```
+
+  ```
+
+- [ ] **Step 3: Verify the section was inserted correctly**
+
+  ```bash
+  grep -n "Step 2.5" .claude/skills/evo-component/SKILL.md
+  grep -n "manifestHash" .claude/skills/evo-component/SKILL.md
+  grep -n "Stall detection" .claude/skills/evo-component/SKILL.md
+  ```
+
+  Expected: all three lines found with line numbers.
+
+- [ ] **Step 4: Commit**
+
+  ```bash
+  git add .claude/skills/evo-component/SKILL.md
+  git commit -m "feat(ai): add state file init and resume logic to evo-component"
+  ```
+
+---
+
+## Task 2: evo-pipeline — Manifest Hash Lock + Stall Detection
+
+**Files:**
+
+- Modify: `.claude/skills/evo-pipeline/SKILL.md` — update State detection (Step 1) section
+
+- [ ] **Step 1: Read the current evo-pipeline skill**
+
+  ```bash
+  cat .claude/skills/evo-pipeline/SKILL.md
+  ```
+
+- [ ] **Step 2: Add state file awareness to Step 1 — State detection**
+
+  In the `## Step 1 — State detection` section, after the list of filesystem checks
+  (`Component folder`, `Contract`, `Spec`, `Manifest`, `Gap report`, `Generated files`),
+  add the following:
+
+  ```markdown
+  **Pipeline state:** `pipeline-state.json` in the component folder
+
+  If `pipeline-state.json` exists:
+
+  1. Read it and print the resume banner:
+  ```
+
+  ♻️ Prior pipeline run detected for <component>
+  Scope: <scope>
+  Started: <startedAt>
+  Progress: <N> of <M> steps complete
+
+  ```
+  2. Run stall detection (see Step 2.5 in `/evo-component`) — the outer pipeline
+  surfaces stalled steps before passing to `/evo-component`.
+  3. If any step is `failed`, surface it immediately:
+  ```
+
+  🔴 Prior run ended with a failed step:
+  Step <N> — <error>
+  Resolve the issue above, then re-run /evo-pipeline <name> to retry.
+
+  ```
+  Stop. Do not proceed to State C/D/E until the failure is resolved or the
+  engineer types "reset" to clear the state file.
+  ```
+
+- [ ] **Step 3: Verify**
+
+  ```bash
+  grep -n "pipeline-state.json" .claude/skills/evo-pipeline/SKILL.md
+  grep -n "Prior pipeline run detected" .claude/skills/evo-pipeline/SKILL.md
+  ```
+
+  Expected: both found.
+
+- [ ] **Step 4: Commit**
+
+  ```bash
+  git add .claude/skills/evo-pipeline/SKILL.md
+  git commit -m "feat(ai): add state file awareness and stall surfacing to evo-pipeline"
+  ```
+
+---
+
+## Task 3: evo-component — Transition Table, Pre-flight, Artifact Checks, Failure Halting
+
+**Files:**
+
+- Modify: `.claude/skills/evo-component/SKILL.md` — update the `⛔ Execution rule` section and each step header
+
+This task adds the deterministic transition table (no model judgment at boundaries), pre-flight input validation, idempotent step skipping, and failure halting.
+
+- [ ] **Step 1: Replace the `⛔ Execution rule` section with the full transition protocol**
+
+  Replace the current `## ⛔ Execution rule — no pausing between steps` section with:
+
+  ````markdown
+  ## ⛔ Execution rule — deterministic transitions, no pausing between steps
+
+  You are an automated orchestrator. Transitions between steps are determined by
+  reading `pipeline-state.json` — NOT by evaluating prior output prose. After each
+  sub-skill returns, you MUST:
+
+  1. Read the state file to confirm the step's status is `complete`.
+  2. If `complete`: immediately advance to the next step in the transition table.
+  3. If `failed` or still `in-progress`: halt and surface the failure (see Failure halting below).
+  4. Never ask the user whether to continue between steps.
+
+  The ONLY valid reasons to stop and wait for input are:
+
+  1. Gate 2 — manifest review (engineer must type "approved")
+  2. A `failed` step in the state file that cannot be fixed inline
+  3. Manifest hash mismatch (engineer must type "reset" or "continue")
+
+  ### Transition table
+
+  Read this table as: "after step N is complete, run step M next."
+  Steps NOT in the scope column for the current scope are marked `skipped` in the state file
+  and bypassed — the orchestrator does not invoke them.
+
+  | Step       | Sub-skill                  | full | static | interactive | style |
+  | ---------- | -------------------------- | :--: | :----: | :---------: | :---: |
+  | 4          | evo-static-component       |  ✅  |   ✅   |     ⏭      |  ✅   |
+  | 5          | evo-static-storybook       |  ✅  |   ✅   |     ⏭      |  ⏭   |
+  | 6          | evo-docs-hookup (css-only) |  ✅  |   ✅   |     ⏭      |  ✅   |
+  | 6.5        | scaffold generation        |  ✅  |   ⏭   |     ✅      |  ⏭   |
+  | 7          | evo-a11y Pass 1            |  ✅  |   ✅   |     ⏭      |  ⏭   |
+  | micro-qa-1 | Micro-QA checkpoint        |  ✅  |   ✅   |     ⏭      |  ⏭   |
+  | 8          | evo-marko-component        |  ✅  |   ⏭   |     ✅      |  ⏭   |
+  | 9          | evo-marko-storybook        |  ✅  |   ⏭   |     ✅      |  ⏭   |
+  | 10         | evo-react-component        |  ✅  |   ⏭   |     ✅      |  ⏭   |
+  | 11         | evo-react-storybook        |  ✅  |   ⏭   |     ✅      |  ⏭   |
+  | 12         | evo-a11y Pass 2            |  ✅  |   ⏭   |     ✅      |  ⏭   |
+  | micro-qa-2 | Micro-QA checkpoint        |  ✅  |   ⏭   |     ✅      |  ⏭   |
+  | 13         | evo-docs-hookup (full)     |  ✅  |   ✅   |     ✅      |  ⏭   |
+  | 14         | npm run build              |  ✅  |   ✅   |     ✅      |  ✅   |
+  | 15         | evo-qa (Agent spawn)       |  ✅  |   ✅   |     ✅      |  ✅   |
+
+  ### Per-step artifact definitions
+
+  Before running any step, check if its expected outputs already exist on disk.
+  If they do AND the step is still `pending` in the state file, mark it `complete`
+  (fast-forward) and advance — do not invoke the sub-skill again.
+
+  | Step | requiredInputs (must exist before running)                  | expectedOutputs (existence confirms complete)                                               |
+  | ---- | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
+  | 4    | `manifest.json`                                             | `packages/skin/src/sass/<block>/<block>.scss`                                               |
+  | 5    | `packages/skin/src/sass/<block>/<block>.scss`               | `packages/skin/src/sass/<block>/stories/<block>.stories.js`                                 |
+  | 6    | `manifest.json`                                             | `src/routes/_index/components/<block>/css+page.marko`                                       |
+  | 6.5  | `manifest.json`                                             | `packages/evo-marko/src/tags/<name>/index.marko`, `packages/evo-react/src/<name>/index.tsx` |
+  | 7    | `<block>.scss`, `<block>.stories.js`                        | `src/routes/_index/components/<block>/accessibility+page.marko`                             |
+  | 8    | `packages/evo-marko/src/tags/<name>/index.marko` (scaffold) | `packages/evo-marko/src/tags/<name>/index.marko` (complete)                                 |
+  | 9    | `packages/evo-marko/src/tags/<name>/index.marko`            | `packages/evo-marko/src/tags/<name>/<name>.stories.ts`                                      |
+  | 10   | `packages/evo-react/src/<name>/index.tsx` (scaffold)        | `packages/evo-react/src/<name>/index.tsx` (complete)                                        |
+  | 11   | `packages/evo-react/src/<name>/index.tsx`                   | `packages/evo-react/src/<name>/<basename>.stories.tsx`                                      |
+  | 12   | `index.marko` (complete), `index.tsx` (complete)            | `src/routes/_index/components/<block>/accessibility+meta.json`                              |
+  | 13   | `manifest.json`, `accessibility+page.marko`                 | `src/routes/_index/components/<block>/+page.marko`                                          |
+  | 14   | (prior steps complete)                                      | Build exit code 0                                                                           |
+  | 15   | All expected outputs for scope                              | `pipeline-state.json` step 15 status = complete                                             |
+
+  ### Pre-step preamble (run before EVERY step)
+
+  Before marking any step `in-progress` and invoking its sub-skill:
+
+  **1. Check if already complete (idempotent skip):**
+
+  ```bash
+  node -e "
+  const fs = require('fs');
+  const s = JSON.parse(fs.readFileSync('src/routes/_index/components/$COMPONENT/pipeline-state.json', 'utf8'));
+  console.log(s.steps['STEP_ID'].status);
+  "
+  ```
+  ````
+
+  If `complete` or `skipped`: print `⏭ Step STEP_ID already complete — skipping.` and advance.
+
+  **2. Validate required inputs exist:**
+
+  For each path in the step's `requiredInputs` list (from the table above):
+
+  ```bash
+  test -f "<requiredInput>" && echo "EXISTS" || echo "MISSING: <requiredInput>"
+  ```
+
+  If any required input is MISSING:
+
+  ```
+  🔴 Pipeline halted — Step <N> cannot start.
+     Missing required input: <path>
+     This input should have been produced by Step <prior-step>.
+     Check Step <prior-step>'s completion record in pipeline-state.json for errors.
+  ```
+
+  Do not invoke the sub-skill. Mark this step `failed`. Stop.
+
+  **3. Mark step in-progress:**
+
+  ```bash
+  node -e "
+  const fs = require('fs');
+  const p = 'src/routes/_index/components/$COMPONENT/pipeline-state.json';
+  const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+  s.steps['STEP_ID'] = { status: 'in-progress', startedAt: new Date().toISOString() };
+  s.updatedAt = new Date().toISOString();
+  fs.writeFileSync(p, JSON.stringify(s, null, 2));
+  "
+  ```
+
+  Then invoke the sub-skill.
+
+  ### Post-step verification (run after EVERY sub-skill returns)
+
+  After the sub-skill returns, run these checks before advancing:
+
+  **1. Read completion record:**
+
+  ```bash
+  node -e "
+  const fs = require('fs');
+  const s = JSON.parse(fs.readFileSync('src/routes/_index/components/$COMPONENT/pipeline-state.json', 'utf8'));
+  console.log(JSON.stringify(s.steps['STEP_ID'], null, 2));
+  "
+  ```
+
+  If status is NOT `complete`: the sub-skill did not finish cleanly. Halt (see Failure halting).
+
+  **2. Content validation (hallucination checks):**
+
+  Run the following checks based on the step just completed:
+
+  _After Step 4 (SCSS generated):_
+
+  ```bash
+  # BEM block must exist
+  grep -c "\.${BLOCK} {" packages/skin/src/sass/$BLOCK/$BLOCK.scss
+  # No deprecated BEM nesting
+  grep -c "&--" packages/skin/src/sass/$BLOCK/$BLOCK.scss
+  ```
+
+  The first grep must return ≥ 1. The second must return 0 (nesting forbidden).
+
+  _After Step 8 (Marko generated):_
+
+  ```bash
+  # No Marko 5 scriptlet patterns
+  grep -c "^\$ \(let\|const\|var\)" packages/evo-marko/src/tags/$NAME/index.marko
+  # BEM block class must be applied
+  grep -c "\"${BLOCK}\"" packages/evo-marko/src/tags/$NAME/index.marko
+  ```
+
+  Both greps must return 0 for deprecated patterns and ≥ 1 for BEM class.
+
+  _After Step 10 (React generated):_
+
+  ```bash
+  # Component must export a named function or const
+  grep -c "^export \(function\|const\)" packages/evo-react/src/$NAME/index.tsx
+  # No forwardRef (evo-react uses React 19 native ref)
+  grep -c "forwardRef" packages/evo-react/src/$NAME/index.tsx
+  ```
+
+  First must be ≥ 1; second must be 0.
+
+  If any content check fails: mark the step `failed` with the specific check result as the error.
+  Halt. Surface to the engineer.
+
+  **3. Scope boundary check:**
+
+  Each step has an `allowedWriteZones` list. After the sub-skill's `outputs` are recorded in
+  the completion record, verify every listed output path starts with one of these prefixes:
+
+  | Step | allowedWriteZones                                                       |
+  | ---- | ----------------------------------------------------------------------- |
+  | 4    | `packages/skin/src/sass/<block>/`, `packages/skin/src/sass/bundles/`    |
+  | 5    | `packages/skin/src/sass/<block>/stories/`                               |
+  | 6    | `src/routes/_index/components/<block>/`                                 |
+  | 6.5  | `packages/evo-marko/src/tags/<name>/`, `packages/evo-react/src/<name>/` |
+  | 7    | `src/routes/_index/components/<block>/`                                 |
+  | 8    | `packages/evo-marko/src/tags/<name>/`                                   |
+  | 9    | `packages/evo-marko/src/tags/<name>/`                                   |
+  | 10   | `packages/evo-react/src/<name>/`                                        |
+  | 11   | `packages/evo-react/src/<name>/`                                        |
+  | 12   | `src/routes/_index/components/<block>/`                                 |
+  | 13   | `src/routes/_index/components/<block>/`, `src/data/`                    |
+
+  If any output is outside all allowed zones:
+
+  ```
+  🔴 Scope boundary violation — Step <N> wrote a file outside its allowed zone:
+     File:          <path>
+     Allowed zones: <list>
+     This file was not expected. Review it manually before proceeding.
+     Type "continue" to accept it or "reset-step" to mark Step <N> failed and retry.
+  ```
+
+  Wait for engineer input.
+
+  ### Failure halting
+
+  When any step ends with status `failed`:
+
+  ```
+  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  🔴 Pipeline halted — Step <N> (<sub-skill>) failed
+  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  Error: <error from completion record>
+
+  The pipeline state is saved. To retry:
+  1. Fix the issue described above
+  2. Re-run /evo-component $COMPONENT --scope $SCOPE
+     The pipeline will resume from Step <N>.
+  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  ```
+
+  Do not advance to the next step. Do not attempt inline fixes. Stop.
+
+  ```
+
+  ```
+
+- [ ] **Step 2: Verify the section was inserted correctly**
+
+  ```bash
+  grep -n "Transition table" .claude/skills/evo-component/SKILL.md
+  grep -n "Pre-step preamble" .claude/skills/evo-component/SKILL.md
+  grep -n "Post-step verification" .claude/skills/evo-component/SKILL.md
+  grep -n "Failure halting" .claude/skills/evo-component/SKILL.md
+  grep -n "allowedWriteZones" .claude/skills/evo-component/SKILL.md
+  ```
+
+  Expected: all five found.
+
+- [ ] **Step 3: Update each step header in evo-component to reference the pre-step preamble**
+
+  For each step (4 through 15 and 6.5), prepend the following line immediately after the
+  step's `## Step N` heading (or `**Scopes:**` line):
+
+  ```markdown
+  > **Before invoking:** Run the pre-step preamble above (idempotent check → pre-flight validation → mark in-progress).
+  > **After returning:** Run the post-step verification above (read completion record → content validation → scope boundary check).
+  ```
+
+  Do this for: Step 4, Step 5, Step 6, Step 6.5, Step 7, Step 8, Step 9, Step 10,
+  Step 11, Step 12, Step 13, Step 14, Step 15.
+
+- [ ] **Step 4: Commit**
+
+  ```bash
+  git add .claude/skills/evo-component/SKILL.md
+  git commit -m "feat(ai): add transition table, pre-flight validation, and post-step verification to evo-component"
+  ```
+
+---
+
+## Task 4: evo-static-component — Completion Record
+
+**Files:**
+
+- Modify: `.claude/skills/evo-static-component/SKILL.md` — append after the "Output summary" section
+
+- [ ] **Step 1: Read the current file ending**
+
+  ```bash
+  tail -30 .claude/skills/evo-static-component/SKILL.md
+  ```
+
+- [ ] **Step 2: Append the completion record section**
+
+  Add the following after the existing `## Output summary` section:
+
+  ````markdown
+  ---
+
+  ## Completion record — mandatory final step
+
+  After the output summary is printed and all items in the mandatory completion gate
+  are checked off, write the completion record to the pipeline state file.
+
+  This is the signal the orchestrator reads to advance — it does not read your prose output.
+  Do not skip this step. Do not mark complete until the output files are confirmed on disk.
+
+  ```bash
+  node -e "
+  const fs = require('fs');
+  const comp = process.env.COMPONENT || '$COMPONENT';
+  const p = \`src/routes/_index/components/\${comp}/pipeline-state.json\`;
+  const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+  const block = '<BLOCK>';  // replace with manifest.bem.block value
+  s.steps['4'] = {
+    status: 'complete',
+    completedAt: new Date().toISOString(),
+    outputs: [
+      \`packages/skin/src/sass/\${block}/\${block}.scss\`,
+      'packages/skin/src/sass/bundles/skin-headless.scss',
+    ]
+  };
+  s.updatedAt = new Date().toISOString();
+  fs.writeFileSync(p, JSON.stringify(s, null, 2));
+  console.log('Step 4 completion record written.');
+  "
+  ```
+  ````
+
+  **If SCSS was deferred** (no tokens/Figma): still write the completion record but
+  set `outputs` to an empty array and add `"note": "SCSS deferred — no tokens or Figma reference"`.
+
+  **If any completion gate item failed**: write `status: "failed"` with an `error` field
+  describing which gate item failed. Do NOT write `status: "complete"`.
+
+  ```bash
+  node -e "
+  const fs = require('fs');
+  const comp = process.env.COMPONENT || '$COMPONENT';
+  const p = \`src/routes/_index/components/\${comp}/pipeline-state.json\`;
+  const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+  s.steps['4'] = {
+    status: 'failed',
+    error: '<describe what gate item failed>'
+  };
+  s.updatedAt = new Date().toISOString();
+  fs.writeFileSync(p, JSON.stringify(s, null, 2));
+  "
+  ```
+
+  ```
+
+  ```
+
+- [ ] **Step 3: Verify**
+
+  ```bash
+  grep -n "Completion record" .claude/skills/evo-static-component/SKILL.md
+  grep -n "steps\['4'\]" .claude/skills/evo-static-component/SKILL.md
+  ```
+
+  Expected: both found.
+
+- [ ] **Step 4: Commit**
+
+  ```bash
+  git add .claude/skills/evo-static-component/SKILL.md
+  git commit -m "feat(ai): add completion record write to evo-static-component"
+  ```
+
+---
+
+## Task 5: evo-static-storybook — Completion Record
+
+**Files:**
+
+- Modify: `.claude/skills/evo-static-storybook/SKILL.md`
+
+- [ ] **Step 1: Read the current file ending**
+
+  ```bash
+  tail -30 .claude/skills/evo-static-storybook/SKILL.md
+  ```
+
+- [ ] **Step 2: Append the completion record section after the final output/summary section**
+
+  ````markdown
+  ---
+
+  ## Completion record — mandatory final step
+
+  After all story exports are written and verified on disk, write the completion record.
+
+  ```bash
+  node -e "
+  const fs = require('fs');
+  const comp = process.env.COMPONENT || '$COMPONENT';
+  const p = \`src/routes/_index/components/\${comp}/pipeline-state.json\`;
+  const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+  const block = '<BLOCK>';
+  s.steps['5'] = {
+    status: 'complete',
+    completedAt: new Date().toISOString(),
+    outputs: [
+      \`packages/skin/src/sass/\${block}/stories/\${block}.stories.js\`,
+    ]
+  };
+  s.updatedAt = new Date().toISOString();
+  fs.writeFileSync(p, JSON.stringify(s, null, 2));
+  console.log('Step 5 completion record written.');
+  "
+  ```
+  ````
+
+  If any required story export (RTL, textSpacing, or a required modifier story) could
+  not be generated, write `status: "failed"` with an `error` field instead.
+
+  ```
+
+  ```
+
+- [ ] **Step 3: Verify**
+
+  ```bash
+  grep -n "steps\['5'\]" .claude/skills/evo-static-storybook/SKILL.md
+  ```
+
+  Expected: found.
+
+- [ ] **Step 4: Commit**
+
+  ```bash
+  git add .claude/skills/evo-static-storybook/SKILL.md
+  git commit -m "feat(ai): add completion record write to evo-static-storybook"
+  ```
+
+---
+
+## Task 6: evo-docs-hookup — Completion Record (Both Modes)
+
+**Files:**
+
+- Modify: `.claude/skills/evo-docs-hookup/SKILL.md`
+
+- [ ] **Step 1: Read the current file ending**
+
+  ```bash
+  tail -40 .claude/skills/evo-docs-hookup/SKILL.md
+  ```
+
+- [ ] **Step 2: Append the completion record section**
+
+  The docs-hookup skill runs in two modes (Step 6 = css-only, Step 13 = full).
+  The completion record must write to the correct step ID based on mode.
+
+  ````markdown
+  ---
+
+  ## Completion record — mandatory final step
+
+  After all output files are verified on disk, write the completion record.
+  The step ID depends on which mode was declared at invocation:
+
+  **css-only mode (Step 6):**
+
+  ```bash
+  node -e "
+  const fs = require('fs');
+  const comp = process.env.COMPONENT || '$COMPONENT';
+  const p = \`src/routes/_index/components/\${comp}/pipeline-state.json\`;
+  const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+  const block = '<BLOCK>';
+  s.steps['6'] = {
+    status: 'complete',
+    completedAt: new Date().toISOString(),
+    outputs: [
+      \`src/routes/_index/components/\${block}/css+page.marko\`,
+      \`src/routes/_index/components/\${block}/css+meta.json\`,
+    ]
+  };
+  s.updatedAt = new Date().toISOString();
+  fs.writeFileSync(p, JSON.stringify(s, null, 2));
+  console.log('Step 6 completion record written.');
+  "
+  ```
+  ````
+
+  **full mode (Step 13):**
+
+  ```bash
+  node -e "
+  const fs = require('fs');
+  const comp = process.env.COMPONENT || '$COMPONENT';
+  const p = \`src/routes/_index/components/\${comp}/pipeline-state.json\`;
+  const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+  const block = '<BLOCK>';
+  s.steps['13'] = {
+    status: 'complete',
+    completedAt: new Date().toISOString(),
+    outputs: [
+      \`src/routes/_index/components/\${block}/+page.marko\`,
+      \`src/routes/_index/components/\${block}/+meta.json\`,
+      'src/data/component-metadata.json',
+    ]
+  };
+  s.updatedAt = new Date().toISOString();
+  fs.writeFileSync(p, JSON.stringify(s, null, 2));
+  console.log('Step 13 completion record written.');
+  "
+  ```
+
+  If any output file could not be written, set `status: "failed"` with an `error` field.
+
+  ```
+
+  ```
+
+- [ ] **Step 3: Verify**
+
+  ```bash
+  grep -n "steps\['6'\]" .claude/skills/evo-docs-hookup/SKILL.md
+  grep -n "steps\['13'\]" .claude/skills/evo-docs-hookup/SKILL.md
+  ```
+
+  Expected: both found.
+
+- [ ] **Step 4: Commit**
+
+  ```bash
+  git add .claude/skills/evo-docs-hookup/SKILL.md
+  git commit -m "feat(ai): add completion record write to evo-docs-hookup (both modes)"
+  ```
+
+---
+
+## Task 7: evo-a11y — Completion Record (Both Passes)
+
+**Files:**
+
+- Modify: `.claude/skills/evo-a11y/SKILL.md`
+
+- [ ] **Step 1: Read the current file ending**
+
+  ```bash
+  tail -40 .claude/skills/evo-a11y/SKILL.md
+  ```
+
+- [ ] **Step 2: Append the completion record section**
+
+  ````markdown
+  ---
+
+  ## Completion record — mandatory final step
+
+  After all outputs are verified on disk, write the completion record.
+  The step ID depends on which pass was declared at invocation:
+
+  **Pass 1 (Step 7):**
+
+  ```bash
+  node -e "
+  const fs = require('fs');
+  const comp = process.env.COMPONENT || '$COMPONENT';
+  const p = \`src/routes/_index/components/\${comp}/pipeline-state.json\`;
+  const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+  const block = '<BLOCK>';
+  s.steps['7'] = {
+    status: 'complete',
+    completedAt: new Date().toISOString(),
+    outputs: [
+      \`src/routes/_index/components/\${block}/accessibility+page.marko\`,
+    ]
+  };
+  s.updatedAt = new Date().toISOString();
+  fs.writeFileSync(p, JSON.stringify(s, null, 2));
+  console.log('Step 7 completion record written.');
+  "
+  ```
+  ````
+
+  **Pass 2 (Step 12):**
+
+  ```bash
+  node -e "
+  const fs = require('fs');
+  const comp = process.env.COMPONENT || '$COMPONENT';
+  const p = \`src/routes/_index/components/\${comp}/pipeline-state.json\`;
+  const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+  const block = '<BLOCK>';
+  s.steps['12'] = {
+    status: 'complete',
+    completedAt: new Date().toISOString(),
+    outputs: [
+      \`src/routes/_index/components/\${block}/accessibility+page.marko\`,
+      \`src/routes/_index/components/\${block}/accessibility+meta.json\`,
+    ]
+  };
+  s.updatedAt = new Date().toISOString();
+  fs.writeFileSync(p, JSON.stringify(s, null, 2));
+  console.log('Step 12 completion record written.');
+  "
+  ```
+
+  If any blocking a11y failure was found that could not be fixed inline, write
+  `status: "failed"` with the failing check as the `error` field.
+
+  ```
+
+  ```
+
+- [ ] **Step 3: Verify**
+
+  ```bash
+  grep -n "steps\['7'\]" .claude/skills/evo-a11y/SKILL.md
+  grep -n "steps\['12'\]" .claude/skills/evo-a11y/SKILL.md
+  ```
+
+  Expected: both found.
+
+- [ ] **Step 4: Commit**
+
+  ```bash
+  git add .claude/skills/evo-a11y/SKILL.md
+  git commit -m "feat(ai): add completion record write to evo-a11y (both passes)"
+  ```
+
+---
+
+## Task 8: Framework Sub-skills — Completion Records (marko-component, marko-storybook, react-component, react-storybook)
+
+**Files:**
+
+- Modify: `.claude/skills/evo-marko-component/SKILL.md`
+- Modify: `.claude/skills/evo-marko-storybook/SKILL.md`
+- Modify: `.claude/skills/evo-react-component/SKILL.md`
+- Modify: `.claude/skills/evo-react-storybook/SKILL.md`
+
+- [ ] **Step 1: Read each file's ending**
+
+  ```bash
+  tail -20 .claude/skills/evo-marko-component/SKILL.md
+  tail -20 .claude/skills/evo-marko-storybook/SKILL.md
+  tail -20 .claude/skills/evo-react-component/SKILL.md
+  tail -20 .claude/skills/evo-react-storybook/SKILL.md
+  ```
+
+- [ ] **Step 2: Append completion record to evo-marko-component (Step 8)**
+
+  Append after the `## Output verification` section:
+
+  ````markdown
+  ---
+
+  ## Completion record — mandatory final step
+
+  After output verification passes, write the completion record.
+
+  ```bash
+  node -e "
+  const fs = require('fs');
+  const comp = process.env.COMPONENT || '$COMPONENT';
+  const p = \`src/routes/_index/components/\${comp}/pipeline-state.json\`;
+  const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+  const name = '<NAME>';  // e.g. evo-accordion
+  const outputs = [
+    \`packages/evo-marko/src/tags/\${name}/index.marko\`,
+    \`packages/evo-marko/src/tags/\${name}/style.ts\`,
+    \`packages/evo-marko/src/tags/\${name}/test/test.server.ts\`,
+  ];
+  // Add test.browser.ts if it was generated
+  if (fs.existsSync(\`packages/evo-marko/src/tags/\${name}/test/test.browser.ts\`)) {
+    outputs.push(\`packages/evo-marko/src/tags/\${name}/test/test.browser.ts\`);
+  }
+  s.steps['8'] = {
+    status: 'complete',
+    completedAt: new Date().toISOString(),
+    outputs
+  };
+  s.updatedAt = new Date().toISOString();
+  fs.writeFileSync(p, JSON.stringify(s, null, 2));
+  console.log('Step 8 completion record written.');
+  "
+  ```
+  ````
+
+  If any output verification check failed (missing prop, Marko 5 pattern found, etc.),
+  write `status: "failed"` with the failing check as the `error` field.
+
+  ```
+
+  ```
+
+- [ ] **Step 3: Append completion record to evo-marko-storybook (Step 9)**
+
+  Append after the final output/summary section:
+
+  ````markdown
+  ---
+
+  ## Completion record — mandatory final step
+
+  ```bash
+  node -e "
+  const fs = require('fs');
+  const comp = process.env.COMPONENT || '$COMPONENT';
+  const p = \`src/routes/_index/components/\${comp}/pipeline-state.json\`;
+  const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+  const name = '<NAME>';
+  s.steps['9'] = {
+    status: 'complete',
+    completedAt: new Date().toISOString(),
+    outputs: [
+      \`packages/evo-marko/src/tags/\${name}/\${name}.stories.ts\`,
+    ]
+  };
+  s.updatedAt = new Date().toISOString();
+  fs.writeFileSync(p, JSON.stringify(s, null, 2));
+  console.log('Step 9 completion record written.');
+  "
+  ```
+  ````
+
+  ```
+
+  ```
+
+- [ ] **Step 4: Append completion record to evo-react-component (Step 10)**
+
+  Append after the final output/summary section:
+
+  ````markdown
+  ---
+
+  ## Completion record — mandatory final step
+
+  ```bash
+  node -e "
+  const fs = require('fs');
+  const comp = process.env.COMPONENT || '$COMPONENT';
+  const p = \`src/routes/_index/components/\${comp}/pipeline-state.json\`;
+  const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+  const name = '<NAME>';  // bare kebab-case, e.g. accordion
+  s.steps['10'] = {
+    status: 'complete',
+    completedAt: new Date().toISOString(),
+    outputs: [
+      \`packages/evo-react/src/\${name}/index.tsx\`,
+      \`packages/evo-react/src/\${name}/__tests__/index.spec.tsx\`,
+    ]
+  };
+  s.updatedAt = new Date().toISOString();
+  fs.writeFileSync(p, JSON.stringify(s, null, 2));
+  console.log('Step 10 completion record written.');
+  "
+  ```
+  ````
+
+  If any output verification check failed (forwardRef found, export missing, etc.),
+  write `status: "failed"` with the failing check as the `error` field.
+
+  ```
+
+  ```
+
+- [ ] **Step 5: Append completion record to evo-react-storybook (Step 11)**
+
+  Append after the final output/summary section:
+
+  ````markdown
+  ---
+
+  ## Completion record — mandatory final step
+
+  ```bash
+  node -e "
+  const fs = require('fs');
+  const comp = process.env.COMPONENT || '$COMPONENT';
+  const p = \`src/routes/_index/components/\${comp}/pipeline-state.json\`;
+  const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+  const name = '<NAME>';
+  s.steps['11'] = {
+    status: 'complete',
+    completedAt: new Date().toISOString(),
+    outputs: [
+      \`packages/evo-react/src/\${name}/<basename>.stories.tsx\`,
+    ]
+  };
+  s.updatedAt = new Date().toISOString();
+  fs.writeFileSync(p, JSON.stringify(s, null, 2));
+  console.log('Step 11 completion record written.');
+  "
+  ```
+  ````
+
+  ```
+
+  ```
+
+- [ ] **Step 6: Verify all four files**
+
+  ```bash
+  grep -n "steps\['8'\]" .claude/skills/evo-marko-component/SKILL.md
+  grep -n "steps\['9'\]" .claude/skills/evo-marko-storybook/SKILL.md
+  grep -n "steps\['10'\]" .claude/skills/evo-react-component/SKILL.md
+  grep -n "steps\['11'\]" .claude/skills/evo-react-storybook/SKILL.md
+  ```
+
+  Expected: all four found.
+
+- [ ] **Step 7: Commit**
+
+  ```bash
+  git add .claude/skills/evo-marko-component/SKILL.md \
+          .claude/skills/evo-marko-storybook/SKILL.md \
+          .claude/skills/evo-react-component/SKILL.md \
+          .claude/skills/evo-react-storybook/SKILL.md
+  git commit -m "feat(ai): add completion record writes to all framework layer sub-skills"
+  ```
+
+---
+
+## Task 9: Micro-QA Checkpoint 1 — After Step 7 (Static Layer)
+
+**Files:**
+
+- Modify: `.claude/skills/evo-component/SKILL.md` — insert micro-QA-1 block after Step 7 section
+- Modify: `.claude/skills/evo-qa/SKILL.md` — add `--checkpoint` mode
+
+- [ ] **Step 1: Add micro-qa-1 section to evo-component**
+
+  Insert the following immediately after the `## Step 7 — A11y Pass 1` section
+  and before `## Step 8 — Marko component`:
+
+  ```markdown
+  ## Micro-QA Checkpoint 1 — Static layer verification (after Step 7)
+
+  **Scopes: full, static** | ⏭ skip for: interactive, style
+
+  > **Before running:** Run the pre-step preamble (check if micro-qa-1 is already complete,
+  > mark in-progress). If already complete, skip to Step 8.
+
+  Spawn a fresh Agent to verify the static layer in genuine isolation. This agent has no
+  memory of the generation session — it reads only from disk.
+
+  Use the Agent tool with the following prompt (substitute actual values for $COMPONENT,
+  $BLOCK, $SCOPE before spawning):
+  ```
+
+  Agent(
+  description: "Micro-QA checkpoint 1 — static layer for $COMPONENT",
+  prompt: """
+  You are an isolated QA agent verifying the static layer of an evo-web component pipeline.
+  You have NO prior context from the generation session. Read ONLY from disk.
+
+  Component: $COMPONENT
+  BEM block: $BLOCK
+  Manifest: src/routes/_index/components/$COMPONENT/manifest.json
+
+  Read the manifest first. Then run each check below in order.
+
+  === CHECKS ===
+
+  CHECK 1 — SCSS file exists and is non-empty
+  Command: test -s packages/skin/src/sass/$BLOCK/$BLOCK.scss && echo PASS || echo FAIL
+
+  CHECK 2 — BEM block rule present in SCSS
+  Command: grep -c "\.$BLOCK {" packages/skin/src/sass/$BLOCK/$BLOCK.scss
+  Pass: count >= 1. Fail: count is 0.
+
+  CHECK 3 — No deprecated BEM nesting in SCSS
+  Command: grep -c "&--" packages/skin/src/sass/$BLOCK/$BLOCK.scss
+  Pass: count is 0. Fail: any nesting found.
+
+  CHECK 4 — Every modifier from manifest.bem.modifiers[] has a rule in SCSS
+  For each modifier name M in manifest.bem.modifiers[]:
+  grep -c "\.$BLOCK--M " packages/skin/src/sass/$BLOCK/$BLOCK.scss
+  Pass: count >= 1. Fail: count is 0 (rule missing).
+
+  CHECK 5 — Stories file exists
+  Command: test -f packages/skin/src/sass/$BLOCK/stories/$BLOCK.stories.js && echo PASS || echo FAIL
+
+  CHECK 6 — RTL export present in stories
+  Command: grep -c "export.\*RTL" packages/skin/src/sass/$BLOCK/stories/$BLOCK.stories.js
+  Pass: count >= 1.
+
+  CHECK 7 — textSpacing export present in stories
+  Command: grep -c "export.\*textSpacing" packages/skin/src/sass/$BLOCK/stories/$BLOCK.stories.js
+  Pass: count >= 1.
+
+  CHECK 8 — accessibility+page.marko exists and contains static sections
+  Command: test -f src/routes/\_index/components/$COMPONENT/accessibility+page.marko && echo PASS || echo FAIL
+  Also grep for "Best Practices" and "ARIA Reference" headings.
+
+  CHECK 9 — No Marko 5 scriptlet patterns in any generated file (check SCSS only for this pass)
+  Command: grep -rn "^\$ \(let\|const\|var\)" packages/skin/src/sass/$BLOCK/
+  Pass: no output. Fail: any match.
+
+  === WRITE RESULT ===
+
+  After all checks, write your result to the pipeline state file:
+
+  node -e "
+  const fs = require('fs');
+  const p = 'src/routes/\_index/components/$COMPONENT/pipeline-state.json';
+  const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+  const issues = [];
+  // populate issues[] with any FAIL results from your checks above
+  s.steps['micro-qa-1'] = {
+  status: issues.length === 0 ? 'complete' : 'failed',
+  completedAt: new Date().toISOString(),
+  checks: 9,
+  issues
+  };
+  s.updatedAt = new Date().toISOString();
+  fs.writeFileSync(p, JSON.stringify(s, null, 2));
+  "
+
+  Return a JSON object: { passed: boolean, issues: string[] }
+  If passed is false, list each failing check with the specific file and what was expected.
+  """
+  )
+
+  ````
+
+  After the Agent returns, read the result from the state file:
+
+  ```bash
+  node -e "
+  const fs = require('fs');
+  const s = JSON.parse(fs.readFileSync('src/routes/_index/components/$COMPONENT/pipeline-state.json', 'utf8'));
+  console.log(JSON.stringify(s.steps['micro-qa-1'], null, 2));
+  "
+  ````
+
+  **If micro-qa-1 status is `failed`:**
+
+  ```
+  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  🔴 Micro-QA Checkpoint 1 FAILED — static layer issues detected
+  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  The following issues were found by an isolated verification agent:
+  <list issues from micro-qa-1.issues[]>
+
+  These issues were caught BEFORE the Marko and React layers were generated,
+  saving you from building framework layers on a broken static foundation.
+
+  Fix the issues above by re-running /evo-static-component or editing files
+  manually, then re-run /evo-component $COMPONENT to retry from this checkpoint.
+  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  ```
+
+  Do NOT advance to Step 8. Do not attempt inline fixes. Stop.
+
+  **If micro-qa-1 status is `complete`:**
+
+  ```
+  ✅ Micro-QA Checkpoint 1 — static layer verified by isolated agent (9/9 checks passed)
+  ```
+
+  Immediately advance to Step 8.
+
+  → **Next:** After micro-qa-1 passes, immediately invoke Step 8.
+
+  ```
+
+  ```
+
+- [ ] **Step 2: Verify the section was inserted**
+
+  ```bash
+  grep -n "Micro-QA Checkpoint 1" .claude/skills/evo-component/SKILL.md
+  grep -n "micro-qa-1" .claude/skills/evo-component/SKILL.md | head -5
+  ```
+
+  Expected: both found.
+
+- [ ] **Step 3: Commit**
+
+  ```bash
+  git add .claude/skills/evo-component/SKILL.md
+  git commit -m "feat(ai): add micro-QA checkpoint 1 (static layer) with true Agent spawn"
+  ```
+
+---
+
+## Task 10: Micro-QA Checkpoint 2 — After Step 12 (Framework Layer)
+
+**Files:**
+
+- Modify: `.claude/skills/evo-component/SKILL.md` — insert micro-QA-2 block after Step 12
+
+- [ ] **Step 1: Insert micro-qa-2 section after Step 12**
+
+  Insert the following immediately after the `## Step 12 — A11y Pass 2` section
+  and before `## Step 13 — Docs hookup (full)`:
+
+  ```markdown
+  ## Micro-QA Checkpoint 2 — Framework layer verification (after Step 12)
+
+  **Scopes: full, interactive** | ⏭ skip for: static, style
+
+  > **Before running:** Run the pre-step preamble (check if micro-qa-2 is already complete,
+  > mark in-progress). If already complete, skip to Step 13.
+
+  Spawn a fresh Agent to verify the framework layer in genuine isolation.
+
+  Use the Agent tool with the following prompt:
+  ```
+
+  Agent(
+  description: "Micro-QA checkpoint 2 — framework layer for $COMPONENT",
+  prompt: """
+  You are an isolated QA agent verifying the framework layer of an evo-web component pipeline.
+  You have NO prior context from the generation session. Read ONLY from disk.
+
+  Component: $COMPONENT
+  BEM block: $BLOCK
+  Marko name: $MARKO_NAME   (e.g. evo-accordion)
+  React name: $REACT_NAME   (e.g. accordion)
+  Manifest: src/routes/_index/components/$COMPONENT/manifest.json
+
+  Read the manifest fully before starting checks.
+
+  === CHECKS ===
+
+  CHECK 1 — index.marko exists and is non-empty
+  Command: test -s packages/evo-marko/src/tags/$MARKO_NAME/index.marko && echo PASS || echo FAIL
+
+  CHECK 2 — No Marko 5 scriptlet patterns in index.marko
+  Command: grep -cn "^\$ \(let\|const\|var\)" packages/evo-marko/src/tags/$MARKO_NAME/index.marko
+  Pass: 0. Fail: any count > 0 (list each matching line).
+
+  CHECK 3 — BEM block class applied in index.marko
+  Command: grep -c "\"$BLOCK\"" packages/evo-marko/src/tags/$MARKO_NAME/index.marko
+  Pass: >= 1.
+
+  CHECK 4 — Every prop in manifest.props[] appears in the Input interface
+  For each prop name P in manifest.props[]:
+  grep -c "P[?]?:" packages/evo-marko/src/tags/$MARKO_NAME/index.marko
+  Pass: >= 1. Fail: 0 (prop missing from interface).
+
+  CHECK 5 — style.ts contains correct skin import
+  Command: cat packages/evo-marko/src/tags/$MARKO_NAME/style.ts
+  Expected: import "@ebay/skin/$BLOCK";
+  Pass: exact match. Fail: wrong or missing.
+
+  CHECK 6 — index.tsx exists and is non-empty
+  Command: test -s packages/evo-react/src/$REACT_NAME/index.tsx && echo PASS || echo FAIL
+
+  CHECK 7 — No forwardRef in index.tsx (evo-react uses React 19 native ref)
+  Command: grep -c "forwardRef" packages/evo-react/src/$REACT_NAME/index.tsx
+  Pass: 0. Fail: any count > 0.
+
+  CHECK 8 — Component export present in index.tsx
+  Command: grep -c "^export \(function\|const\)" packages/evo-react/src/$REACT_NAME/index.tsx
+  Pass: >= 1.
+
+  CHECK 9 — Every prop in manifest.props[] appears in React Props type
+  For each prop name P in manifest.props[]:
+  grep -c "P[?]?:" packages/evo-react/src/$REACT_NAME/index.tsx
+  Pass: >= 1.
+
+  CHECK 10 — Marko stories file exists
+  Command: test -f packages/evo-marko/src/tags/$MARKO_NAME/$MARKO_NAME.stories.ts && echo PASS || echo FAIL
+
+  CHECK 11 — React stories file exists
+  Command: find packages/evo-react/src/$REACT_NAME -name "\*.stories.tsx" | grep -c .
+  Pass: >= 1.
+
+  CHECK 12 — accessibility+meta.json exists
+  Command: test -f src/routes/\_index/components/$COMPONENT/accessibility+meta.json && echo PASS || echo FAIL
+
+  === WRITE RESULT ===
+
+  node -e "
+  const fs = require('fs');
+  const p = 'src/routes/\_index/components/$COMPONENT/pipeline-state.json';
+  const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+  const issues = [];
+  // populate with any FAIL results
+  s.steps['micro-qa-2'] = {
+  status: issues.length === 0 ? 'complete' : 'failed',
+  completedAt: new Date().toISOString(),
+  checks: 12,
+  issues
+  };
+  s.updatedAt = new Date().toISOString();
+  fs.writeFileSync(p, JSON.stringify(s, null, 2));
+  "
+
+  Return: { passed: boolean, issues: string[] }
+  """
+  )
+
+  ```
+
+  After the Agent returns, read micro-qa-2 from the state file and apply the same
+  halt/pass logic as Checkpoint 1. If failed, print the structured failure banner
+  and stop. If passed, advance to Step 13.
+
+  ```
+
+  ✅ Micro-QA Checkpoint 2 — framework layer verified by isolated agent (12/12 checks passed)
+
+  ```
+
+  → **Next:** After micro-qa-2 passes, immediately invoke Step 13.
+  ```
+
+- [ ] **Step 2: Verify**
+
+  ```bash
+  grep -n "Micro-QA Checkpoint 2" .claude/skills/evo-component/SKILL.md
+  grep -n "micro-qa-2" .claude/skills/evo-component/SKILL.md | head -5
+  ```
+
+  Expected: both found.
+
+- [ ] **Step 3: Commit**
+
+  ```bash
+  git add .claude/skills/evo-component/SKILL.md
+  git commit -m "feat(ai): add micro-QA checkpoint 2 (framework layer) with true Agent spawn"
+  ```
+
+---
+
+## Task 11: evo-qa — True Agent Spawn for Step 15
+
+**Files:**
+
+- Modify: `.claude/skills/evo-component/SKILL.md` — replace Step 15 with Agent spawn
+- Modify: `.claude/skills/evo-qa/SKILL.md` — add completion record write
+
+- [ ] **Step 1: Replace Step 15 in evo-component with true Agent spawn**
+
+  Find the `## Step 15 — QA validation` section in evo-component and replace its
+  invocation instructions with:
+
+  ```markdown
+  ## Step 15 — QA validation (true Agent spawn)
+
+  **Scopes: all**
+
+  > **Before running:** Run the pre-step preamble (check if step 15 is already complete).
+
+  Spawn a fresh Agent running the `evo-qa` skill. This agent has a completely fresh
+  context window — no memory of what was generated or why. It reads only from disk.
+  ```
+
+  Agent(
+  subagent_type: "evo-qa",
+  description: "QA validation for $COMPONENT [scope: $SCOPE]",
+    prompt: """
+  Component: $COMPONENT
+  Scope: $SCOPE
+  Manifest path: src/routes/_index/components/$COMPONENT/manifest.json
+  State file: src/routes/\_index/components/$COMPONENT/pipeline-state.json
+
+  Files generated in this run:
+  <list all paths from completion records of steps 4–13 that ran in this scope>
+
+  Run Layer 1 checks for the declared scope. When done, write your completion record:
+  steps["15"] = { status: "complete"|"failed", completedAt, failedChecks: [...] }
+
+  Reference component (for Layer 2): $REFERENCE_COMPONENT (or "none")
+  """
+  )
+
+  ```
+
+  After the Agent returns, read the step 15 status from the state file. If `failed`:
+  surface the structured failure banner and stop. If `complete`: advance to Step 16.
+
+  The orchestrator does NOT attempt to fix QA failures inline — the engineer decides.
+  ```
+
+- [ ] **Step 2: Add completion record write to evo-qa**
+
+  Append the following to the end of `.claude/skills/evo-qa/SKILL.md`:
+
+  ````markdown
+  ---
+
+  ## Completion record — mandatory final step
+
+  After printing the QA report, write the completion record to the pipeline state file.
+
+  ```bash
+  node -e "
+  const fs = require('fs');
+  const comp = process.env.COMPONENT || '$COMPONENT';
+  const p = \`src/routes/_index/components/\${comp}/pipeline-state.json\`;
+  const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+  const failedChecks = [];
+  // populate with any check IDs that failed (e.g. ['1a', '1d'])
+  s.steps['15'] = {
+    status: failedChecks.length === 0 ? 'complete' : 'failed',
+    completedAt: new Date().toISOString(),
+    failedChecks
+  };
+  s.updatedAt = new Date().toISOString();
+  fs.writeFileSync(p, JSON.stringify(s, null, 2));
+  console.log('Step 15 completion record written.');
+  "
+  ```
+  ````
+
+  Do not write `status: "complete"` if any 🔴 Layer 1 check failed.
+  Layer 2 findings do not affect the completion status (they are informational only).
+
+  ```
+
+  ```
+
+- [ ] **Step 3: Verify**
+
+  ```bash
+  grep -n "true Agent spawn" .claude/skills/evo-component/SKILL.md
+  grep -n "subagent_type.*evo-qa" .claude/skills/evo-component/SKILL.md
+  grep -n "steps\['15'\]" .claude/skills/evo-qa/SKILL.md
+  ```
+
+  Expected: all three found.
+
+- [ ] **Step 4: Commit**
+
+  ```bash
+  git add .claude/skills/evo-component/SKILL.md .claude/skills/evo-qa/SKILL.md
+  git commit -m "feat(ai): convert evo-qa step 15 to true Agent spawn for genuine context isolation"
+  ```
+
+---
+
+## Task 12: End-to-end Smoke Test (Manual Verification)
+
+This task is a manual walkthrough — no code is written.
+
+- [ ] **Step 1: Verify state file sections exist in evo-component**
+
+  ```bash
+  grep -n "Step 2.5" .claude/skills/evo-component/SKILL.md
+  grep -n "Transition table" .claude/skills/evo-component/SKILL.md
+  grep -n "Pre-step preamble" .claude/skills/evo-component/SKILL.md
+  grep -n "Post-step verification" .claude/skills/evo-component/SKILL.md
+  grep -n "Micro-QA Checkpoint 1" .claude/skills/evo-component/SKILL.md
+  grep -n "Micro-QA Checkpoint 2" .claude/skills/evo-component/SKILL.md
+  grep -n "true Agent spawn" .claude/skills/evo-component/SKILL.md
+  grep -n "Failure halting" .claude/skills/evo-component/SKILL.md
+  ```
+
+  Expected: all 8 found.
+
+- [ ] **Step 2: Verify state file awareness in evo-pipeline**
+
+  ```bash
+  grep -n "pipeline-state.json" .claude/skills/evo-pipeline/SKILL.md
+  grep -n "Prior pipeline run detected" .claude/skills/evo-pipeline/SKILL.md
+  ```
+
+  Expected: both found.
+
+- [ ] **Step 3: Verify all sub-skills have completion records**
+
+  ```bash
+  grep -l "Completion record" .claude/skills/evo-static-component/SKILL.md \
+    .claude/skills/evo-static-storybook/SKILL.md \
+    .claude/skills/evo-docs-hookup/SKILL.md \
+    .claude/skills/evo-a11y/SKILL.md \
+    .claude/skills/evo-marko-component/SKILL.md \
+    .claude/skills/evo-marko-storybook/SKILL.md \
+    .claude/skills/evo-react-component/SKILL.md \
+    .claude/skills/evo-react-storybook/SKILL.md \
+    .claude/skills/evo-qa/SKILL.md
+  ```
+
+  Expected: all 9 files listed.
+
+- [ ] **Step 4: Verify step IDs match across orchestrator and sub-skills**
+
+  ```bash
+  # Each step ID should appear in evo-component's transition table AND in the sub-skill's completion record
+  for id in 4 5 6 7 8 9 10 11 12 13 15; do
+    echo "--- Step $id ---"
+    grep -c "steps\[.$id.\]" .claude/skills/evo-component/SKILL.md
+  done
+  ```
+
+  Every step should return at least 1 (referenced in transition table or post-step read).
+
+- [ ] **Step 5: Final commit with plan doc**
+
+  ```bash
+  git add docs/superpowers/plans/2026-06-10-evo-pipeline-reliability.md
+  git commit -m "docs(ai): add evo-pipeline reliability implementation plan"
+  ```
+
+---
+
+## Self-Review
+
+**Spec coverage:**
+
+| Enhancement                                         | Task that implements it                                                  |
+| --------------------------------------------------- | ------------------------------------------------------------------------ |
+| 1 — Disk-resident pipeline state (schema + init)    | Task 1                                                                   |
+| 2 — Structured completion signals from sub-skills   | Tasks 4–8, 11                                                            |
+| 3 — Idempotent steps via artifact checks            | Task 3 (Pre-step preamble)                                               |
+| 4 — Explicit transition table                       | Task 3                                                                   |
+| 5 — Failure as data, not silence                    | Task 3 (Failure halting)                                                 |
+| 6 — Pre-flight input validation                     | Task 3 (Pre-step preamble)                                               |
+| 7 — Stall detection via timestamp                   | Task 1                                                                   |
+| 8 — Manifest hash lock                              | Task 1                                                                   |
+| 9 — Content-level output validation                 | Task 3 (Post-step verification)                                          |
+| 10 — Context budget checkpointing                   | Not implemented — deferred (most complex, lowest mechanical feasibility) |
+| 11 — Verifiable step claims (claim vs. reality gap) | Task 3 (Post-step verification reads completion record)                  |
+| 12 — Scope boundary enforcement                     | Task 3 (Post-step verification, allowedWriteZones)                       |
+| Micro-QA checkpoint 1 (static)                      | Task 9                                                                   |
+| Micro-QA checkpoint 2 (framework)                   | Task 10                                                                  |
+| True Agent spawn for end QA                         | Task 11                                                                  |
+
+**Gaps:** Enhancement 10 (context budget) intentionally deferred — it requires runtime token tracking that has no mechanical implementation in this skill architecture.
+
+**Placeholder scan:** No TBDs or "implement later" phrases present. All node -e snippets are complete. All check commands are exact bash.
+
+**Type consistency:** Step IDs consistent throughout (`'4'` through `'15'`, `'micro-qa-1'`, `'micro-qa-2'`). `BLOCK` vs `NAME` vs `COMPONENT` terminology consistent with existing skill conventions.
diff --git a/package.json b/package.json
index 2fe005edc5..069f2642c0 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,10 @@
     "build": "npm run lint && npm run build -w packages/skin && concurrently --kill-others-on-fail \"mtc\" \"npm run build -w packages/ebayui-core\" \"npm run build -w packages/evo-marko\" \"npm run build -w packages/ebayui-core-react\" \"npm run build -w packages/evo-react\"",
     "build:ci": "CI=true && npm run build",
     "change": "changeset add",
+    "codegen:scaffold": "tsx scripts/codegen/generate-component-scaffold.ts",
+    "codegen:spec-to-manifest": "tsx scripts/codegen/spec-to-manifest.ts",
+    "codegen:update-metadata": "tsx scripts/codegen/update-component-metadata.ts",
+    "codegen:validate-manifest": "tsx scripts/codegen/validate-manifest.ts",
     "deploy": "copyfiles src/data/component-metadata.json public/ -u 2 && npm run deploy:build && npm run deploy:copy-site",
     "deploy:build": "concurrently --kill-others-on-fail \"BASE_URL=/evo-web/ marko-run build -o ./_site\" \"npm run deploy -w packages/skin\" \"npm run deploy -w packages/ebayui-core\" \"npm run deploy -w packages/evo-marko\" \"npm run deploy -w packages/ebayui-core-react\" \"npm run deploy -w packages/evo-react\"",
     "deploy:copy-site": "copyfiles packages/skin/_site/public _site/public/skin-storybook -u 4 && copyfiles packages/ebayui-core/_site _site/public/ebayui-core -u 3 && copyfiles packages/evo-marko/_site _site/public/marko -u 3 && copyfiles packages/ebayui-core-react/_site _site/public/ebayui-core-react -u 3 && copyfiles packages/evo-react/_site _site/public/react -u 3",
diff --git a/scripts/codegen/generate-component-scaffold.ts b/scripts/codegen/generate-component-scaffold.ts
new file mode 100644
index 0000000000..00aa50fd0d
--- /dev/null
+++ b/scripts/codegen/generate-component-scaffold.ts
@@ -0,0 +1,526 @@
+#!/usr/bin/env node
+/**
+ * generate-component-scaffold.ts
+ *
+ * Generates the deterministic structural scaffolding for a new evo-web component.
+ * Writes files that are byte-identical given the same manifest — the AI skills
+ * then complete the non-deterministic parts (template body, component body,
+ * behavioral logic) on top of these scaffolds.
+ *
+ * Files written:
+ *   packages/evo-marko/src/tags/<name>/style.ts          — complete (one line)
+ *   packages/evo-marko/src/tags/<name>/index.marko        — scaffold (interface + stubs)
+ *   packages/evo-marko/src/tags/<name>/test/test.server.ts — complete structure
+ *   packages/evo-react/src/<name>/index.tsx               — scaffold (props type + stubs)
+ *
+ * Usage:
+ *   npx tsx scripts/codegen/generate-component-scaffold.ts <component-name>
+ *   npx tsx scripts/codegen/generate-component-scaffold.ts accordion
+ *
+ * Reads:  src/routes/_index/components/<name>/manifest.json
+ * Writes: packages/evo-marko/src/tags/<evo-name>/*
+ *         packages/evo-react/src/<evo-name>/*
+ */
+
+/* eslint-disable no-console */
+import fs from "fs";
+import path from "path";
+import { execSync } from "child_process";
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+interface Manifest {
+    component: {
+        name: string;
+        displayName: string;
+        description?: string;
+        category?: string;
+    };
+    rootElement?: {
+        default?: string;
+        excludedAttributes?: string[];
+    };
+    props?: ManifestProp[];
+    a11yProps?: ManifestA11yProp[];
+    slots?: ManifestSlot[];
+    variants?: { name: string }[];
+    bem?: {
+        block: string;
+        modifiers?: { name: string; description?: string }[];
+        elements?: { name: string }[];
+    };
+    a11y?: {
+        role?: string;
+        explicitRole?: boolean;
+        labelStrategy?: string;
+        ariaAttributes?: { attribute: string; condition?: string }[];
+    };
+    keyboardModel?: unknown;
+}
+
+interface ManifestProp {
+    name: string;
+    type: string;
+    values?: unknown[] | null;
+    default?: unknown;
+    required?: boolean;
+    description?: string | null;
+}
+
+interface ManifestA11yProp {
+    name: string;
+    type?: string;
+    required?: boolean;
+    allowNull?: boolean;
+    description?: string | null;
+}
+
+interface ManifestSlot {
+    name: string;
+    type?: string | null;
+    required?: boolean;
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+const HTML_ELEMENT_MAP: Record<string, string> = {
+    div: "Div",
+    span: "Span",
+    button: "Button",
+    a: "A",
+    input: "Input",
+    textarea: "Textarea",
+    select: "Select",
+    form: "Form",
+    ul: "Ul",
+    ol: "Ol",
+    li: "Li",
+    nav: "Nav",
+    section: "Section",
+    article: "Article",
+    header: "Header",
+    footer: "Footer",
+    main: "Main",
+    aside: "Aside",
+    dialog: "Dialog",
+    details: "Details",
+    summary: "Summary",
+    label: "Label",
+    fieldset: "Fieldset",
+    legend: "Legend",
+    table: "Table",
+    tr: "Tr",
+    td: "Td",
+    th: "Th",
+};
+
+function markoHtmlType(element: string): string {
+    return `Marko.HTML.${HTML_ELEMENT_MAP[element] ?? "Div"}`;
+}
+
+function reactHtmlType(element: string): string {
+    return `"${element}"`;
+}
+
+function propToMarkoType(prop: ManifestProp): string {
+    switch (prop.type) {
+        case "string":
+            return "string";
+        case "number":
+            return "number";
+        case "boolean":
+            return "boolean";
+        case "enum":
+            return prop.values?.map((v) => JSON.stringify(v)).join(" | ") ?? "string";
+        default:
+            return "unknown";
+    }
+}
+
+function propToReactType(prop: ManifestProp): string {
+    // Same logic for now — both use TypeScript
+    return propToMarkoType(prop);
+}
+
+function buildOmitList(manifest: Manifest): string[] {
+    const omit: string[] = [];
+    if (manifest.a11y?.explicitRole && manifest.a11y.role) omit.push("role");
+    if (manifest.a11y?.labelStrategy === "aria-label-prop") omit.push("aria-label");
+    if (manifest.a11y?.labelStrategy === "aria-hidden") {
+        omit.push("aria-label");
+        omit.push("aria-hidden");
+    }
+    return [...new Set([...(manifest.rootElement?.excludedAttributes ?? []), ...omit])];
+}
+
+// ── Marko Input interface ─────────────────────────────────────────────────────
+
+function buildMarkoInterface(manifest: Manifest): string {
+    const rootEl = manifest.rootElement?.default ?? "div";
+    const htmlType = markoHtmlType(rootEl);
+    const omit = buildOmitList(manifest);
+    const extension =
+        omit.length > 0
+            ? `Omit<${htmlType}, ${omit.map((a) => JSON.stringify(a)).join(" | ")}>`
+            : htmlType;
+
+    const lines: string[] = [];
+
+    // Regular props
+    for (const prop of manifest.props ?? []) {
+        const tsType = propToMarkoType(prop);
+        const optional = !prop.required ? "?" : "";
+        if (prop.description) {
+            lines.push(`    /** ${prop.description.replace(/\n/g, " ")} */`);
+        }
+        lines.push(`    ${prop.name}${optional}: ${tsType};`);
+    }
+
+    // A11y props
+    for (const a11yProp of manifest.a11yProps ?? []) {
+        const nullable = a11yProp.allowNull ? " | null" : "";
+        const optional = !a11yProp.required ? "?" : "";
+        if (a11yProp.description) {
+            lines.push(`    /** ${a11yProp.description.replace(/\n/g, " ")} */`);
+        }
+        lines.push(`    ${a11yProp.name}${optional}: string${nullable};`);
+    }
+
+    // Named slots
+    for (const slot of manifest.slots ?? []) {
+        if (slot.type === "named-attrtag") {
+            const optional = !slot.required ? "?" : "";
+            lines.push(`    ${slot.name}${optional}: Marko.AttrTag<Marko.HTML.Div>; // TODO: narrow element type`);
+        }
+    }
+
+    const body = lines.length > 0 ? "\n" + lines.join("\n") + "\n" : "";
+
+    return `export interface Input extends ${extension} {${body}}`;
+}
+
+// ── React Props interface ─────────────────────────────────────────────────────
+
+function buildReactInterface(manifest: Manifest, componentName: string): string {
+    const rootEl = manifest.rootElement?.default ?? "div";
+    const omit = buildOmitList(manifest);
+    const extension =
+        omit.length > 0
+            ? `Omit<React.ComponentProps<${reactHtmlType(rootEl)}>, ${omit.map((a) => JSON.stringify(a)).join(" | ")}>`
+            : `React.ComponentProps<${reactHtmlType(rootEl)}>`;
+
+    const lines: string[] = [];
+
+    for (const prop of manifest.props ?? []) {
+        const tsType = propToReactType(prop);
+        const optional = !prop.required ? "?" : "";
+        if (prop.description) {
+            lines.push(`    /** ${prop.description.replace(/\n/g, " ")} */`);
+        }
+        lines.push(`    ${prop.name}${optional}: ${tsType};`);
+    }
+
+    for (const a11yProp of manifest.a11yProps ?? []) {
+        const nullable = a11yProp.allowNull ? " | null" : "";
+        const optional = !a11yProp.required ? "?" : "";
+        if (a11yProp.description) {
+            lines.push(`    /** ${a11yProp.description.replace(/\n/g, " ")} */`);
+        }
+        lines.push(`    ${a11yProp.name}${optional}: string${nullable};`);
+    }
+
+    for (const slot of manifest.slots ?? []) {
+        if (slot.type === "named-attrtag") {
+            const optional = !slot.required ? "?" : "";
+            lines.push(`    ${slot.name}${optional}: React.ReactNode;`);
+        }
+    }
+
+    const body = lines.length > 0 ? "\n" + lines.join("\n") + "\n" : "";
+    const ifaceName = `${componentName}Props`;
+
+    return `export interface ${ifaceName} extends ${extension} {${body}}`;
+}
+
+// ── BEM class array comment ───────────────────────────────────────────────────
+
+function buildBEMComment(manifest: Manifest): string {
+    const block = manifest.bem?.block ?? "component";
+    const modifiers = (manifest.bem?.modifiers ?? []).map((m) => m.name);
+
+    const lines = [`// BEM class array — add conditional expressions for each modifier:`];
+    lines.push(`// class=[`);
+    lines.push(`//     "${block}",                    // always`);
+    for (const mod of modifiers) {
+        lines.push(`//     /* ${mod} && "${block}--${mod}" */,  // TODO: add condition`);
+    }
+    lines.push(`//     className,              // consumer className passthrough`);
+    lines.push(`// ]`);
+
+    return lines.join("\n");
+}
+
+// ── ARIA wiring comment ───────────────────────────────────────────────────────
+
+function buildARIAComment(manifest: Manifest): string {
+    const a11y = manifest.a11y;
+    if (!a11y) return "// No ARIA wiring required for this component.";
+
+    const lines = ["// ARIA wiring — wire these exactly as shown:"];
+
+    if (a11y.explicitRole && a11y.role) {
+        lines.push(`// role="${a11y.role}"`);
+    }
+
+    if (a11y.labelStrategy === "aria-label-prop") {
+        const prop = manifest.a11yProps?.[0]?.name ?? "a11yText";
+        const allowNull = manifest.a11yProps?.[0]?.allowNull;
+        if (allowNull) {
+            lines.push(`// aria-label=(${prop} !== null ? ${prop} : undefined)`);
+            lines.push(`// aria-hidden=(${prop} === null ? "true" : undefined)`);
+        } else {
+            lines.push(`// aria-label=${prop}`);
+        }
+    }
+
+    for (const attr of a11y.ariaAttributes ?? []) {
+        if (attr.condition && attr.condition !== "always") {
+            lines.push(`// ${attr.attribute}=(/* ${attr.condition} */ ? ... : undefined)`);
+        } else {
+            lines.push(`// ${attr.attribute}=...`);
+        }
+    }
+
+    return lines.join("\n");
+}
+
+// ── File generators ───────────────────────────────────────────────────────────
+
+function generateStyleTs(block: string): string {
+    return `import "@ebay/skin/${block}";\n`;
+}
+
+function generateIndexMarko(manifest: Manifest): string {
+    const iface = buildMarkoInterface(manifest);
+    const bem = buildBEMComment(manifest);
+    const aria = buildARIAComment(manifest);
+
+    return [
+        `// AUTO-SCAFFOLD — generated by scripts/codegen/generate-component-scaffold.ts`,
+        `// The Input interface, BEM names, and ARIA wiring below are DETERMINISTIC.`,
+        `// Complete the template body in the TODO section — do not regenerate the interface.`,
+        ``,
+        iface,
+        ``,
+        bem,
+        ``,
+        aria,
+        ``,
+        `// ── TODO: Complete template body ────────────────────────────────────────────`,
+        `// Add <const/{ }=input> destructuring, reactive state (<let/>), and HTML markup.`,
+        `// Read the BEM and ARIA comments above — use those class names and attributes exactly.`,
+        ``,
+    ].join("\n");
+}
+
+function generateIndexTsx(manifest: Manifest, componentName: string): string {
+    const block = manifest.bem?.block ?? componentName.replace(/^evo-/, "");
+    const displayName = manifest.component.displayName;
+    // Sanitize displayName for use as a TypeScript identifier:
+    // "Page Notice" → "PageNotice", "eek" → "Eek"
+    const safeName = displayName
+        .split(/[\s-]+/)
+        .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+        .join("");
+    const iface = buildReactInterface(manifest, safeName);
+    const aria = buildARIAComment(manifest);
+    const propsParam = `{ ${[...(manifest.props ?? []), ...(manifest.a11yProps ?? [])].map((p) => p.name).join(", ")}, className, children, ref, ...rest }`;
+
+    return [
+        `// AUTO-SCAFFOLD — generated by scripts/codegen/generate-component-scaffold.ts`,
+        `// The Props interface and ARIA wiring below are DETERMINISTIC.`,
+        `// Complete the component body in the TODO section — do not regenerate the interface.`,
+        ``,
+        `import "@ebay/skin/${block}";`,
+        `import React from "react";`,
+        ``,
+        iface,
+        ``,
+        aria,
+        ``,
+        `// ── TODO: Complete component body ───────────────────────────────────────────`,
+        `// Use the Props interface above. Wire ARIA attributes from the comment above.`,
+        `// Spread ...rest onto the root element. Attach ref to the root element.`,
+        `export function ${safeName}(${propsParam}: ${safeName}Props) {`,
+        `    // TODO: implement component body`,
+        `    return null;`,
+        `}`,
+        ``,
+    ].join("\n");
+}
+
+function generateTestServerTs(manifest: Manifest, componentName: string): string {
+    const variants = manifest.variants ?? [{ name: "Default" }];
+    const storiesPath = `./${componentName}.stories`;
+
+    const imports = [
+        `import { describe, it } from "vitest";`,
+        `import { composeStories } from "@storybook/marko";`,
+        `import { snapshotHTML } from "../../../common/test-utils/snapshots";`,
+        `import * as stories from "${storiesPath}";`,
+    ].join("\n");
+
+    const destructure =
+        `const { ` +
+        variants
+            .map((v) => v.name.replace(/\s+/g, ""))
+            .join(", ") +
+        ` } = composeStories(stories);`;
+
+    const tests = variants
+        .map((v) => {
+            const name = v.name.replace(/\s+/g, "");
+            const label = v.name.toLowerCase();
+            return [
+                `    it("renders ${label}", async () => {`,
+                `        await snapshotHTML(${name});`,
+                `    });`,
+            ].join("\n");
+        })
+        .join("\n\n");
+
+    return [
+        `// AUTO-SCAFFOLD — generated by scripts/codegen/generate-component-scaffold.ts`,
+        `// Structure is deterministic. Add assertion content as needed.`,
+        ``,
+        imports,
+        ``,
+        `${destructure}`,
+        ``,
+        `describe("${componentName}", () => {`,
+        tests,
+        `});`,
+        ``,
+    ].join("\n");
+}
+
+
+/** Resolves the docs component folder path.
+ *  Strips the "evo-" prefix if present, since docs folders use the BEM block name.
+ *  e.g., "evo-accordion" -> "src/routes/_index/components/accordion"
+ *  e.g., "accordion"     -> "src/routes/_index/components/accordion"
+ */
+function componentDocsDir(componentName: string): string {
+    const block = componentName.replace(/^evo-/, "");
+    return path.resolve("src/routes/_index/components", block);
+}
+
+// ── Main ──────────────────────────────────────────────────────────────────────
+
+const componentName = process.argv[2];
+if (!componentName) {
+    console.error("Usage: generate-component-scaffold.ts <component-name>");
+    process.exit(1);
+}
+
+const manifestPath = path.join(componentDocsDir(componentName), "manifest.json");
+if (!fs.existsSync(manifestPath)) {
+    console.error(`No manifest found at ${manifestPath} — run spec-to-manifest.ts first`);
+    process.exit(1);
+}
+
+const manifest: Manifest = JSON.parse(fs.readFileSync(manifestPath, "utf-8"));
+
+// Derive display name from componentName if manifest.component is not yet populated
+// (e.g. when only spec-to-manifest.ts has run and the AI manifest skill hasn't yet)
+const rawName = componentName.replace(/^evo-/, "");
+const derivedDisplayName = rawName
+    .split("-")
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join("");
+if (!manifest.component) {
+    (manifest as Record<string, unknown>).component = {
+        name: componentName,
+        displayName: derivedDisplayName,
+        description: "",
+        category: "",
+    };
+}
+
+const block = manifest.bem?.block ?? rawName;
+const markoDir = path.resolve("packages/evo-marko/src/tags", componentName);
+const reactDir = path.resolve("packages/evo-react/src", componentName);
+
+fs.mkdirSync(path.join(markoDir, "test"), { recursive: true });
+fs.mkdirSync(reactDir, { recursive: true });
+
+const written: string[] = [];
+
+// style.ts — complete, byte-identical
+const styleTs = generateStyleTs(block);
+fs.writeFileSync(path.join(markoDir, "style.ts"), styleTs, "utf-8");
+written.push("packages/evo-marko/.../style.ts  ← complete");
+
+// index.marko — scaffold with deterministic interface + stubs
+const indexMarko = generateIndexMarko(manifest);
+fs.writeFileSync(path.join(markoDir, "index.marko"), indexMarko, "utf-8");
+written.push("packages/evo-marko/.../index.marko  ← scaffold (complete template body)");
+
+// test.server.ts — complete structure with stubs
+const testServer = generateTestServerTs(manifest, componentName);
+fs.writeFileSync(path.join(markoDir, "test", "test.server.ts"), testServer, "utf-8");
+written.push("packages/evo-marko/.../test/test.server.ts  ← complete structure");
+
+// test.browser.ts — touch only if interactive (skill fills content)
+if (manifest.keyboardModel) {
+    const browserStub = [
+        `// AUTO-SCAFFOLD — generated by scripts/codegen/generate-component-scaffold.ts`,
+        `// This file exists because manifest.keyboardModel is present (interactive component).`,
+        `// Complete browser interaction tests here.`,
+        ``,
+        `import { describe, it, expect, afterEach } from "vitest";`,
+        `import { render, cleanup } from "@marko/testing-library";`,
+        `import { composeStories } from "@storybook/marko";`,
+        `import * as stories from "../${componentName}.stories";`,
+        ``,
+        `const { Default } = composeStories(stories);`,
+        ``,
+        `afterEach(cleanup);`,
+        ``,
+        `describe("${componentName} — browser", () => {`,
+        `    // TODO: add keyboard and interaction tests`,
+        `});`,
+        ``,
+    ].join("\n");
+    fs.writeFileSync(path.join(markoDir, "test", "test.browser.ts"), browserStub, "utf-8");
+    written.push("packages/evo-marko/.../test/test.browser.ts  ← scaffold (keyboardModel present)");
+}
+
+// index.tsx — scaffold with deterministic props type + stubs
+const indexTsx = generateIndexTsx(manifest, componentName);
+fs.writeFileSync(path.join(reactDir, "index.tsx"), indexTsx, "utf-8");
+written.push("packages/evo-react/.../index.tsx  ← scaffold (complete component body)");
+
+console.log(`✅ generate-component-scaffold: ${componentName}`);
+written.forEach((f) => console.log(`   ${f}`));
+console.log(`\nNext: complete template body in index.marko and component body in index.tsx`);
+
+// Post-generation type-check: catch identifier errors (spaces in names, wrong types, etc.)
+// before the AI skills try to build on broken scaffolding.
+try {
+    const result = execSync(
+        `npx tsc --noEmit -p packages/evo-react/tsconfig.json 2>&1 | grep "${componentName}" || true`,
+        { encoding: "utf-8" },
+    ).trim();
+    if (result) {
+        console.error(
+            `\n⚠️  TypeScript errors found in generated scaffold — fix before proceeding:\n${result}`,
+        );
+        process.exit(1);
+    } else {
+        console.log(`   ✅ Post-gen type-check: no errors in generated files`);
+    }
+} catch {
+    // tsc not available or other error — warn but don't block
+    console.warn(`   ⚠️  Post-gen type-check skipped (tsc unavailable)`);
+}
diff --git a/scripts/codegen/spec-to-manifest.ts b/scripts/codegen/spec-to-manifest.ts
new file mode 100644
index 0000000000..93e784b933
--- /dev/null
+++ b/scripts/codegen/spec-to-manifest.ts
@@ -0,0 +1,231 @@
+#!/usr/bin/env node
+/**
+ * spec-to-manifest.ts
+ *
+ * Merges the spec-derivable fields from *.spec.json into manifest.json.
+ * Spec fields (props, tokens, slots, states, figma) take precedence over
+ * AI-inferred values. All other manifest fields (a11y, behaviors, gaps, etc.)
+ * are left untouched — those remain the responsibility of /evo-create-component-manifest.
+ *
+ * Usage:
+ *   npx tsx scripts/codegen/spec-to-manifest.ts <component-name>
+ *   npx tsx scripts/codegen/spec-to-manifest.ts accordion
+ *
+ * Reads:  src/routes/_index/components/<name>/<name>.spec.json
+ * Writes: src/routes/_index/components/<name>/manifest.json  (creates or patches)
+ */
+
+/* eslint-disable no-console */
+import fs from "fs";
+import path from "path";
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+interface SpecProp {
+    type: string;
+    enum?: (string | number)[];
+    default?: unknown;
+    required?: boolean;
+    description?: string;
+}
+
+interface SpecSlot {
+    required?: boolean;
+    description?: string;
+}
+
+interface SpecStates {
+    state?: string[];
+}
+
+interface Spec {
+    component?: string;
+    version?: string;
+    props?: Record<string, SpecProp>;
+    slots?: Record<string, SpecSlot>;
+    states?: SpecStates;
+    tokens?: Record<string, string>;
+    metadata?: {
+        figma?: {
+            fileKey?: string;
+        };
+    };
+}
+
+interface ManifestProp {
+    name: string;
+    type: string;
+    values: unknown[] | null;
+    default: unknown;
+    required: boolean;
+    description: string | null;
+}
+
+interface ManifestSlot {
+    name: string;
+    type: string | null;
+    required: boolean;
+    description: string | null;
+}
+
+interface ManifestState {
+    name: string;
+    trigger: string | null;
+    cssSelector: string | null;
+    ariaAttribute: string | null;
+    keyboardAccess: string | null;
+    renderChange: string | null;
+    description: string | null;
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function componentDocsDir(name: string): string {
+    return path.join(process.cwd(), "src/routes/_index/components", name);
+}
+
+/** Translates "color.background.primary" → "--color-background-primary" */
+function tokenDotToCSS(dotPath: string): string {
+    return "--" + dotPath.replace(/\./g, "-");
+}
+
+function findSpecFile(contractsDir: string, componentName: string): string | null {
+    // Try exact name first, then any *.spec.json in the directory
+    const exact = path.join(contractsDir, `${componentName}.spec.json`);
+    if (fs.existsSync(exact)) return exact;
+
+    const files = fs.readdirSync(contractsDir).filter((f) => f.endsWith(".spec.json"));
+    if (files.length > 0) return path.join(contractsDir, files[0]);
+
+    return null;
+}
+
+// ── Main ──────────────────────────────────────────────────────────────────────
+
+const componentName = process.argv[2];
+if (!componentName) {
+    console.error("Usage: spec-to-manifest.ts <component-name>");
+    process.exit(1);
+}
+
+const contractsDir = componentDocsDir(componentName);
+if (!fs.existsSync(contractsDir)) {
+    console.error(`No component docs directory found at ${contractsDir}`);
+    process.exit(1);
+}
+
+const specPath = findSpecFile(contractsDir, componentName);
+if (!specPath) {
+    console.error(`No *.spec.json found in ${contractsDir}`);
+    process.exit(1);
+}
+
+const manifestPath = path.join(contractsDir, "manifest.json");
+
+const spec: Spec = JSON.parse(fs.readFileSync(specPath, "utf-8"));
+const manifest: Record<string, unknown> = fs.existsSync(manifestPath)
+    ? JSON.parse(fs.readFileSync(manifestPath, "utf-8"))
+    : {};
+
+const changes: string[] = [];
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+
+if (spec.props && Object.keys(spec.props).length > 0) {
+    const existing: ManifestProp[] = (manifest.props as ManifestProp[]) ?? [];
+
+    const specProps: ManifestProp[] = Object.entries(spec.props).map(([name, def]) => {
+        const prev = existing.find((p) => p.name === name);
+        return {
+            name,
+            type: def.type ?? "string",
+            values: def.enum ?? null,
+            default: def.default ?? null,
+            required: def.required ?? false,
+            description: def.description ?? prev?.description ?? null,
+        };
+    });
+
+    // Spec props replace their counterparts; AI-only props (not in spec) are preserved
+    const specNames = new Set(specProps.map((p) => p.name));
+    const preserved = existing.filter((p) => !specNames.has(p.name));
+    manifest.props = [...specProps, ...preserved];
+    changes.push(`props: ${specProps.length} from spec${preserved.length ? ` + ${preserved.length} preserved` : ""}`);
+}
+
+// ── Tokens ────────────────────────────────────────────────────────────────────
+
+if (spec.tokens && Object.keys(spec.tokens).length > 0) {
+    const tokens: Record<string, string> = {};
+    for (const [semantic, dotPath] of Object.entries(spec.tokens)) {
+        tokens[semantic] = tokenDotToCSS(dotPath);
+    }
+    manifest.tokens = tokens;
+    changes.push(`tokens: ${Object.keys(tokens).length} entries`);
+}
+
+// ── Slots ─────────────────────────────────────────────────────────────────────
+
+if (spec.slots && Object.keys(spec.slots).length > 0) {
+    const existing: ManifestSlot[] = (manifest.slots as ManifestSlot[]) ?? [];
+
+    const specSlots: ManifestSlot[] = Object.entries(spec.slots).map(([name, def]) => {
+        const prev = existing.find((s) => s.name === name);
+        return {
+            name,
+            // Preserve AI-inferred slot type (named-attrtag, default, named) if present
+            type: prev?.type ?? null,
+            required: def.required ?? false,
+            description: def.description ?? prev?.description ?? null,
+        };
+    });
+
+    const specNames = new Set(specSlots.map((s) => s.name));
+    const preserved = existing.filter((s) => !specNames.has(s.name));
+    manifest.slots = [...specSlots, ...preserved];
+    changes.push(`slots: ${specSlots.length} from spec${preserved.length ? ` + ${preserved.length} preserved` : ""}`);
+}
+
+// ── States ────────────────────────────────────────────────────────────────────
+
+if (spec.states?.state && spec.states.state.length > 0) {
+    const existing: ManifestState[] = (manifest.states as ManifestState[]) ?? [];
+
+    const specStates: ManifestState[] = spec.states.state.map((name) => {
+        const prev = existing.find((s) => s.name === name);
+        return {
+            name,
+            trigger: prev?.trigger ?? null,
+            cssSelector: prev?.cssSelector ?? null,
+            ariaAttribute: prev?.ariaAttribute ?? null,
+            keyboardAccess: prev?.keyboardAccess ?? null,
+            renderChange: prev?.renderChange ?? null,
+            description: prev?.description ?? null,
+        };
+    });
+
+    const specNames = new Set(specStates.map((s) => s.name));
+    const preserved = existing.filter((s) => !specNames.has(s.name));
+    manifest.states = [...specStates, ...preserved];
+    changes.push(`states: ${specStates.length} from spec${preserved.length ? ` + ${preserved.length} preserved` : ""}`);
+}
+
+// ── Figma ─────────────────────────────────────────────────────────────────────
+
+if (spec.metadata?.figma?.fileKey) {
+    const existing = (manifest.figma as Record<string, unknown>) ?? {};
+    manifest.figma = {
+        fileKey: spec.metadata.figma.fileKey,
+        nodeId: existing.nodeId ?? null,
+    };
+    changes.push(`figma.fileKey: ${spec.metadata.figma.fileKey}`);
+}
+
+// ── Write ─────────────────────────────────────────────────────────────────────
+
+fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2) + "\n", "utf-8");
+
+console.log(`✅ spec-to-manifest: ${componentName}`);
+console.log(`   Source: ${path.relative(process.cwd(), specPath)}`);
+console.log(`   Output: ${path.relative(process.cwd(), manifestPath)}`);
+changes.forEach((c) => console.log(`   → ${c}`));
diff --git a/scripts/codegen/update-component-metadata.ts b/scripts/codegen/update-component-metadata.ts
new file mode 100644
index 0000000000..975b7912bf
--- /dev/null
+++ b/scripts/codegen/update-component-metadata.ts
@@ -0,0 +1,131 @@
+#!/usr/bin/env node
+/**
+ * update-component-metadata.ts
+ *
+ * Adds or updates a component entry in src/data/component-metadata.json.
+ * Only writes the deterministic fields derivable from manifest.json.
+ * Storybook paths and DS Playbook URL are left null — fill in after first deploy.
+ *
+ * Usage:
+ *   npx tsx scripts/codegen/update-component-metadata.ts <component-name>
+ *   npx tsx scripts/codegen/update-component-metadata.ts accordion
+ *
+ * Reads:  src/routes/_index/components/<name>/manifest.json
+ * Writes: src/data/component-metadata.json  (patches in-place, alphabetical order)
+ */
+
+/* eslint-disable no-console */
+import fs from "fs";
+import path from "path";
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+interface Manifest {
+    component: {
+        name: string;
+        displayName?: string;
+        description?: string;
+        category?: string;
+        designSystemVersion?: string | null;
+    };
+    bem?: {
+        block: string;
+    };
+}
+
+interface MetadataEntry {
+    component: string;
+    description?: string;
+    "ds-component"?: {
+        name: string;
+        url: string | null;
+        version: string | number;
+    };
+    cssStorybookPath?: string | null;
+    markoStorybookPath?: string | null;
+    reactStorybookPath?: string | null;
+    [key: string]: unknown;
+}
+
+
+/** Resolves the docs component folder path.
+ *  Strips the "evo-" prefix if present, since docs folders use the BEM block name.
+ *  e.g., "evo-accordion" -> "src/routes/_index/components/accordion"
+ *  e.g., "accordion"     -> "src/routes/_index/components/accordion"
+ */
+function componentDocsDir(componentName: string): string {
+    const block = componentName.replace(/^evo-/, "");
+    return path.resolve("src/routes/_index/components", block);
+}
+
+// ── Main ──────────────────────────────────────────────────────────────────────
+
+const componentName = process.argv[2];
+if (!componentName) {
+    console.error("Usage: update-component-metadata.ts <component-name>");
+    process.exit(1);
+}
+
+const manifestPath = path.join(componentDocsDir(componentName), "manifest.json");
+if (!fs.existsSync(manifestPath)) {
+    console.error(`No manifest found at ${manifestPath}`);
+    process.exit(1);
+}
+
+const metadataPath = path.resolve("src/data/component-metadata.json");
+if (!fs.existsSync(metadataPath)) {
+    console.error(`No component-metadata.json found at ${metadataPath}`);
+    process.exit(1);
+}
+
+const manifest: Manifest = JSON.parse(fs.readFileSync(manifestPath, "utf-8"));
+const metadata: Record<string, MetadataEntry> = JSON.parse(fs.readFileSync(metadataPath, "utf-8"));
+
+const block = manifest.bem?.block ?? componentName.replace(/^evo-/, "");
+const existing = metadata[block] ?? {};
+const isNew = !metadata[block];
+
+// Build the updated entry — deterministic fields only
+const updated: MetadataEntry = {
+    ...existing,
+    component: block,
+    description: manifest.component.description ?? existing.description ?? "",
+    "ds-component": {
+        name: existing["ds-component"]?.name ?? block,
+        url: existing["ds-component"]?.url ?? null,
+        version: existing["ds-component"]?.version ?? 1,
+    },
+    // Storybook paths: preserve if already set, otherwise null (fill after deploy)
+    cssStorybookPath: existing.cssStorybookPath ?? null,
+    markoStorybookPath: existing.markoStorybookPath ?? null,
+    reactStorybookPath: existing.reactStorybookPath ?? null,
+};
+
+metadata[block] = updated;
+
+// Re-sort keys alphabetically
+const sorted: Record<string, MetadataEntry> = {};
+for (const key of Object.keys(metadata).sort()) {
+    sorted[key] = metadata[key];
+}
+
+fs.writeFileSync(metadataPath, JSON.stringify(sorted, null, 2) + "\n", "utf-8");
+
+console.log(`✅ update-component-metadata: ${componentName}`);
+console.log(`   Key:         "${block}"`);
+console.log(`   Description: "${updated.description}"`);
+console.log(`   DS version:  ${updated["ds-component"]?.version}`);
+if (isNew) {
+    console.log(`   Status:      NEW entry added`);
+} else {
+    console.log(`   Status:      existing entry updated`);
+}
+if (!updated.cssStorybookPath) {
+    console.log(`   ⚠️  cssStorybookPath is null — fill in after first storybook deploy`);
+}
+if (!updated.markoStorybookPath) {
+    console.log(`   ⚠️  markoStorybookPath is null — fill in after first storybook deploy`);
+}
+if (!updated.reactStorybookPath) {
+    console.log(`   ⚠️  reactStorybookPath is null — fill in after first storybook deploy`);
+}
diff --git a/scripts/codegen/validate-manifest.ts b/scripts/codegen/validate-manifest.ts
new file mode 100644
index 0000000000..d3d269f70e
--- /dev/null
+++ b/scripts/codegen/validate-manifest.ts
@@ -0,0 +1,328 @@
+#!/usr/bin/env node
+/**
+ * validate-manifest.ts
+ *
+ * Validates a component manifest.json against the required schema shape.
+ * Reports structural errors (missing required fields, malformed arrays) and
+ * surfaces blocking gaps (confidence: low or source: missing) that must be
+ * resolved before Gate 2 approval.
+ *
+ * Usage:
+ *   npx tsx scripts/codegen/validate-manifest.ts <component-name>
+ *   npx tsx scripts/codegen/validate-manifest.ts accordion
+ *
+ * Exit codes:
+ *   0 — valid (may still have medium-confidence warnings)
+ *   1 — structural errors or blocking gaps present
+ *
+ * Reads: src/routes/_index/components/<name>/manifest.json
+ */
+
+/* eslint-disable no-console */
+import fs from "fs";
+import path from "path";
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+interface Gap {
+    field: string;
+    assumed?: unknown;
+    confidence: "high" | "medium" | "low";
+    source: string;
+    note?: string;
+    informational?: boolean;
+}
+
+interface Manifest {
+    component?: {
+        name?: string;
+        displayName?: string;
+        description?: string;
+        category?: string;
+    };
+    rootElement?: {
+        default?: string;
+    };
+    bem?: {
+        block?: string;
+        elements?: unknown[];
+        modifiers?: unknown[];
+    };
+    a11y?: {
+        labelStrategy?: string;
+        focusable?: boolean;
+        focusTrap?: string;
+    };
+    props?: unknown[];
+    a11yProps?: unknown[];
+    slots?: unknown[];
+    states?: unknown[];
+    gaps?: Gap[];
+    [key: string]: unknown;
+}
+
+interface Issue {
+    severity: "error" | "warning";
+    message: string;
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function componentDocsDir(componentName: string): string {
+    const block = componentName.replace(/^evo-/, "");
+    return path.resolve("src/routes/_index/components", block);
+}
+
+function hasField(obj: Record<string, unknown>, field: string): boolean {
+    return Object.prototype.hasOwnProperty.call(obj, field) && obj[field] !== undefined;
+}
+
+function checkArrayItems(
+    arr: unknown[],
+    requiredFields: string[],
+    context: string,
+    issues: Issue[]
+): void {
+    arr.forEach((item, i) => {
+        if (typeof item !== "object" || item === null) {
+            issues.push({ severity: "error", message: `${context}[${i}] is not an object` });
+            return;
+        }
+        const obj = item as Record<string, unknown>;
+        for (const field of requiredFields) {
+            if (!hasField(obj, field)) {
+                issues.push({
+                    severity: "error",
+                    message: `${context}[${i}] missing required field: "${field}"`,
+                });
+            }
+        }
+    });
+}
+
+const VALID_LABEL_STRATEGIES = new Set([
+    "content",
+    "aria-label-prop",
+    "aria-labelledby",
+    "aria-hidden",
+    "compound-labelledby",
+]);
+
+const VALID_FOCUS_TRAPS = new Set(["browser-native", "javascript", "none"]);
+
+// ── Main ──────────────────────────────────────────────────────────────────────
+
+const componentName = process.argv[2];
+if (!componentName) {
+    console.error("Usage: validate-manifest.ts <component-name>");
+    process.exit(1);
+}
+
+const manifestPath = path.join(componentDocsDir(componentName), "manifest.json");
+if (!fs.existsSync(manifestPath)) {
+    console.error(`No manifest found at ${manifestPath}`);
+    process.exit(1);
+}
+
+const manifest: Manifest = JSON.parse(fs.readFileSync(manifestPath, "utf-8"));
+const issues: Issue[] = [];
+
+// ── Required top-level sections ───────────────────────────────────────────────
+
+const REQUIRED_SECTIONS: string[] = ["component", "rootElement", "bem", "a11y", "gaps"];
+for (const section of REQUIRED_SECTIONS) {
+    if (!hasField(manifest as Record<string, unknown>, section)) {
+        issues.push({ severity: "error", message: `Missing required top-level section: "${section}"` });
+    }
+}
+
+// ── component ─────────────────────────────────────────────────────────────────
+
+if (manifest.component) {
+    const c = manifest.component;
+    for (const field of ["name", "displayName", "description", "category"] as const) {
+        if (!c[field]) {
+            issues.push({ severity: "error", message: `component.${field} is missing or empty` });
+        }
+    }
+    if (c.name && !c.name.startsWith("evo-")) {
+        issues.push({ severity: "warning", message: `component.name "${c.name}" should start with "evo-"` });
+    }
+}
+
+// ── rootElement ───────────────────────────────────────────────────────────────
+
+if (manifest.rootElement && !manifest.rootElement.default) {
+    issues.push({ severity: "error", message: "rootElement.default is missing" });
+}
+
+// ── bem ───────────────────────────────────────────────────────────────────────
+
+if (manifest.bem) {
+    if (!manifest.bem.block) {
+        issues.push({ severity: "error", message: "bem.block is missing" });
+    }
+    if (manifest.bem.elements !== undefined) {
+        if (!Array.isArray(manifest.bem.elements)) {
+            issues.push({ severity: "error", message: "bem.elements must be an array" });
+        } else {
+            checkArrayItems(manifest.bem.elements, ["name"], "bem.elements", issues);
+        }
+    }
+    if (manifest.bem.modifiers !== undefined) {
+        if (!Array.isArray(manifest.bem.modifiers)) {
+            issues.push({ severity: "error", message: "bem.modifiers must be an array" });
+        } else {
+            checkArrayItems(manifest.bem.modifiers, ["name"], "bem.modifiers", issues);
+        }
+    }
+}
+
+// ── a11y ──────────────────────────────────────────────────────────────────────
+
+if (manifest.a11y) {
+    const a = manifest.a11y;
+    if (!a.labelStrategy) {
+        issues.push({ severity: "error", message: "a11y.labelStrategy is missing" });
+    } else if (!VALID_LABEL_STRATEGIES.has(a.labelStrategy)) {
+        issues.push({
+            severity: "error",
+            message: `a11y.labelStrategy "${a.labelStrategy}" is not a recognized value. Valid: ${[...VALID_LABEL_STRATEGIES].join(", ")}`,
+        });
+    }
+    if (typeof a.focusable !== "boolean") {
+        issues.push({ severity: "error", message: "a11y.focusable must be a boolean" });
+    }
+    if (a.focusTrap !== undefined && !VALID_FOCUS_TRAPS.has(a.focusTrap)) {
+        issues.push({
+            severity: "error",
+            message: `a11y.focusTrap "${a.focusTrap}" is not valid. Valid: ${[...VALID_FOCUS_TRAPS].join(", ")}`,
+        });
+    }
+}
+
+// ── props ─────────────────────────────────────────────────────────────────────
+
+if (manifest.props !== undefined) {
+    if (!Array.isArray(manifest.props)) {
+        issues.push({ severity: "error", message: "props must be an array" });
+    } else {
+        checkArrayItems(manifest.props, ["name", "type", "required"], "props", issues);
+    }
+}
+
+// ── a11yProps ─────────────────────────────────────────────────────────────────
+
+if (manifest.a11yProps !== undefined) {
+    if (!Array.isArray(manifest.a11yProps)) {
+        issues.push({ severity: "error", message: "a11yProps must be an array" });
+    } else {
+        checkArrayItems(manifest.a11yProps, ["name", "type", "required"], "a11yProps", issues);
+    }
+}
+
+// ── slots ─────────────────────────────────────────────────────────────────────
+
+if (manifest.slots !== undefined) {
+    if (!Array.isArray(manifest.slots)) {
+        issues.push({ severity: "error", message: "slots must be an array" });
+    } else {
+        checkArrayItems(manifest.slots, ["name", "required"], "slots", issues);
+    }
+}
+
+// ── states ────────────────────────────────────────────────────────────────────
+
+if (manifest.states !== undefined) {
+    if (!Array.isArray(manifest.states)) {
+        issues.push({ severity: "error", message: "states must be an array" });
+    } else {
+        checkArrayItems(manifest.states, ["name"], "states", issues);
+    }
+}
+
+// ── gaps ──────────────────────────────────────────────────────────────────────
+
+const blockingGaps: Gap[] = [];
+const warningGaps: Gap[] = [];
+
+if (manifest.gaps !== undefined) {
+    if (!Array.isArray(manifest.gaps)) {
+        issues.push({ severity: "error", message: "gaps must be an array" });
+    } else {
+        checkArrayItems(manifest.gaps, ["field", "confidence", "source"], "gaps", issues);
+        for (const gap of manifest.gaps) {
+            if (gap.informational) {
+                // Informational gaps are expected structural gaps that do not
+                // block code generation (e.g. figma.nodeId, bem.alternateBlock,
+                // storybook.stories). They are noted but never block Gate 2.
+                continue;
+            }
+            if (gap.confidence === "low" || gap.source === "missing") {
+                blockingGaps.push(gap);
+            } else if (gap.confidence === "medium") {
+                warningGaps.push(gap);
+            }
+        }
+    }
+}
+
+// ── Output ────────────────────────────────────────────────────────────────────
+
+const structuralErrors = issues.filter((i) => i.severity === "error");
+const structuralWarnings = issues.filter((i) => i.severity === "warning");
+const hasFailures = structuralErrors.length > 0 || blockingGaps.length > 0;
+
+console.log(`\n validate-manifest: ${componentName}`);
+console.log(`   ${path.relative(process.cwd(), manifestPath)}\n`);
+
+if (structuralErrors.length > 0) {
+    console.log("🔴 Structural errors:\n");
+    for (const e of structuralErrors) {
+        console.log(`   ✗ ${e.message}`);
+    }
+    console.log();
+}
+
+if (blockingGaps.length > 0) {
+    console.log(`🔴 Blocking gaps — requires engineer decision (${blockingGaps.length}):\n`);
+    for (const g of blockingGaps) {
+        console.log(`   • ${g.field}`);
+        if (g.note) console.log(`     ${g.note}`);
+    }
+    console.log();
+}
+
+if (warningGaps.length > 0) {
+    console.log(`🟡 Inferred fields — verify before approving (${warningGaps.length}):\n`);
+    for (const g of warningGaps) {
+        console.log(`   • ${g.field}`);
+        if (g.assumed !== undefined) console.log(`     Assumed: ${JSON.stringify(g.assumed)}`);
+    }
+    console.log();
+}
+
+if (structuralWarnings.length > 0) {
+    console.log("🟡 Warnings:\n");
+    for (const w of structuralWarnings) {
+        console.log(`   ! ${w.message}`);
+    }
+    console.log();
+}
+
+if (!hasFailures) {
+    const confirmed =
+        (manifest.gaps as Gap[] | undefined)?.filter(
+            (g) => g.confidence === "high"
+        ).length ?? 0;
+    console.log(`✅ Manifest is valid`);
+    console.log(`   ${blockingGaps.length} blocking gaps, ${warningGaps.length} medium-confidence fields, ${confirmed} confirmed`);
+    if (warningGaps.length > 0) {
+        console.log(`   Review 🟡 items before approving Gate 2.`);
+    }
+} else {
+    console.log(`❌ Manifest has errors — resolve before Gate 2 approval.`);
+}
+
+console.log();
+process.exit(hasFailures ? 1 : 0);