emberflow-skills 1.7.0 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/package.json +2 -2
  2. package/skills/ember-publish/SKILL.md +1 -1
  3. package/skills/ember-publish-doc/SKILL.md +97 -55
  4. package/skills/ember-publish-explainer/templates/dashboard-explainer.json +1 -1
  5. package/skills/ember-publish-explainer/templates/project-overview-explainer.json +2 -2
  6. package/skills/ember-publish-space/SKILL.md +3 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "emberflow-skills",
3
- "version": "1.7.0",
3
+ "version": "1.8.0",
4
4
  "description": "Install Emberflow skills for AI coding tools",
5
5
  "bin": {
6
6
  "emberflow-skills": "./bin/install.js"
@@ -13,7 +13,7 @@
13
13
  "mcp",
14
14
  "ai",
15
15
  "documentation",
16
- "mermaid",
16
+ "diagrams",
17
17
  "json",
18
18
  "json-explorer"
19
19
  ],
package/skills/ember-publish/SKILL.md CHANGED
@@ -10,7 +10,7 @@ Publish content to Emberflow at **https://emberflow.ai**. This skill automatical
10
10
 
11
11
  | Content | Published as | Equivalent skill |
12
12
  |---------|-------------|-----------------|
13
- | A topic or markdown description | Markdown document with Mermaid diagrams | `/ember-publish-doc` |
13
+ | A topic or markdown description | Markdown document with emberDiagrams | `/ember-publish-doc` |
14
14
  | JSON data or a `.json` file | Interactive JSON explorer with tree + graph | `/ember-publish-json` |
15
15
  | A directory of `.md` files | Multi-page docs site (Space) with sidebar nav | `/ember-publish-space` |
16
16
  | An interactive visual explanation of a concept | Interactive slide-based HTML explainer | `/ember-publish-explainer` |
package/skills/ember-publish-doc/SKILL.md CHANGED
@@ -1,12 +1,12 @@
1
1
  ---
2
2
  name: ember-publish-doc
3
- description: Publish a markdown document with Mermaid diagrams to Emberflow for hosted viewing with comments
3
+ description: Publish a markdown document with emberDiagrams to Emberflow for hosted viewing with comments
4
4
  argument-hint: [topic or description of what to document]
5
5
  ---
6
6
 
7
7
  # Emberflow Document Publisher
8
8
 
9
- Create a polished markdown document and publish it to Emberflow — a hosted viewer at **https://emberflow.ai** with Mermaid diagram rendering (zoom/pan/fullscreen), dark mode, font selection, and per-block commenting.
9
+ Create a polished markdown document and publish it to Emberflow — a hosted viewer at **https://emberflow.ai** with emberDiagrams (auto-layout interactive diagrams), dark mode, font selection, and per-block commenting.
10
10
 
11
11
  ## Step 1: Create the Markdown File
12
12
 
@@ -17,43 +17,88 @@ Write a `.md` file in the current project. The document should follow these conv
17
17
  - Use `##` and `###` for sections — these become commentable blocks in the viewer
18
18
  - Keep paragraphs concise — each paragraph, list, table, blockquote, and heading is independently commentable by readers
19
19
 
20
- ### Mermaid Diagrams
20
+ ### emberDiagrams
21
21
 
22
- Use fenced code blocks with the `mermaid` language tag. The viewer renders them with zoom, pan, and fullscreen controls.
22
+ Use inline `<explainer>` blocks for interactive diagrams. The platform auto-lays-out nodes using the dagre graph engine — no manual coordinates needed.
23
23
 
