emberflow-skills 1.8.0 → 1.9.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.
- package/package.json +1 -1
- package/skills/ember-publish-doc/SKILL.md +116 -68
package/package.json
CHANGED
|
@@ -19,33 +19,101 @@ Write a `.md` file in the current project. The document should follow these conv
|
|
|
19
19
|
|
|
20
20
|
### emberDiagrams
|
|
21
21
|
|
|
22
|
-
Use inline `<explainer>` blocks for interactive
|
|
22
|
+
Use inline `<explainer>` blocks for interactive visualisations. **Prefer custom HTML blocks** — they produce more visually striking, varied results. Only use `type="diagram"` for large architecture diagrams with 8+ nodes where auto-layout is genuinely needed.
|
|
23
23
|
|
|
24
|
-
####
|
|
24
|
+
#### Custom HTML Blocks (preferred)
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
Write HTML with `<style>` and `<script>` inside an `<explainer>` tag. This gives full creative control over layout, color, icons, and animation.
|
|
27
|
+
|
|
28
|
+
**Design rules:**
|
|
29
|
+
- Use CSS custom properties for theming: `var(--bg)`, `var(--bg-secondary)`, `var(--text)`, `var(--heading)`, `var(--text-muted)`, `var(--border)`, `var(--link)`
|
|
30
|
+
- Use inline SVGs with `stroke="currentColor"` for icons (16–20px, stroke-width 1.5)
|
|
31
|
+
- Color-code elements: blue `#3b82f6`, purple `#a855f7`, orange `#ea580c`, green `#22c55e`, red `#ef4444`
|
|
32
|
+
- Give colored elements a tinted background: `rgba(59,130,246,.1)` for blue, etc.
|
|
33
|
+
- Add staggered entrance animations via the `<script>` block
|
|
34
|
+
- Use `container` (provided by the platform) to scope all DOM queries
|
|
35
|
+
|
|
36
|
+
**Pattern: Vertical step flow** — use for sequential processes:
|
|
27
37
|
|
|
28
38
|
```markdown
|
|
29
|
-
<explainer
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}
|
|
39
|
+
<explainer>
|
|
40
|
+
<style>
|
|
41
|
+
.steps{display:flex;flex-direction:column;gap:0;max-width:400px;margin:0 auto;padding:8px 0}
|
|
42
|
+
.step{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1.5px solid var(--border);border-radius:10px;background:var(--bg)}
|
|
43
|
+
.step.blue{border-color:#3b82f6}.step.green{border-color:#22c55e}
|
|
44
|
+
.step-icon{width:28px;height:28px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:7px}
|
|
45
|
+
.step.blue .step-icon{background:rgba(59,130,246,.1)}
|
|
46
|
+
.step.blue .step-icon svg{color:#3b82f6}
|
|
47
|
+
.step-icon svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5}
|
|
48
|
+
.step-title{font-size:13px;font-weight:600;color:var(--heading)}
|
|
49
|
+
.step-desc{font-size:11px;color:var(--text-muted)}
|
|
50
|
+
.conn{display:flex;justify-content:center;padding:2px 0;margin-left:20px}
|
|
51
|
+
.conn svg{width:14px;height:14px;stroke:var(--text-muted);fill:none;stroke-width:1.5;opacity:.2}
|
|
52
|
+
</style>
|
|
53
|
+
<div class="steps">
|
|
54
|
+
<div class="step blue">
|
|
55
|
+
<div class="step-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg></div>
|
|
56
|
+
<div><div class="step-title">First step</div><div class="step-desc">Description here</div></div>
|
|
57
|
+
</div>
|
|
58
|
+
<div class="conn"><svg viewBox="0 0 24 24"><path d="M12 5v14M5 12l7 7 7-7"/></svg></div>
|
|
59
|
+
<div class="step green">
|
|
60
|
+
<div class="step-icon"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
|
|
61
|
+
<div><div class="step-title">Done</div></div>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
<script>
|
|
65
|
+
var els = container.querySelectorAll(".step,.conn");
|
|
66
|
+
els.forEach(function(el,i){el.style.opacity="0";el.style.transform="translateY(6px)";setTimeout(function(){el.style.transition="all .3s ease-out";el.style.opacity="1";el.style.transform="translateY(0)"},60+i*70)});
|
|
67
|
+
</script>
|
|
68
|
+
</explainer>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
**Pattern: Branching grid** — use for decision trees, routing, content type selection:
|
|
72
|
+
|
|
73
|
+
```markdown
|
|
74
|
+
<explainer>
|
|
75
|
+
<style>
|
|
76
|
+
.tree{display:flex;flex-direction:column;align-items:center;gap:0;padding:8px 0}
|
|
77
|
+
.root{padding:10px 18px;border:1.5px solid #ea580c;border-radius:10px;background:var(--bg);font-weight:600;color:var(--heading)}
|
|
78
|
+
.branches{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:360px}
|
|
79
|
+
.branch{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1.5px solid var(--border);border-radius:10px;background:var(--bg)}
|
|
80
|
+
.branch.blue{border-color:#3b82f6}
|
|
81
|
+
</style>
|
|
82
|
+
<div class="tree">
|
|
83
|
+
<div class="root">Router</div>
|
|
84
|
+
<div class="branches">
|
|
85
|
+
<div class="branch blue">Option A</div>
|
|
86
|
+
<div class="branch">Option B</div>
|
|
87
|
+
</div>
|
|
88
|
+
</div>
|
|
89
|
+
</explainer>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
**Pattern: Horizontal flow** — use for pipelines, data flow:
|
|
93
|
+
|
|
94
|
+
```markdown
|
|
95
|
+
<explainer>
|
|
96
|
+
<style>
|
|
97
|
+
.flow{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 0}
|
|
98
|
+
.node{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px;border:1.5px solid var(--border);border-radius:12px;background:var(--bg)}
|
|
99
|
+
.node.blue{border-color:#3b82f6}
|
|
100
|
+
.arrow{color:var(--text-muted);opacity:.2;font-size:18px}
|
|
101
|
+
</style>
|
|
102
|
+
<div class="flow">
|
|
103
|
+
<div class="node blue">Input</div>
|
|
104
|
+
<div class="arrow">→</div>
|
|
105
|
+
<div class="node">Process</div>
|
|
106
|
+
<div class="arrow">→</div>
|
|
107
|
+
<div class="node">Output</div>
|
|
108
|
+
</div>
|
|
41
109
|
</explainer>
|
|
42
110
|
```
|
|
43
111
|
|
|
44
|
-
|
|
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.
|
|
45
113
|
|
|
46
|
-
|
|
114
|
+
#### Declarative Diagrams (auto-layout, for complex architectures only)
|
|
47
115
|
|
|
48
|
-
For grouped architecture
|
|
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:
|
|
49
117
|
|
|
50
118
|
```markdown
|
|
51
119
|
<explainer type="diagram">
|
|
@@ -55,11 +123,11 @@ For grouped architecture diagrams, add a `groups` array:
|
|
|
55
123
|
{ "label": "Backend", "nodes": ["api", "worker", "db"] }
|
|
56
124
|
],
|
|
57
125
|
"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" }
|
|
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" }
|
|
63
131
|
],
|
|
64
132
|
"edges": [
|
|
65
133
|
{ "from": "client", "to": "api" },
|
|
@@ -71,34 +139,7 @@ For grouped architecture diagrams, add a `groups` array:
|
|
|
71
139
|
</explainer>
|
|
72
140
|
```
|
|
73
141
|
|
|
74
|
-
|
|
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.
|
|
142
|
+
Node styles: `blue`, `green`, `orange`, `red`, `purple`. Icons: `server`, `database`, `browser`, `code`, `cloud`, `lock`, `user`, `file`, `api`, `cpu`, `network`, `zap`, `box`.
|
|
102
143
|
|
|
103
144
|
### Tables, Code, Blockquotes
|
|
104
145
|
|
|
@@ -121,24 +162,31 @@ Standard GFM (GitHub Flavored Markdown) is fully supported:
|
|
|
121
162
|
|
|
122
163
|
Brief introduction to the system.
|
|
123
164
|
|
|
124
|
-
##
|
|
165
|
+
## Request Flow
|
|
125
166
|
|
|
126
|
-
<explainer
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
167
|
+
<explainer>
|
|
168
|
+
<style>
|
|
169
|
+
.rf-flow{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 0}
|
|
170
|
+
.rf-node{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px;border:1.5px solid var(--border);border-radius:12px;background:var(--bg);min-width:80px}
|
|
171
|
+
.rf-node.blue{border-color:#3b82f6}.rf-node.orange{border-color:#ea580c}.rf-node.green{border-color:#22c55e}
|
|
172
|
+
.rf-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:7px}
|
|
173
|
+
.rf-node.blue .rf-icon{background:rgba(59,130,246,.1)}
|
|
174
|
+
.rf-node.blue .rf-icon svg{color:#3b82f6}
|
|
175
|
+
.rf-node.orange .rf-icon{background:rgba(234,88,12,.1)}
|
|
176
|
+
.rf-node.orange .rf-icon svg{color:#ea580c}
|
|
177
|
+
.rf-node.green .rf-icon{background:rgba(34,197,94,.1)}
|
|
178
|
+
.rf-node.green .rf-icon svg{color:#22c55e}
|
|
179
|
+
.rf-icon svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5}
|
|
180
|
+
.rf-name{font-size:12px;font-weight:600;color:var(--heading)}
|
|
181
|
+
.rf-arrow{color:var(--text-muted);opacity:.2;font-size:18px}
|
|
182
|
+
</style>
|
|
183
|
+
<div class="rf-flow">
|
|
184
|
+
<div class="rf-node blue"><div class="rf-icon"><svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg></div><span class="rf-name">Client</span></div>
|
|
185
|
+
<div class="rf-arrow">→</div>
|
|
186
|
+
<div class="rf-node orange"><div class="rf-icon"><svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="6" rx="1"/><rect x="4" y="14" width="16" height="6" rx="1"/></svg></div><span class="rf-name">API</span></div>
|
|
187
|
+
<div class="rf-arrow">→</div>
|
|
188
|
+
<div class="rf-node green"><div class="rf-icon"><svg viewBox="0 0 24 24"><ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v14c0 1.66 3.58 3 8 3s8-1.34 8-3V5"/></svg></div><span class="rf-name">Database</span></div>
|
|
189
|
+
</div>
|
|
142
190
|
</explainer>
|
|
143
191
|
|
|
144
192
|
## Data Model
|