code-ai-installer 4.0.0 → 4.0.1-b

package/domains/product/.agents/skills/report-design-reference/SKILL.md

@@ -0,0 +1,331 @@
+---
+name: report-design-reference
+description: Проектирование макета PRD или Product Review Deck — структура, навигация, визуальная иерархия — reference (code & worked-example library)
+type: reference
+domain: product
+owners:
+  - layouter
+gates:
+  - LAYOUTER
+tech: []
+topic: []
+triggers:
+  - "report-design"
+  - "report design"
+  - "PRD design"
+  - "deck design"
+related:
+  - report-design
+budget_lines: 331
+schema_version: 1
+---
+# report-design — Reference (code & worked-example library)
+
+> Verbatim code blocks and the worked example extracted from `$report-design` (workflow). Copy-paste library; the procedure lives in the workflow skill.
+
+## Worked Example — TeamFlow Product Review Deck Design Spec
+
+**Контекст:** `/ship-right-thing` завершён. Unified Strategy Brief (Mediator) + PRD + Metric Plan готовы. Designer готовит design spec для Layouter — Product Review Deck (12 слайдов, executive-аудитория).
+
+```markdown
+# Design Spec: TeamFlow AI Summarization Product Review Deck
+
+**Целевой артефакт:** Product Review Deck (презентация для executive sign-off)
+**Уровень аудитории:** Executive (CEO, CPO, VP Sales, VP Product)
+**Объём:** 12 страниц в формате слайдов
+**Распространение:** PDF по email + живая презентация на review meeting
+**Тон:** Сдержанный, профессиональный, ориентированный на данные (см. оси тона GTM brief — 80% serious)
+
+---
+
+## Выбор типа артефакта
+
+**Почему Deck, а не PRD-как-документ:**
+- Аудитория = руководители (5-10 минут просмотра; живая презентация 30 минут)
+- Требуемое решение = go/no-go sign-off (не справочный материал)
+- Ожидание mid-market + enterprise B2B SaaS = визуалы уровня exec
+
+**Вторичный артефакт:** Полный PRD (40+ страниц, формат документа) делается separately for engineering/design team — через отдельный скил `$prd-template`. Deck ссылается на PRD в приложении.
+
+---
+
+## Информационная архитектура (12 страниц)
+
+| # | Страница | Назначение | Акцент | Ключевая визуализация |
+|:-:|----------|-----------|:------:|----------------------|
+| 1 | Обложка | Привлечь внимание, задать контекст | Hero | Крупный заголовок, подзаголовок, дата |
+| 2 | Executive Summary (TL;DR) | 30-секундное чтение даёт полную картину | Hero | Pull quote + 3 KPI-карточки |
+| 3 | Проблема | Обозначить срочность с доказательствами | Key | 3 KPI-карточки «масштаб боли» + callouts с дословными цитатами |
+| 4 | Возможность | Масштаб приза | Key | Metric tree со стрелками бизнес-влияния |
+| 5 | Unified Strategy (синтез Mediator) | Подход | Key | Vision statement + список 4 принципов + диаграмма tier-архитектуры |
+| 6 | Product Scope (MoSCoW) | Что входит, что нет | Key | Таблица Must/Should/Could с обоснованием scope |
+| 7 | Пользовательский опыт | Ощущение продукта | Supporting | 3-4 вайрфрейм-миниатюры + стрелки флоу |
+| 8 | Метрики и NSM | Определение успеха | Key | Metric tree + целевые показатели 30/90 дней |
+| 9 | Риски и меры снижения | Доверие | Key | Таблица top 5 рисков с матрицей вероятность × влияние |
+| 10 | План rollout | Исполнение | Supporting | Таймлайн по неделям + диаграмма поэтапного rollout |
+| 11 | Инвестиции и ROI | Бизнес-кейс | Key | График прогноза 3 сценариев + разбивка затрат |
+| 12 | Roadmap Now/Next/Later | Будущее направление | Supporting | 3-колоночный roadmap |
+
+---
+
+## Визуальная иерархия
+
+### Типографическая шкала
+
+| Уровень | Шрифт | Размер | Насыщенность | Использование |
+|---------|-------|:------:|:------------:|--------------|
+| H1 (заголовок страницы) | Inter | 32px | 700 | Заголовки страниц |
+| H2 (раздел) | Inter | 22px | 600 | Разделы внутри страницы |
+| H3 (подраздел) | Inter | 16px | 600 | Подразделы |
+| Lead (вступительный абзац) | Inter | 16px | 400 | Первый абзац на странице |
+| Body | Inter | 14px | 400 | Стандартный текст |
+| Pull-quote | Source Serif Pro | 20px | 400 | Ключевые цитаты, vision statements |
+| Значение KPI | Inter | 32px | 700 | Крупные числа метрик |
+| Подпись KPI | Inter | 11px | 500 | Контекст метрики |
+| Caption | Inter | 10px | 400 | Подвалы страниц, атрибуция источников |
+
+### Цветовая палитра
+
+```css
+--color-primary: #0A2540;     /* Фирменный тёмно-синий TeamFlow — заголовки, основной акцентный цвет */
+--color-accent: #F2A900;      /* Янтарный TeamFlow — выделения, рамки KPI, CTA */
+--color-text: #1A1A1A;         /* Основной текст (почти чёрный) */
+--color-text-muted: #6B6B6B;   /* Вторичный текст */
+--color-bg: #FFFFFF;           /* Фон страницы */
+--color-bg-alt: #F7F9FB;       /* Фон callout, чередующиеся строки */
+--color-success: #22A06B;      /* Зелёные метрики, позитивные сигналы */
+--color-warning: #E67E22;      /* Янтарные предупреждения */
+--color-danger: #C0392B;       /* Красные алерты, метрики масштаба боли */
+--color-border: #E1E4E8;       /* Деликатные рамки, разделители таблиц */
+```
+
+**Обоснование сдержанной палитры:** Executive-аудитория B2B SaaS положительно реагирует на профессиональный, ориентированный на данные стиль. Слишком много цветов → «потребительский» вид. Зелёный / янтарный / красный — только для метрик с эмоциональной нагрузкой.
+
+### Система отступов (сетка 8pt)
+
+- `--space-1: 4px` (плотно — между связанными элементами)
+- `--space-2: 8px` (отступ элементов списка)
+- `--space-3: 16px` (интервал между абзацами)
+- `--space-4: 24px` (между разделами на странице)
+- `--space-5: 32px` (между крупными блоками)
+- `--space-6: 48px` (редко — шапка страницы / hero)
+
+---
+
+## Ключевые визуализации (детальные спецификации)
+
+### 1. KPI-карточка (страницы 2, 3, 11)
+
+**Анатомия:**
+```
+┌─────────────────────────────────┐
+│ [янтарная левая рамка 3px]       │
+│                                  │
+│    40               ← крупное    │
+│    ────              число       │
+│    Target Team Tier  (32px 700)  │
+│    Upgrades (Q2)  ← подпись      │
+│                      (11px 500)  │
+└─────────────────────────────────┘
+```
+
+**Правила:**
+- Максимум 1 число на карточку
+- Подпись максимум 1-2 строки
+- Группировать в сетки по 3 (правило трёх)
+- Цвет числа по настроению: основной синий (по умолчанию) / зелёный успех / красный опасность
+
+**Примеры для TeamFlow:**
+- Страница 2: «40 целевых апгрейдов» / «+$8 надбавка за место» / «3 ч сэкономлено в неделю»
+- Страница 3 (боль): «3-4 ч admin/неделю» / «40% action items теряется» / «0% видимости у VP» (все красные)
+
+### 2. Pull Quote (страницы 2, 3, 5)
+
+**Анатомия:**
+```
+┌──────────────────────────────────────────┐
+│▐ «Текст цитаты в Source Serif Pro,       │
+│▐  20px, межстрочный 1.4. Привлекает      │
+│▐  взгляд, но не слишком крупный.»        │
+└──────────────────────────────────────────┘
+                        — Атрибуция (12px 400 приглушённый)
+```
+
+**Правила:**
+- Использовать для ключевого vision statement или дословной цитаты клиента
+- Максимум 1-2 на странице
+- Строка атрибуции выровнена вправо, приглушённый цвет
+- Левая рамка 3px акцентного цвета; фон alt
+
+### 3. Callout Box (все страницы)
+
+**Варианты:**
+- Нейтральный (акцентная рамка)
+- Успех (зелёная рамка — позитивный сигнал)
+- Предупреждение (янтарная рамка — на что обратить внимание)
+- Опасность (красная рамка — риск / критическое)
+
+**Анатомия:**
+```
+┌──────────────────────────────────────────┐
+│▐ Ожидаемый результат  ← заголовок 600
+│▐ Текст описания, перенос строк...
+└──────────────────────────────────────────┘
+```
+
+### 4. Metric Tree (страницы 4, 8)
+
+**Анатомия:**
+```
+         NSM: Sticky Manager Ratio (AI Tier)
+         ┌─────────────┼─────────────┐
+         ▼             ▼             ▼
+    Входные:       Входные:     Ограждения:
+  Конверсии        Уровень       NPS, Churn,
+  в новый tier     активации     объём Support
+```
+
+**Реализация:** SVG (для точности) или Mermaid (для редактируемости). TeamFlow предпочитает SVG из Figma.
+
+### 5. Roadmap Columns (страница 12)
+
+**Анатомия:**
+```
+┌─────────────┐ ┌─────────────┐ ┌─────────────┐
+│ [accent top] │ │ [accent top] │ │ [accent top] │
+│ NOW          │ │ NEXT         │ │ LATER        │
+│ (Q2 2026)    │ │ (Q3 2026)    │ │ (Q4+)        │
+├─────────────┤ ├─────────────┤ ├─────────────┤
+│ ✨ AI Summary│ │ 📊 Dashboard │ │ 🌍 Multi-lang│
+│ ✨ Action items│ │ ⏱️ Real-time  │ │ 📱 Mobile app│
+│ 🔐 SSO/SCIM  │ │ 🎯 Health Sc.│ │ 🔍 AI Coach  │
+└─────────────┘ └─────────────┘ └─────────────┘
+```
+
+**Правила:**
+- 3-5 элементов в столбце (не перегружать)
+- Emoji-префикс как подсказка категории (✨ фича / 🔐 безопасность / 📊 аналитика)
+- Вертикальная линия между элементами для удобства сканирования
+- Верхняя рамка акцентного цвета поддерживает присутствие бренда
+
+### 6. Матрица рисков (страница 9)
+
+**Реализация:** сетка 2×2, показывающая вероятность × влияние:
+
+```
+           НИЗКОЕ ВЛИЯНИЕ     ВЫСОКОЕ ВЛИЯНИЕ
+ВЫСОКАЯ  ┌──────────────┬──────────────┐
+ ВЕРОЯТ. │ мониторинг    │ ⚠️ ТОП РИСКИ │
+         │               │ R1, R2, R3   │
+         ├──────────────┼──────────────┤
+НИЗКАЯ   │ приемлемо     │ список слежки│
+ ВЕРОЯТ. │               │ R4, R5       │
+         └──────────────┴──────────────┘
+```
+
+**Под матрицей:** детальная таблица top 5 рисков с колонками: #, Риск, Вероятность, Влияние, Меры снижения.
+
+---
+
+## Библиотека компонентов для Layouter
+
+**Файлы:** папка `components/` в design handoff
+
+| Компонент | Файл | Использование |
+|-----------|------|--------------|
+| `kpi-card.html` | Сниппет | Витрины метрик |
+| `pull-quote.html` | Сниппет | Vision statements, цитаты клиентов |
+| `callout-[variant].html` | 4 сниппета | Предупреждения, успехи, инфо |
+| `roadmap-columns.html` | Сниппет | Только страница 12 |
+| `metric-tree.svg` | Ассет | Страницы 4 + 8 |
+| `risk-matrix.svg` | Ассет | Страница 9 |
+| `page-footer.html` | Сниппет | Все страницы |
+| `meta-bar.html` | Сниппет | Все страницы |
+
+---
+
+## Спецификации передачи дизайна Layouter'у
+
+### CSS-токены
+
+Все стили определены как CSS custom properties (см. вывод Layouter'а). Обеспечивают:
+- Лёгкую перекраску для white-label
+- Единообразие отступов и размеров
+- Готовность к тёмной теме в будущем (токены легко переопределяются)
+
+### Спецификации для печати
+
+- `@page { size: A4 portrait; margin: 2cm 1.8cm; }` — стандартный A4
+- `.page { page-break-after: always; }` — каждый крупный раздел на отдельной странице
+- `page-break-inside: avoid` на таблицах + callouts — предотвращает неудобные разрывы
+- `print-color-adjust: exact` — сохраняет фирменные цвета при печати
+
+### Подключение шрифтов
+
+- **Встроенные шрифты** в генерации PDF для единообразия:
+  - Inter (все насыщенности): [ссылка Google Fonts CSS — OK для web, но для PDF встраивать WOFF2 локально]
+  - Source Serif Pro: аналогично — встраивать для PDF
+- **Фолбэки** при отсутствии шрифтов: `-apple-system, sans-serif` (Inter), `Georgia, serif` (Source Serif Pro)
+
+### Пакет ассетов
+
+- Логотип TeamFlow (SVG + PNG 2×)
+- Логотипы партнёров (если референсируются кейс-стади): сравнение с Lattice и т.д.
+- Иконки (lucide-react или аналог — SVG inline)
+- Изображения графиков (экспортированные PNG 2× из Figma для сложных диаграмм)
+
+---
+
+## Требования доступности (WCAG AA)
+
+- **Цветовой контраст:** весь текст ≥ 4.5:1 к фону (проверено: основной синий на белом = 11:1)
+- **Семантический HTML:** иерархия `<section>`, `<article>`, `<h1-h6>` корректна
+- **Alt text** на всех изображениях и SVG
+- **Состояния фокуса** видимы (если deck интерактивен) — не важно для PDF, но важно, если HTML доступен онлайн
+- **Подписи для экранных читалок** на статус-бейджах, иконках
+
+---
+
+## Deliverables для Layouter (handoff)
+
+- [x] Этот документ design spec (markdown)
+- [x] Файл CSS-токенов (`tokens.css`)
+- [x] Папка HTML-сниппетов (`components/`)
+- [x] SVG-ассеты (`assets/`)
+- [x] Файлы шрифтов (WOFF2 встроенные)
+- [x] Справочный лист по цвету / типографике (1-страничный PDF для быстрой справки)
+- [x] Figma-файл со всеми макетами экранов (hi-fi, экспортированные страницы) [ссылка]
+- [x] Манифест экспорта ассетов (какие изображения в каких размерах)
+
+---
+
+## Требуется согласование
+
+- [ ] PM (Alex K.) — точность содержания
+- [ ] Руководитель дизайна (Jordan M.) — визуальные стандарты
+- [ ] Бренд-команда — соответствие идентичности TeamFlow
+- [ ] Технический руководитель (Priya S.) — осуществимость с точки зрения верстки
+
+Целевая дата согласования: 20 мая 2026. Окно производства верстки: 21 мая — 10 июня. Финальный deck готов к запуску 30 июня.
+
+---
+
+### Сводная карта акцентов (Emphasis Map)
+
+| Страница | Акцент | Элементы |
+|:--------:|:------:|----------|
+| 1 Обложка | Hero | Заголовок 42px, подзаголовок, акцентная полоса бренда |
+| 2 TL;DR | Hero | Pull quote, 3 KPI-карточки, разделители секций |
+| 3 Проблема | Key | 3 красных KPI, 2 callout с дословными цитатами |
+| 4 Возможность | Key | Metric tree, стрелки влияния |
+| 5 Стратегия | Key | Vision quote, tier-архитектура |
+| 6 Scope | Key | Таблица MoSCoW, обоснование |
+| 7 UX | Supporting | 4 миниатюры вайрфреймов, флоу |
+| 8 Метрики | Key | Metric tree (второй), таблица целей |
+| 9 Риски | Key | Матрица 2×2 + таблица top 5 |
+| 10 Rollout | Supporting | Таймлайн по неделям (плотный, но детальный) |
+| 11 Инвестиции | Key | График 3 сценариев, разбивка затрат |
+| 12 Roadmap | Supporting | 3 колонки Now/Next/Later |
+```
+
+> **Урок report-design:** Design spec = контракт между Designer и Layouter. CSS-токены + библиотека компонентов превращают разовую работу страница за страницей в системную сборку. **Emphasis map** не позволяет всем страницам быть одинаково громкими = информационный шум. Executive-аудитория = сдержанная палитра + плотный, но чистый контент. **Требования доступности** (WCAG AA) — обязательны для mid-market + enterprise закупок; библиотека компонентов повторно используется для будущих decks (Product Review Q3 и т.д.) — инвестиция накапливается.