24
- ````markdown
25
- ```mermaid
26
- graph LR
27
- A[Start] --> B{Decision}
28
- B -->|Yes| C[Action]
29
- B -->|No| D[Other Action]
24
+ #### Declarative Diagrams (auto-layout)
25
+
26
+ Set the `<explainer>` type to `diagram` and provide a JSON object with `nodes` and `edges`:
27
+
28
+ ```markdown
29
+ <explainer type="diagram">
30
+ {
31
+ "nodes": [
32
+ { "id": "client", "label": "Web Client", "style": "blue" },
33
+ { "id": "api", "label": "API Gateway", "style": "orange" },
34
+ { "id": "db", "label": "PostgreSQL", "style": "green", "icon": "database" }
35
+ ],
36
+ "edges": [
37
+ { "from": "client", "to": "api", "label": "REST" },
38
+ { "from": "api", "to": "db" }
39
+ ]
40
+ }
41
+ </explainer>
30
42
  ```
31
- ````
32
43
 
33
- Supported diagram types:
34
- - `graph` / `flowchart` — flow diagrams (LR, TD, etc.)
35
- - `sequenceDiagram` — interaction sequences
36
- - `classDiagram` — class relationships
37
- - `stateDiagram-v2` — state machines
38
- - `erDiagram` — entity relationships
39
- - `gantt` — project timelines
40
- - `pie` — pie charts
41
- - `gitgraph` — git branch visualizations
42
- - `mindmap` — mind maps
43
- - `timeline` — chronological events
44
-
45
- #### Dark Mode Color Palette
46
-
47
- The viewer auto-remaps these light colors to dark equivalents. Use them for best cross-theme rendering:
48
-
49
- | Color | Use For |
50
- |---|---|
51
- | `#e1f5fe` | Blue backgrounds |
52
- | `#e8f5e9` | Green backgrounds |
53
- | `#fff3e0` | Orange backgrounds |
54
- | `#fce4ec` | Red backgrounds |
55
- | `#f3e5f5` | Purple backgrounds |
56
- | `#fff9c4` | Yellow backgrounds |
44
+ Node styles: `blue`, `green`, `orange`, `red`, `purple` — these are color-coded with matching borders and tinted backgrounds.
45
+
46
+ Node icons (optional): `server`, `database`, `browser`, `code`, `cloud`, `lock`, `user`, `file`, `api`, `cpu`, `network`, `zap`, `box`.
47
+
48
+ For grouped architecture diagrams, add a `groups` array:
49
+
50
+ ```markdown
51
+ <explainer type="diagram">
52
+ {
53
+ "groups": [
54
+ { "label": "Frontend", "nodes": ["client", "cdn"] },
55
+ { "label": "Backend", "nodes": ["api", "worker", "db"] }
56
+ ],
57
+ "nodes": [
58
+ { "id": "client", "label": "React App", "icon": "browser" },
59
+ { "id": "cdn", "label": "CDN", "icon": "cloud" },
60
+ { "id": "api", "label": "API Server", "icon": "server" },
61
+ { "id": "worker", "label": "Worker", "icon": "cpu" },
62
+ { "id": "db", "label": "Database", "icon": "database" }
63
+ ],
64
+ "edges": [
65
+ { "from": "client", "to": "api" },
66
+ { "from": "cdn", "to": "client" },
67
+ { "from": "api", "to": "worker" },
68
+ { "from": "api", "to": "db" }
69
+ ]
70
+ }
71
+ </explainer>
72
+ ```
73
+
74
+ #### Custom HTML Diagrams
75
+
76
+ For richer visualisations, use raw HTML with `<style>` and `<script>`:
77
+
78
+ ```markdown
79
+ <explainer>
80
+ <style>
81
+ .my-viz { display: flex; gap: 12px; }
82
+ .my-card { padding: 16px; border: 1px solid var(--border); border-radius: 10px; }
83
+ </style>
84
+ <div class="my-viz">
85
+ <div class="my-card">Step 1</div>
86
+ <div class="my-card">Step 2</div>
87
+ </div>
88
+ <script>
89
+ var cards = container.querySelectorAll('.my-card');
90
+ cards.forEach(function(c, i) {
91
+ c.style.opacity = '0';
92
+ setTimeout(function() {
93
+ c.style.transition = 'opacity 0.3s';
94
+ c.style.opacity = '1';
95
+ }, 100 + i * 80);
96
+ });
97
+ </script>
98
+ </explainer>
99
+ ```
100
+
101
+ Use CSS custom properties (`var(--bg)`, `var(--text)`, `var(--border)`, `var(--link)`, etc.) for theme compatibility.
57
102
 
