code-ai-installer 1.3.1 → 1.5.0

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

@@ -1,227 +0,0 @@
----
-name: design_intake
-description: Find and analyze the provided designs (files/links), determine "source truth" by UI and extract verifiable rules (screens, components, tokens, states).
----
-
-# Skill: Design Intake
-
-Record design how Source of Truth and extract verifiable rules.
-
-**Sections:**
-1. [Workflow](#1-workflow)
-2. [Source Discovery](#2-discovery)
-3. [Extraction Checklist](#3-extraction)
-4. [Design Rules Examples](#4-rules)
-5. [Example: Smart Cart Rescue](#5-example)
-6. [Output Template](#6-output)
-
----
-
-## 1. Workflow
-
-```
-1. Determine sources
-   ├── Files in repositories (design/, docs/, assets/)
-   ├── Links (Figma, Stitch, Zeplin)
-   └── HTML References (popup_description/*.html)
-
-2. Classify each source
-   ├── Source of Truth (master)
-   ├── Reference (supporting)
-   └── Outdated (mark, not use)
-
-3. For each SoT → extract spec (section 3)
-
-4. Form Design Reference Map (screen → file)
-
-5. Extract Design Rules (5-20 check rule)
-
-6. Validate: all screens from PRD covered?
-```
-
----
-
-## 2. Source Discovery
-
-### Where search
-
-```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 verifiable 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: Smart Cart Rescue
-
-```markdown
-# Design Intake: Smart Cart Rescue Dashboard
-
-## Sources
-| # | Source | Type | Location | Format |
-|---|--------|------|----------|--------|
-| 1 | Template HTML refs | 🟢 SoT | `popup_description/` | HTML files |
-| 2 | Glassmorphism spec | 🟢 SoT | `popup_description/glassmorphism_spec.md` | Markdown |
-| 3 | Neo-Brutalism spec | 🟢 SoT | `popup_description/neo_brutalism_spec.md` | Markdown |
-| 4 | Stitch screens | 🔵 Gen | Stitch project "SCR Dashboard" | PNG/Stitch |
-| 5 | WDS documentation | 🟡 Ref | `@wix/design-system` docs | Web |
-
-## Source of Truth
-- **Widget design:** Template spec .md files + HTML references
-- **Dashboard UI:** WDS components + UX Spec
-- **Config panel:** UX Spec (no design file — follows WDS patterns)
-
-## Design Reference Map
-| Screen | SoT Source | Frame/File |
-|--------|-----------|-----------|
-| Settings panel | UX Spec + WDS | — |
-| Widget: Glassmorphism | glassmorphism_spec.md | `popup7.html` |
-| Widget: Neo-Brutalism | neo_brutalism_spec.md | `popup9.html` |
-| Coupons list | WDS Table pattern | — |
-
-## Design Rules (extracted)
-- DR-01: Glassmorphism popup uses 4-color token system (bg, text, accent, overlay)
-- DR-02: Timer digits use monospace font
-- DR-03: CTA button text from settings, icon optional (Material Symbols)
-- DR-04: Neo-Brutalism uses hard shadows (4px 4px 0 #000)
-- DR-05: Config panel: 2 columns, left = form, right = live 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_skill` — generate screens from text
-
-

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

@@ -1,17 +0,0 @@
-{
-  "name": "design_intake",
-  "display_name": "Design Intake",
-  "description": "Find and analyze the provided designs (files/links), determine \"source truth\" by UI 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 designs (files/links), determine \"source truth\" by UI and extract verifiable rules (screens, components, tokens, states)"
-  ],
-  "capabilities": [
-    "design",
-    "intake"
-  ],
-  "tools": [],
-  "implicit_invocation": true
-}

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

@@ -1,17 +0,0 @@
-{
-  "name": "design_intake",
-  "display_name": "Design Intake",
-  "description": "Find and analyze the provided designs (files/links), determine \"source truth\" by UI 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 designs (files/links), determine \"source truth\" by UI and extract verifiable rules (screens, components, tokens, states)"
-  ],
-  "capabilities": [
-    "design",
-    "intake"
-  ],
-  "tools": [],
-  "implicit_invocation": true
-}

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

@@ -1,17 +0,0 @@
-{
-  "name": "design_intake",
-  "display_name": "Design Intake",
-  "description": "Find and analyze the provided designs (files/links), determine \"source truth\" by UI 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 designs (files/links), determine \"source truth\" by UI and extract verifiable rules (screens, components, tokens, states)"
-  ],
-  "capabilities": [
-    "design",
-    "intake"
-  ],
-  "tools": [],
-  "implicit_invocation": true
-}

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

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

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

@@ -1,17 +0,0 @@
-{
-  "name": "design_intake",
-  "display_name": "Design Intake",
-  "description": "Find and analyze the provided designs (files/links), determine \"source truth\" by UI 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 designs (files/links), determine \"source truth\" by UI and extract verifiable rules (screens, components, tokens, states)"
-  ],
-  "capabilities": [
-    "design",
-    "intake"
-  ],
-  "tools": [],
-  "implicit_invocation": true
-}

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

@@ -1,21 +0,0 @@
-version: 1
-name: "design_intake"
-display_name: "Design Intake"
-description: "Find and analyze the provided designs (files/links), determine \"source truth\" by UI 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 designs (files/links), determine \"source truth\" by UI 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/design_parity_review/SKILL.md

@@ -1,216 +0,0 @@
----
-name: design_parity_review
-description: Compare design artifacts with the UX Spec or with the implemented UI. Produce a Design Parity Report with P0/P1/P2 priorities and specific recommendations.
----
-
-# Skill: Design Parity Review
-
-Compare the design with the UX Spec and/or the implemented UI.
-
-**Sections:**
-1. [Workflow](#1-workflow)
-2. [Review Modes](#2-modes)
-3. [Comparison Table](#3-comparison)
-4. [Severity Guide](#4-severity)
-5. [Example: Settings Screen](#5-example)
-6. [Output Template](#6-output)
-
----
-
-## 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