package/domains/product/.agents/skills/report-design-reference/agents/claude.json

@@ -0,0 +1,17 @@
+{
+  "name": "report-design-reference",
+  "display_name": "Report Design (PRD / Review Deck) Reference",
+  "description": "Проектирование макета PRD или Product Review Deck — структура, навигация, визуальная иерархия — reference (code & worked-example library)",
+  "default_prompt": "Используй $report-design-reference, когда задача относится к навыку \"Report Design (PRD / Review Deck) Reference\".",
+  "triggers": [
+    "report-design",
+    "report design",
+    "PRD design",
+    "deck design"
+  ],
+  "capabilities": [
+    "report-design-reference"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}

package/domains/product/.agents/skills/report-design-reference/agents/copilot.json

@@ -0,0 +1,17 @@
+{
+  "name": "report-design-reference",
+  "display_name": "Report Design (PRD / Review Deck) Reference",
+  "description": "Проектирование макета PRD или Product Review Deck — структура, навигация, визуальная иерархия — reference (code & worked-example library)",
+  "default_prompt": "Используй $report-design-reference, когда задача относится к навыку \"Report Design (PRD / Review Deck) Reference\".",
+  "triggers": [
+    "report-design",
+    "report design",
+    "PRD design",
+    "deck design"
+  ],
+  "capabilities": [
+    "report-design-reference"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}

package/domains/product/.agents/skills/report-design-reference/agents/gemini.json

@@ -0,0 +1,17 @@
+{
+  "name": "report-design-reference",
+  "display_name": "Report Design (PRD / Review Deck) Reference",
+  "description": "Проектирование макета PRD или Product Review Deck — структура, навигация, визуальная иерархия — reference (code & worked-example library)",
+  "default_prompt": "Используй $report-design-reference, когда задача относится к навыку \"Report Design (PRD / Review Deck) Reference\".",
+  "triggers": [
+    "report-design",
+    "report design",
+    "PRD design",
+    "deck design"
+  ],
+  "capabilities": [
+    "report-design-reference"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}

package/domains/product/.agents/skills/report-design-reference/agents/kimi.yaml

@@ -0,0 +1,15 @@
+name: report-design-reference
+display_name: Report Design (PRD / Review Deck) Reference
+description: Проектирование макета PRD или Product Review Deck — структура,
+  навигация, визуальная иерархия — reference (code & worked-example library)
+default_prompt: Используй $report-design-reference, когда задача относится к
+  навыку "Report Design (PRD / Review Deck) Reference".
+triggers:
+  - report-design
+  - report design
+  - PRD design
+  - deck design
+capabilities:
+  - report-design-reference
+tools: []
+implicit_invocation: true

package/domains/product/.agents/skills/report-design-reference/agents/openai.yaml

@@ -0,0 +1,10 @@
+interface:
+  display_name: Report Design (PRD / Review Deck) Reference
+  short_description: Проектирование макета PRD или Product Review Deck —
+    структура, навигация, визуал
+  default_prompt: Используй $report-design-reference, когда задача относится к
+    навыку "Report Design (PRD / Review Deck) Reference".
+dependencies:
+  tools: []
+policy:
+  allow_implicit_invocation: true

package/domains/product/.agents/skills/report-design-reference/agents/qwen.json

@@ -0,0 +1,17 @@
+{
+  "name": "report-design-reference",
+  "display_name": "Report Design (PRD / Review Deck) Reference",
+  "description": "Проектирование макета PRD или Product Review Deck — структура, навигация, визуальная иерархия — reference (code & worked-example library)",
+  "default_prompt": "Используй $report-design-reference, когда задача относится к навыку \"Report Design (PRD / Review Deck) Reference\".",
+  "triggers": [
+    "report-design",
+    "report design",
+    "PRD design",
+    "deck design"
+  ],
+  "capabilities": [
+    "report-design-reference"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}

package/domains/product/.agents/skills/report-design-reference/agents/skill.yaml

@@ -0,0 +1,22 @@
+version: 1
+name: report-design-reference
+display_name: Report Design (PRD / Review Deck) Reference
+description: Проектирование макета PRD или Product Review Deck — структура,
+  навигация, визуальная иерархия — reference (code & worked-example library)
+default_prompt: Используй $report-design-reference, когда задача относится к
+  навыку "Report Design (PRD / Review Deck) Reference".
+triggers:
+  - report-design
+  - report design
+  - PRD design
+  - deck design
+capabilities:
+  - report-design-reference
+tools: []
+invocation:
+  explicit: true
+  implicit: true
+localization:
+  default_locale: ru
+  available_locales:
+    - ru