58
103
  ### Tables, Code, Blockquotes
59
104
 
@@ -78,26 +123,23 @@ Brief introduction to the system.
78
123
 
79
124
  ## Components
80
125
 
81
- ```mermaid
82
- graph TD
83
- Client[Web Client] --> API[API Gateway]
84
- API --> Auth[Auth Service]
85
- API --> Docs[Doc Service]
86
- Docs --> DB[(PostgreSQL)]
87
- ```
88
-
89
- ## Request Flow
90
-
91
- ```mermaid
92
- sequenceDiagram
93
- participant C as Client
94
- participant G as Gateway
95
- participant S as Service
96
- C->>G: Request
97
- G->>S: Forward
98
- S->>G: Response
99
- G->>C: Response
100
- ```
126
+ <explainer type="diagram">
127
+ {
128
+ "nodes": [
129
+ { "id": "client", "label": "Web Client", "style": "blue", "icon": "browser" },
130
+ { "id": "api", "label": "API Gateway", "style": "orange", "icon": "server" },
131
+ { "id": "auth", "label": "Auth Service", "style": "purple", "icon": "lock" },
132
+ { "id": "docs", "label": "Doc Service", "style": "green", "icon": "file" },
133
+ { "id": "db", "label": "PostgreSQL", "style": "blue", "icon": "database" }
134
+ ],
135
+ "edges": [
136
+ { "from": "client", "to": "api" },
137
+ { "from": "api", "to": "auth" },
138
+ { "from": "api", "to": "docs" },
139
+ { "from": "docs", "to": "db" }
140
+ ]
141
+ }
142
+ </explainer>
101
143
 
102
144
  ## Data Model
103
145
 
package/skills/ember-publish-explainer/templates/dashboard-explainer.json CHANGED
@@ -11,7 +11,7 @@
11
11
  {
12
12
  "label": "Latency",
13
13
  "title": "Response Time",
14
- "prose": "<p>Response time measures the P95 latency for each service. The <code>Upload</code> service is the slowest at <code>340ms</code> — expected for large file operations.</p><p>The CDN layer is the fastest at <code>12ms</code>, serving cached static assets from the edge. Most user-facing requests never hit the origin server.</p><p>The SSR pipeline at <code>210ms</code> is the main optimization target — server-side rendering of markdown with Mermaid diagrams is CPU-intensive.</p>",
14
+ "prose": "<p>Response time measures the P95 latency for each service. The <code>Upload</code> service is the slowest at <code>340ms</code> — expected for large file operations.</p><p>The CDN layer is the fastest at <code>12ms</code>, serving cached static assets from the edge. Most user-facing requests never hit the origin server.</p><p>The SSR pipeline at <code>210ms</code> is the main optimization target — server-side rendering of markdown with emberDiagrams diagrams is CPU-intensive.</p>",
15
15
  "viz": "<div class=\"viz-inner\"><div class=\"chart-header\"><h3>Response Time</h3><p>Per-service breakdown (ms)</p></div><div class=\"chart-bars\"><div class=\"bar-group\"><div class=\"bar\" style=\"height: 0%; background: #22c55e;\"><span class=\"bar-value\">45ms</span></div><div class=\"bar-label\">Auth</div></div><div class=\"bar-group\"><div class=\"bar\" style=\"height: 0%; background: #22c55e;\"><span class=\"bar-value\">120ms</span></div><div class=\"bar-label\">API</div></div><div class=\"bar-group\"><div class=\"bar\" style=\"height: 0%; background: #22c55e;\"><span class=\"bar-value\">85ms</span></div><div class=\"bar-label\">DB Query</div></div><div class=\"bar-group\"><div class=\"bar\" style=\"height: 0%; background: var(--accent, #ea580c);\"><span class=\"bar-value\">210ms</span></div><div class=\"bar-label\">SSR</div></div><div class=\"bar-group\"><div class=\"bar\" style=\"height: 0%; background: #22c55e;\"><span class=\"bar-value\">12ms</span></div><div class=\"bar-label\">CDN</div></div><div class=\"bar-group\"><div class=\"bar\" style=\"height: 0%; background: #22c55e;\"><span class=\"bar-value\">35ms</span></div><div class=\"bar-label\">WebSocket</div></div><div class=\"bar-group\"><div class=\"bar\" style=\"height: 0%; background: var(--accent, #ea580c);\"><span class=\"bar-value\">180ms</span></div><div class=\"bar-label\">Search</div></div><div class=\"bar-group\"><div class=\"bar\" style=\"height: 0%; background: #dc2626;\"><span class=\"bar-value\">340ms</span></div><div class=\"bar-label\">Upload</div></div></div><div class=\"chart-insight\"><strong>P95 latency dropped 62%</strong> after migrating to edge functions. The CDN layer now handles static asset responses in under 20ms, freeing the origin for dynamic requests.</div></div>",
16
16
  "script": "var bars = container.querySelectorAll('.bar');\nvar heights = [11.25, 30, 21.25, 52.5, 3, 8.75, 45, 85];\nvar i;\nfor (i = 0; i < bars.length; i++) {\n (function(index) {\n setTimeout(function() {\n bars[index].style.height = heights[index] + '%';\n }, 80 + index * 60);\n })(i);\n}"
17
17
  },
