emberflow-skills 1.9.0 → 1.10.1

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "emberflow-skills",
3
- "version": "1.9.0",
3
+ "version": "1.10.1",
4
4
  "description": "Install Emberflow skills for AI coding tools",
5
5
  "bin": {
6
6
  "emberflow-skills": "./bin/install.js"
@@ -109,37 +109,17 @@ els.forEach(function(el,i){el.style.opacity="0";el.style.transform="translateY(6
109
109
  </explainer>
110
110
  ```
111
111
 
112
- **Vary your visualisations.** Don't use the same pattern for every diagram in a document. Mix vertical steps, horizontal flows, grids, and file trees depending on what the content calls for.
113
-
114
- #### Declarative Diagrams (auto-layout, for complex architectures only)
115
-
116
- For diagrams with **8+ nodes and grouped tiers** (e.g., "Frontend / Backend / Data" architecture), use `<explainer type="diagram">` which auto-computes layout via dagre:
117
-
118
- ```markdown
119
- <explainer type="diagram">
120
- {
121
- "groups": [
122
- { "label": "Frontend", "nodes": ["client", "cdn"] },
123
- { "label": "Backend", "nodes": ["api", "worker", "db"] }
124
- ],
125
- "nodes": [
126
- { "id": "client", "label": "React App", "style": "blue", "icon": "browser" },
127
- { "id": "cdn", "label": "CDN", "style": "blue", "icon": "cloud" },
128
- { "id": "api", "label": "API Server", "style": "orange", "icon": "server" },
129
- { "id": "worker", "label": "Worker", "style": "purple", "icon": "cpu" },
130
- { "id": "db", "label": "Database", "style": "green", "icon": "database" }
131
- ],
132
- "edges": [
133
- { "from": "client", "to": "api" },
134
- { "from": "cdn", "to": "client" },
135
- { "from": "api", "to": "worker" },
136
- { "from": "api", "to": "db" }
137
- ]
138
- }
139
- </explainer>
140
- ```
141
-
142
- Node styles: `blue`, `green`, `orange`, `red`, `purple`. Icons: `server`, `database`, `browser`, `code`, `cloud`, `lock`, `user`, `file`, `api`, `cpu`, `network`, `zap`, `box`.
112
+ **Vary your visualisations.** Each diagram in a document should use a different visual pattern mix vertical steps, horizontal flows, grids, trees, and custom layouts depending on what the content calls for.
113
+
114
+ **Match the pattern to the content:**
115
+ - Sequential process → vertical step flow
116
+ - Data pipeline or request flow horizontal flow with arrows
117
+ - Multiple options or categories → 2x2 grid or card layout
118
+ - Decision tree or routing → root node branching to options
119
+ - File/directory structure → monospace tree with file icons
120
+ - Comparison → side-by-side panels with contrasting colors
121
+ - Feature list → compact icon + label grid
122
+ - Timeline vertical timeline with dated markers
143
123
 
144
124
  ### Tables, Code, Blockquotes
145
125