emberflow-skills 1.10.1 → 1.12.0

package/.claude/skills/ember-publish-explainer/SKILL.md

@@ -10,6 +10,8 @@ Generate a **structured JSON** explainer that the Emberflow platform renders as
 
 You choose the best visualization type for each slide. A single explainer can mix different viz types across slides — a timeline on slide 2, a data table on slide 3, a chart on slide 4.
 
+**Visual diversity is critical.** Every explainer should feel bespoke. Don't fall back on "grid of stat cards" or "list of bordered boxes" as the default — those are just one option among many. Think about what shape the data actually has: is it a flow? Use a Sankey or funnel. A ranking? Use a horizontal bar chart or podium layout. A distribution? Use a heatmap or scatter. A before/after? Use a split comparison. A hierarchy? Use a tree or nested rings. A process? Use a swimlane or animated pipeline. Match the visualization to the shape of the information, not the other way around.
+
 ## Output
 
 Write a single JSON file to `{topic-slug}-explainer.json` in the current working directory. Then publish it to Emberflow.
@@ -163,32 +165,47 @@ No `script` field is needed for diagram slides — the platform handles all anim
 
 ## B. Visualization Primitive Catalog
 
-Choose from these primitives. Compose them freely — combine, nest, or invent new ones as the topic demands.
+This is a **starting point, not a menu to order from**. The best explainers invent visualizations that fit the content perfectly. Combine, adapt, or create entirely new primitives. If none of these fit — build something original.
 
 ### Data Display
 
-- **KPI / stat cards** — Grid of boxes with label, large value, subtitle. Use for overview slides. `display: grid; grid-template-columns: 1fr 1fr; gap: 12px`
-- **Data table** — `<table>` with muted uppercase headers, monospace numbers, color-coded values (green positive, red negative). Category dots on row labels.
-- **Comparison matrix** — Table with checkmark/cross SVG icons per cell. Column headers are options, rows are features. Active column highlighted with accent border.
+- **KPI / stat cards** — Grid of boxes with label, large value, subtitle. Good for overview slides, but don't default to this for everything.
+- **Data table** — `<table>` with muted uppercase headers, monospace numbers, color-coded values. Category dots on row labels.
+- **Comparison matrix** — Table with checkmark/cross SVG icons per cell. Active column highlighted with accent border.
+- **Heatmap grid** — CSS grid where cell background intensity maps to a value. Use color gradients (green→yellow→red or cool→warm). Great for showing density, coverage, or correlation.
+- **Scorecard** — Single large metric in a ring or gauge, with trend sparkline below. Different from KPI cards — more visual weight, fewer items.
 
 ### Charts
 
-- **Vertical bar chart** — Flex row of bars, height as percentage of max. Color-code by threshold (green/orange/red). Hover reveals value label. `transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1)`
-- **Horizontal bar chart** — Rows with label left, bar extending right. Good for ranked lists. Bar width as percentage via `flex` layout.
-- **Donut / ring chart** — SVG circle with `stroke-dasharray`/`stroke-dashoffset`. Percentage label centered absolutely.
-- **Funnel diagram** — Stacked horizontal bars decreasing in width, centered. Labels and conversion percentages on each stage.
+- **Vertical bar chart** — Flex row of bars, height as percentage of max. Color-code by threshold. Animate height on entrance.
+- **Horizontal bar chart** — Rows with label left, bar extending right. Good for ranked lists, leaderboards, survey results.
+- **Donut / ring chart** — SVG circle with `stroke-dasharray`/`stroke-dashoffset`. Percentage label centered.
+- **Funnel diagram** — Stacked horizontal bars decreasing in width, centered. Show conversion rates between stages.
+- **Waterfall chart** — Bars that float from the previous bar's end. Show how values build up or break down (budget additions/subtractions, funnel drop-offs).
+- **Sparklines / mini line charts** — SVG polylines inside cards or rows. Show trends without axes. Great for time-series context within other layouts.
+- **Stacked bar / segmented bar** — Single horizontal bar divided into colored segments. Show composition at a glance (e.g., traffic sources, time allocation).
+- **Scatter / bubble plot** — SVG circles positioned by x/y data. Size encodes a third dimension. Good for correlation or distribution.
+
+### Flows & Processes
+
+- **Sankey diagram** — SVG paths flowing from left to right with varying widths. Show how quantities split and merge across stages (budget allocation, user flow, data pipeline).
+- **Swimlane diagram** — Horizontal lanes (rows) representing actors/systems. Steps flow left-to-right across lanes showing handoffs. Great for cross-team processes.
+- **Animated pipeline** — Horizontal or vertical sequence of stages with animated dots/particles moving through. Show data or request flow in real-time feel.
+- **Decision tree** — Binary branching layout. Each node is a question, branches lead to outcomes. Clickable to explore paths.
 
 ### Timelines & Sequences
 
 - **Vertical timeline** — Left border line with dot markers. Each event has date, title, description, optional progress bar and status badge.
 - **Horizontal timeline** — Flex row of connected nodes along a horizontal line. Good for fewer items (3-6).
 - **Progress stepper** — Numbered circles connected by lines. Active step highlighted, completed steps filled.
+- **Gantt-style chart** — Rows of horizontal bars on a time axis. Show overlapping phases, dependencies, or parallel workstreams.
+- **Spiral timeline** — Events arranged along a spiral path (SVG). Unusual and memorable for cyclical or long-spanning histories.
 
 ### Relationships & Structure (Auto-Layout Diagrams)
 
 For any node-and-edge visualization, use a **declarative diagram object** as the `viz` field. The platform auto-positions nodes and routes edges — no manual coordinate math needed.
 
-- **Architecture diagram** — Use `viz: { nodes, edges, groups }` with color-coded nodes, meaningful icons, and labeled groups. The platform lays out each group as a horizontal row, stacks groups vertically, and draws cross-group edges as smooth beziers. See Section A → "Architecture diagrams".
+- **Architecture diagram** — Use `viz: { nodes, edges, groups }` with color-coded nodes, meaningful icons, and labeled groups. See Section A → "Architecture diagrams".
 - **Flowchart** — Same declarative format with a single group or no groups. Set `direction: "TB"` for top-to-bottom flow.
 - **Org chart / hierarchy** — Use `direction: "TB"` and groups for departments. Color-code by role.
 - **Network / data flow** — Multiple groups connected by cross-group edges. Color edges by data type.
@@ -197,17 +214,27 @@ For any node-and-edge visualization, use a **declarative diagram object** as the
 
 - **Periodic table / grid** — CSS grid of cards with colored top bar per category. Hover shows detail.
 - **Kanban board** — Columns with card items. Cards can highlight or shift between columns per slide.
+- **Tier list** — Labeled rows (S/A/B/C/F) with items placed in each tier. Color-coded by rank. Great for evaluations and comparisons.
 
 ### Status & Indicators
 
 - **Risk cards** — Stacked cards with severity SVG icon, title, description, colored severity badge.
 - **Stat delta** — Large number with up/down arrow SVG and percentage change.
+- **Gauge / meter** — SVG arc filled to a percentage. More visual impact than a number alone.
 - **Utilization bars** — Rows with label, horizontal progress bar, percentage.
 - **Checklist** — Items with check/cross SVG icons. Grouped by category.
 
+### Comparisons & Layouts
+
+- **Split comparison** — Two panels side-by-side (before/after, option A/option B). Highlight differences with color.
+- **Podium / ranking** — Three items in a 2-1-3 podium arrangement (second, first, third). Great for top-3 results.
+- **Concentric rings** — Nested circles or rings showing layers (e.g., onion architecture, security perimeters, impact radius).
+- **Quadrant chart** — 2×2 grid with labeled axes. Place items as dots or cards in quadrants (e.g., effort/impact, urgency/importance).
+- **Radar / spider chart** — SVG polygon on radial axes. Compare multiple dimensions of a single entity or overlay two entities.
+
 ### Inventing New Primitives
 
-The catalog above is a starting point. If the topic calls for a visualization not listed, invent one. Combine primitives freely. The only constraints are the design tokens and the slide-based interaction model.
+The catalog above is a starting point. **The best explainers often use visualizations not on this list.** If the topic calls for something new — a custom game board, an animated state machine, a nested ring diagram, a radial burst — build it. The only constraints are the design tokens and the slide-based interaction model.
 
 ---
 
@@ -265,6 +292,8 @@ Before writing any code, plan 4-7 slides:
 2. **Slides 2-6** = Each focuses on one concept or subset. Zoom in, highlight, or switch viz type.
 3. **Last slide** (optional) = Summary or call-to-action.
 
+**Vary the viz type across slides.** If slide 1 uses a diagram, slide 2 should use something different (a chart, timeline, table, etc.). Repeating the same viz structure on every slide makes the explainer feel static and monotonous. Each slide transition should feel like a new lens on the topic.
+
 For each slide, define:
 - **label**: Short uppercase label
 - **title**: Heading text
@@ -389,14 +418,16 @@ Or use the Emberflow MCP/CLI to publish with `content_type: 'explainer'`.
 
 ## H. Reference Templates
 
-Before generating, read the template that best matches your planned visualization:
+Read **one** template before generating to understand the JSON structure, field conventions, and script patterns:
 
 ```
-Read templates/architecture-explainer.json for a flowchart example (SVG nodes + edges, show/active/dimmed states, staggered entrance).
+Read templates/diverse-viz-explainer.json — RECOMMENDED: showcases 5 different viz types across slides (funnel, heatmap, radar chart, waterfall, gauges). Start here if you're unsure which template to use.
+
+Read templates/architecture-explainer.json — declarative diagram example (nodes + edges, active/dimmed states, staggered entrance).
 
-Read templates/project-overview-explainer.json for a mixed-viz example (KPIs, timeline, budget table, donut ring, risk cards — different viz type per slide).
+Read templates/project-overview-explainer.json — mixed-viz example (KPIs, timeline, budget table, donut ring, risk cards — different viz type per slide).
 
-Read templates/dashboard-explainer.json for a data viz example (animated bar chart, color-coded values, dataset switching per slide, insight callouts).
+Read templates/dashboard-explainer.json — data viz example (animated bar chart, color-coded values, dataset switching, insight callouts).
 ```
 
-Follow the patterns in the template closely. The templates are the ground truth for JSON structure, CSS conventions, and script patterns.
+Use the templates for **structural reference only** — JSON shape, field naming, script scoping, and animation timing. Do NOT copy their visual style. Your explainer should look distinct from every template. Choose visualization types that match your specific content, not the template's content.

package/.claude/skills/ember-publish-explainer/templates/diverse-viz-explainer.json

