code-ai-installer 3.0.0 → 4.0.0

package/domains/development/locales/en/.agents/skills/ui-a11y-smoke-review/SKILL.md

@@ -1,195 +1,225 @@
----
-name: ui-a11y-smoke-review
-description: Quick UI/a11y smoke review by a designer — loading/empty/error states, focus, keyboard, aria/labels, compliance with UX Spec. Executed BEFORE handoff to QA.
----
-
-# Skill: UI & A11y Smoke Review (Designer-Level)
-
-Quick designer-level check of UI for compliance with UX Spec + a11y baseline **before handoff to QA**.
-
-> **Difference from `$qa-ui-a11y-smoke`:** This skill is a designer's quick check (5-10 min, against UX Spec).
-> `$qa-ui-a11y-smoke` is a formal QA test (25 WCAG checks, tools, report).
-
-**Sections:**
-1. [Workflow](#1-workflow)
-2. [Checklist](#2-checklist)
-3. [UX Spec Compliance](#3-ux-compliance)
-4. [Quick A11y Scan](#4-a11y-scan)
-5. [Output Template](#5-output)
-
----
-
-## 1. Workflow
-
-```
-1. Input:
-   ├── Implemented UI (browser / screenshots)
-   ├── UX Spec (from $ux-spec) — source of truth
-   └── A11y Baseline (from $a11y-baseline) — requirements
-
-2. Visual walkthrough per screen:
-   a. Does layout match UX Spec?
-   b. Are all components/sections present?
-   c. Are all 4 states implemented (loading/empty/error/success)?
-   d. Quick keyboard pass (Tab through interactive elements)
-
-3. Classify issues:
-   ├── P0: Missing critical states, broken flow, inaccessible
-   ├── P1: Wrong component, missing state, inconsistency
-   └── P2: Polish, spacing, cosmetic
-
-4. Report → DEV fixes before formal QA
-
-Note: This is a QUICK check. For formal testing → $qa-ui-a11y-smoke
-```
-
----
-
-## 2. Checklist
-
-### 2.1 Visual & Layout
-
-| # | Check | UX Spec ref | Severity | Status |
-|---|-------|------------|----------|--------|
-| UI-01 | Layout matches UX Spec (columns, sections, order) | Screen Spec → Layout | 🟠 P1 | ☐ |
-| UI-02 | All sections present (no missing panels/cards) | Screen Spec → Sections | 🟠 P1 | ☐ |
-| UI-03 | Primary CTA visible and correctly styled | Screen Spec → Actions | 🔴 P0 | ☐ |
-| UI-04 | Typography hierarchy matches (h1 > h2 > body) | UI Inventory → Tokens | 🟡 P2 | ☐ |
-| UI-05 | Colors match design tokens | Design Rules → DR-xx | 🟠 P1 | ☐ |
-
-### 2.2 UI States
-
-| # | Check | Against | Severity | Status |
-|---|-------|---------|----------|--------|
-| UI-06 | **Loading** state present (skeleton or spinner per UX Spec) | Screen Spec → States | 🟠 P1 | ☐ |
-| UI-07 | **Empty** state present (illustration + text + CTA) | Screen Spec → States | 🟠 P1 | ☐ |
-| UI-08 | **Error** state present (message + retry/action) | Screen Spec → States | 🔴 P0 | ☐ |
-| UI-09 | **Success** feedback (toast/message after action) | Screen Spec → Notifications | 🟠 P1 | ☐ |
-| UI-10 | **Disabled** state clear (visual + non-clickable) | Screen Spec → States | 🟡 P2 | ☐ |
-| UI-11 | **Saving/In-flight** state (button spinner, disabled) | Screen Spec → Actions | 🟠 P1 | ☐ |
-
-### 2.3 Forms
-
-| # | Check | Against | Severity | Status |
-|---|-------|---------|----------|--------|
-| UI-12 | All form fields have visible labels | A11y Baseline A-10 | 🔴 P0 | ☐ |
-| UI-13 | Required fields marked (asterisk or text) | A11y Baseline A-11 | 🟠 P1 | ☐ |
-| UI-14 | Error messages visible and descriptive | Screen Spec → Validation | 🟠 P1 | ☐ |
-| UI-15 | Submit button feedback (loading/disabled during save) | Screen Spec → Actions | 🟠 P1 | ☐ |
-
-### 2.4 Quick A11y
-
-| # | Check | Against | Severity | Status |
-|---|-------|---------|----------|--------|
-| UI-16 | Can Tab to all interactive elements | A11y Baseline A-01 | 🔴 P0 | ☐ |
-| UI-17 | Focus ring visible on focused elements | A11y Baseline A-05 | 🔴 P0 | ☐ |
-| UI-18 | Modal traps focus + Escape closes | A11y Baseline A-07 | 🟠 P1 | ☐ |
-| UI-19 | No obvious contrast issues (text readable) | A11y Baseline A-19 | 🟠 P1 | ☐ |
-| UI-20 | Content/buttons not cut off or overlapping | — | 🟠 P1 | ☐ |
-
----
-
-## 3. UX Spec Compliance
-
-### Per-screen verification
-
-For each screen in UX Spec, verify implementation matches:
-
-```markdown
-### Screen: <Name>
-
-| UX Spec Element | Expected | Implemented? | Notes |
-|----------------|----------|:------------:|-------|
-| Layout: 2-column 60/40 | Config + Preview | ✅ | — |
-| Tab: General | Title, Subtitle, CTA fields | ✅ | — |
-| Tab: Design | ColorPicker × 4, FontSelect | ⚠️ | Missing overlay picker |
-| Tab: Timer | Switch + NumberInputs | ✅ | — |
-| State: Loading | Skeleton | ❌ | Shows blank page |
-| State: Error (save) | Toast + inline errors | ⚠️ | Toast only, no inline |
-| Notification: Save success | Toast, 3s auto-dismiss | ✅ | — |
-```
-
----
-
-## 4. Quick A11y Scan
-
-### 60-second keyboard test
-
-| Step | Action | Expected | Status |
-|------|--------|----------|:------:|
-| 1 | Press Tab from page top | Focus on first interactive element | ☐ |
-| 2 | Tab through all controls | Each gets visible focus ring | ☐ |
-| 3 | Enter on buttons | Action fires | ☐ |
-| 4 | Open modal/dropdown | Focus moves inside | ☐ |
-| 5 | Escape on modal | Modal closes, focus returns | ☐ |
-
-### Quick visual checks
-
-| Check | How | Expected |
-|-------|-----|---------|
-| Contrast | Squint test — can you read all text? | All text readable |
-| Hierarchy | Scan page — is structure clear? | Clear h1 > h2 > body |
-| CTA | Is the primary action obvious? | One clear primary button |
-| Errors | Trigger an error — is it clear? | Visible, descriptive, near the field |
-
----
-
-## 5. Output Template
-
-```markdown
-# UI & A11y Smoke Review
-
-**Date:** YYYY-MM-DD
-**Reviewer:** UX/UI Designer Agent
-**Screen(s):** <list>
-**UX Spec:** <reference>
-
-## Checklist Results
-| Section | Pass | Fail | Total |
-|---------|:----:|:----:|:-----:|
-| Visual & Layout (UI-01..05) | 4 | 1 | 5 |
-| UI States (UI-06..11) | 4 | 2 | 6 |
-| Forms (UI-12..15) | 3 | 1 | 4 |
-| Quick A11y (UI-16..20) | 4 | 1 | 5 |
-| **Total** | **15** | **5** | **20** |
-
-## UX Spec Compliance
-| Screen | Elements checked | Match | Mismatch |
-|--------|:---------------:|:-----:|:--------:|
-| Settings | 7 | 5 | 2 |
-| Items | 5 | 5 | 0 |
-
-## Findings
-| # | Severity | Check | Screen | Finding | Fix |
-|---|----------|-------|--------|---------|-----|
-| 1 | 🔴 P0 | UI-08 | Settings | No error state for failed save | Add error toast + inline errors |
-| 2 | 🟠 P1 | UI-06 | Settings | Blank page instead of skeleton | Add skeleton loader |
-| 3 | 🟠 P1 | UI-05 | Design tab | Missing overlay color picker | Add 4th ColorPicker |
-| 4 | 🟡 P2 | UI-04 | Settings | Section titles not bold enough | Increase font-weight |
-
-## Keyboard Test
-| Step | Status |
-|------|:------:|
-| Tab navigation | ✅ |
-| Focus visible | ✅ |
-| Enter activates | ✅ |
-| Modal focus trap | ⚠️ Focus escapes |
-| Escape closes | ✅ |
-
-## Verdict
-- ✅ **READY FOR QA** — no P0, minor issues tracked
-- ⚠️ **FIX FIRST** — P0/P1 issues must be fixed before QA
-- ❌ **NOT READY** — critical UX/a11y issues block QA
-
-## Next
-- If READY → pass to $qa-ui-a11y-smoke for formal testing
-- If FIX FIRST → create DEV-xx tasks, re-review after fix
-```
-
----
-
-## See also
-- `$qa-ui-a11y-smoke` — formal QA a11y testing (25 WCAG checks)
-- `$ux-spec` — UX Spec (source of truth)
-- `$a11y-baseline` — a11y requirements
-- `$design-parity-review` — full design comparison
+---
+name: ui-a11y-smoke-review
+description: Quick UI/a11y smoke review by a designer — loading/empty/error states, focus, keyboard, aria/labels, compliance with UX Spec. Executed BEFORE handoff to QA.
+type: triggered
+domain: development
+owners:
+  - ux_ui_designer
+gates:
+  - UX
+tech:
+  - a11y
+topic:
+  - ux
+  - design-systems
+triggers:
+  - designer UI smoke
+  - review before QA
+  - loading empty error
+  - focus and keyboard
+  - check aria labels
+  - UX Spec compliance
+related:
+  - qa-ui-a11y-smoke
+  - ux-spec
+  - a11y-baseline
+  - a11y-baseline-reference
+  - design-parity-review
+budget_lines: 200
+schema_version: 1
+---
+
+
+# Skill: UI & A11y Smoke Review (Designer-Level)
+
+Quick designer-level check of UI for compliance with UX Spec + a11y baseline **before handoff to QA**.
+
+> **A-NN canonical reference:** `$a11y-baseline-reference` §1 (WCAG 2.1 AA requirements).
+
+> **Difference from `$qa-ui-a11y-smoke`:** This skill is a designer's quick check (5-10 min, against UX Spec).
+> `$qa-ui-a11y-smoke` is a formal QA test (25 WCAG checks, tools, report).
+
+**Sections:**
+1. [Workflow](#1-workflow)
+2. [Checklist](#2-checklist)
+3. [UX Spec Compliance](#3-ux-compliance)
+4. [Quick A11y Scan](#4-a11y-scan)
+5. [Output Template](#5-output)
+
+---
+
+## 1. Workflow
+
+```
+1. Input:
+   ├── Implemented UI (browser / screenshots)
+   ├── UX Spec (from $ux-spec) — source of truth
+   └── A11y Baseline (from $a11y-baseline) — requirements
+
+2. Visual walkthrough per screen:
+   a. Does layout match UX Spec?
+   b. Are all components/sections present?
+   c. Are all 4 states implemented (loading/empty/error/success)?
+   d. Quick keyboard pass (Tab through interactive elements)
+
+3. Classify issues:
+   ├── P0: Missing critical states, broken flow, inaccessible
+   ├── P1: Wrong component, missing state, inconsistency
+   └── P2: Polish, spacing, cosmetic
+
+4. Report → DEV fixes before formal QA
+
+Note: This is a QUICK check. For formal testing → $qa-ui-a11y-smoke
+```
+
+---
+
+## 2. Checklist
+
+### 2.1 Visual & Layout
+
+| # | Check | UX Spec ref | Severity | Status |
+|---|-------|------------|----------|--------|
+| UI-01 | Layout matches UX Spec (columns, sections, order) | Screen Spec → Layout | 🟠 P1 | ☐ |
+| UI-02 | All sections present (no missing panels/cards) | Screen Spec → Sections | 🟠 P1 | ☐ |
+| UI-03 | Primary CTA visible and correctly styled | Screen Spec → Actions | 🔴 P0 | ☐ |
+| UI-04 | Typography hierarchy matches (h1 > h2 > body) | UI Inventory → Tokens | 🟡 P2 | ☐ |
+| UI-05 | Colors match design tokens | Design Rules → DR-xx | 🟠 P1 | ☐ |
+
+### 2.2 UI States
+
+| # | Check | Against | Severity | Status |
+|---|-------|---------|----------|--------|
+| UI-06 | **Loading** state present (skeleton or spinner per UX Spec) | Screen Spec → States | 🟠 P1 | ☐ |
+| UI-07 | **Empty** state present (illustration + text + CTA) | Screen Spec → States | 🟠 P1 | ☐ |
+| UI-08 | **Error** state present (message + retry/action) | Screen Spec → States | 🔴 P0 | ☐ |
+| UI-09 | **Success** feedback (toast/message after action) | Screen Spec → Notifications | 🟠 P1 | ☐ |
+| UI-10 | **Disabled** state clear (visual + non-clickable) | Screen Spec → States | 🟡 P2 | ☐ |
+| UI-11 | **Saving/In-flight** state (button spinner, disabled) | Screen Spec → Actions | 🟠 P1 | ☐ |
+
+### 2.3 Forms
+
+| # | Check | Against | Severity | Status |
+|---|-------|---------|----------|--------|
+| UI-12 | All form fields have visible labels | `$a11y-baseline-reference` A-10 | 🔴 P0 | ☐ |
+| UI-13 | Required fields marked (asterisk or text) | `$a11y-baseline-reference` A-11 | 🟠 P1 | ☐ |
+| UI-14 | Error messages visible and descriptive | Screen Spec → Validation | 🟠 P1 | ☐ |
+| UI-15 | Submit button feedback (loading/disabled during save) | Screen Spec → Actions | 🟠 P1 | ☐ |
+
+### 2.4 Quick A11y
+
+| # | Check | Against | Severity | Status |
+|---|-------|---------|----------|--------|
+| UI-16 | Can Tab to all interactive elements | `$a11y-baseline-reference` A-01 | 🔴 P0 | ☐ |
+| UI-17 | Focus ring visible on focused elements | `$a11y-baseline-reference` A-05 | 🔴 P0 | ☐ |
+| UI-18 | Modal traps focus + Escape closes | `$a11y-baseline-reference` A-07 | 🟠 P1 | ☐ |
+| UI-19 | No obvious contrast issues (text readable) | `$a11y-baseline-reference` A-19 | 🟠 P1 | ☐ |
+| UI-20 | Content/buttons not cut off or overlapping | — | 🟠 P1 | ☐ |
+
+---
+
+## 3. UX Spec Compliance
+
+### Per-screen verification
+
+For each screen in UX Spec, verify implementation matches:
+
+```markdown
+### Screen: <Name>
+
+| UX Spec Element | Expected | Implemented? | Notes |
+|----------------|----------|:------------:|-------|
+| Layout: 2-column 60/40 | Config + Preview | ✅ | — |
+| Tab: General | Title, Subtitle, CTA fields | ✅ | — |
+| Tab: Design | ColorPicker × 4, FontSelect | ⚠️ | Missing overlay picker |
+| Tab: Timer | Switch + NumberInputs | ✅ | — |
+| State: Loading | Skeleton | ❌ | Shows blank page |
+| State: Error (save) | Toast + inline errors | ⚠️ | Toast only, no inline |
+| Notification: Save success | Toast, 3s auto-dismiss | ✅ | — |
+```
+
+---
+
+## 4. Quick A11y Scan
+
+### 60-second keyboard test
+
+| Step | Action | Expected | Status |
+|------|--------|----------|:------:|
+| 1 | Press Tab from page top | Focus on first interactive element | ☐ |
+| 2 | Tab through all controls | Each gets visible focus ring | ☐ |
+| 3 | Enter on buttons | Action fires | ☐ |
+| 4 | Open modal/dropdown | Focus moves inside | ☐ |
+| 5 | Escape on modal | Modal closes, focus returns | ☐ |
+
+### Quick visual checks
+
+| Check | How | Expected |
+|-------|-----|---------|
+| Contrast | Squint test — can you read all text? | All text readable |
+| Hierarchy | Scan page — is structure clear? | Clear h1 > h2 > body |
+| CTA | Is the primary action obvious? | One clear primary button |
+| Errors | Trigger an error — is it clear? | Visible, descriptive, near the field |
+
+---
+
+## 5. Output Template
+
+```markdown
+# UI & A11y Smoke Review
+
+**Date:** YYYY-MM-DD
+**Reviewer:** UX/UI Designer Agent
+**Screen(s):** <list>
+**UX Spec:** <reference>
+
+## Checklist Results
+| Section | Pass | Fail | Total |
+|---------|:----:|:----:|:-----:|
+| Visual & Layout (UI-01..05) | 4 | 1 | 5 |
+| UI States (UI-06..11) | 4 | 2 | 6 |
+| Forms (UI-12..15) | 3 | 1 | 4 |
+| Quick A11y (UI-16..20) | 4 | 1 | 5 |
+| **Total** | **15** | **5** | **20** |
+
+## UX Spec Compliance
+| Screen | Elements checked | Match | Mismatch |
+|--------|:---------------:|:-----:|:--------:|
+| Settings | 7 | 5 | 2 |
+| Items | 5 | 5 | 0 |
+
+## Findings
+| # | Severity | Check | Screen | Finding | Fix |
+|---|----------|-------|--------|---------|-----|
+| 1 | 🔴 P0 | UI-08 | Settings | No error state for failed save | Add error toast + inline errors |
+| 2 | 🟠 P1 | UI-06 | Settings | Blank page instead of skeleton | Add skeleton loader |
+| 3 | 🟠 P1 | UI-05 | Design tab | Missing overlay color picker | Add 4th ColorPicker |
+| 4 | 🟡 P2 | UI-04 | Settings | Section titles not bold enough | Increase font-weight |
+
+## Keyboard Test
+| Step | Status |
+|------|:------:|
+| Tab navigation | ✅ |
+| Focus visible | ✅ |
+| Enter activates | ✅ |
+| Modal focus trap | ⚠️ Focus escapes |
+| Escape closes | ✅ |
+
+## Verdict
+- ✅ **READY FOR QA** — no P0, minor issues tracked
+- ⚠️ **FIX FIRST** — P0/P1 issues must be fixed before QA
+- ❌ **NOT READY** — critical UX/a11y issues block QA
+
+## Next
+- If READY → pass to $qa-ui-a11y-smoke for formal testing
+- If FIX FIRST → create DEV-xx tasks, re-review after fix
+```
+
+---
+
+## See also
+- `$qa-ui-a11y-smoke` — formal QA a11y testing (25 WCAG checks)
+- `$ux-spec` — UX Spec (source of truth)
+- `$a11y-baseline` — a11y workflow (wrapper)
+- `$a11y-baseline-reference` — canonical WCAG/ARIA reference (A-NN rules)
+- `$design-parity-review` — full design comparison

package/domains/development/locales/en/.agents/skills/ui-a11y-smoke-review/agents/kimi.yaml

@@ -1,16 +1,16 @@
-name: "ui-a11y-smoke-review"
-display_name: "UI & Accessibility Smoke Review"
-description: "Quick UI/a11y smoke review by a designer — loading/empty/error states, focus, keyboard, aria/labels, compliance with UX Spec. Executed BEFORE handoff to QA."
-default_prompt: "Use $ui-a11y-smoke-review when the task matches the \"UI & Accessibility Smoke Review\" skill."
-triggers:
-  - "ui-a11y-smoke-review"
-  - "ui a11y smoke review"
-  - "UI & Accessibility Smoke Review"
-  - "Quick UI/a11y smoke review by a designer — loading/empty/error states, focus, keyboard, aria/labels, compliance with UX Spec"
-capabilities:
-  - "ui"
-  - "a11y"
-  - "smoke"
-  - "review"
-tools: []
-implicit_invocation: true
+name: "ui-a11y-smoke-review"
+display_name: "UI & Accessibility Smoke Review"
+description: "Quick UI/a11y smoke review by a designer — loading/empty/error states, focus, keyboard, aria/labels, compliance with UX Spec. Executed BEFORE handoff to QA."
+default_prompt: "Use $ui-a11y-smoke-review when the task matches the \"UI & Accessibility Smoke Review\" skill."
+triggers:
+  - "ui-a11y-smoke-review"
+  - "ui a11y smoke review"
+  - "UI & Accessibility Smoke Review"
+  - "Quick UI/a11y smoke review by a designer — loading/empty/error states, focus, keyboard, aria/labels, compliance with UX Spec"
+capabilities:
+  - "ui"
+  - "a11y"
+  - "smoke"
+  - "review"
+tools: []
+implicit_invocation: true

package/domains/development/locales/en/.agents/skills/ui-inventory/SKILL.md

@@ -1,8 +1,34 @@
 ---
 name: ui-inventory
 description: Compile an inventory of UI components and reuse rules — base components, composition components, patterns (forms, tables, dialogs), design tokens (minimum).
+type: discretionary
+domain: development
+owners:
+  - ux_ui_designer
+gates:
+  - UX
+tech: []
+topic:
+  - ux
+  - design-systems
+triggers:
+  - component inventory
+  - UI reuse
+  - base components
+  - composition components
+  - minimal design tokens
+  - forms tables patterns
+related:
+  - ux-spec
+  - a11y-baseline
+  - a11y-baseline-reference
+  - design-systems
+  - design-intake
+budget_lines: 300
+schema_version: 1
 ---
 
+
 # Skill: UI Components Inventory
 
 Catalog of UI components with variants, states, a11y notes.
@@ -22,10 +48,10 @@ Catalog of UI components with variants, states, a11y notes.
 
 ```
 1. Input: UX Spec (from $ux-spec)
-2. Extract all mentioned components from Screen Specs
+2. Extract all components mentioned in Screen Specs
 3. Classify: atom / molecule / organism / pattern
 4. For each → Component Card (section 2)
-5. Map to design system (section 5) if available
+5. Map to design system (section 5) if applicable
 6. Define design tokens (section 4)
 7. Validate: every component in UI Spec is covered
 ```
@@ -36,11 +62,11 @@ Catalog of UI components with variants, states, a11y notes.
 Component needed ← UX Spec
     ├── Exists in design system? (WDS / shadcn / Mantine)
     │   ├── Yes, fits → USE (specify import + variant)
-    │   ├── Yes, but needs customization → CUSTOMIZE (wrapper component)
+    │   ├── Yes, needs customization → CUSTOMIZE (wrapper component)
     │   └── No → BUILD CUSTOM (with a11y baseline)
-    └── Already exists in the project?
+    └── Already exists in project?
         ├── Yes → REUSE (specify path)
-        └── No → CREATE (using template)
+        └── No → CREATE (per template)
 ```
 
 ---
@@ -146,71 +172,32 @@ Component needed ← UX Spec
 
 ## 4. Design Tokens
 
-### Spacing
-
-| Token | Value | Use |
-|-------|-------|-----|
-| `--space-xs` | 4px | Dense padding |
-| `--space-sm` | 8px | Default gap |
-| `--space-md` | 16px | Section padding |
-| `--space-lg` | 24px | Card padding |
-| `--space-xl` | 32px | Section spacing |
-| `--space-2xl` | 48px | Page margins |
-
-### Typography
-
-| Token | Size | Weight | Use |
-|-------|------|--------|-----|
-| `--text-xs` | 12px | 400 | Captions, help text |
-| `--text-sm` | 14px | 400 | Body, form labels |
-| `--text-md` | 16px | 400 | Default body |
-| `--text-lg` | 18px | 500 | Section headers |
-| `--text-xl` | 24px | 600 | Page headers |
-| `--text-2xl` | 32px | 700 | Title |
-
-### Border Radius
-
-| Token | Value | Use |
-|-------|-------|-----|
-| `--radius-sm` | 4px | Inputs, badges |
-| `--radius-md` | 8px | Cards, buttons |
-| `--radius-lg` | 12px | Modals, panels |
-| `--radius-full` | 9999px | Avatars, pills |
-
-### Status Colors
-
-| Token | Value | Use |
-|-------|-------|-----|
-| `--color-success` | `#22c55e` | Success states |
-| `--color-warning` | `#f59e0b` | Warnings |
-| `--color-error` | `#ef4444` | Errors |
-| `--color-info` | `#3b82f6` | Info |
-
-### Shadows
-
-| Token | Value | Use |
-|-------|-------|-----|
-| `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.05)` | Cards |
-| `--shadow-md` | `0 4px 6px rgba(0,0,0,0.1)` | Dropdowns |
-| `--shadow-lg` | `0 10px 15px rgba(0,0,0,0.15)` | Modals |
+Inventory references project tokens — it does not define them.
+
+**Include in the inventory token section:**
+- Spacing scale (steps used in catalog: xs/sm/md/lg/xl/2xl).
+- Typography scale (text-xs/sm/md/lg/xl/2xl with sizes and weights).
+- Status colors (success / warning / error / info).
+- Border radius scale (sm/md/lg/full).
+- Shadow scale (sm/md/lg).
+
+→ **Doctrine, naming, CSS implementation, dark mode** — `$styling-css-stack` §1 "Design Tokens".
 
 ---
 
 ## 5. Design System Mapping
 
-### Wix Design System (WDS) mapping
+| UI Inventory | WDS component | Notes |
+|-------------|--------------|-------|
+| Button | `<Button>` | priority prop |
+| TextInput | `<Input>` | — |
+| Modal | `<Modal>` + `<MessageModalLayout>` | — |
+| Tabs | `<Tabs>` | — |
+| Table | `<Table>` | — |
 
-| UI Inventory | WDS component | Import | Notes |
-|-------------|--------------|--------|-------|
-| Button | `<Button>` | `@wix/design-system` | Supports priority prop |
-| TextInput | `<Input>` | `@wix/design-system` | — |
-| Switch | `<ToggleSwitch>` | `@wix/design-system` | — |
-| Toast | `Toast` (imperative) | `@wix/design-system` | Use with `<Notification>` |
-| Modal | `<Modal>` + `<MessageModalLayout>` | `@wix/design-system` | — |
-| Tabs | `<Tabs>` | `@wix/design-system` | — |
-| Table | `<Table>` | `@wix/design-system` | — |
-| ColorPicker | — | Custom build | WDS doesn't have one |
-| LivePreview | — | Custom build | App-specific |
+**Gap markers (custom build):** ColorPicker — WDS has none; LivePreview — app-specific.
+
+→ **Full Component Mapping table** (12+ components, props): `$design-systems` §3 "WDS Component Mapping".
 
 ---
 
@@ -219,9 +206,7 @@ Component needed ← UX Spec
 ```markdown
 ### Component: Button
 
-**Category:** Atom
-**Source:** WDS `<Button>` (customized)
-**Used in:** Settings (Save, Reset), Items (Create, Delete)
+**Category:** Atom · **Source:** WDS `<Button>` (customized) · **Used in:** Settings (Save, Reset), Items (Create, Delete)
 
 #### Variants
 | Variant | WDS `priority` | Visual |
@@ -230,11 +215,7 @@ Component needed ← UX Spec
 | secondary | `secondary` | Outlined |
 | destructive | N/A (custom) | Filled red (#D32F2F) |
 
-#### States
-| Default | Hover | Loading | Disabled |
-|---------|-------|---------|----------|
-| Normal | Darker bg | Spinner, no text | 50% opacity |
-
+#### States: Default · Hover (darker bg) · Loading (spinner, no text) · Disabled (50% opacity)
 #### A11y: `<button>`, focus-visible, aria-disabled, aria-busy
 ```
 
@@ -273,5 +254,6 @@ Component needed ← UX Spec
 ## See also
 - `$ux-spec` — Screen specs (input for inventory)
 - `$a11y-baseline` — a11y requirements per component
-- `$design-systems` — integration guide for design systems
-- `$design-intake` — analyze design materials
+- `$design-systems` — DDS integration guide (full WDS Component Mapping in §3)
+- `$styling-css-stack` — token doctrine, naming, CSS implementation
+- `$design-intake` — analyze design materials