code-ai-installer 4.0.0 → 4.0.1-a

package/domains/analytics/.agents/skills/html-pdf-report/SKILL.md

@@ -1,6 +1,23 @@
 ---
 name: html-pdf-report
 description: Генерация self-contained HTML-отчёта для печати в PDF — CSS print layout, Chart.js, Mermaid
+type: triggered
+domain: analytics
+owners:
+  - layouter
+gates:
+  - LAYOUTER
+tech: []
+topic: []
+triggers:
+  - "html-pdf-report"
+  - "HTML отчёт"
+  - "PDF отчёт"
+  - "генерация отчёта"
+related:
+  - html-pdf-report-reference
+budget_lines: 297
+schema_version: 1
 ---
 # HTML/PDF-отчёт — Генерация self-contained HTML для печати в PDF
 
@@ -69,120 +86,7 @@ description: Генерация self-contained HTML-отчёта для печа
 
 Полный рабочий CSS-блок:
 
-```css
-/* ========== RESET & BASE ========== */
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-body {
-    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
-    font-size: 11pt;
-    line-height: 1.6;
-    color: #1a1a2e;
-    background: #fff;
-}
-.report { max-width: 210mm; margin: 0 auto; padding: 20mm; }
-
-/* ========== TYPOGRAPHY ========== */
-h1 { font-size: 24pt; font-weight: 700; margin-bottom: 0.5em; color: var(--primary); }
-h2 { font-size: 18pt; font-weight: 600; margin: 1.5em 0 0.5em; padding-bottom: 0.3em;
-     border-bottom: 2px solid var(--primary); color: var(--primary); }
-h3 { font-size: 14pt; font-weight: 600; margin: 1.2em 0 0.4em; color: var(--secondary); }
-h4 { font-size: 12pt; font-weight: 600; margin: 1em 0 0.3em; }
-p { margin-bottom: 0.8em; }
-blockquote { border-left: 4px solid var(--accent); padding: 0.8em 1.2em;
-             margin: 1em 0; background: var(--bg-light); font-style: italic; }
-
-/* ========== CSS VARIABLES (из палитры) ========== */
-:root {
-    --primary: #1a1a2e;    /* Заменить из Design Spec */
-    --secondary: #16213e;
-    --accent: #0f3460;
-    --highlight: #e94560;
-    --bg-light: #f5f5f5;
-    --border: #e0e0e0;
-    --success: #2ecc71;
-    --warning: #f39c12;
-    --danger: #e74c3c;
-}
-
-/* ========== TITLE PAGE ========== */
-.title-page {
-    display: flex; flex-direction: column; justify-content: center; align-items: center;
-    min-height: 100vh; text-align: center;
-}
-.title-page h1 { font-size: 32pt; margin-bottom: 0.3em; }
-.title-page .subtitle { font-size: 16pt; color: var(--secondary); margin-bottom: 2em; }
-.title-page .meta { font-size: 10pt; color: #666; }
-
-/* ========== TOC ========== */
-.toc-list { list-style: none; counter-reset: toc; }
-.toc-list li { padding: 0.4em 0; border-bottom: 1px dotted var(--border); }
-.toc-list li::before { counter-increment: toc; content: counter(toc) ". "; font-weight: 600; }
-.toc-list a { text-decoration: none; color: var(--primary); }
-.toc-list a:hover { color: var(--accent); }
-
-/* ========== DATA TABLE ========== */
-.data-table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 10pt; }
-.data-table th { background: var(--primary); color: #fff; padding: 8px 12px;
-                 text-align: left; font-weight: 600; }
-.data-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
-.data-table tr:nth-child(even) { background: var(--bg-light); }
-.data-table .highlight { background: rgba(233, 69, 96, 0.1); font-weight: 600; }
-
-/* ========== MATRIX 2x2 ========== */
-.matrix-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
-              margin: 1em 0; border: 2px solid var(--border); }
-.matrix-2x2 .cell { padding: 1.2em; }
-.matrix-2x2 .cell-header { background: var(--primary); color: #fff; font-weight: 600;
-                            text-align: center; padding: 0.6em; }
-.matrix-2x2 .cell-tl { background: #e8f5e9; } /* Top-left: green */
-.matrix-2x2 .cell-tr { background: #fff3e0; } /* Top-right: orange */
-.matrix-2x2 .cell-bl { background: #e3f2fd; } /* Bottom-left: blue */
-.matrix-2x2 .cell-br { background: #fce4ec; } /* Bottom-right: red */
-
-/* ========== CALLOUT BOX ========== */
-.callout { padding: 1em 1.2em; margin: 1em 0; border-radius: 6px; border-left: 4px solid; }
-.callout-info { background: #e3f2fd; border-color: #2196f3; }
-.callout-success { background: #e8f5e9; border-color: var(--success); }
-.callout-warning { background: #fff3e0; border-color: var(--warning); }
-.callout-danger { background: #fce4ec; border-color: var(--danger); }
-.callout-title { font-weight: 700; margin-bottom: 0.3em; }
-
-/* ========== PULL QUOTE ========== */
-.pull-quote { font-size: 14pt; font-weight: 300; text-align: center;
-              padding: 1.5em 2em; margin: 1.5em 0; color: var(--accent);
-              border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }
-
-/* ========== CHART CONTAINER ========== */
-.chart-container { position: relative; margin: 1.5em 0; max-width: 100%; }
-.chart-container canvas { max-width: 100%; }
-.chart-container figcaption { font-size: 9pt; color: #666; text-align: center;
-                              margin-top: 0.5em; font-style: italic; }
-
-/* ========== SCORE / BADGE ========== */
-.score-badge { display: inline-block; padding: 0.2em 0.8em; border-radius: 12px;
-               font-weight: 700; font-size: 10pt; }
-.score-high { background: var(--success); color: #fff; }
-.score-mid { background: var(--warning); color: #fff; }
-.score-low { background: var(--danger); color: #fff; }
-
-/* ========== PRINT ========== */
-@media print {
-    @page { size: A4 portrait; margin: 20mm; }
-    body { font-size: 10pt; }
-    .report { max-width: none; padding: 0; }
-    .title-page { min-height: auto; page-break-after: always; }
-    .toc { page-break-after: always; }
-    .executive-summary { page-break-after: always; }
-    .appendix { page-break-before: always; }
-    .data-table, .chart-container, .matrix-2x2, .mermaid, figure {
-        page-break-inside: avoid;
-    }
-    h2, h3 { page-break-after: avoid; }
-    .callout { page-break-inside: avoid; }
-    a { color: inherit; text-decoration: none; }
-    canvas { max-width: 100% !important; height: auto !important; }
-}
-```
+> 📦 <!--SPLIT-POINTER--> Полный блок — в `$html-pdf-report-reference` (§ Шаг 2 — CSS (Base + Print)).
 
 > **Палитра:** заменить CSS variables из Design Spec. Все цвета — через `var(--name)`, чтобы палитра менялась в одном месте.
 