@@ -0,0 +1,40 @@
+{
+  "css": ".fn { display: flex; flex-direction: column; gap: 6px; width: 100%; }\n.fn-stage { display: flex; align-items: center; gap: 12px; opacity: 0; transform: translateX(-12px); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); }\n.fn-stage.visible { opacity: 1; transform: translateX(0); }\n.fn-bar { height: 38px; border-radius: 6px; width: 0; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; }\n.fn-info { min-width: 90px; }\n.fn-name { font-size: 13px; font-weight: 600; color: var(--text); display: block; }\n.fn-sub { font-size: 11px; color: var(--text-muted); }\n.fn-rate { font-size: 12px; font-weight: 600; margin-left: auto; padding: 2px 10px; border-radius: 12px; white-space: nowrap; }\n.fn-drop { font-size: 10px; color: var(--text-muted); text-align: center; padding: 2px 0; opacity: 0; transition: opacity 0.4s; }\n.fn-drop.visible { opacity: 1; }\n\n.hm { width: 100%; }\n.hm-grid { display: flex; flex-direction: column; gap: 3px; }\n.hm-row { display: grid; grid-template-columns: 44px repeat(7, 1fr); gap: 3px; }\n.hm-label { font-size: 10px; color: var(--text-muted); display: flex; align-items: center; }\n.hm-head { font-size: 10px; color: var(--text-muted); text-align: center; font-weight: 600; text-transform: uppercase; }\n.hm-cell { aspect-ratio: 1.6; border-radius: 3px; opacity: 0; transition: opacity 0.3s; cursor: pointer; position: relative; }\n.hm-cell.visible { opacity: 1; }\n.hm-cell:hover { outline: 1px solid var(--text-muted); }\n.hm-cell:hover::after { content: attr(data-val); position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 9px; color: var(--text); background: var(--bg); padding: 1px 5px; border-radius: 3px; border: 1px solid var(--border); white-space: nowrap; z-index: 1; }\n.hm-scale { display: flex; align-items: center; gap: 6px; margin-top: 8px; justify-content: flex-end; }\n.hm-scale-bar { width: 80px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(234,88,12,0.05), rgba(234,88,12,0.9)); }\n.hm-scale span { font-size: 9px; color: var(--text-muted); }\n\n.rd { width: 100%; display: flex; flex-direction: column; align-items: center; }\n.rd-chart { position: relative; }\n.rd-axis { stroke: var(--border); stroke-width: 1; }\n.rd-ring { fill: none; stroke: var(--border); stroke-width: 0.5; stroke-dasharray: 4 4; }\n.rd-poly { fill-opacity: 0; stroke-width: 2; stroke-dasharray: 500; stroke-dashoffset: 500; transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1), fill-opacity 0.6s 0.8s; }\n.rd-poly.visible { stroke-dashoffset: 0; fill-opacity: 0.12; }\n.rd-poly.cur { stroke: #ea580c; fill: #ea580c; }\n.rd-poly.prev { stroke: #3b82f6; fill: #3b82f6; }\n.rd-dot { r: 3; fill: var(--bg); stroke-width: 2; opacity: 0; transition: opacity 0.3s 1s; }\n.rd-dot.visible { opacity: 1; }\n.rd-dot.cur { stroke: #ea580c; }\n.rd-dot.prev { stroke: #3b82f6; }\n.rd-lbl { font-size: 10px; fill: var(--text-muted); text-anchor: middle; }\n.rd-legend { display: flex; gap: 20px; justify-content: center; margin-top: 16px; font-size: 12px; color: var(--text-muted); }\n.rd-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; }\n\n.wf { width: 100%; }\n.wf-chart { display: flex; align-items: flex-end; gap: 4px; height: 240px; padding-bottom: 24px; position: relative; }\n.wf-chart::before { content: ''; position: absolute; left: 0; right: 0; bottom: 24px; height: 1px; background: var(--border); }\n.wf-col { flex: 1; position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }\n.wf-block { width: 65%; border-radius: 3px; position: relative; opacity: 0; transform: scaleY(0); transform-origin: bottom; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); }\n.wf-block.visible { opacity: 1; transform: scaleY(1); }\n.wf-block.add { background: #22c55e; }\n.wf-block.sub { background: #ef4444; transform-origin: top; }\n.wf-block.total { background: var(--link); }\n.wf-val { font-size: 10px; font-weight: 600; color: var(--text); text-align: center; margin-bottom: 4px; opacity: 0; transition: opacity 0.3s 0.4s; white-space: nowrap; }\n.wf-val.visible { opacity: 1; }\n.wf-lbl { font-size: 9px; color: var(--text-muted); text-align: center; white-space: nowrap; position: absolute; bottom: -18px; }\n.wf-connector { position: absolute; right: -4px; width: 8px; border-top: 1px dashed var(--text-muted); opacity: 0.4; }\n\n.gg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; max-width: 360px; margin: 0 auto; }\n.gg-item { display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0; transform: scale(0.9); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); }\n.gg-item.visible { opacity: 1; transform: scale(1); }\n.gg-track { fill: none; stroke: var(--border); stroke-width: 10; stroke-linecap: round; }\n.gg-fill { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1); }\n.gg-val { font-size: 18px; font-weight: 700; text-anchor: middle; fill: var(--text); }\n.gg-lbl { font-size: 12px; color: var(--text-muted); text-align: center; font-weight: 600; }\n.gg-sub { font-size: 10px; color: var(--text-muted); text-align: center; }",
+  "slides": [
+    {
+      "label": "Funnel",
+      "title": "Signup Conversion Funnel",
+      "prose": "<p>The signup funnel tracks users from first visit through to paid conversion. Each stage represents a meaningful commitment — from anonymous browsing to entering payment details.</p><p>The <strong>activation step</strong> (completing onboarding) is the biggest single drop-off at 44% loss. Users who activate convert to paid at a strong 36% rate, suggesting the product delivers value once users get past initial setup.</p><p>Overall visitor-to-paid conversion sits at <strong>6.5%</strong>, competitive for a self-serve SaaS product.</p>",
+      "viz": "<div class=\"fn\"><div class=\"fn-stage\"><div class=\"fn-bar\" style=\"background: #3b82f6;\" data-w=\"100%\"></div><div class=\"fn-info\"><span class=\"fn-name\">Visitors</span><span class=\"fn-sub\">24,500 unique</span></div><span class=\"fn-rate\" style=\"background: rgba(59,130,246,0.12); color: #3b82f6;\">100%</span></div><div class=\"fn-drop\" data-text=\"\u2193 68% drop-off\"></div><div class=\"fn-stage\"><div class=\"fn-bar\" style=\"background: #8b5cf6;\" data-w=\"32%\"></div><div class=\"fn-info\"><span class=\"fn-name\">Signups</span><span class=\"fn-sub\">7,840 accounts</span></div><span class=\"fn-rate\" style=\"background: rgba(139,92,246,0.12); color: #8b5cf6;\">32%</span></div><div class=\"fn-drop\" data-text=\"\u2193 44% drop-off\"></div><div class=\"fn-stage\"><div class=\"fn-bar\" style=\"background: #ea580c;\" data-w=\"18%\"></div><div class=\"fn-info\"><span class=\"fn-name\">Activated</span><span class=\"fn-sub\">4,410 onboarded</span></div><span class=\"fn-rate\" style=\"background: rgba(234,88,12,0.12); color: #ea580c;\">18%</span></div><div class=\"fn-drop\" data-text=\"\u2193 64% drop-off\"></div><div class=\"fn-stage\"><div class=\"fn-bar\" style=\"background: #22c55e;\" data-w=\"6.5%\"></div><div class=\"fn-info\"><span class=\"fn-name\">Paying</span><span class=\"fn-sub\">1,590 customers</span></div><span class=\"fn-rate\" style=\"background: rgba(34,197,94,0.12); color: #22c55e;\">6.5%</span></div></div>",
+      "script": "var stages = container.querySelectorAll('.fn-stage');\nvar drops = container.querySelectorAll('.fn-drop');\nstages.forEach(function(s, i) {\n  setTimeout(function() {\n    s.classList.add('visible');\n    var bar = s.querySelector('.fn-bar');\n    bar.style.width = bar.getAttribute('data-w');\n    if (i > 0 && drops[i - 1]) {\n      drops[i - 1].textContent = drops[i - 1].getAttribute('data-text');\n      drops[i - 1].classList.add('visible');\n    }\n  }, 200 + i * 180);\n});"
+    },
+    {
+      "label": "Activity",
+      "title": "Signup Heatmap",
+      "prose": "<p>Signups cluster heavily around weekday lunchtimes and early evenings. <strong>Tuesday 12\u2013\u20131pm</strong> is the single hottest slot, likely driven by users discovering the product during work breaks.</p><p>Weekend activity is uniformly low, suggesting a B2B-leaning user base. Late-night signups (10pm+) are near zero across all days.</p><p>This pattern informs ad scheduling — concentrating spend on weekday 11am\u20132pm captures peak intent with minimal waste.</p>",
+      "viz": "<div class=\"hm\"><div class=\"hm-grid\"><div class=\"hm-row\"><span></span><span class=\"hm-head\">Mon</span><span class=\"hm-head\">Tue</span><span class=\"hm-head\">Wed</span><span class=\"hm-head\">Thu</span><span class=\"hm-head\">Fri</span><span class=\"hm-head\">Sat</span><span class=\"hm-head\">Sun</span></div><div class=\"hm-row\"><span class=\"hm-label\">6\u2013\u20139am</span><span class=\"hm-cell\" data-val=\"42\" style=\"background:rgba(234,88,12,0.12)\"></span><span class=\"hm-cell\" data-val=\"38\" style=\"background:rgba(234,88,12,0.10)\"></span><span class=\"hm-cell\" data-val=\"45\" style=\"background:rgba(234,88,12,0.13)\"></span><span class=\"hm-cell\" data-val=\"40\" style=\"background:rgba(234,88,12,0.11)\"></span><span class=\"hm-cell\" data-val=\"35\" style=\"background:rgba(234,88,12,0.09)\"></span><span class=\"hm-cell\" data-val=\"12\" style=\"background:rgba(234,88,12,0.03)\"></span><span class=\"hm-cell\" data-val=\"8\" style=\"background:rgba(234,88,12,0.02)\"></span></div><div class=\"hm-row\"><span class=\"hm-label\">9\u2013\u201312pm</span><span class=\"hm-cell\" data-val=\"120\" style=\"background:rgba(234,88,12,0.45)\"></span><span class=\"hm-cell\" data-val=\"135\" style=\"background:rgba(234,88,12,0.52)\"></span><span class=\"hm-cell\" data-val=\"118\" style=\"background:rgba(234,88,12,0.44)\"></span><span class=\"hm-cell\" data-val=\"125\" style=\"background:rgba(234,88,12,0.48)\"></span><span class=\"hm-cell\" data-val=\"110\" style=\"background:rgba(234,88,12,0.40)\"></span><span class=\"hm-cell\" data-val=\"28\" style=\"background:rgba(234,88,12,0.07)\"></span><span class=\"hm-cell\" data-val=\"20\" style=\"background:rgba(234,88,12,0.05)\"></span></div><div class=\"hm-row\"><span class=\"hm-label\">12\u2013\u20133pm</span><span class=\"hm-cell\" data-val=\"180\" style=\"background:rgba(234,88,12,0.72)\"></span><span class=\"hm-cell\" data-val=\"210\" style=\"background:rgba(234,88,12,0.90)\"></span><span class=\"hm-cell\" data-val=\"175\" style=\"background:rgba(234,88,12,0.70)\"></span><span class=\"hm-cell\" data-val=\"190\" style=\"background:rgba(234,88,12,0.78)\"></span><span class=\"hm-cell\" data-val=\"160\" style=\"background:rgba(234,88,12,0.62)\"></span><span class=\"hm-cell\" data-val=\"35\" style=\"background:rgba(234,88,12,0.09)\"></span><span class=\"hm-cell\" data-val=\"22\" style=\"background:rgba(234,88,12,0.06)\"></span></div><div class=\"hm-row\"><span class=\"hm-label\">3\u2013\u20136pm</span><span class=\"hm-cell\" data-val=\"145\" style=\"background:rgba(234,88,12,0.56)\"></span><span class=\"hm-cell\" data-val=\"155\" style=\"background:rgba(234,88,12,0.60)\"></span><span class=\"hm-cell\" data-val=\"140\" style=\"background:rgba(234,88,12,0.54)\"></span><span class=\"hm-cell\" data-val=\"150\" style=\"background:rgba(234,88,12,0.58)\"></span><span class=\"hm-cell\" data-val=\"130\" style=\"background:rgba(234,88,12,0.50)\"></span><span class=\"hm-cell\" data-val=\"30\" style=\"background:rgba(234,88,12,0.08)\"></span><span class=\"hm-cell\" data-val=\"18\" style=\"background:rgba(234,88,12,0.04)\"></span></div><div class=\"hm-row\"><span class=\"hm-label\">6\u2013\u201310pm</span><span class=\"hm-cell\" data-val=\"85\" style=\"background:rgba(234,88,12,0.28)\"></span><span class=\"hm-cell\" data-val=\"92\" style=\"background:rgba(234,88,12,0.32)\"></span><span class=\"hm-cell\" data-val=\"78\" style=\"background:rgba(234,88,12,0.25)\"></span><span class=\"hm-cell\" data-val=\"88\" style=\"background:rgba(234,88,12,0.30)\"></span><span class=\"hm-cell\" data-val=\"95\" style=\"background:rgba(234,88,12,0.34)\"></span><span class=\"hm-cell\" data-val=\"45\" style=\"background:rgba(234,88,12,0.13)\"></span><span class=\"hm-cell\" data-val=\"40\" style=\"background:rgba(234,88,12,0.11)\"></span></div></div><div class=\"hm-scale\"><span>Low</span><div class=\"hm-scale-bar\"></div><span>High</span></div></div>",
+      "script": "var cells = container.querySelectorAll('.hm-cell');\ncells.forEach(function(c, i) {\n  setTimeout(function() {\n    c.classList.add('visible');\n  }, 50 + i * 20);\n});"
+    },
+    {
+      "label": "Channels",
+      "title": "Channel Quality Radar",
+      "prose": "<p>Not all acquisition channels are equal. The radar chart compares six dimensions across Q1 (orange) vs the previous quarter (blue).</p><p><strong>Organic search</strong> improved dramatically in volume and retention, driven by new SEO landing pages. <strong>Paid social</strong> scores high on volume but low on retention — users from Instagram ads churn 3x faster than organic users.</p><p>The ideal channel scores high on all axes. Organic search and referrals are closest to that ideal, while paid channels trade retention for volume.</p>",
+      "viz": "<div class=\"rd\"><div class=\"rd-chart\"><svg viewBox=\"0 0 300 300\" width=\"280\" height=\"280\"><g transform=\"translate(150,150)\"><circle class=\"rd-ring\" r=\"36\" /><circle class=\"rd-ring\" r=\"72\" /><circle class=\"rd-ring\" r=\"108\" /><line class=\"rd-axis\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"-115\" /><line class=\"rd-axis\" x1=\"0\" y1=\"0\" x2=\"99.6\" y2=\"-57.5\" /><line class=\"rd-axis\" x1=\"0\" y1=\"0\" x2=\"99.6\" y2=\"57.5\" /><line class=\"rd-axis\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"115\" /><line class=\"rd-axis\" x1=\"0\" y1=\"0\" x2=\"-99.6\" y2=\"57.5\" /><line class=\"rd-axis\" x1=\"0\" y1=\"0\" x2=\"-99.6\" y2=\"-57.5\" /><polygon class=\"rd-poly prev\" points=\"0,-65 69,-44 58,47 0,75 -43,52 -58,-37\" /><polygon class=\"rd-poly cur\" points=\"0,-97 76,-35 52,62 0,54 -86,50 -81,-29\" /><circle class=\"rd-dot prev\" cx=\"0\" cy=\"-65\" /><circle class=\"rd-dot prev\" cx=\"69\" cy=\"-44\" /><circle class=\"rd-dot prev\" cx=\"58\" cy=\"47\" /><circle class=\"rd-dot prev\" cx=\"0\" cy=\"75\" /><circle class=\"rd-dot prev\" cx=\"-43\" cy=\"52\" /><circle class=\"rd-dot prev\" cx=\"-58\" cy=\"-37\" /><circle class=\"rd-dot cur\" cx=\"0\" cy=\"-97\" /><circle class=\"rd-dot cur\" cx=\"76\" cy=\"-35\" /><circle class=\"rd-dot cur\" cx=\"52\" cy=\"62\" /><circle class=\"rd-dot cur\" cx=\"0\" cy=\"54\" /><circle class=\"rd-dot cur\" cx=\"-86\" cy=\"50\" /><circle class=\"rd-dot cur\" cx=\"-81\" cy=\"-29\" /><text class=\"rd-lbl\" x=\"0\" y=\"-122\">Volume</text><text class=\"rd-lbl\" x=\"115\" y=\"-57\">Speed</text><text class=\"rd-lbl\" x=\"115\" y=\"68\">Cost Eff.</text><text class=\"rd-lbl\" x=\"0\" y=\"132\">Retention</text><text class=\"rd-lbl\" x=\"-115\" y=\"68\">Quality</text><text class=\"rd-lbl\" x=\"-115\" y=\"-57\">LTV</text></g></svg></div><div class=\"rd-legend\"><span><span class=\"rd-legend-dot\" style=\"background:#ea580c\"></span>Q1 (current)</span><span><span class=\"rd-legend-dot\" style=\"background:#3b82f6\"></span>Q4 (previous)</span></div></div>",
+      "script": "var polys = container.querySelectorAll('.rd-poly');\nvar dots = container.querySelectorAll('.rd-dot');\npolys.forEach(function(p, i) {\n  setTimeout(function() { p.classList.add('visible'); }, 200 + i * 300);\n});\ndots.forEach(function(d, i) {\n  setTimeout(function() { d.classList.add('visible'); }, 400);\n});"
+    },
+    {
+      "label": "Revenue",
+      "title": "Revenue Waterfall",
+      "prose": "<p>Revenue grew from <strong>$180k</strong> base to <strong>$200k</strong> net — a healthy 11% increase. The waterfall breaks down each contributing factor.</p><p>New customer acquisition added <strong>$40k</strong>, and upsells from existing accounts contributed another <strong>$15k</strong>. These gains were partially offset by <strong>$25k</strong> in churn and <strong>$10k</strong> in downgrades.</p><p>The churn figure is the primary concern — it erodes 63% of new revenue. Reducing churn by even 20% would shift net growth from 11% to 14%.</p>",
+      "viz": "<div class=\"wf\"><div class=\"wf-chart\"><div class=\"wf-col\"><div class=\"wf-val\" data-v=\"$180k\"></div><div class=\"wf-block total\" style=\"height: 76.6%;\" data-h=\"76.6%\"></div><span class=\"wf-lbl\">Base</span></div><div class=\"wf-col\"><div class=\"wf-val\" data-v=\"+$40k\"></div><div class=\"wf-block add\" style=\"height: 17%; margin-bottom: 76.6%;\" data-h=\"17%\"></div><span class=\"wf-lbl\">New</span></div><div class=\"wf-col\"><div class=\"wf-val\" data-v=\"+$15k\"></div><div class=\"wf-block add\" style=\"height: 6.4%; margin-bottom: 93.6%;\" data-h=\"6.4%\"></div><span class=\"wf-lbl\">Upsell</span></div><div class=\"wf-col\"><div class=\"wf-val\" data-v=\"-$25k\"></div><div class=\"wf-block sub\" style=\"height: 10.6%; margin-bottom: 85.1%;\" data-h=\"10.6%\"></div><span class=\"wf-lbl\">Churn</span></div><div class=\"wf-col\"><div class=\"wf-val\" data-v=\"-$10k\"></div><div class=\"wf-block sub\" style=\"height: 4.3%; margin-bottom: 85.1%;\" data-h=\"4.3%\"></div><span class=\"wf-lbl\">Down</span></div><div class=\"wf-col\"><div class=\"wf-val\" data-v=\"$200k\"></div><div class=\"wf-block total\" style=\"height: 85.1%;\" data-h=\"85.1%\"></div><span class=\"wf-lbl\">Net</span></div></div></div>",
+      "script": "var blocks = container.querySelectorAll('.wf-block');\nvar vals = container.querySelectorAll('.wf-val');\nblocks.forEach(function(b, i) {\n  var h = b.style.height;\n  b.style.height = '0';\n  setTimeout(function() {\n    b.style.height = h;\n    b.classList.add('visible');\n  }, 150 + i * 120);\n});\nvals.forEach(function(v, i) {\n  setTimeout(function() {\n    v.textContent = v.getAttribute('data-v');\n    v.classList.add('visible');\n  }, 300 + i * 120);\n});"
+    },
+    {
+      "label": "Health",
+      "title": "System Health Gauges",
+      "prose": "<p>Platform health metrics show the infrastructure is holding up well under growth. <strong>Uptime</strong> at 99.7% includes two brief outages totaling 2.2 hours — both from database connection pool exhaustion during traffic spikes.</p><p><strong>Response time</strong> (P95) sits at 210ms, well within the 500ms target. <strong>Error rate</strong> is low at 0.3%, though upload-related 504s account for nearly half of all errors.</p><p><strong>Throughput headroom</strong> at 62% means the system can absorb roughly 1.6x current load before needing horizontal scaling.</p>",
+      "viz": "<div class=\"gg-grid\"><div class=\"gg-item\"><svg viewBox=\"0 0 120 75\" width=\"120\" height=\"75\"><path class=\"gg-track\" d=\"M 15 65 A 45 45 0 0 1 105 65\" /><path class=\"gg-fill\" d=\"M 15 65 A 45 45 0 0 1 105 65\" stroke=\"#22c55e\" data-pct=\"99.7\" style=\"stroke-dasharray: 141.4; stroke-dashoffset: 141.4;\" /><text class=\"gg-val\" x=\"60\" y=\"60\" data-v=\"99.7%\"></text></svg><div class=\"gg-lbl\">Uptime</div><div class=\"gg-sub\">Target: 99.9%</div></div><div class=\"gg-item\"><svg viewBox=\"0 0 120 75\" width=\"120\" height=\"75\"><path class=\"gg-track\" d=\"M 15 65 A 45 45 0 0 1 105 65\" /><path class=\"gg-fill\" d=\"M 15 65 A 45 45 0 0 1 105 65\" stroke=\"#22c55e\" data-pct=\"92\" style=\"stroke-dasharray: 141.4; stroke-dashoffset: 141.4;\" /><text class=\"gg-val\" x=\"60\" y=\"60\" data-v=\"210ms\"></text></svg><div class=\"gg-lbl\">P95 Latency</div><div class=\"gg-sub\">Target: &lt;500ms</div></div><div class=\"gg-item\"><svg viewBox=\"0 0 120 75\" width=\"120\" height=\"75\"><path class=\"gg-track\" d=\"M 15 65 A 45 45 0 0 1 105 65\" /><path class=\"gg-fill\" d=\"M 15 65 A 45 45 0 0 1 105 65\" stroke=\"#22c55e\" data-pct=\"97\" style=\"stroke-dasharray: 141.4; stroke-dashoffset: 141.4;\" /><text class=\"gg-val\" x=\"60\" y=\"60\" data-v=\"0.3%\"></text></svg><div class=\"gg-lbl\">Error Rate</div><div class=\"gg-sub\">Target: &lt;1%</div></div><div class=\"gg-item\"><svg viewBox=\"0 0 120 75\" width=\"120\" height=\"75\"><path class=\"gg-track\" d=\"M 15 65 A 45 45 0 0 1 105 65\" /><path class=\"gg-fill\" d=\"M 15 65 A 45 45 0 0 1 105 65\" stroke=\"#ea580c\" data-pct=\"62\" style=\"stroke-dasharray: 141.4; stroke-dashoffset: 141.4;\" /><text class=\"gg-val\" x=\"60\" y=\"60\" data-v=\"62%\"></text></svg><div class=\"gg-lbl\">Headroom</div><div class=\"gg-sub\">Scale at &lt;30%</div></div></div>",
+      "script": "var items = container.querySelectorAll('.gg-item');\nitems.forEach(function(item, i) {\n  setTimeout(function() {\n    item.classList.add('visible');\n    var fill = item.querySelector('.gg-fill');\n    var pct = parseFloat(fill.getAttribute('data-pct')) / 100;\n    var totalLen = 141.4;\n    fill.style.strokeDashoffset = totalLen * (1 - pct);\n    var valEl = item.querySelector('.gg-val');\n    valEl.textContent = valEl.getAttribute('data-v');\n  }, 200 + i * 150);\n});"
+    }
+  ]
+}

