code-ai-installer 1.2.0 → 1.3.0

package/locales/en/.agents/ui_a11y_smoke_review/SKILL.md

@@ -1,15 +1,195 @@
 ---
 name: ui_a11y_smoke_review
-description: Quick UI/a11y smoke review: states loading/empty/error, focus, keyboard, aria/labels by a11y baseline and UX Spec.
+description: Quick UI/a11y smoke review design — states loading/empty/error, focus, keyboard, aria/labels, compliance UX Spec. Execution To transfer in QA.
 ---
 
-# Skill: UI & A11y Smoke Review
+# Skill: UI & A11y Smoke Review (Designer-Level)
 
-## Check
-- There are loading/empty/error states according to UX Spec
-- Focus styles are visible, you can use the keyboard
-- Forms: label/aria, error messages available
-- No obvious content/CTA regressions
+Quick designer-level UI check for compliance with the UX Spec + a11y baseline **before handoff to QA**.
 
-## Exit
-- Findings + recommendations
+> **Difference from `$qa_ui_a11y_smoke`:** This skill — design quick check (5-10 min, by UX Spec).
+> `$qa_ui_a11y_smoke` — form 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 |
+| Coupons | 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 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

package/locales/en/.agents/ui_a11y_smoke_review/agents/claude.json

@@ -1,13 +1,13 @@
 {
   "name": "ui_a11y_smoke_review",
-  "display_name": "UI & A11y Smoke Review",
-  "description": "Quick UI/a11y smoke review: states loading/empty/error, focus, keyboard, aria/labels by a11y baseline and UX Spec.",
-  "default_prompt": "Use $ui_a11y_smoke_review when the task matches the \"UI & A11y Smoke Review\" skill.",
+  "display_name": "UI & A11y Smoke Review (Designer-Level)",
+  "description": "Quick UI/a11y smoke review design — states loading/empty/error, focus, keyboard, aria/labels, compliance UX Spec. Execution To transfer in QA.",
+  "default_prompt": "Use $ui_a11y_smoke_review when the task matches the \"UI & A11y Smoke Review (Designer-Level)\" skill.",
   "triggers": [
     "ui_a11y_smoke_review",
     "ui a11y smoke review",
-    "UI & A11y Smoke Review",
-    "Quick UI/a11y smoke review"
+    "UI & A11y Smoke Review (Designer-Level)",
+    "Quick UI/a11y smoke review design — states loading/empty/error, focus, keyboard, aria/labels, compliance UX Spec"
   ],
   "capabilities": [
     "ui",

package/locales/en/.agents/ui_a11y_smoke_review/agents/copilot.json

@@ -1,13 +1,13 @@
 {
   "name": "ui_a11y_smoke_review",
-  "display_name": "UI & A11y Smoke Review",
-  "description": "Quick UI/a11y smoke review: states loading/empty/error, focus, keyboard, aria/labels by a11y baseline and UX Spec.",
-  "default_prompt": "Use $ui_a11y_smoke_review when the task matches the \"UI & A11y Smoke Review\" skill.",
+  "display_name": "UI & A11y Smoke Review (Designer-Level)",
+  "description": "Quick UI/a11y smoke review design — states loading/empty/error, focus, keyboard, aria/labels, compliance UX Spec. Execution To transfer in QA.",
+  "default_prompt": "Use $ui_a11y_smoke_review when the task matches the \"UI & A11y Smoke Review (Designer-Level)\" skill.",
   "triggers": [
     "ui_a11y_smoke_review",
     "ui a11y smoke review",
-    "UI & A11y Smoke Review",
-    "Quick UI/a11y smoke review"
+    "UI & A11y Smoke Review (Designer-Level)",
+    "Quick UI/a11y smoke review design — states loading/empty/error, focus, keyboard, aria/labels, compliance UX Spec"
   ],
   "capabilities": [
     "ui",

package/locales/en/.agents/ui_a11y_smoke_review/agents/gemini.json

@@ -1,13 +1,13 @@
 {
   "name": "ui_a11y_smoke_review",
-  "display_name": "UI & A11y Smoke Review",
-  "description": "Quick UI/a11y smoke review: states loading/empty/error, focus, keyboard, aria/labels by a11y baseline and UX Spec.",
-  "default_prompt": "Use $ui_a11y_smoke_review when the task matches the \"UI & A11y Smoke Review\" skill.",
+  "display_name": "UI & A11y Smoke Review (Designer-Level)",
+  "description": "Quick UI/a11y smoke review design — states loading/empty/error, focus, keyboard, aria/labels, compliance UX Spec. Execution To transfer in QA.",
+  "default_prompt": "Use $ui_a11y_smoke_review when the task matches the \"UI & A11y Smoke Review (Designer-Level)\" skill.",
   "triggers": [
     "ui_a11y_smoke_review",
     "ui a11y smoke review",
-    "UI & A11y Smoke Review",
-    "Quick UI/a11y smoke review"
+    "UI & A11y Smoke Review (Designer-Level)",
+    "Quick UI/a11y smoke review design — states loading/empty/error, focus, keyboard, aria/labels, compliance UX Spec"
   ],
   "capabilities": [
     "ui",

package/locales/en/.agents/ui_a11y_smoke_review/agents/openai.yaml

@@ -1,7 +1,7 @@
 interface:
-  display_name: "UI & A11y Smoke Review"
-  short_description: "Quick UI/a11y smoke review: states loading/empty/error, focus, keyboard, aria/labels by a11y ba…"
-  default_prompt: "Use $ui_a11y_smoke_review when the task matches the \"UI & A11y Smoke Review\" skill."
+  display_name: "UI & A11y Smoke Review (Designer-Level)"
+  short_description: "Quick UI/a11y smoke review design — states loading/empty/error, focus, keyboard, aria/labels, c…"
+  default_prompt: "Use $ui_a11y_smoke_review when the task matches the \"UI & A11y Smoke Review (Designer-Level)\" skill."
 dependencies:
   tools: []
 policy:

package/locales/en/.agents/ui_a11y_smoke_review/agents/qwen.json

@@ -1,13 +1,13 @@
 {
   "name": "ui_a11y_smoke_review",
-  "display_name": "UI & A11y Smoke Review",
-  "description": "Quick UI/a11y smoke review: states loading/empty/error, focus, keyboard, aria/labels by a11y baseline and UX Spec.",
-  "default_prompt": "Use $ui_a11y_smoke_review when the task matches the \"UI & A11y Smoke Review\" skill.",
+  "display_name": "UI & A11y Smoke Review (Designer-Level)",
+  "description": "Quick UI/a11y smoke review design — states loading/empty/error, focus, keyboard, aria/labels, compliance UX Spec. Execution To transfer in QA.",
+  "default_prompt": "Use $ui_a11y_smoke_review when the task matches the \"UI & A11y Smoke Review (Designer-Level)\" skill.",
   "triggers": [
     "ui_a11y_smoke_review",
     "ui a11y smoke review",
-    "UI & A11y Smoke Review",
-    "Quick UI/a11y smoke review"
+    "UI & A11y Smoke Review (Designer-Level)",
+    "Quick UI/a11y smoke review design — states loading/empty/error, focus, keyboard, aria/labels, compliance UX Spec"
   ],
   "capabilities": [
     "ui",

package/locales/en/.agents/ui_a11y_smoke_review/agents/skill.yaml

@@ -1,13 +1,13 @@
 version: 1
 name: "ui_a11y_smoke_review"
-display_name: "UI & A11y Smoke Review"
-description: "Quick UI/a11y smoke review: states loading/empty/error, focus, keyboard, aria/labels by a11y baseline and UX Spec."
-default_prompt: "Use $ui_a11y_smoke_review when the task matches the \"UI & A11y Smoke Review\" skill."
+display_name: "UI & A11y Smoke Review (Designer-Level)"
+description: "Quick UI/a11y smoke review design — states loading/empty/error, focus, keyboard, aria/labels, compliance UX Spec. Execution To transfer in QA."
+default_prompt: "Use $ui_a11y_smoke_review when the task matches the \"UI & A11y Smoke Review (Designer-Level)\" skill."
 triggers:
   - "ui_a11y_smoke_review"
   - "ui a11y smoke review"
-  - "UI & A11y Smoke Review"
-  - "Quick UI/a11y smoke review"
+  - "UI & A11y Smoke Review (Designer-Level)"
+  - "Quick UI/a11y smoke review design — states loading/empty/error, focus, keyboard, aria/labels, compliance UX Spec"
 capabilities:
   - "ui"
   - "a11y"

package/locales/en/.agents/ui_inventory/SKILL.md

@@ -1,50 +1,277 @@
 ---
 name: ui_inventory
-description: Compile an inventory of UI components and rules for reuse: basic components, compositional components, patterns (forms, tables, dialogs), design tokens (minimum).
+description: Compose an inventory of UI components and reuse rules — basic components, composite components, patterns (forms, tables, dialogs), design (minimum).
 ---
 
 # Skill: UI Components Inventory
 
-## Target
-Reduce development costs and maintain UI consistency.
-
-## Exit
-List of components in catalog form:
-
-## 1) Basic (atoms)
-- Button (variants: primary/secondary/ghost/destructive, sizes)
-- Input / Textarea
-- Select / Combobox
-- Checkbox / Radio / Switch
-- Badge / Tag
-- Spinner / Skeleton
-- Icon
-- Tooltip
-
-## 2) Compounds (molecules/organisms)
-- FormField (label + control + help + error)
-- Modal / Dialog
-- Toast / Notification
-- Table (sorting/filter/pagination if necessary)
-- EmptyState (icon + text + CTA)
-- ErrorState (message + retry)
-- Pagination
-- Navbar / Sidebar
-- Breadcrumbs (if needed)
-
-## 3) Patterns
-- Loading strategy (skeleton vs spinner)
-- Empty vs zero-results
-- Bugs: levels (inline/page/toast)
-- Confirmation of destructive actions
-- Processing long operations (progress, optimistic UI)
-
-## 4) Minimum design tokens (if there is no design system)
-- Spacing scale (for example: 4/8/12/16/24/32)
-- Border radius levels
-- Typography: headings/text/captions
-- State colors: success/warn/error/info (without specific hex, if not specified)
-
-## Rule
-If there is a ready-made design system, inventory is tied to its components/options.
-If not, describe components with minimal parameters sufficient for implementation and testing of UX Spec.
+Catalog UI components with variants, states, a11y notes.
+
+**Sections:**
+1. [Workflow](#1-workflow)
+2. [Component Card Template](#2-card)
+3. [Component Catalog](#3-catalog)
+4. [Design Tokens](#4-tokens)
+5. [Design System Mapping](#5-mapping)
+6. [Example: Button Card](#6-example)
+7. [Output Template](#7-output)
+
+---
+
+## 1. Workflow
+
+```
+1. Input: UX Spec (from $ux_spec)
+2. Extract all mentioned components from Screen Specs
+3. Classify: atom / molecule / organism / pattern
+4. For each → Component Card (section 2)
+5. Map to design system (section 5) if there is
+6. Define design tokens (section 4)
+7. Validate: each component in UI Spec coverage
+```
+
+### Decision: Use existing vs Build custom
+
+```
+Component needed ← UX Spec
+    ├── There is in design? (WDS / shadcn / Mantine)
+    │   ├── Yes, fits → USE (specify import + variant)
+    │   ├── Yes, but needed customization → CUSTOMIZE (wrapper component)
+    │   └── No → BUILD CUSTOM (with a11y baseline)
+    └── Already is in project?
+        ├── Yes → REUSE (specify path)
+        └── No → CREATE (by template)
+```
+
+---
+
+## 2. Component Card Template
+
+```markdown
+### Component: <Name>
+
+**Category:** Atom / Molecule / Organism
+**Source:** WDS | shadcn | Custom | Existing (<path>)
+**Used in:** <screens list>
+
+#### Variants
+| Variant | Visual | Use case |
+|---------|--------|----------|
+| primary | Filled, accent color | Main CTA |
+| secondary | Outlined | Secondary actions |
+| ghost | Text only | Tertiary actions |
+| destructive | Red filled | Delete/remove |
+
+#### Props
+| Prop | Type | Required | Default | Description |
+|------|------|:--------:|---------|-------------|
+| label | string | ✅ | — | Button text |
+| variant | enum | ❌ | "primary" | Visual style |
+| size | "sm" | "md" | "lg" | ❌ | "md" | Dimensions |
+| disabled | boolean | ❌ | false | Disable interaction |
+| loading | boolean | ❌ | false | Show spinner |
+| onClick | function | ✅ | — | Click handler |
+
+#### States
+| State | Visual | Behavior |
+|-------|--------|----------|
+| Default | Normal appearance | Clickable |
+| Hover | Darker bg / lighter bg | Cursor pointer |
+| Active/Pressed | Slight scale down | Processing |
+| Focused | Focus ring visible | Keyboard nav |
+| Disabled | 50% opacity | Not clickable |
+| Loading | Spinner replaces label | Not clickable |
+
+#### A11y Notes
+- Uses `<button>` element (not div)
+- `aria-disabled` when disabled
+- `aria-busy` when loading
+- Focus visible via `:focus-visible`
+```
+
+---
+
+## 3. Component Catalog
+
+### 3.1 Atoms (base elements)
+
+| Component | Variants | Source | A11y |
+|-----------|---------|--------|------|
+| **Button** | primary / secondary / ghost / destructive | WDS / Custom | `<button>`, focus-visible |
+| **TextInput** | default / error / disabled | WDS / Custom | `<label>` linked, aria-invalid |
+| **Textarea** | default / error / disabled | WDS / Custom | `<label>` linked |
+| **Select** | default / error / disabled | WDS / Custom | aria-expanded, listbox role |
+| **Checkbox** | unchecked / checked / indeterminate | WDS | `<input type="checkbox">` |
+| **Switch** | off / on / disabled | WDS | role="switch", aria-checked |
+| **ColorPicker** | — | Custom | aria-label, keyboard nav |
+| **NumberInput** | default / error / disabled | WDS / Custom | min/max, step |
+| **Badge** | success / warn / error / info / neutral | WDS | aria-label for icon-only |
+| **Spinner** | sm / md / lg | WDS | aria-busy on parent |
+| **Skeleton** | text / rect / circle | Custom | aria-hidden |
+| **Icon** | varies (Material Symbols) | Custom | aria-hidden (decorative) or aria-label |
+| **Tooltip** | top / bottom / left / right | WDS | role="tooltip", aria-describedby |
+
+### 3.2 Molecules (composed)
+
+| Component | Contains | Source | Notes |
+|-----------|---------|--------|-------|
+| **FormField** | Label + Control + HelpText + Error | Custom | Standard form pattern |
+| **Toast** | Icon + Message + Close | WDS | Auto-dismiss, aria-live |
+| **EmptyState** | Icon/Illustration + Text + CTA | Custom | Call-to-action button |
+| **ErrorState** | Icon + Message + Retry button | Custom | — |
+| **Card** | Header + Body + Actions | Custom | — |
+| **TabBar** | Tab × N | WDS | role="tablist", arrow keys |
+
+### 3.3 Organisms (complex)
+
+| Component | Contains | Source | Notes |
+|-----------|---------|--------|-------|
+| **ConfigPanel** | TabBar + FormFields + SaveButton | Custom | Main settings form |
+| **LivePreview** | PopupTemplate (rendered) | Custom | Updates on config change |
+| **CouponTable** | Table + Pagination + EmptyState | Custom | CRUD actions |
+| **ConfirmDialog** | Modal + Message + Confirm/Cancel buttons | WDS | Focus trap |
+
+### 3.4 Patterns (behavioral)
+
+| Pattern | Rule | Components used |
+|---------|------|----------------|
+| **Loading strategy** | Skeleton for initial, spinner for actions | Skeleton, Spinner |
+| **Empty state** | Illustration + text + CTA | EmptyState |
+| **Error recovery** | Message + retry button | ErrorState, Toast |
+| **Destructive confirm** | Modal before delete | ConfirmDialog |
+| **Optimistic update** | Show change → revert on error | Toast (undo) |
+| **Form validation** | Inline on blur + all on submit | FormField (error state) |
+
+---
+
+## 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 |
+
+---
+
+## 5. Design System Mapping
+
+### Wix Design System (WDS) mapping
+
+| 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 |
+
+---
+
+## 6. Example: Button Card
+
+```markdown
+### Component: Button
+
+**Category:** Atom
+**Source:** WDS `<Button>` (customized)
+**Used in:** Settings (Save, Reset), Coupons (Create, Delete)
+
+#### Variants
+| Variant | WDS `priority` | Visual |
+|---------|:-------------:|--------|
+| primary | `primary` | Filled blue (#116DFF) |
+| secondary | `secondary` | Outlined |
+| destructive | N/A (custom) | Filled red (#D32F2F) |
+
+#### States
+| Default | Hover | Loading | Disabled |
+|---------|-------|---------|----------|
+| Normal | Darker bg | Spinner, no text | 50% opacity |
+
+#### A11y: `<button>`, focus-visible, aria-disabled, aria-busy
+```
+
+---
+
+## 7. Output Template
+
+```markdown
+# UI Components Inventory
+
+**Date:** YYYY-MM-DD
+**Author:** UX/UI Designer Agent
+**Design System:** <WDS / shadcn / Custom>
+**UX Spec:** <reference>
+
+## Component Summary
+| Category | Count | Custom | From DS |
+|----------|:-----:|:------:|:-------:|
+| Atoms | 13 | 3 | 10 |
+| Molecules | 6 | 4 | 2 |
+| Organisms | 4 | 4 | 0 |
+| Patterns | 6 | — | — |
+
+## Component Cards
+<section 2 format × N components>
+
+## Design Tokens
+<section 4>
+
+## Design System Mapping
+<section 5>
+```
+
+---
+
+## 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

package/locales/en/.agents/ui_inventory/agents/claude.json

@@ -1,13 +1,13 @@
 {
   "name": "ui_inventory",
   "display_name": "UI Components Inventory",
-  "description": "Compile an inventory of UI components and rules for reuse: basic components, compositional components, patterns (forms, tables, dialogs), design tokens (minimum).",
+  "description": "Compose an inventory of UI components and reuse rules — basic components, composite components, patterns (forms, tables, dialogs), design (minimum).",
   "default_prompt": "Use $ui_inventory when the task matches the \"UI Components Inventory\" skill.",
   "triggers": [
     "ui_inventory",
     "ui inventory",
     "UI Components Inventory",
-    "Compile an inventory of UI components and rules for reuse"
+    "Compose an inventory of UI components and reuse rules — basic components, composite components, patterns (forms, tables, dialogs), design (minimum)"
   ],
   "capabilities": [
     "ui",