@ztffn/presentation-generator-plugin 1.2.0 → 1.3.0

package/skills/pitch-reference/SKILL.md

@@ -1,164 +0,0 @@
----
-name: pitch-reference
-description: Reference example of a complete 7-node presentation graph JSON demonstrating key slide types and edge wiring.
----
-
-# Pitch Reference Example
-
-A 7-node presentation demonstrating key slide types. Each node shows a different design pattern the design agent should know how to produce.
-
-```json
-{
-  "_node_1_comment": "COVER NODE: centered, branded, brand font. Sets the context. No content-heavy text.",
-  "_node_2_comment": "CONTENT NODE: standard bullets, left-aligned (centered:false). Includes notes field for speaker context. The workhorse slide type.",
-  "_node_3_comment": "TWO-COLUMN NODE: layout:two-column splits on --- delimiter. Good for comparison or text+visual.",
-  "_node_4_comment": "INLINE CHART NODE: [chart:name] tag in content with charts record. Data supports the text argument.",
-  "_node_5_comment": "R3F SCENE NODE: type:r3f with scene config. lightText:true for dark background. Content overlays the 3D scene.",
-  "_node_6_comment": "BACKGROUND IMAGE NODE: Unsplash URL, overlay for readability, lightText. Mood-setting slide.",
-  "_node_7_comment": "CLOSING NODE: centered, branded, call to action. Mirrors cover structure.",
-
-  "nodes": [
-    {
-      "id": "cover",
-      "type": "huma",
-      "position": { "x": 0, "y": 0 },
-      "data": {
-        "label": "Graph-Based Presentations",
-        "topic": "Huma Showcase",
-        "content": "Non-linear storytelling for technical teams.\n\nNavigate with arrow keys. Press **down** to drill into any topic.",
-        "centered": true,
-        "brandFont": true,
-        "showBranding": true,
-        "brandingText": "huma.energy"
-      },
-      "style": { "width": 180, "height": 70 },
-      "measured": { "width": 180, "height": 70 }
-    },
-    {
-      "id": "problem",
-      "type": "huma",
-      "position": { "x": 240, "y": 0 },
-      "data": {
-        "label": "The Problem",
-        "topic": "01 / Problem",
-        "content": "## Linear tools break complex stories\n\n- Cannot branch based on audience questions\n- Skipping sections breaks the flow\n- Presenters get lost navigating dense topics\n- No private view for speaker notes during screen share\n\nEvery meeting is different. The presentation should adapt.",
-        "notes": "Pause here and ask: 'Does this match what you experience with your current tooling?' — their answer shapes how much time to spend on this node. If they push back, the drill-down below has the data. Key talking point: the fourth bullet is the one that resonates most with technical presenters.",
-        "centered": false
-      },
-      "style": { "width": 180, "height": 70 },
-      "measured": { "width": 180, "height": 70 }
-    },
-    {
-      "id": "value-detail",
-      "type": "huma",
-      "position": { "x": 240, "y": 150 },
-      "data": {
-        "label": "Value Breakdown",
-        "topic": "03 / Value",
-        "content": "## Flexible narratives\nAdapt flow to audience type and questions in real time\n\n---\n\n## Consistent style\nReuse front-end web styling and components directly\n\n## Professional delivery\nSpeaker notes and timing without the audience seeing them",
-        "layout": "two-column",
-        "centered": false
-      },
-      "style": { "width": 180, "height": 70 },
-      "measured": { "width": 180, "height": 70 }
-    },
-    {
-      "id": "value",
-      "type": "huma",
-      "position": { "x": 480, "y": 0 },
-      "data": {
-        "label": "The Value",
-        "topic": "03 / Value",
-        "content": "## Why this approach wins\n\n[chart:value]\n\nAdapt to the audience. Reuse web components. Deliver with confidence.",
-        "charts": {
-          "value": {
-            "chartType": "radar",
-            "data": [
-              { "axis": "Flexibility", "graph": 95, "traditional": 30 },
-              { "axis": "Visual Quality", "graph": 90, "traditional": 50 },
-              { "axis": "Interactivity", "graph": 85, "traditional": 20 },
-              { "axis": "Ease of Use", "graph": 60, "traditional": 90 },
-              { "axis": "Consistency", "graph": 85, "traditional": 40 },
-              { "axis": "Tech Signal", "graph": 95, "traditional": 15 }
-            ],
-            "config": {
-              "xKey": "axis",
-              "yKeys": ["graph", "traditional"],
-              "showGrid": true,
-              "showLegend": true
-            }
-          }
-        },
-        "centered": false
-      },
-      "style": { "width": 180, "height": 70 },
-      "measured": { "width": 180, "height": 70 }
-    },
-    {
-      "id": "feat-3d",
-      "type": "huma",
-      "position": { "x": 720, "y": 0 },
-      "data": {
-        "label": "3D Scenes",
-        "topic": "04 / Features",
-        "type": "r3f",
-        "scene": {
-          "component": "rotating-cube",
-          "controls": true,
-          "background": "#1a1a2e"
-        },
-        "content": "Interactive React Three Fiber scene.\n\nDrag to rotate. Scroll to zoom. Scenes load from a component registry.",
-        "lightText": true
-      },
-      "style": { "width": 180, "height": 70 },
-      "measured": { "width": 180, "height": 70 }
-    },
-    {
-      "id": "feat-bgimage",
-      "type": "huma",
-      "position": { "x": 960, "y": 0 },
-      "data": {
-        "label": "Background Image",
-        "topic": "04 / Features",
-        "content": "## Full-bleed imagery\n\nUpload any image as a slide background. Toggle overlay for text readability.\n\n- Cover/contain fit modes\n- Dark overlay toggle\n- Light text auto-detection",
-        "backgroundImage": "https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&q=80",
-        "backgroundImageFit": "cover",
-        "backgroundImageOverlay": true,
-        "lightText": true,
-        "centered": false
-      },
-      "style": { "width": 180, "height": 70 },
-      "measured": { "width": 180, "height": 70 }
-    },
-    {
-      "id": "end",
-      "type": "huma",
-      "position": { "x": 1200, "y": 0 },
-      "data": {
-        "label": "Get Started",
-        "content": "Fork this template to build your own.\n\nEvery slide, chart, and scene is editable in the graph editor.",
-        "centered": true,
-        "brandFont": true,
-        "showBranding": true,
-        "brandingText": "huma.energy"
-      },
-      "style": { "width": 180, "height": 70 },
-      "measured": { "width": 180, "height": 70 }
-    }
-  ],
-  "edges": [
-    { "id": "e-cover-problem", "source": "cover", "target": "problem", "sourceHandle": "s-right", "targetHandle": "t-left" },
-    { "id": "e-problem-cover", "source": "problem", "target": "cover", "sourceHandle": "s-left", "targetHandle": "t-right" },
-    { "id": "e-problem-value", "source": "problem", "target": "value", "sourceHandle": "s-right", "targetHandle": "t-left" },
-    { "id": "e-value-problem", "source": "value", "target": "problem", "sourceHandle": "s-left", "targetHandle": "t-right" },
-    { "id": "e-problem-detail", "source": "problem", "target": "value-detail", "sourceHandle": "s-bottom", "targetHandle": "t-top" },
-    { "id": "e-detail-problem", "source": "value-detail", "target": "problem", "sourceHandle": "s-top", "targetHandle": "t-bottom" },
-    { "id": "e-value-3d", "source": "value", "target": "feat-3d", "sourceHandle": "s-right", "targetHandle": "t-left" },
-    { "id": "e-3d-value", "source": "feat-3d", "target": "value", "sourceHandle": "s-left", "targetHandle": "t-right" },
-    { "id": "e-3d-bgimage", "source": "feat-3d", "target": "feat-bgimage", "sourceHandle": "s-right", "targetHandle": "t-left" },
-    { "id": "e-bgimage-3d", "source": "feat-bgimage", "target": "feat-3d", "sourceHandle": "s-left", "targetHandle": "t-right" },
-    { "id": "e-bgimage-end", "source": "feat-bgimage", "target": "end", "sourceHandle": "s-right", "targetHandle": "t-left" },
-    { "id": "e-end-bgimage", "source": "end", "target": "feat-bgimage", "sourceHandle": "s-left", "targetHandle": "t-right" }
-  ]
-}
-```

