code-ai-installer 1.2.0 → 1.3.0

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

@@ -1,71 +1,225 @@
 ---
 name: design_intake
-description: Find and analyze provided design materials (files/links), determine the “source of truth” for the UI and extract verifiable rules (screens, components, tokens, states).
+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 (collection of design sources)
-
-## Goal
-Capture which design artifacts are the source of truth and extract testable rules from them for UX Spec and development.
-
-## When to use
-- Design files (PDF/PNG/SVG/FIG, etc.) have been added to the repository
-- The user provided a link to Figma/other layouts
-- Before preparing the UX Spec or before the final UI verification
-
-## Inputs
-- Paths to files in the repository (if any)
-- Links (if available, for example Figma)
-- PRD/UX Spec (if already exist)
-
-## Search for design artifacts (heuristics)
-Check availability (if the repository is available):
-- Folders: `design/`, `docs/design/`, `assets/design/`, `.figma/`, `ui/`
-- Files: `*.fig`, `*.pdf`, `*.png`, `*.jpg`, `*.jpeg`, `*.svg`
-- Documents: `README.md`, `docs/*` for the presence of the word “Figma” and links
-
-## Algorithm
-1) **Collect sources**:
-   - list of files/folders (paths)
-   - list of links (if given)
-2) **Define the “source of truth”** (Source of Truth):
-   - main page/file for MVP screens
-   - separate pages/sections for components/tokens (if any)
-3) **Extract the specification**:
-   - list of screens and their purpose
-   - screen structure (main sections)
-   - components and options (primary/secondary, sizes, states)
-   - states: loading/empty/error/success (if reflected)
-   - key content rules (errors, tips, button texts)
-4) **Gather a Design Reference Map**:
-   - Screen → where described (file/page/frame)
-   - Component → where described
-5) **Create a “Design Rules Summary”**:
-   - 5–20 rules that can be checked (without subjectivity)
-
-## Exit (Deliverables)
-###Design Sources
-- Files:
-- Links:
-
-###Source of Truth
-- Screens:
-- Components:
-- Tokens/Guidelines:
-
-### Design Reference Map
-- Screens:
-- Components:
-
-### Design Rules Summary
-- Rule 1:
-- Rule 2:
-...
-
-## Response format
-### Summary
-### Deliverables (Design Sources + Reference Map + Rules)
-###Decisions
-###Risks/Blockers
-### Open Questions
-### Next Actions (IDs: UX-xx)
+# 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` — generate screens from text

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

@@ -1,13 +1,12 @@
 {
   "name": "design_intake",
-  "display_name": "Design Intake (collection of design sources)",
-  "description": "Find and analyze provided design materials (files/links), determine the “source of truth” for the UI and extract verifiable rules (screens, components, tokens, states).",
-  "default_prompt": "Use $design_intake when the task matches the \"Design Intake (collection of design sources)\" skill.",
+  "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",
-    "Design Intake (collection of design sources)",
-    "Find and analyze provided design materials (files/links), determine the “source of truth” for the UI and extract verifiable rules (screens, components, tokens, states)"
+    "Find and analyze the provided designs (files/links), determine \"source truth\" by UI and extract verifiable rules (screens, components, tokens, states)"
   ],
   "capabilities": [
     "design",

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

@@ -1,13 +1,12 @@
 {
   "name": "design_intake",
-  "display_name": "Design Intake (collection of design sources)",
-  "description": "Find and analyze provided design materials (files/links), determine the “source of truth” for the UI and extract verifiable rules (screens, components, tokens, states).",
-  "default_prompt": "Use $design_intake when the task matches the \"Design Intake (collection of design sources)\" skill.",
+  "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",
-    "Design Intake (collection of design sources)",
-    "Find and analyze provided design materials (files/links), determine the “source of truth” for the UI and extract verifiable rules (screens, components, tokens, states)"
+    "Find and analyze the provided designs (files/links), determine \"source truth\" by UI and extract verifiable rules (screens, components, tokens, states)"
   ],
   "capabilities": [
     "design",

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

@@ -1,13 +1,12 @@
 {
   "name": "design_intake",
-  "display_name": "Design Intake (collection of design sources)",
-  "description": "Find and analyze provided design materials (files/links), determine the “source of truth” for the UI and extract verifiable rules (screens, components, tokens, states).",
-  "default_prompt": "Use $design_intake when the task matches the \"Design Intake (collection of design sources)\" skill.",
+  "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",
-    "Design Intake (collection of design sources)",
-    "Find and analyze provided design materials (files/links), determine the “source of truth” for the UI and extract verifiable rules (screens, components, tokens, states)"
+    "Find and analyze the provided designs (files/links), determine \"source truth\" by UI and extract verifiable rules (screens, components, tokens, states)"
   ],
   "capabilities": [
     "design",

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

@@ -1,7 +1,7 @@
 interface:
-  display_name: "Design Intake (collection of design sources)"
-  short_description: "Find and analyze provided design materials (files/links), determine the “source of truth” for t…"
-  default_prompt: "Use $design_intake when the task matches the \"Design Intake (collection of design sources)\" skill."
+  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:

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

@@ -1,13 +1,12 @@
 {
   "name": "design_intake",
-  "display_name": "Design Intake (collection of design sources)",
-  "description": "Find and analyze provided design materials (files/links), determine the “source of truth” for the UI and extract verifiable rules (screens, components, tokens, states).",
-  "default_prompt": "Use $design_intake when the task matches the \"Design Intake (collection of design sources)\" skill.",
+  "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",
-    "Design Intake (collection of design sources)",
-    "Find and analyze provided design materials (files/links), determine the “source of truth” for the UI and extract verifiable rules (screens, components, tokens, states)"
+    "Find and analyze the provided designs (files/links), determine \"source truth\" by UI and extract verifiable rules (screens, components, tokens, states)"
   ],
   "capabilities": [
     "design",

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

@@ -1,13 +1,12 @@
 version: 1
 name: "design_intake"
-display_name: "Design Intake (collection of design sources)"
-description: "Find and analyze provided design materials (files/links), determine the “source of truth” for the UI and extract verifiable rules (screens, components, tokens, states)."
-default_prompt: "Use $design_intake when the task matches the \"Design Intake (collection of design sources)\" skill."
+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"
-  - "Design Intake (collection of design sources)"
-  - "Find and analyze provided design materials (files/links), determine the “source of truth” for the UI and extract verifiable rules (screens, components, tokens, states)"
+  - "Find and analyze the provided designs (files/links), determine \"source truth\" by UI and extract verifiable rules (screens, components, tokens, states)"
 capabilities:
   - "design"
   - "intake"