@@ -194,99 +98,7 @@ blockquote { border-left: 4px solid var(--accent); padding: 0.8em 1.2em;
 
 **Конфигурации по типам:**
 
-```javascript
-// ========== BAR CHART (сравнение конкурентов, scoring) ==========
-new Chart(document.getElementById('chart-competitors'), {
-    type: 'bar',
-    data: {
-        labels: ['Конкурент A', 'Конкурент B', 'Конкурент C', 'Наш продукт'],
-        datasets: [{
-            label: 'Threat Score',
-            data: [7.2, 7.3, 4.8, null],
-            backgroundColor: ['#e74c3c', '#e74c3c', '#f39c12', '#2ecc71'],
-            borderWidth: 0,
-            borderRadius: 4
-        }]
-    },
-    options: {
-        animation: false, responsive: true,
-        plugins: { legend: { display: false },
-                   title: { display: true, text: 'Threat Score конкурентов', font: { size: 14 } } },
-        scales: { y: { beginAtZero: true, max: 10, title: { display: true, text: 'Score' } } }
-    }
-});
-
-// ========== RADAR CHART (мультикритериальное сравнение) ==========
-new Chart(document.getElementById('chart-radar'), {
-    type: 'radar',
-    data: {
-        labels: ['Функционал', 'Цена', 'UX', 'Поддержка', 'Экосистема', 'Бренд'],
-        datasets: [
-            { label: 'Наш продукт', data: [7, 8, 6, 5, 4, 3],
-              borderColor: '#0f3460', backgroundColor: 'rgba(15,52,96,0.1)', borderWidth: 2 },
-            { label: 'Лидер рынка', data: [9, 4, 8, 7, 9, 9],
-              borderColor: '#e94560', backgroundColor: 'rgba(233,69,96,0.1)', borderWidth: 2 }
-        ]
-    },
-    options: {
-        animation: false, responsive: true,
-        scales: { r: { beginAtZero: true, max: 10, ticks: { stepSize: 2 } } }
-    }
-});
-
-// ========== PIE / DOUGHNUT (доли, распределение) ==========
-new Chart(document.getElementById('chart-share'), {
-    type: 'doughnut',
-    data: {
-        labels: ['Сегмент A', 'Сегмент B', 'Сегмент C', 'Прочие'],
-        datasets: [{ data: [35, 28, 22, 15],
-                     backgroundColor: ['#1a1a2e', '#0f3460', '#e94560', '#ccc'],
-                     borderWidth: 2, borderColor: '#fff' }]
-    },
-    options: {
-        animation: false, responsive: true,
-        plugins: { legend: { position: 'right' } }
-    }
-});
-
-// ========== LINE CHART (тренды, retention curves) ==========
-new Chart(document.getElementById('chart-retention'), {
-    type: 'line',
-    data: {
-        labels: ['M0', 'M1', 'M2', 'M3', 'M6', 'M12'],
-        datasets: [
-            { label: 'Когорта Янв', data: [100, 42, 31, 26, 20, 16],
-              borderColor: '#e94560', fill: false, tension: 0.3 },
-            { label: 'Когорта Мар', data: [100, 55, 44, 38, null, null],
-              borderColor: '#2ecc71', fill: false, tension: 0.3 }
-        ]
-    },
-    options: {
-        animation: false, responsive: true,
-        scales: { y: { beginAtZero: true, max: 100, title: { display: true, text: 'Retention %' } } }
-    }
-});
-
-// ========== SCATTER (позиционирование 2D) ==========
-new Chart(document.getElementById('chart-positioning'), {
-    type: 'scatter',
-    data: {
-        datasets: [
-            { label: 'Конкурент A', data: [{ x: 8, y: 7 }], pointRadius: 10,
-              backgroundColor: '#e74c3c' },
-            { label: 'Наш продукт', data: [{ x: 5, y: 6 }], pointRadius: 12,
-              backgroundColor: '#2ecc71', pointStyle: 'star' }
-        ]
-    },
-    options: {
-        animation: false, responsive: true,
-        scales: {
-            x: { min: 0, max: 10, title: { display: true, text: 'Функционал' } },
-            y: { min: 0, max: 10, title: { display: true, text: 'Цена' } }
-        }
-    }
-});
-```
+> 📦 <!--SPLIT-POINTER--> Полный блок — в `$html-pdf-report-reference` (§ Шаг 3 — Chart.js).
 
 ### Шаг 4 — Mermaid
 
@@ -296,51 +108,7 @@ mermaid.initialize({ startOnLoad: true, theme: 'neutral', securityLevel: 'loose'
 
 **Диаграммы по типам:**
 
-```html
-<!-- ========== FLOWCHART (процессы, пайплайны) ========== -->
-<div class="mermaid">
-flowchart TD
-    A[Awareness] --> B[Consideration]
-    B --> C[Decision]
-    C --> D[Purchase]
-    D --> E[Retention]
-    E --> F[Advocacy]
-    E -.->|churn| G[Exit]
-    style G fill:#fce4ec,stroke:#e74c3c
-</div>
-
-<!-- ========== MINDMAP (структура, иерархия) ========== -->
-<div class="mermaid">
-mindmap
-  root((Стратегия роста))
-    Проникновение
-      Upsell
-      Cross-sell
-    Развитие рынка
-      СНГ
-      Enterprise
-    Развитие продукта
-      AI-модуль
-      Mobile app
-    Диверсификация
-      White-label
-</div>
-
-<!-- ========== QUADRANT CHART (матрицы 2x2) ========== -->
-<div class="mermaid">
-quadrantChart
-    title Impact vs Effort
-    x-axis Low Effort --> High Effort
-    y-axis Low Impact --> High Impact
-    quadrant-1 Big Bets
-    quadrant-2 Quick Wins
-    quadrant-3 Fill-ins
-    quadrant-4 Avoid
-    Action A: [0.3, 0.8]
-    Action B: [0.7, 0.9]
-    Action C: [0.2, 0.3]
-</div>
-```
+> 📦 <!--SPLIT-POINTER--> Полный блок — в `$html-pdf-report-reference` (§ Шаг 4 — Mermaid).
 
 > Каждая Mermaid-диаграмма оборачивается в `<figure>` с `<figcaption>` и `page-break-inside: avoid`.
 
@@ -452,43 +220,7 @@ quadrantChart
 
 ## Пример — Секция Executive Summary
 
-```html
-<section class="executive-summary" id="executive-summary">
-    <h2>Executive Summary</h2>
-
-    <div class="pull-quote">
-        «Рынок EdTech РФ достигнет $4.2B к 2027. Основная возможность —
-        корпоративное обучение (CAGR 28%), где конкуренция фрагментирована.»
-    </div>
-
-    <h3>Ключевые выводы</h3>
-    <div class="callout callout-success">
-        <div class="callout-title">✅ Главный инсайт</div>
-        <p>AI-персонализация обучения — незанятая ниша. Ни один из 5 ключевых конкурентов
-        не предлагает адаптивные траектории на уровне ★★★.</p>
-    </div>
-
-    <table class="data-table">
-        <caption>Сводка по ключевым метрикам</caption>
-        <thead>
-            <tr><th scope="col">Метрика</th><th scope="col">Значение</th><th scope="col">Бенчмарк</th><th scope="col">Оценка</th></tr>
-        </thead>
-        <tbody>
-            <tr><td>TAM</td><td>$4.2B</td><td>—</td>
-                <td><span class="score-badge score-high">Крупный</span></td></tr>
-            <tr><td>SOM (Year 1)</td><td>$180M</td><td>—</td>
-                <td><span class="score-badge score-mid">Средний</span></td></tr>
-            <tr><td>Главная угроза</td><td>Яндекс Практикум</td><td>Score 7.6</td>
-                <td><span class="score-badge score-low">High</span></td></tr>
-        </tbody>
-    </table>
-
-    <figure class="chart-container" role="img" aria-label="Threat Score: Skillbox 7.2, Нетология 6.8, Яндекс 7.6, GeekBrains 4.1, Skyeng 5.3">
-        <canvas id="chart-exec-threats"></canvas>
-        <figcaption>Рис. 1 — Threat Score ключевых конкурентов</figcaption>
-    </figure>
-</section>
-```
+> 📦 <!--SPLIT-POINTER--> Полный блок — в `$html-pdf-report-reference` (§ Пример — Секция Executive Summary).
 
 ## Валидация (Quality Gate)
 

package/domains/analytics/.agents/skills/html-pdf-report-reference/SKILL.md

@@ -0,0 +1,325 @@
+---
+name: html-pdf-report-reference
+description: Генерация self-contained HTML-отчёта для печати в PDF — CSS print layout, Chart.js, Mermaid — reference (code & worked-example library)
+type: reference
+domain: analytics
+owners:
+  - layouter
+gates:
+  - LAYOUTER
+tech: []
+topic: []
+triggers:
+  - "html-pdf-report"
+  - "HTML отчёт"
+  - "PDF отчёт"
+  - "генерация отчёта"
+related:
+  - html-pdf-report
+budget_lines: 325
+schema_version: 1
+---
+# html-pdf-report — Reference (code & worked-example library)
+
+> Verbatim code blocks and the worked example extracted from `$html-pdf-report` (workflow). Copy-paste library; the procedure lives in the workflow skill.
+
+## Шаг 2 — CSS (Base + Print)
+
+```css
+/* ========== RESET & BASE ========== */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+body {
+    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+    font-size: 11pt;
+    line-height: 1.6;
+    color: #1a1a2e;
+    background: #fff;
+}
+.report { max-width: 210mm; margin: 0 auto; padding: 20mm; }
+
+/* ========== TYPOGRAPHY ========== */
+h1 { font-size: 24pt; font-weight: 700; margin-bottom: 0.5em; color: var(--primary); }
+h2 { font-size: 18pt; font-weight: 600; margin: 1.5em 0 0.5em; padding-bottom: 0.3em;
+     border-bottom: 2px solid var(--primary); color: var(--primary); }
+h3 { font-size: 14pt; font-weight: 600; margin: 1.2em 0 0.4em; color: var(--secondary); }
+h4 { font-size: 12pt; font-weight: 600; margin: 1em 0 0.3em; }
+p { margin-bottom: 0.8em; }
+blockquote { border-left: 4px solid var(--accent); padding: 0.8em 1.2em;
+             margin: 1em 0; background: var(--bg-light); font-style: italic; }
+
+/* ========== CSS VARIABLES (из палитры) ========== */
+:root {
+    --primary: #1a1a2e;    /* Заменить из Design Spec */
+    --secondary: #16213e;
+    --accent: #0f3460;
+    --highlight: #e94560;
+    --bg-light: #f5f5f5;
+    --border: #e0e0e0;
+    --success: #2ecc71;
+    --warning: #f39c12;
+    --danger: #e74c3c;
+}
+
+/* ========== TITLE PAGE ========== */
+.title-page {
+    display: flex; flex-direction: column; justify-content: center; align-items: center;
+    min-height: 100vh; text-align: center;
+}
+.title-page h1 { font-size: 32pt; margin-bottom: 0.3em; }
+.title-page .subtitle { font-size: 16pt; color: var(--secondary); margin-bottom: 2em; }
+.title-page .meta { font-size: 10pt; color: #666; }
+
+/* ========== TOC ========== */
+.toc-list { list-style: none; counter-reset: toc; }
+.toc-list li { padding: 0.4em 0; border-bottom: 1px dotted var(--border); }
+.toc-list li::before { counter-increment: toc; content: counter(toc) ". "; font-weight: 600; }
+.toc-list a { text-decoration: none; color: var(--primary); }
+.toc-list a:hover { color: var(--accent); }
+
+/* ========== DATA TABLE ========== */
+.data-table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 10pt; }
+.data-table th { background: var(--primary); color: #fff; padding: 8px 12px;
+                 text-align: left; font-weight: 600; }
+.data-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
+.data-table tr:nth-child(even) { background: var(--bg-light); }
+.data-table .highlight { background: rgba(233, 69, 96, 0.1); font-weight: 600; }
+
+/* ========== MATRIX 2x2 ========== */
+.matrix-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
+              margin: 1em 0; border: 2px solid var(--border); }
+.matrix-2x2 .cell { padding: 1.2em; }
+.matrix-2x2 .cell-header { background: var(--primary); color: #fff; font-weight: 600;
+                            text-align: center; padding: 0.6em; }
+.matrix-2x2 .cell-tl { background: #e8f5e9; } /* Top-left: green */
+.matrix-2x2 .cell-tr { background: #fff3e0; } /* Top-right: orange */
+.matrix-2x2 .cell-bl { background: #e3f2fd; } /* Bottom-left: blue */
+.matrix-2x2 .cell-br { background: #fce4ec; } /* Bottom-right: red */
+
+/* ========== CALLOUT BOX ========== */
+.callout { padding: 1em 1.2em; margin: 1em 0; border-radius: 6px; border-left: 4px solid; }
+.callout-info { background: #e3f2fd; border-color: #2196f3; }
+.callout-success { background: #e8f5e9; border-color: var(--success); }
+.callout-warning { background: #fff3e0; border-color: var(--warning); }
+.callout-danger { background: #fce4ec; border-color: var(--danger); }
+.callout-title { font-weight: 700; margin-bottom: 0.3em; }
+
+/* ========== PULL QUOTE ========== */
+.pull-quote { font-size: 14pt; font-weight: 300; text-align: center;
+              padding: 1.5em 2em; margin: 1.5em 0; color: var(--accent);
+              border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }
+
+/* ========== CHART CONTAINER ========== */
+.chart-container { position: relative; margin: 1.5em 0; max-width: 100%; }
+.chart-container canvas { max-width: 100%; }
+.chart-container figcaption { font-size: 9pt; color: #666; text-align: center;
+                              margin-top: 0.5em; font-style: italic; }
+
+/* ========== SCORE / BADGE ========== */
+.score-badge { display: inline-block; padding: 0.2em 0.8em; border-radius: 12px;
+               font-weight: 700; font-size: 10pt; }
+.score-high { background: var(--success); color: #fff; }
+.score-mid { background: var(--warning); color: #fff; }
+.score-low { background: var(--danger); color: #fff; }
+
+/* ========== PRINT ========== */
+@media print {
+    @page { size: A4 portrait; margin: 20mm; }
+    body { font-size: 10pt; }
+    .report { max-width: none; padding: 0; }
+    .title-page { min-height: auto; page-break-after: always; }
+    .toc { page-break-after: always; }
+    .executive-summary { page-break-after: always; }
+    .appendix { page-break-before: always; }
+    .data-table, .chart-container, .matrix-2x2, .mermaid, figure {
+        page-break-inside: avoid;
+    }
+    h2, h3 { page-break-after: avoid; }
+    .callout { page-break-inside: avoid; }
+    a { color: inherit; text-decoration: none; }
+    canvas { max-width: 100% !important; height: auto !important; }
+}
+```
+
+## Шаг 3 — Chart.js
+
+```javascript
+// ========== BAR CHART (сравнение конкурентов, scoring) ==========
+new Chart(document.getElementById('chart-competitors'), {
+    type: 'bar',
+    data: {
+        labels: ['Конкурент A', 'Конкурент B', 'Конкурент C', 'Наш продукт'],
+        datasets: [{
+            label: 'Threat Score',
+            data: [7.2, 7.3, 4.8, null],
+            backgroundColor: ['#e74c3c', '#e74c3c', '#f39c12', '#2ecc71'],
+            borderWidth: 0,
+            borderRadius: 4
+        }]
+    },
+    options: {
+        animation: false, responsive: true,
+        plugins: { legend: { display: false },
+                   title: { display: true, text: 'Threat Score конкурентов', font: { size: 14 } } },
+        scales: { y: { beginAtZero: true, max: 10, title: { display: true, text: 'Score' } } }
+    }
+});
+
+// ========== RADAR CHART (мультикритериальное сравнение) ==========
+new Chart(document.getElementById('chart-radar'), {
+    type: 'radar',
+    data: {
+        labels: ['Функционал', 'Цена', 'UX', 'Поддержка', 'Экосистема', 'Бренд'],
+        datasets: [
+            { label: 'Наш продукт', data: [7, 8, 6, 5, 4, 3],
+              borderColor: '#0f3460', backgroundColor: 'rgba(15,52,96,0.1)', borderWidth: 2 },
+            { label: 'Лидер рынка', data: [9, 4, 8, 7, 9, 9],
+              borderColor: '#e94560', backgroundColor: 'rgba(233,69,96,0.1)', borderWidth: 2 }
+        ]
+    },
+    options: {
+        animation: false, responsive: true,
+        scales: { r: { beginAtZero: true, max: 10, ticks: { stepSize: 2 } } }
+    }
+});
+
+// ========== PIE / DOUGHNUT (доли, распределение) ==========
+new Chart(document.getElementById('chart-share'), {
+    type: 'doughnut',
+    data: {
+        labels: ['Сегмент A', 'Сегмент B', 'Сегмент C', 'Прочие'],
+        datasets: [{ data: [35, 28, 22, 15],
+                     backgroundColor: ['#1a1a2e', '#0f3460', '#e94560', '#ccc'],
+                     borderWidth: 2, borderColor: '#fff' }]
+    },
+    options: {
+        animation: false, responsive: true,
+        plugins: { legend: { position: 'right' } }
+    }
+});
+
+// ========== LINE CHART (тренды, retention curves) ==========
+new Chart(document.getElementById('chart-retention'), {
+    type: 'line',
+    data: {
+        labels: ['M0', 'M1', 'M2', 'M3', 'M6', 'M12'],
+        datasets: [
+            { label: 'Когорта Янв', data: [100, 42, 31, 26, 20, 16],
+              borderColor: '#e94560', fill: false, tension: 0.3 },
+            { label: 'Когорта Мар', data: [100, 55, 44, 38, null, null],
+              borderColor: '#2ecc71', fill: false, tension: 0.3 }
+        ]
+    },
+    options: {
+        animation: false, responsive: true,
+        scales: { y: { beginAtZero: true, max: 100, title: { display: true, text: 'Retention %' } } }
+    }
+});
+
+// ========== SCATTER (позиционирование 2D) ==========
+new Chart(document.getElementById('chart-positioning'), {
+    type: 'scatter',
+    data: {
+        datasets: [
+            { label: 'Конкурент A', data: [{ x: 8, y: 7 }], pointRadius: 10,
+              backgroundColor: '#e74c3c' },
+            { label: 'Наш продукт', data: [{ x: 5, y: 6 }], pointRadius: 12,
+              backgroundColor: '#2ecc71', pointStyle: 'star' }
+        ]
+    },
+    options: {
+        animation: false, responsive: true,
+        scales: {
+            x: { min: 0, max: 10, title: { display: true, text: 'Функционал' } },
+            y: { min: 0, max: 10, title: { display: true, text: 'Цена' } }
+        }
+    }
+});
+```
+
+## Шаг 4 — Mermaid
+
+```html
+<!-- ========== FLOWCHART (процессы, пайплайны) ========== -->
+<div class="mermaid">
+flowchart TD
+    A[Awareness] --> B[Consideration]
+    B --> C[Decision]
+    C --> D[Purchase]
+    D --> E[Retention]
+    E --> F[Advocacy]
+    E -.->|churn| G[Exit]
+    style G fill:#fce4ec,stroke:#e74c3c
+</div>
+
+<!-- ========== MINDMAP (структура, иерархия) ========== -->
+<div class="mermaid">
+mindmap
+  root((Стратегия роста))
+    Проникновение
+      Upsell
+      Cross-sell
+    Развитие рынка
+      СНГ
+      Enterprise
+    Развитие продукта
+      AI-модуль
+      Mobile app
+    Диверсификация
+      White-label
+</div>
+
+<!-- ========== QUADRANT CHART (матрицы 2x2) ========== -->
+<div class="mermaid">
+quadrantChart
+    title Impact vs Effort
+    x-axis Low Effort --> High Effort
+    y-axis Low Impact --> High Impact
+    quadrant-1 Big Bets
+    quadrant-2 Quick Wins
+    quadrant-3 Fill-ins
+    quadrant-4 Avoid
+    Action A: [0.3, 0.8]
+    Action B: [0.7, 0.9]
+    Action C: [0.2, 0.3]
+</div>
+```
+
+## Пример — Секция Executive Summary
+
+```html
+<section class="executive-summary" id="executive-summary">
+    <h2>Executive Summary</h2>
+
+    <div class="pull-quote">
+        «Рынок EdTech РФ достигнет $4.2B к 2027. Основная возможность —
+        корпоративное обучение (CAGR 28%), где конкуренция фрагментирована.»
+    </div>
+
+    <h3>Ключевые выводы</h3>
+    <div class="callout callout-success">
+        <div class="callout-title">✅ Главный инсайт</div>
+        <p>AI-персонализация обучения — незанятая ниша. Ни один из 5 ключевых конкурентов
+        не предлагает адаптивные траектории на уровне ★★★.</p>
+    </div>
+
+    <table class="data-table">
+        <caption>Сводка по ключевым метрикам</caption>
+        <thead>
+            <tr><th scope="col">Метрика</th><th scope="col">Значение</th><th scope="col">Бенчмарк</th><th scope="col">Оценка</th></tr>
+        </thead>
+        <tbody>
+            <tr><td>TAM</td><td>$4.2B</td><td>—</td>
+                <td><span class="score-badge score-high">Крупный</span></td></tr>
+            <tr><td>SOM (Year 1)</td><td>$180M</td><td>—</td>
+                <td><span class="score-badge score-mid">Средний</span></td></tr>
+            <tr><td>Главная угроза</td><td>Яндекс Практикум</td><td>Score 7.6</td>
+                <td><span class="score-badge score-low">High</span></td></tr>
+        </tbody>
+    </table>
+
+    <figure class="chart-container" role="img" aria-label="Threat Score: Skillbox 7.2, Нетология 6.8, Яндекс 7.6, GeekBrains 4.1, Skyeng 5.3">
+        <canvas id="chart-exec-threats"></canvas>
+        <figcaption>Рис. 1 — Threat Score ключевых конкурентов</figcaption>
+    </figure>
+</section>
+```

package/domains/analytics/.agents/skills/html-pdf-report-reference/agents/claude.json

@@ -0,0 +1,17 @@
+{
+  "name": "html-pdf-report-reference",
+  "display_name": "HTML/PDF-отчёт Reference",
+  "description": "Генерация self-contained HTML-отчёта для печати в PDF — CSS print layout, Chart.js, Mermaid — reference (code & worked-example library)",
+  "default_prompt": "Используй $html-pdf-report-reference, когда задача относится к навыку \"HTML/PDF-отчёт Reference\".",
+  "triggers": [
+    "html-pdf-report",
+    "HTML отчёт",
+    "PDF отчёт",
+    "генерация отчёта"
+  ],
+  "capabilities": [
+    "html-pdf-report-reference"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}