package/skills/positioning/SKILL.md

@@ -1,89 +0,0 @@
----
-name: positioning
-description: Grid system and placement rules for positioning nodes on the graph canvas.
----
-
-# Node Positioning
-
-How to place nodes on the graph canvas for a clean, readable layout in the editor.
-Position affects visual arrangement only — navigation is determined by edges.
-
-## Grid System
-
-| Parameter | Value |
-|---|---|
-| Horizontal spacing | 240px |
-| Vertical spacing | 150px |
-| Node width | 180px (in `style` and `measured`) |
-| Node height | 70px (in `style` and `measured`) |
-
-## Spine Row
-
-All spine nodes sit at `y: 0`, starting at `x: 0`, incrementing by 240 per node.
-
-```
-x:    0      240     480     720     960    1200
-y: 0  [Cover] [Problem] [Solution] [Value] [Features] [CTA]
-```
-
-## Drill-Down Rows
-
-Drill-down children are placed directly below their parent:
-
-- First level: `y: 150`
-- Second level: `y: 300`
-
-The first child inherits the parent's `x` position. Additional siblings at the same depth increment `x` by 240.
-
-```
-x:   240     480
-y:0  [Problem] [Solution]
-      ↓          ↓
-y:150 [Detail]  [How It Works]
-      ↓
-y:300 [Root Cause]
-```
-
-### Multiple Siblings in a Branch
-
-When a spine node has multiple drill-down children at the same depth:
-
-```
-x:   720     960
-y:0  [Value]
-      ↓
-y:150 [Case A]  [Case B]
-```
-
-- First child: same `x` as parent (720)
-- Second child: parent `x` + 240 (960)
-- Third child: parent `x` + 480 (1200)
-
-## Position Template
-
-```json
-{
-  "position": { "x": 0, "y": 0 }
-}
-```
-
-Quick reference for a 5-node spine with one drill-down each:
-
-| Node | x | y | Role |
-|---|---|---|---|
-| cover | 0 | 0 | Spine 1 |
-| problem | 240 | 0 | Spine 2 |
-| problem-detail | 240 | 150 | Drill-down under problem |
-| solution | 480 | 0 | Spine 3 |
-| solution-how | 480 | 150 | Drill-down under solution |
-| value | 720 | 0 | Spine 4 |
-| value-case | 720 | 150 | Drill-down under value |
-| cta | 960 | 0 | Spine 5 |
-
-## Rules
-
-1. Position reflects visual layout in the editor — it has no effect on navigation
-2. Navigation is determined solely by edges and their handle assignments
-3. Spine nodes must be at `y: 0` for visual clarity
-4. Drill-downs must be below their parent for the folder-tree metaphor to hold
-5. No two nodes should overlap (maintain at least 240px horizontal, 150px vertical separation)