code-ai-installer 2.5.0 → 4.0.0

package/domains/development/.agents/skills/design-intake/SKILL.md

@@ -1,223 +1,253 @@
----
-name: design-intake
-description: Найти и проанализировать предоставленные дизайн-материалы (файлы/ссылки), определить "источник правды" по UI и извлечь проверяемые правила (экраны, компоненты, токены, состояния).
----
-
-# Skill: Design Intake
-
-Зафиксировать дизайн-артефакты как Source of Truth и извлечь проверяемые правила.
-
-**Разделы:**
-1. [Workflow](#1-workflow)
-2. [Source Discovery](#2-discovery)
-3. [Extraction Checklist](#3-extraction)
-4. [Design Rules Examples](#4-rules)
-5. [Пример](#5-пример)
-6. [Output Template](#6-output)
-
----
-
-## 1. Workflow
-
-```
-1. Определи источники
-   ├── Файлы в репозитории (design/, docs/, assets/)
-   ├── Ссылки (Figma, Stitch, Zeplin)
-   └── HTML References (popup_description/*.html)
-
-2. Классифицируй каждый источник
-   ├── Source of Truth (мастер)
-   ├── Reference (вспомогательный)
-   └── Outdated (пометить, не использовать)
-
-3. Для каждого SoT → extract spec (section 3)
-
-4. Сформируй Design Reference Map (screen → file)
-
-5. Извлеки Design Rules (5-20 проверяемых правил)
-
-6. Validate: все экраны из PRD покрыты?
-```
-
----
-
-## 2. Source Discovery
-
-### Где искать
-
-```bash
-# Папки
-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
-
-# Файлы
-find_by_name: Extensions=["fig","pdf","png","jpg","svg","sketch"]
-find_by_name: Pattern="*.html" SearchDirectory="<design_folder>"
-
-# Ссылки в документации
-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
-
-### Типичные проверяемые правила
-
-| # | 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. Пример
-
-```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
-```
-
----
-
-## См. также
-- `$ux-spec` — UX Spec (uses intake output)
-- `$design-parity-review` — compare design with implementation
-- `$ui-inventory` — component inventory
-- `$google-stitch` — generate screens from text
+---
+name: design-intake
+description: Найти и проанализировать предоставленные дизайн-материалы (файлы/ссылки), определить "источник правды" по UI и извлечь проверяемые правила (экраны, компоненты, токены, состояния).
+type: discretionary
+domain: development
+owners:
+  - ux_ui_designer
+gates:
+  - UX
+tech: []
+topic:
+  - ux
+  - design-systems
+triggers:
+  - разобрать дизайн
+  - источник правды UI
+  - анализ макетов
+  - проверяемые правила
+  - извлечь токены
+  - Figma вводные
+related:
+  - ux-spec
+  - design-parity-review
+  - ui-inventory
+  - stitch-prompting-guide
+  - stitch-api-reference
+budget_lines: 250
+schema_version: 1
+---
+
+---
+name: design-intake
+description: Найти и проанализировать предоставленные дизайн-материалы (файлы/ссылки), определить "источник правды" по UI и извлечь проверяемые правила (экраны, компоненты, токены, состояния).
+---
+
+# Skill: Design Intake
+
+Зафиксировать дизайн-артефакты как Source of Truth и извлечь проверяемые правила.
+
+**Разделы:**
+1. [Workflow](#1-workflow)
+2. [Source Discovery](#2-discovery)
+3. [Extraction Checklist](#3-extraction)
+4. [Design Rules Examples](#4-rules)
+5. [Пример](#5-пример)
+6. [Output Template](#6-output)
+
+---
+
+## 1. Workflow
+
+```
+1. Определи источники
+   ├── Файлы в репозитории (design/, docs/, assets/)
+   ├── Ссылки (Figma, Stitch, Zeplin)
+   └── HTML References (popup_description/*.html)
+
+2. Классифицируй каждый источник
+   ├── Source of Truth (мастер)
+   ├── Reference (вспомогательный)
+   └── Outdated (пометить, не использовать)
+
+3. Для каждого SoT → extract spec (section 3)
+
+4. Сформируй Design Reference Map (screen → file)
+
+5. Извлеки Design Rules (5-20 проверяемых правил)
+
+6. Validate: все экраны из PRD покрыты?
+```
+
+---
+
+## 2. Source Discovery
+
+### Где искать
+
+```bash
+# Папки
+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
+
+# Файлы
+find_by_name: Extensions=["fig","pdf","png","jpg","svg","sketch"]
+find_by_name: Pattern="*.html" SearchDirectory="<design_folder>"
+
+# Ссылки в документации
+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
+
+### Типичные проверяемые правила
+
+| # | 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. Пример
+
+```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
+```
+
+---
+
+## См. также
+- `$ux-spec` — UX Spec (uses intake output)
+- `$design-parity-review` — compare design with implementation
+- `$ui-inventory` — component inventory
+- `$stitch-prompting-guide` — Stitch workflow & prompts; `$stitch-api-reference` — MCP tools

package/domains/development/.agents/skills/design-intake/agents/kimi.yaml

@@ -1,14 +1,14 @@
-name: "design-intake"
-display_name: "Сбор дизайн-источников"
-description: "Найти и проанализировать предоставленные дизайн-материалы (файлы/ссылки), определить \"источник правды\" по UI и извлечь проверяемые правила (экраны, компоненты, токены, состояния)."
-default_prompt: "Используй $design-intake, когда задача относится к навыку \"Сбор дизайн-источников\"."
-triggers:
-  - "design-intake"
-  - "design intake"
-  - "Сбор дизайн-источников"
-  - "Найти и проанализировать предоставленные дизайн-материалы (файлы/ссылки), определить \"источник правды\" по UI и извлечь проверяемые правила (экраны, компоненты, токены, состояния)"
-capabilities:
-  - "design"
-  - "intake"
-tools: []
-implicit_invocation: true
+name: "design-intake"
+display_name: "Сбор дизайн-источников"
+description: "Найти и проанализировать предоставленные дизайн-материалы (файлы/ссылки), определить \"источник правды\" по UI и извлечь проверяемые правила (экраны, компоненты, токены, состояния)."
+default_prompt: "Используй $design-intake, когда задача относится к навыку \"Сбор дизайн-источников\"."
+triggers:
+  - "design-intake"
+  - "design intake"
+  - "Сбор дизайн-источников"
+  - "Найти и проанализировать предоставленные дизайн-материалы (файлы/ссылки), определить \"источник правды\" по UI и извлечь проверяемые правила (экраны, компоненты, токены, состояния)"
+capabilities:
+  - "design"
+  - "intake"
+tools: []
+implicit_invocation: true