package/skills/ember-publish-explainer/templates/project-overview-explainer.json CHANGED
@@ -4,7 +4,7 @@
4
4
  {
5
5
  "label": "Overview",
6
6
  "title": "Emberflow Platform",
7
- "prose": "<p>Emberflow is a document publishing platform built for developer tools and technical content. It turns markdown into hosted, interactive pages with comments, diagrams, and AI-powered features.</p><p>This overview covers the project timeline, budget allocation, and current risk register as of August 2025.</p><div class=\"callout\"><strong>Status:</strong> Core platform shipped. Now building interactive visual explainers to replace static Mermaid diagrams.</div>",
7
+ "prose": "<p>Emberflow is a document publishing platform built for developer tools and technical content. It turns markdown into hosted, interactive pages with comments, diagrams, and AI-powered features.</p><p>This overview covers the project timeline, budget allocation, and current risk register as of August 2025.</p><div class=\"callout\"><strong>Status:</strong> Core platform shipped. Now building interactive visual explainers to replace static diagrams.</div>",
8
8
  "viz": "<div class=\"kpi-grid\"><div class=\"kpi-card\"><div class=\"kpi-label\">Timeline</div><div class=\"kpi-value\">10 mo</div><div class=\"kpi-sub\" style=\"color:var(--text-muted)\">Jan — Oct 2025</div></div><div class=\"kpi-card\"><div class=\"kpi-label\">Total Budget</div><div class=\"kpi-value\">$90K</div><div class=\"kpi-sub\" style=\"color:var(--text-muted)\">65% utilized</div></div><div class=\"kpi-card\"><div class=\"kpi-label\">Team Size</div><div class=\"kpi-value\">4</div><div class=\"kpi-sub\" style=\"color:var(--text-muted)\">2 eng, 1 design, 1 product</div></div><div class=\"kpi-card highlight\"><div class=\"kpi-label\">Current Phase</div><div class=\"kpi-value\">3 / 5</div><div class=\"kpi-sub\" style=\"color:var(--text-muted)\">Key Features</div></div></div><div class=\"timeline\" style=\"margin-top:8px\"><div class=\"tl-phase complete\"><div class=\"tl-dates\">Jan — Feb 2025</div><div class=\"tl-name\">Discovery &amp; Planning</div></div><div class=\"tl-phase complete\"><div class=\"tl-dates\">Mar — May 2025</div><div class=\"tl-name\">Core Platform</div></div><div class=\"tl-phase active\"><div class=\"tl-dates\">Jun — Aug 2025</div><div class=\"tl-name\">Key Features</div></div><div class=\"tl-phase active milestone\"><div class=\"tl-dates\">Aug — Sep 2025</div><div class=\"tl-name\">Interactive Visuals</div></div><div class=\"tl-phase\"><div class=\"tl-dates\">Oct 2025</div><div class=\"tl-name\">Public Launch</div></div></div>",
9
9
  "script": "var cards = container.querySelectorAll('.kpi-card');\ncards.forEach(function(card, i) {\n setTimeout(function() { card.classList.add('visible'); }, 120 + i * 80);\n});\nvar phases = container.querySelectorAll('.tl-phase');\nphases.forEach(function(el, i) {\n setTimeout(function() { el.classList.add('visible'); }, 500 + i * 80);\n});"
10
10
  },
