code-ai-installer 1.3.0 → 1.4.0

package/locales/en/.agents/skills/deployment_ci_plan/agents/claude.json

@@ -0,0 +1,19 @@
+{
+  "name": "deployment_ci_plan",
+  "display_name": "Deployment & CI Plan",
+  "description": "Deployment and continuous integration plan - environments, configs, secrets, migrations, checks in continuous integration (tests/lint/security), release and rollback strategy.",
+  "default_prompt": "Use $deployment_ci_plan when the task matches the \"Deployment & CI Plan\" skill.",
+  "triggers": [
+    "deployment_ci_plan",
+    "deployment ci plan",
+    "Deployment & CI Plan",
+    "Deployment and continuous integration plan - environments, configs, secrets, migrations, checks in continuous integration (tests/lint/security), release and rollback strategy"
+  ],
+  "capabilities": [
+    "deployment",
+    "ci",
+    "plan"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}

package/locales/en/.agents/skills/deployment_ci_plan/agents/copilot.json

@@ -0,0 +1,19 @@
+{
+  "name": "deployment_ci_plan",
+  "display_name": "Deployment & CI Plan",
+  "description": "Deployment and continuous integration plan - environments, configs, secrets, migrations, checks in continuous integration (tests/lint/security), release and rollback strategy.",
+  "default_prompt": "Use $deployment_ci_plan when the task matches the \"Deployment & CI Plan\" skill.",
+  "triggers": [
+    "deployment_ci_plan",
+    "deployment ci plan",
+    "Deployment & CI Plan",
+    "Deployment and continuous integration plan - environments, configs, secrets, migrations, checks in continuous integration (tests/lint/security), release and rollback strategy"
+  ],
+  "capabilities": [
+    "deployment",
+    "ci",
+    "plan"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}

package/locales/en/.agents/skills/deployment_ci_plan/agents/gemini.json

@@ -0,0 +1,19 @@
+{
+  "name": "deployment_ci_plan",
+  "display_name": "Deployment & CI Plan",
+  "description": "Deployment and continuous integration plan - environments, configs, secrets, migrations, checks in continuous integration (tests/lint/security), release and rollback strategy.",
+  "default_prompt": "Use $deployment_ci_plan when the task matches the \"Deployment & CI Plan\" skill.",
+  "triggers": [
+    "deployment_ci_plan",
+    "deployment ci plan",
+    "Deployment & CI Plan",
+    "Deployment and continuous integration plan - environments, configs, secrets, migrations, checks in continuous integration (tests/lint/security), release and rollback strategy"
+  ],
+  "capabilities": [
+    "deployment",
+    "ci",
+    "plan"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}

package/locales/en/.agents/skills/deployment_ci_plan/agents/openai.yaml

@@ -0,0 +1,8 @@
+interface:
+  display_name: "Deployment & CI Plan"
+  short_description: "Deployment and continuous integration plan - environments, configs, secrets, migrations, checks…"
+  default_prompt: "Use $deployment_ci_plan when the task matches the \"Deployment & CI Plan\" skill."
+dependencies:
+  tools: []
+policy:
+  allow_implicit_invocation: true

package/locales/en/.agents/skills/deployment_ci_plan/agents/qwen.json

@@ -0,0 +1,19 @@
+{
+  "name": "deployment_ci_plan",
+  "display_name": "Deployment & CI Plan",
+  "description": "Deployment and continuous integration plan - environments, configs, secrets, migrations, checks in continuous integration (tests/lint/security), release and rollback strategy.",
+  "default_prompt": "Use $deployment_ci_plan when the task matches the \"Deployment & CI Plan\" skill.",
+  "triggers": [
+    "deployment_ci_plan",
+    "deployment ci plan",
+    "Deployment & CI Plan",
+    "Deployment and continuous integration plan - environments, configs, secrets, migrations, checks in continuous integration (tests/lint/security), release and rollback strategy"
+  ],
+  "capabilities": [
+    "deployment",
+    "ci",
+    "plan"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}

package/locales/en/.agents/skills/deployment_ci_plan/agents/skill.yaml

@@ -0,0 +1,23 @@
+version: 1
+name: "deployment_ci_plan"
+display_name: "Deployment & CI Plan"
+description: "Deployment and continuous integration plan - environments, configs, secrets, migrations, checks in continuous integration (tests/lint/security), release and rollback strategy."
+default_prompt: "Use $deployment_ci_plan when the task matches the \"Deployment & CI Plan\" skill."
+triggers:
+  - "deployment_ci_plan"
+  - "deployment ci plan"
+  - "Deployment & CI Plan"
+  - "Deployment and continuous integration plan - environments, configs, secrets, migrations, checks in continuous integration (tests/lint/security), release and rollback strategy"
+capabilities:
+  - "deployment"
+  - "ci"
+  - "plan"
+tools: []
+invocation:
+  explicit: true
+  implicit: true
+localization:
+  default_locale: "en"
+  available_locales:
+    - "ru"
+    - "en"

package/locales/en/.agents/skills/design_intake/SKILL.md

@@ -0,0 +1,223 @@
+---
+name: design_intake
+description: Find and analyze provided design materials (files/links), determine the "source of truth" for UI, and extract checkable rules (screens, components, tokens, states).
+---
+
+# Skill: Design Intake
+
+Fix design artifacts as the Source of Truth and extract checkable rules.
+
+**Sections:**
+1. [Workflow](#1-workflow)
+2. [Source Discovery](#2-source-discovery)
+3. [Extraction Checklist](#3-extraction-checklist)
+4. [Design Rules Examples](#4-design-rules-examples)
+5. [Example](#5-example)
+6. [Output Template](#6-output-template)
+
+---
+
+## 1. Workflow
+
+```
+1. Identify sources
+   ├── Files in repository (design/, docs/, assets/)
+   ├── Links (Figma, Stitch, Zeplin)
+   └── HTML References (popup_description/*.html)
+
+2. Classify each source
+   ├── Source of Truth (master)
+   ├── Reference (auxiliary)
+   └── Outdated (mark, do not use)
+
+3. For each SoT → extract spec (section 3)
+
+4. Form Design Reference Map (screen → file)
+
+5. Extract Design Rules (5-20 checkable rules)
+
+6. Validate: are all screens from PRD covered?
+```
+
+---
+
+## 2. Source Discovery
+
+### Where to look
+
+```bash
+# Folders
+find_by_name: Pattern="design" Type=directory
+find_by_name: Pattern="docs" Type=directory
+find_by_name: Pattern="assets" Type=directory
+find_by_name: Pattern="ui" Type=directory
+find_by_name: Pattern="popup_description" Type=directory
+
+# Files
+find_by_name: Extensions=["fig","pdf","png","jpg","svg","sketch"]
+find_by_name: Pattern="*.html" SearchDirectory="<design_folder>"
+
+# Links in documentation
+grep_search: Query="figma.com" Includes=["*.md"]
+grep_search: Query="stitch" Includes=["*.md"]
+grep_search: Query="design" Includes=["README.md"]
+```
+
+### Source classification
+
+| Type | Marker | Priority | Example |
+|------|--------|:--------:|---------|
+| **Source of Truth** | 🟢 SoT | Highest | Figma page "Dashboard v2" |
+| **Reference** | 🟡 Ref | Medium | Old mockups, inspiration |
+| **Outdated** | 🔴 Outdated | Ignore | Previous iteration designs |
+| **Generated** | 🔵 Gen | Verify | Stitch-generated screens |
+
+---
+
+## 3. Extraction Checklist
+
+For each Source of Truth, extract:
+
+| # | What to extract | How | Status |
+|---|----------------|-----|--------|
+| DI-01 | **Screen list** with names & purpose | List all distinct screens/pages | ☐ |
+| DI-02 | **Layout structure** per screen | Identify columns, sections, hierarchy | ☐ |
+| DI-03 | **Components & variants** | Button types, input styles, cards | ☐ |
+| DI-04 | **Color palette** | Primary, secondary, accent, states (success/error/warn) | ☐ |
+| DI-05 | **Typography** | Font families, sizes, weights, hierarchy | ☐ |
+| DI-06 | **Spacing & sizing** | Padding, margins, gap patterns | ☐ |
+| DI-07 | **States** | Loading, empty, error, success, disabled, hover | ☐ |
+| DI-08 | **Content / copy** | Button labels, titles, error messages, placeholder text | ☐ |
+| DI-09 | **Icons / imagery** | Icon set (Material, custom), illustrations | ☐ |
+| DI-10 | **Responsive rules** | Breakpoints, layout changes, hidden elements | ☐ |
+
+---
+
+## 4. Design Rules Examples
+
+### Typical checkable rules
+
+| # | Rule | Checkable? | Example |
+|---|------|:----------:|---------|
+| DR-01 | Primary CTA is always blue (#116DFF) filled button | ✅ | "Save" button |
+| DR-02 | Destructive actions are red (#D32F2F) + confirmation modal | ✅ | "Delete" button |
+| DR-03 | Form errors shown inline below field, red text | ✅ | Validation |
+| DR-04 | Empty state has illustration + text + CTA | ✅ | Coupons list |
+| DR-05 | Loading shows skeleton, not spinner (for initial load) | ✅ | Settings page |
+| DR-06 | Config panel = left 60%, Live Preview = right 40% | ✅ | Dashboard layout |
+| DR-07 | Tabs use underline active state, not background fill | ✅ | Settings tabs |
+| DR-08 | Toast appears bottom-right, auto-dismiss 3s for success | ✅ | Save settings |
+| DR-09 | Modal backdrop is dark 50% opacity | ✅ | Confirm dialog |
+| DR-10 | Font: headings = 600 weight, body = 400 | ✅ | Typography |
+| DR-11 | Border radius: buttons 8px, cards 12px, inputs 4px | ✅ | Components |
+| DR-12 | Color picker shows 4 tokens: bg, text, accent, overlay | ✅ | Design tab |
+
+### Rule format
+
+```markdown
+### DR-XX: <Short name>
+
+**Source:** <File/Frame/Page> in <SoT>
+**Scope:** <Where it applies>
+**Rule:** <Concrete, checkable statement>
+**Verification:** <How to check — visual / code / grep>
+```
+
+---
+
+## 5. Example
+
+```markdown
+# Design Intake: SaaS Admin Panel
+
+## Sources
+| # | Source | Type | Location | Format |
+|---|--------|------|----------|--------|
+| 1 | Figma mockups | 🟢 SoT | `design/figma-export/` | PNG files |
+| 2 | Component specs | 🟢 SoT | `docs/component-specs.md` | Markdown |
+| 3 | Stitch screens | 🔵 Gen | Stitch project "Admin Panel" | PNG/Stitch |
+| 4 | Design system docs | 🟡 Ref | shadcn/ui documentation | Web |
+
+## Source of Truth
+- **Admin UI:** Figma mockups + Component specs
+- **Dashboard layout:** UX Spec + design system patterns
+- **Public content:** Template spec files
+
+## Design Reference Map
+| Screen | SoT Source | Frame/File |
+|--------|-----------|-----------|
+| Settings panel | UX Spec + design system | Figma frame |
+| Products list | UX Spec + DataTable pattern | — |
+| Content preview | template_spec.md | reference.html |
+
+## Design Rules (extracted)
+- DR-01: Primary CTA is filled blue button
+- DR-02: Tables use striped rows with hover highlight
+- DR-03: Forms use inline validation errors below fields
+- DR-04: Empty states include illustration + CTA
+- DR-05: Config panel: 2 columns, left = form, right = preview
+```
+
+---
+
+## 6. Output Template
+
+```markdown
+# Design Intake Report
+
+**Date:** YYYY-MM-DD
+**Author:** UX/UI Designer Agent
+**PRD:** <reference>
+
+## Sources Inventory
+| # | Source | Type | Location | Format | Status |
+|---|--------|:----:|----------|--------|:------:|
+| 1 | ... | 🟢 SoT | ... | ... | ✅ Analyzed |
+| 2 | ... | 🟡 Ref | ... | ... | ✅ Reviewed |
+| 3 | ... | 🔴 Outdated | ... | ... | ⏭️ Skipped |
+
+## Source of Truth
+| Domain | SoT | Notes |
+|--------|-----|-------|
+| Widget UI | Template specs + HTML refs | Per-template |
+| Dashboard | WDS + UX Spec | No Figma |
+| Config Panel | UX Spec | WDS components |
+
+## Extraction Results
+| # | Check | Status |
+|---|-------|--------|
+| DI-01 | Screen list | ✅ X screens |
+| DI-02 | Layout structure | ✅ |
+| DI-03 | Components & variants | ✅ X components |
+| DI-04 | Color palette | ✅ X tokens |
+| ... | ... | ... |
+
+## Design Reference Map
+| Screen | Source | File/Frame | SoT |
+|--------|--------|-----------|:---:|
+| ... | ... | ... | 🟢 |
+
+## Design Rules
+<DR-01..DR-XX per section 4 format>
+
+## Coverage Check
+- [ ] All PRD screens have a design source
+- [ ] All design screens are in UX Spec screen list
+- [ ] All components are in UI Inventory
+
+## Gaps / Open Questions
+| # | Gap | Impact | Resolution |
+|---|-----|--------|-----------|
+| 1 | No design for error states | P1 | Apply standard error pattern |
+
+## Next Step
+→ Proceed to $ux_spec / $design_parity_review
+```
+
+---
+
+## See also
+- `$ux_spec` — UX Spec (uses intake output)
+- `$design_parity_review` — compare design with implementation
+- `$ui_inventory` — component inventory
+- `$google_stitch` — generate screens from text

package/locales/en/.agents/skills/design_intake/agents/claude.json

@@ -0,0 +1,17 @@
+{
+  "name": "design_intake",
+  "display_name": "Design Intake",
+  "description": "Find and analyze the provided design materials (files/links), determine the \"source of truth\" for the user interface, and extract verifiable rules (screens, components, tokens, states).",
+  "default_prompt": "Use $design_intake when the task matches the \"Design Intake\" skill.",
+  "triggers": [
+    "design_intake",
+    "design intake",
+    "Find and analyze the provided design materials (files/links), determine the \"source of truth\" for the user interface, and extract verifiable rules (screens, components, tokens, states)"
+  ],
+  "capabilities": [
+    "design",
+    "intake"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}

package/locales/en/.agents/skills/design_intake/agents/copilot.json

@@ -0,0 +1,17 @@
+{
+  "name": "design_intake",
+  "display_name": "Design Intake",
+  "description": "Find and analyze the provided design materials (files/links), determine the \"source of truth\" for the user interface, and extract verifiable rules (screens, components, tokens, states).",
+  "default_prompt": "Use $design_intake when the task matches the \"Design Intake\" skill.",
+  "triggers": [
+    "design_intake",
+    "design intake",
+    "Find and analyze the provided design materials (files/links), determine the \"source of truth\" for the user interface, and extract verifiable rules (screens, components, tokens, states)"
+  ],
+  "capabilities": [
+    "design",
+    "intake"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}

package/locales/en/.agents/skills/design_intake/agents/gemini.json

@@ -0,0 +1,17 @@
+{
+  "name": "design_intake",
+  "display_name": "Design Intake",
+  "description": "Find and analyze the provided design materials (files/links), determine the \"source of truth\" for the user interface, and extract verifiable rules (screens, components, tokens, states).",
+  "default_prompt": "Use $design_intake when the task matches the \"Design Intake\" skill.",
+  "triggers": [
+    "design_intake",
+    "design intake",
+    "Find and analyze the provided design materials (files/links), determine the \"source of truth\" for the user interface, and extract verifiable rules (screens, components, tokens, states)"
+  ],
+  "capabilities": [
+    "design",
+    "intake"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}

package/locales/en/.agents/skills/design_intake/agents/openai.yaml

@@ -0,0 +1,8 @@
+interface:
+  display_name: "Design Intake"
+  short_description: "Find and analyze the provided design materials (files/links), determine the \"source of truth\" f…"
+  default_prompt: "Use $design_intake when the task matches the \"Design Intake\" skill."
+dependencies:
+  tools: []
+policy:
+  allow_implicit_invocation: true

package/locales/en/.agents/skills/design_intake/agents/qwen.json

@@ -0,0 +1,17 @@
+{
+  "name": "design_intake",
+  "display_name": "Design Intake",
+  "description": "Find and analyze the provided design materials (files/links), determine the \"source of truth\" for the user interface, and extract verifiable rules (screens, components, tokens, states).",
+  "default_prompt": "Use $design_intake when the task matches the \"Design Intake\" skill.",
+  "triggers": [
+    "design_intake",
+    "design intake",
+    "Find and analyze the provided design materials (files/links), determine the \"source of truth\" for the user interface, and extract verifiable rules (screens, components, tokens, states)"
+  ],
+  "capabilities": [
+    "design",
+    "intake"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}

package/locales/en/.agents/skills/design_intake/agents/skill.yaml

@@ -0,0 +1,21 @@
+version: 1
+name: "design_intake"
+display_name: "Design Intake"
+description: "Find and analyze the provided design materials (files/links), determine the \"source of truth\" for the user interface, and extract verifiable rules (screens, components, tokens, states)."
+default_prompt: "Use $design_intake when the task matches the \"Design Intake\" skill."
+triggers:
+  - "design_intake"
+  - "design intake"
+  - "Find and analyze the provided design materials (files/links), determine the \"source of truth\" for the user interface, and extract verifiable rules (screens, components, tokens, states)"
+capabilities:
+  - "design"
+  - "intake"
+tools: []
+invocation:
+  explicit: true
+  implicit: true
+localization:
+  default_locale: "en"
+  available_locales:
+    - "ru"
+    - "en"

package/locales/en/.agents/skills/design_parity_review/SKILL.md

@@ -0,0 +1,216 @@
+---
+name: design_parity_review
+description: Compare design artifacts with UX Spec or implemented UI. Issue a discrepancy report (Design Parity Report) with P0/P1/P2 priorities and specific recommendations.
+---
+
+# Skill: Design Parity Review
+
+Reconciliation of design with UX Spec and/or implemented UI.
+
+**Sections:**
+1. [Workflow](#1-workflow)
+2. [Review Modes](#2-review-modes)
+3. [Comparison Table](#3-comparison-table)
+4. [Severity Guide](#4-severity-guide)
+5. [Example: Settings Screen](#5-example-settings-screen)
+6. [Output Template](#6-output-template)
+
+---
+
+## 1. Workflow
+
+```
+1. Input:
+   ├── Design Reference Map + Design Rules (from $design_intake)
+   ├── UX Spec (from $ux_spec) — for Mode A
+   └── Implemented UI (screenshots/browser) — for Mode B
+
+2. For each screen in Design Reference Map:
+   a. Open design source (file/frame)
+   b. Open comparison target (UX Spec or implemented UI)
+   c. Fill comparison table (section 3)
+   d. Classify each discrepancy (section 4)
+
+3. Summarize: pass / discrepancies by severity
+
+4. Generate recommendations (DEV-xx / UX-xx tasks)
+```
+
+---
+
+## 2. Review Modes
+
+### Mode A: Design ↔ UX Spec (before development)
+
+**Purpose:** Ensure UX Spec accurately reflects design intent before dev starts.
+
+| Check | What to compare | Look for |
+|-------|----------------|---------|
+| Layout | Design layout → UX Spec layout description | Missing/wrong columns, ordering |
+| Sections | Design sections → UX Spec "Sections & Components" | Missing sections, wrong hierarchy |
+| Actions | Design CTAs → UX Spec "Primary Actions" | Missing actions, wrong labels |
+| Forms | Design fields → UX Spec "Forms & Validation" | Missing fields, wrong types |
+| States | Design state screens → UX Spec "States" | Missing states (loading/empty/error) |
+| Content | Design labels/copy → UX Spec content | Wrong text, missing copy |
+| Components | Design components → UI Inventory | Unmapped components |
+
+### Mode B: Design ↔ Implemented UI (after development)
+
+**Purpose:** Ensure implementation matches design.
+
+| Check | What to compare | How to verify |
+|-------|----------------|--------------|
+| Visual layout | Design → screenshot | Side-by-side comparison |
+| Colors | Design palette → CSS variables | Inspect computed styles |
+| Typography | Design fonts → computed styles | Inspect font-family, size, weight |
+| Spacing | Design padding/margins → computed | Inspect box model |
+| Components | Design variants → rendered components | Visual + props check |
+| States | Design states → trigger each state | Navigate through states |
+| Responsiveness | Design breakpoints → resize browser | Test at each breakpoint |
+| Icons | Design icon set → rendered icons | Visual comparison |
+
+---
+
+## 3. Comparison Table
+
+### Per-screen comparison template
+
+```markdown
+### Screen: <Name>
+
+| # | Aspect | Design (Expected) | Actual (Spec/UI) | Match? | Severity | Notes |
+|---|--------|-------------------|------------------|:------:|:--------:|-------|
+| 1 | Layout | 2-column: 60/40 | 2-column: 60/40 | ✅ | — | — |
+| 2 | Header | Title + breadcrumbs | Title only | ❌ | P2 | Breadcrumbs not in design |
+| 3 | Save button | Blue primary, bottom-right | Blue primary, bottom-right | ✅ | — | — |
+| 4 | Error state | Inline red text under field | Toast only | ❌ | P1 | Missing inline errors |
+| 5 | Loading | Skeleton | Spinner | ❌ | P1 | Should be skeleton |
+| 6 | Tab active | Underline | Background fill | ❌ | P1 | Wrong tab style |
+| 7 | Color picker | 4-token picker | 4-token picker | ✅ | — | — |
+```
+
+### Design Rules verification
+
+```markdown
+| Rule | Expected | Actual | Status |
+|------|----------|--------|:------:|
+| DR-01: Primary CTA is blue #116DFF | Blue filled button | ✅ Blue filled | ✅ |
+| DR-03: Timer digits monospace | Monospace font | Serif font | ❌ P1 |
+| DR-05: 2-column layout 60/40 | 60/40 split | 50/50 split | ❌ P1 |
+```
+
+---
+
+## 4. Severity Guide
+
+| Severity | Criteria | Examples |
+|----------|---------|---------|
+| 🔴 **P0 (Blocker)** | Breaks critical flow, misleads user, data loss risk, contradicts PRD | Wrong form field type, missing required validation, CTA leads to wrong action |
+| 🟠 **P1 (Important)** | Breaks consistency, degrades UX, noticeable deviation | Wrong loading pattern (spinner vs skeleton), missing error state, wrong colors |
+| 🟡 **P2 (Nice-to-have)** | Cosmetic, polish, minor spacing/alignment | 2px alignment off, slightly wrong border-radius, extra whitespace |
+
+### Decision tree
+
+```
+Discrepancy found:
+├── Does it break a user flow? → P0
+├── Does it break consistency or UX quality? → P1
+├── Is it visual polish only? → P2
+└── Is it subjective / taste? → Not a finding (skip)
+```
+
+---
+
+## 5. Example: Settings Screen
+
+```markdown
+### Screen: Settings — Design Tab
+
+**Design source:** UX Spec + Glassmorphism Spec
+**Compared with:** Implemented UI (screenshot)
+
+| # | Aspect | Design | Implemented | Match? | Sev |
+|---|--------|--------|------------|:------:|:---:|
+| 1 | Layout | 2-column: config + preview | ✅ 2-column | ✅ | — |
+| 2 | Color pickers | 4 tokens (bg, text, accent, overlay) | 3 pickers (missing overlay) | ❌ | P0 |
+| 3 | Font select | Dropdown with preview | Plain dropdown | ❌ | P1 |
+| 4 | Live preview | Updates on change | Updates on save only | ❌ | P1 |
+| 5 | Tab underline | 2px underline accent color | Background highlight | ❌ | P2 |
+| 6 | Save button | Bottom of panel, primary | ✅ Bottom, primary | ✅ | — |
+
+### Design Rules Check
+| Rule | Status |
+|------|:------:|
+| DR-01: 4-color token system | ❌ Missing overlay picker |
+| DR-02: Timer monospace | ✅ |
+| DR-05: 60/40 layout | ✅ |
+
+### Findings: 1× P0, 2× P1, 1× P2
+```
+
+---
+
+## 6. Output Template
+
+```markdown
+# Design Parity Report
+
+**Mode:** A (Design ↔ UX Spec) / B (Design ↔ Implemented UI)
+**Date:** YYYY-MM-DD
+**Reviewer:** UX/UI Designer Agent
+**Design source:** <reference>
+**Compared with:** <UX Spec / Implemented UI>
+
+## Summary
+| Status | Screens | Findings |
+|--------|:-------:|:--------:|
+| ✅ Match | X | — |
+| ❌ Discrepancies | Y | Z total |
+
+## Per-Screen Comparison
+<section 3 tables × N screens>
+
+## Design Rules Verification
+<section 3 rules table>
+
+## Findings Summary
+
+| # | Severity | Screen | Aspect | Expected | Actual | Fix |
+|---|----------|--------|--------|----------|--------|-----|
+| 1 | 🔴 P0 | Design tab | Color pickers | 4 tokens | 3 tokens | Add overlay picker |
+| 2 | 🟠 P1 | Design tab | Font select | Preview dropdown | Plain dropdown | Add font preview |
+| 3 | 🟠 P1 | Design tab | Live preview | Update on change | Update on save | Wire onChange handlers |
+| 4 | 🟡 P2 | Design tab | Tab style | Underline | Background | CSS change |
+
+## ✅ What Matches
+- Layout structure (2-column, 60/40)
+- Save button placement and style
+- Timer digit formatting
+- Color picker component for 3/4 tokens
+
+## Recommendations
+| ID | Type | Action | Priority |
+|----|------|--------|:--------:|
+| DEV-01 | Code | Add overlay color picker to Design tab | P0 |
+| DEV-02 | Code | Wire live preview onChange | P1 |
+| UX-01 | Spec | Update UX Spec with font preview requirement | P1 |
+| DEV-03 | CSS | Change tab active style to underline | P2 |
+
+## Conflicts
+| # | Design says | PRD/Architecture says | Recommendation |
+|---|-----------|----------------------|----------------|
+| — | _(none)_ | — | — |
+
+## Verdict
+- ✅ **PARITY** — all screens match design
+- ⚠️ **DEVIATIONS** — P0/P1 findings to fix
+- ❌ **SIGNIFICANT MISMATCH** — redesign or major rework needed
+```
+
+---
+
+## See also
+- `$design_intake` — design sources inventory (input)
+- `$ux_spec` — UX Spec (comparison target)
+- `$ui_inventory` — component inventory
+- `$qa_browser_testing` — capture screenshots for comparison