package/README.md

@@ -1,21 +1,28 @@
 # Emberflow Skills
 
-Publish beautiful docs from your AI coding tools to [Emberflow](https://www.emberflow.ai) — architecture diagrams, tables, and markdown, hosted instantly.
+Publish beautiful docs from your AI coding tools to [Emberflow](https://www.emberflow.ai) — architecture diagrams, interactive data viewers, JSON explorers, and markdown, hosted instantly.
 
 ## Install
 
-The fastest way to get started:
-
 ```bash
 npx emberflow-skills
 ```
 
-That's it. The installer auto-detects your project type (Claude Code or Cursor) and copies the skill to the right directory. You'll be publishing docs in under 10 seconds.
+The installer auto-detects which AI coding tools you use and installs skills in the correct format for each.
+
+| Tool | Format | How to use |
+|------|--------|------------|
+| **Claude Code** | `.claude/skills/` | `/ember-publish [topic]` |
+| **Cursor** | `.cursor/rules/*.mdc` | "publish this to Emberflow" |
+| **Windsurf** | `.windsurf/rules/*.md` | "publish this to Emberflow" |
+| **Codex** | `.codex/*.md` | "publish this to Emberflow" |
+
+If multiple tools are detected, skills are installed for all of them.
 
 ### Options
 
 ```bash
-# Install to current project (default)
+# Install to current project (default — auto-detects tools)
 npx emberflow-skills
 
 # Install globally for Claude Code (available in all projects)
@@ -24,28 +31,73 @@ npx emberflow-skills --global
 
 ### What the installer does
 
-1. Detects if you're in a Claude Code project (`.claude/`) or Cursor project (`.cursor/`)
-2. Copies the `ember-publish` skill into your project's skills directory
-3. Done — use `/ember-publish` in your next conversation
+1. Detects tool configs in your project (`.claude/`, `.cursor/`, `.windsurf/`, `.codex/`)
+2. Converts skills to each tool's native format (SKILL.md, .mdc rules, markdown agents)
+3. Copies reference templates for the explainer skill
+4. Done — use the skills in your next conversation
+
+## Skills
 
-## Usage
+### `/ember-publish`
 
-In Claude Code or Cursor, just type:
+The smart router — automatically picks the right format based on your content. Just describe what you want and it figures out whether to publish a document, JSON explorer, explainer, dataset, or Space.
 
 ```
 /ember-publish architecture overview for the payments service
 ```
 
-Your AI writes the markdown, generates Mermaid diagrams, and publishes it. You get back a shareable URL.
+### `/ember-publish-doc`
+
+Publish a markdown document with interactive emberDiagrams (flowcharts, architecture maps, decision trees) — auto-laid-out with animations, no coordinates needed.
+
+```
+/ember-publish-doc the authentication flow for our API
+```
+
+### `/ember-publish-json`
+
+Publish JSON data as an interactive explorer with a node-graph visualization. Expand/collapse nodes, pan and zoom, search across keys and values, and switch between multiple payloads.
+
+```
+/ember-publish-json the API response from /api/users
+```
+
+### `/ember-publish-dataset`
+
+Publish CSV files as an interactive dataset viewer with virtual scroll (handles 10k+ rows), click-to-sort, per-column filters, search with highlighting, and CSV export.
+
+```
+/ember-publish-dataset sales data from data/transactions.csv
+```
+
+### `/ember-publish-explainer`
+
+Generate interactive visual explainers — the AI chooses the best visualization type (funnel, heatmap, radar chart, waterfall, timeline, architecture diagram, etc.) for the topic. Slide-based with animated transitions.
+
+```
+/ember-publish-explainer how our CI/CD pipeline works
+```
 
-## What gets published
+### `/ember-publish-space`
 
-- Live Mermaid diagrams with zoom, pan, and fullscreen
+Publish a directory of markdown files as a multi-page docs site with sidebar navigation, collapsible sections, and SPA page transitions.
+
+```
+/ember-publish-space the docs/ directory as API documentation
+```
+
+## What you get
+
+- Interactive emberDiagrams with zoom, pan, and fullscreen
+- Virtual-scroll dataset tables with sort, filter, and export
+- JSON node-graph explorer with drag, collapse, and search
+- Slide-based visual explainers with animated charts and timelines
+- Multi-page Spaces with sidebar navigation
 - Syntax-highlighted code blocks (190+ languages)
 - Auto-generated table of contents
 - Per-block inline comments and discussions
-- Dark mode with font selection
-- Public or private docs with secret links
+- Dark/light mode with font selection
+- Public or private docs with link sharing
 
 ## Manual install
 
@@ -53,12 +105,19 @@ If you prefer not to use npx:
 
 ```bash
 git clone https://github.com/pmccurley87/emberflow-skills.git
-cp -r emberflow-skills/skills/ember-publish .claude/skills/
+
+# Claude Code
+cp -r emberflow-skills/skills/* .claude/skills/
+
+# Cursor — copy as .mdc rules
+# Windsurf — copy to .windsurf/rules/
+# Codex — copy to .codex/
 ```
 
 ## Works with
 
-- Claude Code
-- Cursor
-- Codex CLI
-- Any tool that supports the SKILL.md format
+- **Claude Code** — native skill system with `/slash-commands`
+- **Cursor** — auto-attached rules via `.cursor/rules/`
+- **Windsurf** — rules via `.windsurf/rules/`
+- **Codex** — agent instructions via `.codex/`
+- **Any MCP-compatible tool** — Emberflow also provides an MCP server

package/bin/install.js

@@ -7,7 +7,7 @@ const http = require('http');
 const readline = require('readline');
 const os = require('os');
 
-const SKILL_NAMES = ['ember-publish', 'ember-publish-doc', 'ember-publish-explainer', 'ember-publish-json', 'ember-publish-space'];
+const SKILL_NAMES = ['ember-publish', 'ember-publish-doc', 'ember-publish-dataset', 'ember-publish-explainer', 'ember-publish-json', 'ember-publish-space'];
 const SKILLS_DIR = path.join(__dirname, '..', 'skills');
 const EMBERFLOW_URL = 'https://www.emberflow.ai';
 const TOKEN_PATH = path.join(os.homedir(), '.emberflow', 'token.json');
@@ -18,13 +18,38 @@ const green = (s) => `\x1b[32m${s}\x1b[0m`;
 const cyan = (s) => `\x1b[36m${s}\x1b[0m`;
 const orange = (s) => `\x1b[38;5;208m${s}\x1b[0m`;
 
-const targets = [
-  { dir: '.claude/skills', label: 'Claude Code (project)' },
-  { dir: '.cursor/skills', label: 'Cursor (project)' },
-];
-
-const globalTargets = [
-  { dir: path.join(os.homedir(), '.claude', 'skills'), label: 'Claude Code (global)' },
+// ── Tool definitions ──
+
+const TOOLS = [
+  {
+    type: 'claude',
+    detect: ['.claude'],
+    projectDir: '.claude/skills',
+    globalDir: path.join(os.homedir(), '.claude', 'skills'),
+    label: 'Claude Code',
+    usage: '/ember-publish',
+  },
+  {
+    type: 'cursor',
+    detect: ['.cursor', '.cursorrules'],
+    projectDir: '.cursor/rules',
+    label: 'Cursor',
+    usage: '"publish this to Emberflow"',
+  },
+  {
+    type: 'windsurf',
+    detect: ['.windsurf', '.windsurfrules'],
+    projectDir: '.windsurf/rules',
+    label: 'Windsurf',
+    usage: '"publish this to Emberflow"',
+  },
+  {
+    type: 'codex',
+    detect: ['.codex', 'AGENTS.md'],
+    projectDir: '.codex',
+    label: 'Codex',
+    usage: '"publish this to Emberflow"',
+  },
 ];
 
 const args = process.argv.slice(2);
@@ -77,7 +102,22 @@ function sleep(ms) {
   return new Promise((r) => setTimeout(r, ms));
 }
 
-// ── Skill installer ──
+// ── SKILL.md parsing ──
+
+function parseFrontmatter(content) {
+  const match = content.match(/^---\n([\s\S]*?)\n---\n([\s\S]*)$/);
+  if (!match) return { meta: {}, body: content };
+  const meta = {};
+  for (const line of match[1].split('\n')) {
+    const idx = line.indexOf(':');
+    if (idx > 0) {
+      meta[line.slice(0, idx).trim()] = line.slice(idx + 1).trim();
+    }
+  }
+  return { meta, body: match[2] };
+}
+
+// ── File helpers ──
 
 function copyDirRecursive(src, dest) {
   fs.mkdirSync(dest, { recursive: true });
@@ -92,25 +132,147 @@ function copyDirRecursive(src, dest) {
   }
 }
 
-function install(destDir, label) {
+function rewriteTemplatePaths(body, templatesRelPath) {
+  // Rewrite "Read templates/" to use the full relative path from project root
+  return body.replace(
+    /Read templates\//g,
+    `Read ${templatesRelPath}/`
+  );
+}
+
+// ── Installers per tool type ──
+
+function installClaude(name, destDir) {
+  const srcDir = path.join(SKILLS_DIR, name);
+  const skillDir = path.join(destDir, name);
+  fs.mkdirSync(skillDir, { recursive: true });
+  fs.copyFileSync(path.join(srcDir, 'SKILL.md'), path.join(skillDir, 'SKILL.md'));
+
+  const templatesDir = path.join(srcDir, 'templates');
+  if (fs.existsSync(templatesDir)) {
+    copyDirRecursive(templatesDir, path.join(skillDir, 'templates'));
+  }
+}
+
+function installCursor(name, destDir, cwd) {
+  const srcDir = path.join(SKILLS_DIR, name);
+  const skillMd = fs.readFileSync(path.join(srcDir, 'SKILL.md'), 'utf8');
+  const { meta, body } = parseFrontmatter(skillMd);
+
+  // Copy templates to .cursor/rules/<name>/templates/
+  const templatesDir = path.join(srcDir, 'templates');
+  const hasTemplates = fs.existsSync(templatesDir);
+  if (hasTemplates) {
+    copyDirRecursive(templatesDir, path.join(destDir, name, 'templates'));
+  }
+
+  // Rewrite template paths relative to project root
+  let content = body;
+  if (hasTemplates) {
+    const relPath = path.relative(cwd, path.join(destDir, name, 'templates'));
+    content = rewriteTemplatePaths(content, relPath);
+  }
+
+  // Write .mdc file with Cursor frontmatter
+  const description = meta.description || name;
+  const hint = meta['argument-hint'] ? ` — ${meta['argument-hint']}` : '';
+  const mdc = `---
+description: ${description}${hint}
+globs:
+alwaysApply: false
+---
+
+${content}`;
+
+  fs.mkdirSync(destDir, { recursive: true });
+  fs.writeFileSync(path.join(destDir, `${name}.mdc`), mdc);
+}
+
+function installWindsurf(name, destDir, cwd) {
+  const srcDir = path.join(SKILLS_DIR, name);
+  const skillMd = fs.readFileSync(path.join(srcDir, 'SKILL.md'), 'utf8');
+  const { body } = parseFrontmatter(skillMd);
+
+  // Copy templates
+  const templatesDir = path.join(srcDir, 'templates');
+  const hasTemplates = fs.existsSync(templatesDir);
+  if (hasTemplates) {
+    copyDirRecursive(templatesDir, path.join(destDir, name, 'templates'));
+  }
+
+  // Rewrite template paths
+  let content = body;
+  if (hasTemplates) {
+    const relPath = path.relative(cwd, path.join(destDir, name, 'templates'));
+    content = rewriteTemplatePaths(content, relPath);
+  }
+
+  fs.mkdirSync(destDir, { recursive: true });
+  fs.writeFileSync(path.join(destDir, `${name}.md`), content);
+}
+
+function installCodex(name, destDir, cwd) {
+  const srcDir = path.join(SKILLS_DIR, name);
+  const skillMd = fs.readFileSync(path.join(srcDir, 'SKILL.md'), 'utf8');
+  const { meta, body } = parseFrontmatter(skillMd);
+
+  // Copy templates
+  const templatesDir = path.join(srcDir, 'templates');
+  const hasTemplates = fs.existsSync(templatesDir);
+  if (hasTemplates) {
+    copyDirRecursive(templatesDir, path.join(destDir, name, 'templates'));
+  }
+
+  // Rewrite template paths
+  let content = body;
+  if (hasTemplates) {
+    const relPath = path.relative(cwd, path.join(destDir, name, 'templates'));
+    content = rewriteTemplatePaths(content, relPath);
+  }
+
+  fs.mkdirSync(destDir, { recursive: true });
+  fs.writeFileSync(path.join(destDir, `${name}.md`), content);
+}
+
+// ── Main install function ──
+
+function install(destDir, tool, cwd) {
   for (const name of SKILL_NAMES) {
-    const srcDir = path.join(SKILLS_DIR, name);
-    const skillDir = path.join(destDir, name);
-    const destFile = path.join(skillDir, 'SKILL.md');
-    fs.mkdirSync(skillDir, { recursive: true });
-    fs.copyFileSync(path.join(srcDir, 'SKILL.md'), destFile);
-
-    // Copy templates directory if it exists
-    const templatesDir = path.join(srcDir, 'templates');
-    if (fs.existsSync(templatesDir)) {
-      copyDirRecursive(templatesDir, path.join(skillDir, 'templates'));
+    switch (tool.type) {
+      case 'claude':
+        installClaude(name, destDir);
+        break;
+      case 'cursor':
+        installCursor(name, destDir, cwd);
+        break;
+      case 'windsurf':
+        installWindsurf(name, destDir, cwd);
+        break;
+      case 'codex':
+        installCodex(name, destDir, cwd);
+        break;
     }
-
-    console.log(`  ${green('✓')} Installed ${name} to ${path.relative(process.cwd(), skillDir) || skillDir} ${dim(`(${label})`)}`);
+    const relDest = path.relative(cwd, destDir) || destDir;
+    console.log(`  ${green('✓')} ${name} → ${dim(relDest)} ${dim(`(${tool.label})`)}`);
   }
   return true;
 }
 
+// ── Detection ──
+
+function detectTools(cwd) {
+  const detected = [];
+  for (const tool of TOOLS) {
+    for (const marker of tool.detect) {
+      if (fs.existsSync(path.join(cwd, marker))) {
+        detected.push(tool);
+        break;
+      }
+    }
+  }
+  return detected;
+}
+
 // ── Auth flow ──
 
 function hasValidToken() {
@@ -128,7 +290,6 @@ async function authenticate() {
   console.log(`  ${dim('Your published docs will be attributed to your account.')}`);
   console.log();
 
-  // Request device code
   let resp;
   try {
     resp = await request('POST', `${EMBERFLOW_URL}/api/device-code`);
@@ -151,7 +312,6 @@ async function authenticate() {
   console.log(`  Your code: ${bold(code)}`);
   console.log();
 
-  // Try to open the URL automatically
   try {
     const { exec } = require('child_process');
     if (process.platform === 'win32') {
@@ -165,8 +325,7 @@ async function authenticate() {
 
   process.stdout.write(`  ${dim('Waiting for approval...')}`);
 
-  // Poll for approval
-  const maxAttempts = 60; // 3 minutes at 3s intervals
+  const maxAttempts = 60;
   for (let i = 0; i < maxAttempts; i++) {
     await sleep(3000);
 
@@ -174,7 +333,6 @@ async function authenticate() {
       const status = await request('GET', `${EMBERFLOW_URL}/api/device-code/${code}`);
 
       if (status.data.status === 'approved' && status.data.session_token) {
-        // Strip cookie name prefix if present (e.g. "__Secure-better-auth.session_token=VALUE" -> "VALUE")
         const raw = status.data.session_token.replace(/^(?:__Secure-)?better-auth\.session_token=/, '');
         fs.mkdirSync(path.dirname(TOKEN_PATH), { recursive: true });
         fs.writeFileSync(TOKEN_PATH, JSON.stringify({ token: raw }, null, 2));
@@ -194,7 +352,6 @@ async function authenticate() {
       // Network error, keep polling
     }
 
-    // Spinner
     const frames = ['⠋','⠙','⠹','⠸','⠼','⠴','⠦','⠧','⠇','⠏'];
     process.stdout.clearLine(0);
     process.stdout.cursorTo(0);
@@ -217,38 +374,48 @@ async function main() {
   console.log();
 
   if (!authOnly) {
+    const cwd = process.cwd();
     let installed = 0;
 
     if (isGlobal) {
-      for (const t of globalTargets) {
-        install(t.dir, t.label);
-        installed++;
-      }
+      // Global install — Claude Code only
+      const claudeTool = TOOLS[0];
+      install(claudeTool.globalDir, claudeTool, cwd);
+      installed++;
     } else {
-      const cwd = process.cwd();
-      const detected = [];
-
-      for (const t of targets) {
-        const parent = path.dirname(path.join(cwd, t.dir));
-        if (fs.existsSync(path.join(cwd, t.dir)) || fs.existsSync(parent)) {
-          detected.push(t);
-        }
-      }
+      const detected = detectTools(cwd);
 
       if (detected.length === 0) {
-        detected.push(targets[0]);
+        // Default to Claude Code
+        detected.push(TOOLS[0]);
+        console.log(`  ${dim('No tool config detected — defaulting to Claude Code')}`);
+        console.log();
+      } else {
+        console.log(`  ${dim(`Detected: ${detected.map(t => t.label).join(', ')}`)}`);
+        console.log();
       }
 
-      for (const t of detected) {
-        install(path.join(cwd, t.dir), t.label);
+      for (const tool of detected) {
+        const destDir = path.join(cwd, tool.projectDir);
+        install(destDir, tool, cwd);
         installed++;
+        console.log();
       }
     }
 
     if (installed > 0) {
-      console.log();
-      console.log(`  Use: ${cyan('/ember-publish')} ${dim('[topic]')}  — auto-picks format (doc, JSON, Space, or explainer)`);
-      console.log(`       ${cyan('/ember-publish-doc')} ${dim('[topic]')}  ${cyan('/ember-publish-json')} ${dim('[data]')}  ${cyan('/ember-publish-space')} ${dim('[directory]')}  ${cyan('/ember-publish-explainer')} ${dim('[topic]')}`);
+      const detected = isGlobal ? [TOOLS[0]] : (detectTools(cwd).length > 0 ? detectTools(cwd) : [TOOLS[0]]);
+      const claudeDetected = detected.some(t => t.type === 'claude');
+      const othersDetected = detected.filter(t => t.type !== 'claude');
+
+      if (claudeDetected) {
+        console.log(`  ${bold('Claude Code:')} ${cyan('/ember-publish')} ${dim('[topic]')}  — auto-picks format`);
+        console.log(`       ${cyan('/ember-publish-doc')} ${dim('[topic]')}  ${cyan('/ember-publish-json')} ${dim('[data]')}  ${cyan('/ember-publish-explainer')} ${dim('[topic]')}`);
+      }
+      if (othersDetected.length > 0) {
+        const labels = othersDetected.map(t => t.label).join(', ');
+        console.log(`  ${bold(`${labels}:`)} Just ask ${cyan('"publish this to Emberflow"')} or ${cyan('"create an Emberflow explainer about X"')}`);
+      }
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "emberflow-skills",
-  "version": "1.10.1",
+  "version": "1.12.0",
   "description": "Install Emberflow skills for AI coding tools",
   "bin": {
     "emberflow-skills": "./bin/install.js"

package/skills/ember-publish-dataset/SKILL.md

@@ -0,0 +1,134 @@
+---
+name: ember-publish-dataset
+description: Publish one or more CSV files to Emberflow as an interactive dataset viewer with multi-table tabs, search, sort, filter, pagination, and CSV export
+argument-hint: [CSV file path(s) and a title]
+---
+
+# Emberflow Dataset Publisher
+
+Publish tabular CSV data to Emberflow at **https://emberflow.ai** as an interactive dataset viewer with:
+- Multi-table tabs (one per CSV file)
+- Cross-column search with highlighted matches
+- Click-to-sort on any column (asc/desc)
+- Column show/hide filter
+- Paginated rows (100 per page)
+- CSV export of filtered data
+
+## Step 1: Prepare your CSV files
+
+Each CSV file becomes one tab in the viewer. The first row is treated as column headers. Example:
+
+```
+Region,Q1,Q2,Total
+North America,142000,158000,300000
+Europe,98000,112000,210000
+```
+
+## Step 2: Authenticate (if needed)
+
+Session tokens are stored at `~/.emberflow/token.json`. Check if a valid session exists:
+
+```bash
+cat ~/.emberflow/token.json 2>/dev/null
+```
+
+If no session exists or the token is expired, authenticate using the device flow:
+
+```bash
+EMBERFLOW_URL="https://emberflow.ai"
+
+# Step 1: Request a device code
+RESP=$(curl -s -X POST "$EMBERFLOW_URL/api/device-code")
+CODE=$(echo "$RESP" | jq -r .code)
+URL=$(echo "$RESP" | jq -r .verification_url)
+echo "Open in browser: $URL"
+```
+
+Tell the user to open the URL and sign in. Then poll until approved:
+
+```bash
+# Step 2: Poll until approved (every 3s)
+while true; do
+  STATUS=$(curl -s "$EMBERFLOW_URL/api/device-code/$CODE")
+  S=$(echo "$STATUS" | jq -r .status)
+  if [ "$S" = "approved" ]; then
+    TOKEN=$(echo "$STATUS" | jq -r .session_token)
+    mkdir -p ~/.emberflow
+    echo "{\"token\":\"$TOKEN\"}" > ~/.emberflow/token.json
+    break
+  fi
+  if [ "$S" = "expired" ]; then echo "Code expired. Try again."; break; fi
+  sleep 3
+done
+```
+
+## Step 3: Build and publish the dataset
+
+Parse each CSV and build the dataset JSON, then POST with `content_type: "dataset"`.
+
+### Data format
+
+```json
+{
+  "tables": [
+    {
+      "name": "Sales by Region",
+      "columns": ["Region", "Q1", "Q2", "Total"],
+      "rows": [
+        ["North America", 142000, 158000, 300000],
+        ["Europe", 98000, 112000, 210000]
+      ]
+    }
+  ]
+}
+```
+
+- `columns`: array of header strings
+- `rows`: array of arrays — numeric values as numbers, strings as strings
+- Multiple tables → multiple tabs in the viewer
+
+### Publish with curl
+
+```bash
+EMBERFLOW_URL="https://emberflow.ai"
+TITLE="My Dataset"
+SLUG=$(echo "$TITLE" | tr '[:upper:]' '[:lower:]' | tr -cs 'a-z0-9' '-' | sed 's/^-//;s/-$//')
+TOKEN=$(jq -r .token ~/.emberflow/token.json)
+
+# Build dataset JSON from one CSV file (requires python3 or similar)
+CONTENT=$(python3 -c "
+import csv, json, sys
+with open('data.csv') as f:
+    rows = list(csv.reader(f))
+cols = rows[0]
+data = []
+for r in rows[1:]:
+    row = []
+    for v in r:
+        try: row.append(float(v) if '.' in v else int(v))
+        except: row.append(v)
+    data.append(row)
+print(json.dumps({'tables': [{'name': 'Data', 'columns': cols, 'rows': data}]}))
+")
+
+curl -s -X POST "$EMBERFLOW_URL/api/docs" \
+  -H 'Content-Type: application/json' \
+  -H "Authorization: Bearer $TOKEN" \
+  -d "$(jq -n --arg slug "$SLUG" --arg title "$TITLE" --arg content "$CONTENT" \
+    '{slug: $slug, title: $title, content: $content, content_type: "dataset", visibility: "public"}')"
+```
+
+The response JSON includes a `url` field. The dataset is viewable at:
+- `https://emberflow.ai/d/<shortId>/<slug>`
+
+To **update** an existing dataset, publish again with the same slug — the API upserts for the same author.
+
+### Other operations
+
+```bash
+# List all your documents
+curl -s -H "Authorization: Bearer $TOKEN" "$EMBERFLOW_URL/api/docs"
+
+# Delete a dataset
+curl -s -X DELETE -H "Authorization: Bearer $TOKEN" "$EMBERFLOW_URL/api/docs/SLUG_HERE"
+```

package/skills/ember-publish-explainer/SKILL.md

@@ -10,6 +10,8 @@ Generate a **structured JSON** explainer that the Emberflow platform renders as
 
 You choose the best visualization type for each slide. A single explainer can mix different viz types across slides — a timeline on slide 2, a data table on slide 3, a chart on slide 4.
 
+**Visual diversity is critical.** Every explainer should feel bespoke. Don't fall back on "grid of stat cards" or "list of bordered boxes" as the default — those are just one option among many. Think about what shape the data actually has: is it a flow? Use a Sankey or funnel. A ranking? Use a horizontal bar chart or podium layout. A distribution? Use a heatmap or scatter. A before/after? Use a split comparison. A hierarchy? Use a tree or nested rings. A process? Use a swimlane or animated pipeline. Match the visualization to the shape of the information, not the other way around.
+
 ## Output
 
 Write a single JSON file to `{topic-slug}-explainer.json` in the current working directory. Then publish it to Emberflow.
@@ -163,32 +165,47 @@ No `script` field is needed for diagram slides — the platform handles all anim
 
 ## B. Visualization Primitive Catalog
 
-Choose from these primitives. Compose them freely — combine, nest, or invent new ones as the topic demands.
+This is a **starting point, not a menu to order from**. The best explainers invent visualizations that fit the content perfectly. Combine, adapt, or create entirely new primitives. If none of these fit — build something original.
 
 ### Data Display
 
-- **KPI / stat cards** — Grid of boxes with label, large value, subtitle. Use for overview slides. `display: grid; grid-template-columns: 1fr 1fr; gap: 12px`
-- **Data table** — `<table>` with muted uppercase headers, monospace numbers, color-coded values (green positive, red negative). Category dots on row labels.
-- **Comparison matrix** — Table with checkmark/cross SVG icons per cell. Column headers are options, rows are features. Active column highlighted with accent border.
+- **KPI / stat cards** — Grid of boxes with label, large value, subtitle. Good for overview slides, but don't default to this for everything.
+- **Data table** — `<table>` with muted uppercase headers, monospace numbers, color-coded values. Category dots on row labels.
+- **Comparison matrix** — Table with checkmark/cross SVG icons per cell. Active column highlighted with accent border.
+- **Heatmap grid** — CSS grid where cell background intensity maps to a value. Use color gradients (green→yellow→red or cool→warm). Great for showing density, coverage, or correlation.
+- **Scorecard** — Single large metric in a ring or gauge, with trend sparkline below. Different from KPI cards — more visual weight, fewer items.
 
 ### Charts
 
-- **Vertical bar chart** — Flex row of bars, height as percentage of max. Color-code by threshold (green/orange/red). Hover reveals value label. `transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1)`
-- **Horizontal bar chart** — Rows with label left, bar extending right. Good for ranked lists. Bar width as percentage via `flex` layout.
-- **Donut / ring chart** — SVG circle with `stroke-dasharray`/`stroke-dashoffset`. Percentage label centered absolutely.
-- **Funnel diagram** — Stacked horizontal bars decreasing in width, centered. Labels and conversion percentages on each stage.
+- **Vertical bar chart** — Flex row of bars, height as percentage of max. Color-code by threshold. Animate height on entrance.
+- **Horizontal bar chart** — Rows with label left, bar extending right. Good for ranked lists, leaderboards, survey results.
+- **Donut / ring chart** — SVG circle with `stroke-dasharray`/`stroke-dashoffset`. Percentage label centered.
+- **Funnel diagram** — Stacked horizontal bars decreasing in width, centered. Show conversion rates between stages.
+- **Waterfall chart** — Bars that float from the previous bar's end. Show how values build up or break down (budget additions/subtractions, funnel drop-offs).
+- **Sparklines / mini line charts** — SVG polylines inside cards or rows. Show trends without axes. Great for time-series context within other layouts.
+- **Stacked bar / segmented bar** — Single horizontal bar divided into colored segments. Show composition at a glance (e.g., traffic sources, time allocation).
+- **Scatter / bubble plot** — SVG circles positioned by x/y data. Size encodes a third dimension. Good for correlation or distribution.
+
+### Flows & Processes
+
+- **Sankey diagram** — SVG paths flowing from left to right with varying widths. Show how quantities split and merge across stages (budget allocation, user flow, data pipeline).
+- **Swimlane diagram** — Horizontal lanes (rows) representing actors/systems. Steps flow left-to-right across lanes showing handoffs. Great for cross-team processes.
+- **Animated pipeline** — Horizontal or vertical sequence of stages with animated dots/particles moving through. Show data or request flow in real-time feel.
+- **Decision tree** — Binary branching layout. Each node is a question, branches lead to outcomes. Clickable to explore paths.
 
 ### Timelines & Sequences
 
 - **Vertical timeline** — Left border line with dot markers. Each event has date, title, description, optional progress bar and status badge.
 - **Horizontal timeline** — Flex row of connected nodes along a horizontal line. Good for fewer items (3-6).
 - **Progress stepper** — Numbered circles connected by lines. Active step highlighted, completed steps filled.
+- **Gantt-style chart** — Rows of horizontal bars on a time axis. Show overlapping phases, dependencies, or parallel workstreams.
+- **Spiral timeline** — Events arranged along a spiral path (SVG). Unusual and memorable for cyclical or long-spanning histories.
 
 ### Relationships & Structure (Auto-Layout Diagrams)
 
 For any node-and-edge visualization, use a **declarative diagram object** as the `viz` field. The platform auto-positions nodes and routes edges — no manual coordinate math needed.
 
-- **Architecture diagram** — Use `viz: { nodes, edges, groups }` with color-coded nodes, meaningful icons, and labeled groups. The platform lays out each group as a horizontal row, stacks groups vertically, and draws cross-group edges as smooth beziers. See Section A → "Architecture diagrams".
+- **Architecture diagram** — Use `viz: { nodes, edges, groups }` with color-coded nodes, meaningful icons, and labeled groups. See Section A → "Architecture diagrams".
 - **Flowchart** — Same declarative format with a single group or no groups. Set `direction: "TB"` for top-to-bottom flow.
 - **Org chart / hierarchy** — Use `direction: "TB"` and groups for departments. Color-code by role.
 - **Network / data flow** — Multiple groups connected by cross-group edges. Color edges by data type.
@@ -197,17 +214,27 @@ For any node-and-edge visualization, use a **declarative diagram object** as the
 
 - **Periodic table / grid** — CSS grid of cards with colored top bar per category. Hover shows detail.
 - **Kanban board** — Columns with card items. Cards can highlight or shift between columns per slide.
+- **Tier list** — Labeled rows (S/A/B/C/F) with items placed in each tier. Color-coded by rank. Great for evaluations and comparisons.
 
 ### Status & Indicators
 
 - **Risk cards** — Stacked cards with severity SVG icon, title, description, colored severity badge.
 - **Stat delta** — Large number with up/down arrow SVG and percentage change.
+- **Gauge / meter** — SVG arc filled to a percentage. More visual impact than a number alone.
 - **Utilization bars** — Rows with label, horizontal progress bar, percentage.
 - **Checklist** — Items with check/cross SVG icons. Grouped by category.
 
+### Comparisons & Layouts
+
+- **Split comparison** — Two panels side-by-side (before/after, option A/option B). Highlight differences with color.
+- **Podium / ranking** — Three items in a 2-1-3 podium arrangement (second, first, third). Great for top-3 results.
+- **Concentric rings** — Nested circles or rings showing layers (e.g., onion architecture, security perimeters, impact radius).
+- **Quadrant chart** — 2×2 grid with labeled axes. Place items as dots or cards in quadrants (e.g., effort/impact, urgency/importance).
+- **Radar / spider chart** — SVG polygon on radial axes. Compare multiple dimensions of a single entity or overlay two entities.
+
 ### Inventing New Primitives
 
-The catalog above is a starting point. If the topic calls for a visualization not listed, invent one. Combine primitives freely. The only constraints are the design tokens and the slide-based interaction model.
+The catalog above is a starting point. **The best explainers often use visualizations not on this list.** If the topic calls for something new — a custom game board, an animated state machine, a nested ring diagram, a radial burst — build it. The only constraints are the design tokens and the slide-based interaction model.
 
 ---
 
@@ -265,6 +292,8 @@ Before writing any code, plan 4-7 slides:
 2. **Slides 2-6** = Each focuses on one concept or subset. Zoom in, highlight, or switch viz type.
 3. **Last slide** (optional) = Summary or call-to-action.
 
+**Vary the viz type across slides.** If slide 1 uses a diagram, slide 2 should use something different (a chart, timeline, table, etc.). Repeating the same viz structure on every slide makes the explainer feel static and monotonous. Each slide transition should feel like a new lens on the topic.
+
 For each slide, define:
 - **label**: Short uppercase label
 - **title**: Heading text
@@ -389,14 +418,16 @@ Or use the Emberflow MCP/CLI to publish with `content_type: 'explainer'`.
 
 ## H. Reference Templates
 
-Before generating, read the template that best matches your planned visualization:
+Read **one** template before generating to understand the JSON structure, field conventions, and script patterns:
 
 ```
-Read templates/architecture-explainer.json for a flowchart example (SVG nodes + edges, show/active/dimmed states, staggered entrance).
+Read templates/diverse-viz-explainer.json — RECOMMENDED: showcases 5 different viz types across slides (funnel, heatmap, radar chart, waterfall, gauges). Start here if you're unsure which template to use.
+
+Read templates/architecture-explainer.json — declarative diagram example (nodes + edges, active/dimmed states, staggered entrance).
 
-Read templates/project-overview-explainer.json for a mixed-viz example (KPIs, timeline, budget table, donut ring, risk cards — different viz type per slide).
+Read templates/project-overview-explainer.json — mixed-viz example (KPIs, timeline, budget table, donut ring, risk cards — different viz type per slide).
 
-Read templates/dashboard-explainer.json for a data viz example (animated bar chart, color-coded values, dataset switching per slide, insight callouts).
+Read templates/dashboard-explainer.json — data viz example (animated bar chart, color-coded values, dataset switching, insight callouts).
 ```
 
-Follow the patterns in the template closely. The templates are the ground truth for JSON structure, CSS conventions, and script patterns.
+Use the templates for **structural reference only** — JSON shape, field naming, script scoping, and animation timing. Do NOT copy their visual style. Your explainer should look distinct from every template. Choose visualization types that match your specific content, not the template's content.

package/skills/ember-publish-explainer/templates/diverse-viz-explainer.json

@@ -0,0 +1,40 @@
+{
+  "css": ".fn { display: flex; flex-direction: column; gap: 6px; width: 100%; }\n.fn-stage { display: flex; align-items: center; gap: 12px; opacity: 0; transform: translateX(-12px); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); }\n.fn-stage.visible { opacity: 1; transform: translateX(0); }\n.fn-bar { height: 38px; border-radius: 6px; width: 0; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; }\n.fn-info { min-width: 90px; }\n.fn-name { font-size: 13px; font-weight: 600; color: var(--text); display: block; }\n.fn-sub { font-size: 11px; color: var(--text-muted); }\n.fn-rate { font-size: 12px; font-weight: 600; margin-left: auto; padding: 2px 10px; border-radius: 12px; white-space: nowrap; }\n.fn-drop { font-size: 10px; color: var(--text-muted); text-align: center; padding: 2px 0; opacity: 0; transition: opacity 0.4s; }\n.fn-drop.visible { opacity: 1; }\n\n.hm { width: 100%; }\n.hm-grid { display: flex; flex-direction: column; gap: 3px; }\n.hm-row { display: grid; grid-template-columns: 44px repeat(7, 1fr); gap: 3px; }\n.hm-label { font-size: 10px; color: var(--text-muted); display: flex; align-items: center; }\n.hm-head { font-size: 10px; color: var(--text-muted); text-align: center; font-weight: 600; text-transform: uppercase; }\n.hm-cell { aspect-ratio: 1.6; border-radius: 3px; opacity: 0; transition: opacity 0.3s; cursor: pointer; position: relative; }\n.hm-cell.visible { opacity: 1; }\n.hm-cell:hover { outline: 1px solid var(--text-muted); }\n.hm-cell:hover::after { content: attr(data-val); position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 9px; color: var(--text); background: var(--bg); padding: 1px 5px; border-radius: 3px; border: 1px solid var(--border); white-space: nowrap; z-index: 1; }\n.hm-scale { display: flex; align-items: center; gap: 6px; margin-top: 8px; justify-content: flex-end; }\n.hm-scale-bar { width: 80px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(234,88,12,0.05), rgba(234,88,12,0.9)); }\n.hm-scale span { font-size: 9px; color: var(--text-muted); }\n\n.rd { width: 100%; display: flex; flex-direction: column; align-items: center; }\n.rd-chart { position: relative; }\n.rd-axis { stroke: var(--border); stroke-width: 1; }\n.rd-ring { fill: none; stroke: var(--border); stroke-width: 0.5; stroke-dasharray: 4 4; }\n.rd-poly { fill-opacity: 0; stroke-width: 2; stroke-dasharray: 500; stroke-dashoffset: 500; transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1), fill-opacity 0.6s 0.8s; }\n.rd-poly.visible { stroke-dashoffset: 0; fill-opacity: 0.12; }\n.rd-poly.cur { stroke: #ea580c; fill: #ea580c; }\n.rd-poly.prev { stroke: #3b82f6; fill: #3b82f6; }\n.rd-dot { r: 3; fill: var(--bg); stroke-width: 2; opacity: 0; transition: opacity 0.3s 1s; }\n.rd-dot.visible { opacity: 1; }\n.rd-dot.cur { stroke: #ea580c; }\n.rd-dot.prev { stroke: #3b82f6; }\n.rd-lbl { font-size: 10px; fill: var(--text-muted); text-anchor: middle; }\n.rd-legend { display: flex; gap: 20px; justify-content: center; margin-top: 16px; font-size: 12px; color: var(--text-muted); }\n.rd-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; }\n\n.wf { width: 100%; }\n.wf-chart { display: flex; align-items: flex-end; gap: 4px; height: 240px; padding-bottom: 24px; position: relative; }\n.wf-chart::before { content: ''; position: absolute; left: 0; right: 0; bottom: 24px; height: 1px; background: var(--border); }\n.wf-col { flex: 1; position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }\n.wf-block { width: 65%; border-radius: 3px; position: relative; opacity: 0; transform: scaleY(0); transform-origin: bottom; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); }\n.wf-block.visible { opacity: 1; transform: scaleY(1); }\n.wf-block.add { background: #22c55e; }\n.wf-block.sub { background: #ef4444; transform-origin: top; }\n.wf-block.total { background: var(--link); }\n.wf-val { font-size: 10px; font-weight: 600; color: var(--text); text-align: center; margin-bottom: 4px; opacity: 0; transition: opacity 0.3s 0.4s; white-space: nowrap; }\n.wf-val.visible { opacity: 1; }\n.wf-lbl { font-size: 9px; color: var(--text-muted); text-align: center; white-space: nowrap; position: absolute; bottom: -18px; }\n.wf-connector { position: absolute; right: -4px; width: 8px; border-top: 1px dashed var(--text-muted); opacity: 0.4; }\n\n.gg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; max-width: 360px; margin: 0 auto; }\n.gg-item { display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0; transform: scale(0.9); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); }\n.gg-item.visible { opacity: 1; transform: scale(1); }\n.gg-track { fill: none; stroke: var(--border); stroke-width: 10; stroke-linecap: round; }\n.gg-fill { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1); }\n.gg-val { font-size: 18px; font-weight: 700; text-anchor: middle; fill: var(--text); }\n.gg-lbl { font-size: 12px; color: var(--text-muted); text-align: center; font-weight: 600; }\n.gg-sub { font-size: 10px; color: var(--text-muted); text-align: center; }",
+  "slides": [
+    {
+      "label": "Funnel",
+      "title": "Signup Conversion Funnel",
+      "prose": "<p>The signup funnel tracks users from first visit through to paid conversion. Each stage represents a meaningful commitment — from anonymous browsing to entering payment details.</p><p>The <strong>activation step</strong> (completing onboarding) is the biggest single drop-off at 44% loss. Users who activate convert to paid at a strong 36% rate, suggesting the product delivers value once users get past initial setup.</p><p>Overall visitor-to-paid conversion sits at <strong>6.5%</strong>, competitive for a self-serve SaaS product.</p>",
+      "viz": "<div class=\"fn\"><div class=\"fn-stage\"><div class=\"fn-bar\" style=\"background: #3b82f6;\" data-w=\"100%\"></div><div class=\"fn-info\"><span class=\"fn-name\">Visitors</span><span class=\"fn-sub\">24,500 unique</span></div><span class=\"fn-rate\" style=\"background: rgba(59,130,246,0.12); color: #3b82f6;\">100%</span></div><div class=\"fn-drop\" data-text=\"\u2193 68% drop-off\"></div><div class=\"fn-stage\"><div class=\"fn-bar\" style=\"background: #8b5cf6;\" data-w=\"32%\"></div><div class=\"fn-info\"><span class=\"fn-name\">Signups</span><span class=\"fn-sub\">7,840 accounts</span></div><span class=\"fn-rate\" style=\"background: rgba(139,92,246,0.12); color: #8b5cf6;\">32%</span></div><div class=\"fn-drop\" data-text=\"\u2193 44% drop-off\"></div><div class=\"fn-stage\"><div class=\"fn-bar\" style=\"background: #ea580c;\" data-w=\"18%\"></div><div class=\"fn-info\"><span class=\"fn-name\">Activated</span><span class=\"fn-sub\">4,410 onboarded</span></div><span class=\"fn-rate\" style=\"background: rgba(234,88,12,0.12); color: #ea580c;\">18%</span></div><div class=\"fn-drop\" data-text=\"\u2193 64% drop-off\"></div><div class=\"fn-stage\"><div class=\"fn-bar\" style=\"background: #22c55e;\" data-w=\"6.5%\"></div><div class=\"fn-info\"><span class=\"fn-name\">Paying</span><span class=\"fn-sub\">1,590 customers</span></div><span class=\"fn-rate\" style=\"background: rgba(34,197,94,0.12); color: #22c55e;\">6.5%</span></div></div>",
+      "script": "var stages = container.querySelectorAll('.fn-stage');\nvar drops = container.querySelectorAll('.fn-drop');\nstages.forEach(function(s, i) {\n  setTimeout(function() {\n    s.classList.add('visible');\n    var bar = s.querySelector('.fn-bar');\n    bar.style.width = bar.getAttribute('data-w');\n    if (i > 0 && drops[i - 1]) {\n      drops[i - 1].textContent = drops[i - 1].getAttribute('data-text');\n      drops[i - 1].classList.add('visible');\n    }\n  }, 200 + i * 180);\n});"
+    },
+    {
+      "label": "Activity",
+      "title": "Signup Heatmap",
+      "prose": "<p>Signups cluster heavily around weekday lunchtimes and early evenings. <strong>Tuesday 12\u2013\u20131pm</strong> is the single hottest slot, likely driven by users discovering the product during work breaks.</p><p>Weekend activity is uniformly low, suggesting a B2B-leaning user base. Late-night signups (10pm+) are near zero across all days.</p><p>This pattern informs ad scheduling — concentrating spend on weekday 11am\u20132pm captures peak intent with minimal waste.</p>",
+      "viz": "<div class=\"hm\"><div class=\"hm-grid\"><div class=\"hm-row\"><span></span><span class=\"hm-head\">Mon</span><span class=\"hm-head\">Tue</span><span class=\"hm-head\">Wed</span><span class=\"hm-head\">Thu</span><span class=\"hm-head\">Fri</span><span class=\"hm-head\">Sat</span><span class=\"hm-head\">Sun</span></div><div class=\"hm-row\"><span class=\"hm-label\">6\u2013\u20139am</span><span class=\"hm-cell\" data-val=\"42\" style=\"background:rgba(234,88,12,0.12)\"></span><span class=\"hm-cell\" data-val=\"38\" style=\"background:rgba(234,88,12,0.10)\"></span><span class=\"hm-cell\" data-val=\"45\" style=\"background:rgba(234,88,12,0.13)\"></span><span class=\"hm-cell\" data-val=\"40\" style=\"background:rgba(234,88,12,0.11)\"></span><span class=\"hm-cell\" data-val=\"35\" style=\"background:rgba(234,88,12,0.09)\"></span><span class=\"hm-cell\" data-val=\"12\" style=\"background:rgba(234,88,12,0.03)\"></span><span class=\"hm-cell\" data-val=\"8\" style=\"background:rgba(234,88,12,0.02)\"></span></div><div class=\"hm-row\"><span class=\"hm-label\">9\u2013\u201312pm</span><span class=\"hm-cell\" data-val=\"120\" style=\"background:rgba(234,88,12,0.45)\"></span><span class=\"hm-cell\" data-val=\"135\" style=\"background:rgba(234,88,12,0.52)\"></span><span class=\"hm-cell\" data-val=\"118\" style=\"background:rgba(234,88,12,0.44)\"></span><span class=\"hm-cell\" data-val=\"125\" style=\"background:rgba(234,88,12,0.48)\"></span><span class=\"hm-cell\" data-val=\"110\" style=\"background:rgba(234,88,12,0.40)\"></span><span class=\"hm-cell\" data-val=\"28\" style=\"background:rgba(234,88,12,0.07)\"></span><span class=\"hm-cell\" data-val=\"20\" style=\"background:rgba(234,88,12,0.05)\"></span></div><div class=\"hm-row\"><span class=\"hm-label\">12\u2013\u20133pm</span><span class=\"hm-cell\" data-val=\"180\" style=\"background:rgba(234,88,12,0.72)\"></span><span class=\"hm-cell\" data-val=\"210\" style=\"background:rgba(234,88,12,0.90)\"></span><span class=\"hm-cell\" data-val=\"175\" style=\"background:rgba(234,88,12,0.70)\"></span><span class=\"hm-cell\" data-val=\"190\" style=\"background:rgba(234,88,12,0.78)\"></span><span class=\"hm-cell\" data-val=\"160\" style=\"background:rgba(234,88,12,0.62)\"></span><span class=\"hm-cell\" data-val=\"35\" style=\"background:rgba(234,88,12,0.09)\"></span><span class=\"hm-cell\" data-val=\"22\" style=\"background:rgba(234,88,12,0.06)\"></span></div><div class=\"hm-row\"><span class=\"hm-label\">3\u2013\u20136pm</span><span class=\"hm-cell\" data-val=\"145\" style=\"background:rgba(234,88,12,0.56)\"></span><span class=\"hm-cell\" data-val=\"155\" style=\"background:rgba(234,88,12,0.60)\"></span><span class=\"hm-cell\" data-val=\"140\" style=\"background:rgba(234,88,12,0.54)\"></span><span class=\"hm-cell\" data-val=\"150\" style=\"background:rgba(234,88,12,0.58)\"></span><span class=\"hm-cell\" data-val=\"130\" style=\"background:rgba(234,88,12,0.50)\"></span><span class=\"hm-cell\" data-val=\"30\" style=\"background:rgba(234,88,12,0.08)\"></span><span class=\"hm-cell\" data-val=\"18\" style=\"background:rgba(234,88,12,0.04)\"></span></div><div class=\"hm-row\"><span class=\"hm-label\">6\u2013\u201310pm</span><span class=\"hm-cell\" data-val=\"85\" style=\"background:rgba(234,88,12,0.28)\"></span><span class=\"hm-cell\" data-val=\"92\" style=\"background:rgba(234,88,12,0.32)\"></span><span class=\"hm-cell\" data-val=\"78\" style=\"background:rgba(234,88,12,0.25)\"></span><span class=\"hm-cell\" data-val=\"88\" style=\"background:rgba(234,88,12,0.30)\"></span><span class=\"hm-cell\" data-val=\"95\" style=\"background:rgba(234,88,12,0.34)\"></span><span class=\"hm-cell\" data-val=\"45\" style=\"background:rgba(234,88,12,0.13)\"></span><span class=\"hm-cell\" data-val=\"40\" style=\"background:rgba(234,88,12,0.11)\"></span></div></div><div class=\"hm-scale\"><span>Low</span><div class=\"hm-scale-bar\"></div><span>High</span></div></div>",
+      "script": "var cells = container.querySelectorAll('.hm-cell');\ncells.forEach(function(c, i) {\n  setTimeout(function() {\n    c.classList.add('visible');\n  }, 50 + i * 20);\n});"
+    },
+    {
+      "label": "Channels",
+      "title": "Channel Quality Radar",
+      "prose": "<p>Not all acquisition channels are equal. The radar chart compares six dimensions across Q1 (orange) vs the previous quarter (blue).</p><p><strong>Organic search</strong> improved dramatically in volume and retention, driven by new SEO landing pages. <strong>Paid social</strong> scores high on volume but low on retention — users from Instagram ads churn 3x faster than organic users.</p><p>The ideal channel scores high on all axes. Organic search and referrals are closest to that ideal, while paid channels trade retention for volume.</p>",
+      "viz": "<div class=\"rd\"><div class=\"rd-chart\"><svg viewBox=\"0 0 300 300\" width=\"280\" height=\"280\"><g transform=\"translate(150,150)\"><circle class=\"rd-ring\" r=\"36\" /><circle class=\"rd-ring\" r=\"72\" /><circle class=\"rd-ring\" r=\"108\" /><line class=\"rd-axis\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"-115\" /><line class=\"rd-axis\" x1=\"0\" y1=\"0\" x2=\"99.6\" y2=\"-57.5\" /><line class=\"rd-axis\" x1=\"0\" y1=\"0\" x2=\"99.6\" y2=\"57.5\" /><line class=\"rd-axis\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"115\" /><line class=\"rd-axis\" x1=\"0\" y1=\"0\" x2=\"-99.6\" y2=\"57.5\" /><line class=\"rd-axis\" x1=\"0\" y1=\"0\" x2=\"-99.6\" y2=\"-57.5\" /><polygon class=\"rd-poly prev\" points=\"0,-65 69,-44 58,47 0,75 -43,52 -58,-37\" /><polygon class=\"rd-poly cur\" points=\"0,-97 76,-35 52,62 0,54 -86,50 -81,-29\" /><circle class=\"rd-dot prev\" cx=\"0\" cy=\"-65\" /><circle class=\"rd-dot prev\" cx=\"69\" cy=\"-44\" /><circle class=\"rd-dot prev\" cx=\"58\" cy=\"47\" /><circle class=\"rd-dot prev\" cx=\"0\" cy=\"75\" /><circle class=\"rd-dot prev\" cx=\"-43\" cy=\"52\" /><circle class=\"rd-dot prev\" cx=\"-58\" cy=\"-37\" /><circle class=\"rd-dot cur\" cx=\"0\" cy=\"-97\" /><circle class=\"rd-dot cur\" cx=\"76\" cy=\"-35\" /><circle class=\"rd-dot cur\" cx=\"52\" cy=\"62\" /><circle class=\"rd-dot cur\" cx=\"0\" cy=\"54\" /><circle class=\"rd-dot cur\" cx=\"-86\" cy=\"50\" /><circle class=\"rd-dot cur\" cx=\"-81\" cy=\"-29\" /><text class=\"rd-lbl\" x=\"0\" y=\"-122\">Volume</text><text class=\"rd-lbl\" x=\"115\" y=\"-57\">Speed</text><text class=\"rd-lbl\" x=\"115\" y=\"68\">Cost Eff.</text><text class=\"rd-lbl\" x=\"0\" y=\"132\">Retention</text><text class=\"rd-lbl\" x=\"-115\" y=\"68\">Quality</text><text class=\"rd-lbl\" x=\"-115\" y=\"-57\">LTV</text></g></svg></div><div class=\"rd-legend\"><span><span class=\"rd-legend-dot\" style=\"background:#ea580c\"></span>Q1 (current)</span><span><span class=\"rd-legend-dot\" style=\"background:#3b82f6\"></span>Q4 (previous)</span></div></div>",
+      "script": "var polys = container.querySelectorAll('.rd-poly');\nvar dots = container.querySelectorAll('.rd-dot');\npolys.forEach(function(p, i) {\n  setTimeout(function() { p.classList.add('visible'); }, 200 + i * 300);\n});\ndots.forEach(function(d, i) {\n  setTimeout(function() { d.classList.add('visible'); }, 400);\n});"
+    },
+    {
+      "label": "Revenue",
+      "title": "Revenue Waterfall",
+      "prose": "<p>Revenue grew from <strong>$180k</strong> base to <strong>$200k</strong> net — a healthy 11% increase. The waterfall breaks down each contributing factor.</p><p>New customer acquisition added <strong>$40k</strong>, and upsells from existing accounts contributed another <strong>$15k</strong>. These gains were partially offset by <strong>$25k</strong> in churn and <strong>$10k</strong> in downgrades.</p><p>The churn figure is the primary concern — it erodes 63% of new revenue. Reducing churn by even 20% would shift net growth from 11% to 14%.</p>",
+      "viz": "<div class=\"wf\"><div class=\"wf-chart\"><div class=\"wf-col\"><div class=\"wf-val\" data-v=\"$180k\"></div><div class=\"wf-block total\" style=\"height: 76.6%;\" data-h=\"76.6%\"></div><span class=\"wf-lbl\">Base</span></div><div class=\"wf-col\"><div class=\"wf-val\" data-v=\"+$40k\"></div><div class=\"wf-block add\" style=\"height: 17%; margin-bottom: 76.6%;\" data-h=\"17%\"></div><span class=\"wf-lbl\">New</span></div><div class=\"wf-col\"><div class=\"wf-val\" data-v=\"+$15k\"></div><div class=\"wf-block add\" style=\"height: 6.4%; margin-bottom: 93.6%;\" data-h=\"6.4%\"></div><span class=\"wf-lbl\">Upsell</span></div><div class=\"wf-col\"><div class=\"wf-val\" data-v=\"-$25k\"></div><div class=\"wf-block sub\" style=\"height: 10.6%; margin-bottom: 85.1%;\" data-h=\"10.6%\"></div><span class=\"wf-lbl\">Churn</span></div><div class=\"wf-col\"><div class=\"wf-val\" data-v=\"-$10k\"></div><div class=\"wf-block sub\" style=\"height: 4.3%; margin-bottom: 85.1%;\" data-h=\"4.3%\"></div><span class=\"wf-lbl\">Down</span></div><div class=\"wf-col\"><div class=\"wf-val\" data-v=\"$200k\"></div><div class=\"wf-block total\" style=\"height: 85.1%;\" data-h=\"85.1%\"></div><span class=\"wf-lbl\">Net</span></div></div></div>",
+      "script": "var blocks = container.querySelectorAll('.wf-block');\nvar vals = container.querySelectorAll('.wf-val');\nblocks.forEach(function(b, i) {\n  var h = b.style.height;\n  b.style.height = '0';\n  setTimeout(function() {\n    b.style.height = h;\n    b.classList.add('visible');\n  }, 150 + i * 120);\n});\nvals.forEach(function(v, i) {\n  setTimeout(function() {\n    v.textContent = v.getAttribute('data-v');\n    v.classList.add('visible');\n  }, 300 + i * 120);\n});"
+    },
+    {
+      "label": "Health",
+      "title": "System Health Gauges",
+      "prose": "<p>Platform health metrics show the infrastructure is holding up well under growth. <strong>Uptime</strong> at 99.7% includes two brief outages totaling 2.2 hours — both from database connection pool exhaustion during traffic spikes.</p><p><strong>Response time</strong> (P95) sits at 210ms, well within the 500ms target. <strong>Error rate</strong> is low at 0.3%, though upload-related 504s account for nearly half of all errors.</p><p><strong>Throughput headroom</strong> at 62% means the system can absorb roughly 1.6x current load before needing horizontal scaling.</p>",
+      "viz": "<div class=\"gg-grid\"><div class=\"gg-item\"><svg viewBox=\"0 0 120 75\" width=\"120\" height=\"75\"><path class=\"gg-track\" d=\"M 15 65 A 45 45 0 0 1 105 65\" /><path class=\"gg-fill\" d=\"M 15 65 A 45 45 0 0 1 105 65\" stroke=\"#22c55e\" data-pct=\"99.7\" style=\"stroke-dasharray: 141.4; stroke-dashoffset: 141.4;\" /><text class=\"gg-val\" x=\"60\" y=\"60\" data-v=\"99.7%\"></text></svg><div class=\"gg-lbl\">Uptime</div><div class=\"gg-sub\">Target: 99.9%</div></div><div class=\"gg-item\"><svg viewBox=\"0 0 120 75\" width=\"120\" height=\"75\"><path class=\"gg-track\" d=\"M 15 65 A 45 45 0 0 1 105 65\" /><path class=\"gg-fill\" d=\"M 15 65 A 45 45 0 0 1 105 65\" stroke=\"#22c55e\" data-pct=\"92\" style=\"stroke-dasharray: 141.4; stroke-dashoffset: 141.4;\" /><text class=\"gg-val\" x=\"60\" y=\"60\" data-v=\"210ms\"></text></svg><div class=\"gg-lbl\">P95 Latency</div><div class=\"gg-sub\">Target: &lt;500ms</div></div><div class=\"gg-item\"><svg viewBox=\"0 0 120 75\" width=\"120\" height=\"75\"><path class=\"gg-track\" d=\"M 15 65 A 45 45 0 0 1 105 65\" /><path class=\"gg-fill\" d=\"M 15 65 A 45 45 0 0 1 105 65\" stroke=\"#22c55e\" data-pct=\"97\" style=\"stroke-dasharray: 141.4; stroke-dashoffset: 141.4;\" /><text class=\"gg-val\" x=\"60\" y=\"60\" data-v=\"0.3%\"></text></svg><div class=\"gg-lbl\">Error Rate</div><div class=\"gg-sub\">Target: &lt;1%</div></div><div class=\"gg-item\"><svg viewBox=\"0 0 120 75\" width=\"120\" height=\"75\"><path class=\"gg-track\" d=\"M 15 65 A 45 45 0 0 1 105 65\" /><path class=\"gg-fill\" d=\"M 15 65 A 45 45 0 0 1 105 65\" stroke=\"#ea580c\" data-pct=\"62\" style=\"stroke-dasharray: 141.4; stroke-dashoffset: 141.4;\" /><text class=\"gg-val\" x=\"60\" y=\"60\" data-v=\"62%\"></text></svg><div class=\"gg-lbl\">Headroom</div><div class=\"gg-sub\">Scale at &lt;30%</div></div></div>",
+      "script": "var items = container.querySelectorAll('.gg-item');\nitems.forEach(function(item, i) {\n  setTimeout(function() {\n    item.classList.add('visible');\n    var fill = item.querySelector('.gg-fill');\n    var pct = parseFloat(fill.getAttribute('data-pct')) / 100;\n    var totalLen = 141.4;\n    fill.style.strokeDashoffset = totalLen * (1 - pct);\n    var valEl = item.querySelector('.gg-val');\n    valEl.textContent = valEl.getAttribute('data-v');\n  }, 200 + i * 150);\n});"
+    }
+  ]
+}