@@ -12,7 +12,7 @@
12
12
  "label": "Timeline",
13
13
  "title": "Project Phases",
14
14
  "prose": "<p>The project is structured in five phases, from initial discovery through public launch. Each phase builds on the previous — no big-bang releases.</p><p>Phases 1-2 are complete. Phase 3 (key features) is 65% through, with the CLI, Spaces, and MCP integration shipped. Comments are in progress.</p><p>The interactive visuals initiative (Phase 4) is the current spike — exploring whether AI-generated HTML can replace static diagrams at production quality.</p>",
15
- "viz": "<div class=\"timeline\"><div class=\"tl-phase complete\"><div class=\"tl-dates\">Jan — Feb 2025</div><div class=\"tl-name\">Discovery &amp; Planning</div><div class=\"tl-desc\">Requirements, architecture, tech stack</div><div class=\"tl-bar\"><div class=\"tl-bar-fill\" data-width=\"100\" style=\"background:var(--green)\"></div></div><span class=\"tl-status\" style=\"background:var(--green-dim);color:var(--green)\">Complete</span></div><div class=\"tl-phase complete\"><div class=\"tl-dates\">Mar — May 2025</div><div class=\"tl-name\">Core Platform</div><div class=\"tl-desc\">Auth, publishing, document renderer</div><div class=\"tl-bar\"><div class=\"tl-bar-fill\" data-width=\"100\" style=\"background:var(--green)\"></div></div><span class=\"tl-status\" style=\"background:var(--green-dim);color:var(--green)\">Complete</span></div><div class=\"tl-phase active\"><div class=\"tl-dates\">Jun — Aug 2025</div><div class=\"tl-name\">Key Features</div><div class=\"tl-desc\">CLI, Spaces, MCP, comments</div><div class=\"tl-bar\"><div class=\"tl-bar-fill\" data-width=\"65\" style=\"background:var(--link)\"></div></div><span class=\"tl-status\" style=\"background:var(--ring);color:var(--link)\">65% done</span></div><div class=\"tl-phase active milestone\"><div class=\"tl-dates\">Aug — Sep 2025</div><div class=\"tl-name\">Interactive Visuals</div><div class=\"tl-desc\">Replace Mermaid with AI-generated explainers</div><div class=\"tl-bar\"><div class=\"tl-bar-fill\" data-width=\"20\" style=\"background:var(--link)\"></div></div><span class=\"tl-status\" style=\"background:var(--ring);color:var(--link)\">20% done</span></div><div class=\"tl-phase\"><div class=\"tl-dates\">Oct 2025</div><div class=\"tl-name\">Public Launch</div><div class=\"tl-desc\">Open beta, pricing, marketing site</div><div class=\"tl-bar\"><div class=\"tl-bar-fill\" data-width=\"0\" style=\"background:var(--text-muted)\"></div></div><span class=\"tl-status\" style=\"background:var(--bg);color:var(--text-muted);border:1px solid var(--border)\">Upcoming</span></div></div>",
15
+ "viz": "<div class=\"timeline\"><div class=\"tl-phase complete\"><div class=\"tl-dates\">Jan — Feb 2025</div><div class=\"tl-name\">Discovery &amp; Planning</div><div class=\"tl-desc\">Requirements, architecture, tech stack</div><div class=\"tl-bar\"><div class=\"tl-bar-fill\" data-width=\"100\" style=\"background:var(--green)\"></div></div><span class=\"tl-status\" style=\"background:var(--green-dim);color:var(--green)\">Complete</span></div><div class=\"tl-phase complete\"><div class=\"tl-dates\">Mar — May 2025</div><div class=\"tl-name\">Core Platform</div><div class=\"tl-desc\">Auth, publishing, document renderer</div><div class=\"tl-bar\"><div class=\"tl-bar-fill\" data-width=\"100\" style=\"background:var(--green)\"></div></div><span class=\"tl-status\" style=\"background:var(--green-dim);color:var(--green)\">Complete</span></div><div class=\"tl-phase active\"><div class=\"tl-dates\">Jun — Aug 2025</div><div class=\"tl-name\">Key Features</div><div class=\"tl-desc\">CLI, Spaces, MCP, comments</div><div class=\"tl-bar\"><div class=\"tl-bar-fill\" data-width=\"65\" style=\"background:var(--link)\"></div></div><span class=\"tl-status\" style=\"background:var(--ring);color:var(--link)\">65% done</span></div><div class=\"tl-phase active milestone\"><div class=\"tl-dates\">Aug — Sep 2025</div><div class=\"tl-name\">Interactive Visuals</div><div class=\"tl-desc\">Replace emberDiagrams with AI-generated explainers</div><div class=\"tl-bar\"><div class=\"tl-bar-fill\" data-width=\"20\" style=\"background:var(--link)\"></div></div><span class=\"tl-status\" style=\"background:var(--ring);color:var(--link)\">20% done</span></div><div class=\"tl-phase\"><div class=\"tl-dates\">Oct 2025</div><div class=\"tl-name\">Public Launch</div><div class=\"tl-desc\">Open beta, pricing, marketing site</div><div class=\"tl-bar\"><div class=\"tl-bar-fill\" data-width=\"0\" style=\"background:var(--text-muted)\"></div></div><span class=\"tl-status\" style=\"background:var(--bg);color:var(--text-muted);border:1px solid var(--border)\">Upcoming</span></div></div>",
16
16
  "script": "var phases = container.querySelectorAll('.tl-phase');\nphases.forEach(function(el, i) {\n setTimeout(function() {\n el.classList.add('visible');\n var fill = el.querySelector('.tl-bar-fill');\n if (fill) setTimeout(function() { fill.style.width = fill.getAttribute('data-width') + '%'; }, 200);\n }, 100 + i * 100);\n});"
17
17
  },
18
18
  {
package/skills/ember-publish-space/SKILL.md CHANGED
@@ -6,7 +6,9 @@ argument-hint: [directory path or file list]
6
6
 
7
7
  # Emberflow Space Publisher
8
8
 
9
- Publish a collection of markdown files as an **Emberflow Space** — a multi-page docs site at **https://emberflow.ai** with sidebar navigation, Mermaid diagram rendering, dark mode, and per-block commenting.
9
+ Publish a collection of markdown files as an **Emberflow Space** — a multi-page docs site at **https://emberflow.ai** with sidebar navigation, emberDiagrams, dark mode, and per-block commenting.
10
+
11
+ Each markdown page in a Space supports inline `<explainer>` diagram blocks — use `<explainer type="diagram">` for auto-layout architecture diagrams, or raw HTML `<explainer>` blocks for custom visualisations. See the `/ember-publish-doc` skill for the full emberDiagrams syntax reference.
10
12
 
11
13
  ## Step 1: Collect Files
12
14