code-ai-installer 4.0.0 → 4.0.1-b

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

@@ -1,6 +1,23 @@
 ---
 name: html-pdf-report
 description: Generation of a self-contained HTML report for PDF printing — 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 Report — Generation of a self-contained HTML for PDF printing
 
@@ -69,120 +86,7 @@ description: Generation of a self-contained HTML report for PDF printing — CSS
 
 Complete working CSS block:
 
-```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 (from palette) ========== */
-:root {
-    --primary: #1a1a2e;    /* Replace from 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` (§ Step 2 — CSS (Base + Print)).
 
 > **Palette:** replace CSS variables from the Design Spec. All colors should be accessed via `var(--name)` so the palette can be changed in one place.
 
@@ -194,99 +98,7 @@ For each chart from the Visualization Map:
 
 **Configurations by type:**
 
-```javascript
-// ========== BAR CHART (competitor comparison, scoring) ==========
-new Chart(document.getElementById('chart-competitors'), {
-    type: 'bar',
-    data: {
-        labels: ['Competitor A', 'Competitor B', 'Competitor C', 'Our Product'],
-        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: 'Competitor Threat Score', font: { size: 14 } } },
-        scales: { y: { beginAtZero: true, max: 10, title: { display: true, text: 'Score' } } }
-    }
-});
-
-// ========== RADAR CHART (multi-criteria comparison) ==========
-new Chart(document.getElementById('chart-radar'), {
-    type: 'radar',
-    data: {
-        labels: ['Functionality', 'Price', 'UX', 'Support', 'Ecosystem', 'Brand'],
-        datasets: [
-            { label: 'Our Product', data: [7, 8, 6, 5, 4, 3],
-              borderColor: '#0f3460', backgroundColor: 'rgba(15,52,96,0.1)', borderWidth: 2 },
-            { label: 'Market Leader', 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 (shares, distribution) ==========
-new Chart(document.getElementById('chart-share'), {
-    type: 'doughnut',
-    data: {
-        labels: ['Segment A', 'Segment B', 'Segment C', 'Others'],
-        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 (trends, retention curves) ==========
-new Chart(document.getElementById('chart-retention'), {
-    type: 'line',
-    data: {
-        labels: ['M0', 'M1', 'M2', 'M3', 'M6', 'M12'],
-        datasets: [
-            { label: 'Jan Cohort', data: [100, 42, 31, 26, 20, 16],
-              borderColor: '#e94560', fill: false, tension: 0.3 },
-            { label: 'Mar Cohort', 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 positioning) ==========
-new Chart(document.getElementById('chart-positioning'), {
-    type: 'scatter',
-    data: {
-        datasets: [
-            { label: 'Competitor A', data: [{ x: 8, y: 7 }], pointRadius: 10,
-              backgroundColor: '#e74c3c' },
-            { label: 'Our Product', 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: 'Functionality' } },
-            y: { min: 0, max: 10, title: { display: true, text: 'Price' } }
-        }
-    }
-});
-```
+> 📦 <!--SPLIT-POINTER--> Полный блок — в `$html-pdf-report-reference` (§ Step 3 — Chart.js).
 
 ### Step 4 — Mermaid
 
@@ -296,51 +108,7 @@ mermaid.initialize({ startOnLoad: true, theme: 'neutral', securityLevel: 'loose'
 
 **Diagrams by type:**
 
-```html
-<!-- ========== FLOWCHART (processes, pipelines) ========== -->
-<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 (structure, hierarchy) ========== -->
-<div class="mermaid">
-mindmap
-  root((Growth Strategy))
-    Penetration
-      Upsell
-      Cross-sell
-    Market Development
-      CIS
-      Enterprise
-    Product Development
-      AI Module
-      Mobile App
-    Diversification
-      White-label
-</div>
-
-<!-- ========== QUADRANT CHART (2x2 matrices) ========== -->
-<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` (§ Step 4 — Mermaid).
 
 > Every Mermaid diagram is wrapped in a `<figure>` with a `<figcaption>` and `page-break-inside: avoid`.
 
@@ -452,43 +220,7 @@ quadrantChart
 
 ## Example — Executive Summary Section
 
-```html
-<section class="executive-summary" id="executive-summary">
-    <h2>Executive Summary</h2>
-
-    <div class="pull-quote">
-        "The Russian EdTech market will reach $4.2B by 2027. The primary opportunity is 
-        corporate training (28% CAGR), where competition is fragmented."
-    </div>
-
-    <h3>Key Takeaways</h3>
-    <div class="callout callout-success">
-        <div class="callout-title">✅ Main Insight</div>
-        <p>AI personalization of learning is an unoccupied niche. None of the 5 key competitors
-        offer adaptive learning paths at a ★★★ level.</p>
-    </div>
-
-    <table class="data-table">
-        <caption>Key Metrics Summary</caption>
-        <thead>
-            <tr><th scope="col">Metric</th><th scope="col">Value</th><th scope="col">Benchmark</th><th scope="col">Rating</th></tr>
-        </thead>
-        <tbody>
-            <tr><td>TAM</td><td>$4.2B</td><td>—</td>
-                <td><span class="score-badge score-high">Large</span></td></tr>
-            <tr><td>SOM (Year 1)</td><td>$180M</td><td>—</td>
-                <td><span class="score-badge score-mid">Medium</span></td></tr>
-            <tr><td>Main Threat</td><td>Yandex Praktikum</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, Netology 6.8, Yandex 7.6, GeekBrains 4.1, Skyeng 5.3">
-        <canvas id="chart-exec-threats"></canvas>
-        <figcaption>Fig. 1 — Threat Score of key competitors</figcaption>
-    </figure>
-</section>
-```
+> 📦 <!--SPLIT-POINTER--> Полный блок — в `$html-pdf-report-reference` (§ Example — Executive Summary Section).
 
 ## Validation (Quality Gate)
 

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

@@ -0,0 +1,325 @@
+---
+name: html-pdf-report-reference
+description: Generation of a self-contained HTML report for PDF printing — 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.
+
+## Step 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 (from palette) ========== */
+:root {
+    --primary: #1a1a2e;    /* Replace from 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; }
+}
+```
+
+## Step 3 — Chart.js
+
+```javascript
+// ========== BAR CHART (competitor comparison, scoring) ==========
+new Chart(document.getElementById('chart-competitors'), {
+    type: 'bar',
+    data: {
+        labels: ['Competitor A', 'Competitor B', 'Competitor C', 'Our Product'],
+        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: 'Competitor Threat Score', font: { size: 14 } } },
+        scales: { y: { beginAtZero: true, max: 10, title: { display: true, text: 'Score' } } }
+    }
+});
+
+// ========== RADAR CHART (multi-criteria comparison) ==========
+new Chart(document.getElementById('chart-radar'), {
+    type: 'radar',
+    data: {
+        labels: ['Functionality', 'Price', 'UX', 'Support', 'Ecosystem', 'Brand'],
+        datasets: [
+            { label: 'Our Product', data: [7, 8, 6, 5, 4, 3],
+              borderColor: '#0f3460', backgroundColor: 'rgba(15,52,96,0.1)', borderWidth: 2 },
+            { label: 'Market Leader', 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 (shares, distribution) ==========
+new Chart(document.getElementById('chart-share'), {
+    type: 'doughnut',
+    data: {
+        labels: ['Segment A', 'Segment B', 'Segment C', 'Others'],
+        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 (trends, retention curves) ==========
+new Chart(document.getElementById('chart-retention'), {
+    type: 'line',
+    data: {
+        labels: ['M0', 'M1', 'M2', 'M3', 'M6', 'M12'],
+        datasets: [
+            { label: 'Jan Cohort', data: [100, 42, 31, 26, 20, 16],
+              borderColor: '#e94560', fill: false, tension: 0.3 },
+            { label: 'Mar Cohort', 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 positioning) ==========
+new Chart(document.getElementById('chart-positioning'), {
+    type: 'scatter',
+    data: {
+        datasets: [
+            { label: 'Competitor A', data: [{ x: 8, y: 7 }], pointRadius: 10,
+              backgroundColor: '#e74c3c' },
+            { label: 'Our Product', 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: 'Functionality' } },
+            y: { min: 0, max: 10, title: { display: true, text: 'Price' } }
+        }
+    }
+});
+```
+
+## Step 4 — Mermaid
+
+```html
+<!-- ========== FLOWCHART (processes, pipelines) ========== -->
+<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 (structure, hierarchy) ========== -->
+<div class="mermaid">
+mindmap
+  root((Growth Strategy))
+    Penetration
+      Upsell
+      Cross-sell
+    Market Development
+      CIS
+      Enterprise
+    Product Development
+      AI Module
+      Mobile App
+    Diversification
+      White-label
+</div>
+
+<!-- ========== QUADRANT CHART (2x2 matrices) ========== -->
+<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>
+```
+
+## Example — Executive Summary Section
+
+```html
+<section class="executive-summary" id="executive-summary">
+    <h2>Executive Summary</h2>
+
+    <div class="pull-quote">
+        "The Russian EdTech market will reach $4.2B by 2027. The primary opportunity is 
+        corporate training (28% CAGR), where competition is fragmented."
+    </div>
+
+    <h3>Key Takeaways</h3>
+    <div class="callout callout-success">
+        <div class="callout-title">✅ Main Insight</div>
+        <p>AI personalization of learning is an unoccupied niche. None of the 5 key competitors
+        offer adaptive learning paths at a ★★★ level.</p>
+    </div>
+
+    <table class="data-table">
+        <caption>Key Metrics Summary</caption>
+        <thead>
+            <tr><th scope="col">Metric</th><th scope="col">Value</th><th scope="col">Benchmark</th><th scope="col">Rating</th></tr>
+        </thead>
+        <tbody>
+            <tr><td>TAM</td><td>$4.2B</td><td>—</td>
+                <td><span class="score-badge score-high">Large</span></td></tr>
+            <tr><td>SOM (Year 1)</td><td>$180M</td><td>—</td>
+                <td><span class="score-badge score-mid">Medium</span></td></tr>
+            <tr><td>Main Threat</td><td>Yandex Praktikum</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, Netology 6.8, Yandex 7.6, GeekBrains 4.1, Skyeng 5.3">
+        <canvas id="chart-exec-threats"></canvas>
+        <figcaption>Fig. 1 — Threat Score of key competitors</figcaption>
+    </figure>
+</section>
+```

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

@@ -0,0 +1,17 @@
+{
+  "name": "html-pdf-report-reference",
+  "display_name": "HTML/PDF Report Reference",
+  "description": "Generation of a self-contained HTML report for PDF printing — CSS print layout, Chart.js, Mermaid — reference (code & worked-example library)",
+  "default_prompt": "Use $html-pdf-report-reference when the task relates to the \"HTML/PDF Report Reference\" skill.",
+  "triggers": [
+    "html-pdf-report",
+    "HTML report",
+    "PDF report",
+    "report generation"
+  ],
+  "capabilities": [
+    "html-pdf-report-reference"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}