haac-aikit 0.7.3 → 0.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.
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
Generate an HTML artifact for the current context using the html-artifacts skill.
|
|
2
|
+
|
|
3
|
+
## Usage
|
|
4
|
+
`/html [optional intent]`
|
|
5
|
+
|
|
6
|
+
## Steps
|
|
7
|
+
|
|
8
|
+
1. **Determine intent**
|
|
9
|
+
- If called with args (e.g. `/html code review of today's PR`): use the args as the intent.
|
|
10
|
+
- If called with no args: infer intent from the current conversation — what task is in progress, what was just discussed, what files are open.
|
|
11
|
+
|
|
12
|
+
2. **Pick the use-case pattern**
|
|
13
|
+
Using the `html-artifacts` skill, identify which of the five patterns fits:
|
|
14
|
+
Spec/Planning, Code Review, Report/Research, Prototype, or Custom Editor.
|
|
15
|
+
|
|
16
|
+
3. **Generate the artifact**
|
|
17
|
+
- Apply the built-in design system CSS tokens
|
|
18
|
+
- If `docs/aikit-html-design-system.html` exists in the project, read it first and inherit its CSS variable values
|
|
19
|
+
- Follow the structure guidance for the chosen pattern
|
|
20
|
+
- Pure HTML/CSS/JS only — no external CDN dependencies
|
|
21
|
+
|
|
22
|
+
4. **Save and report**
|
|
23
|
+
- Determine a short slug from the intent (e.g. `code-review-auth-pr`, `weekly-report`)
|
|
24
|
+
- Save to `.aikit/artifacts/<slug>-<timestamp>.html`
|
|
25
|
+
- Print the full path
|
|
26
|
+
- Suggest opening: `open <path>` (macOS) / `xdg-open <path>` (Linux)
|
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
<!-- Customize the CSS variables above. The model reads this file when generating HTML artifacts. -->
|
|
2
|
+
<!DOCTYPE html>
|
|
3
|
+
<html lang="en">
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>haac-aikit HTML Design System</title>
|
|
8
|
+
<style>
|
|
9
|
+
/* ─── Design tokens ────────────────────────────────────────────────────────
|
|
10
|
+
Edit these variables to retheme all HTML artifacts generated by the model.
|
|
11
|
+
──────────────────────────────────────────────────────────────────────── */
|
|
12
|
+
:root {
|
|
13
|
+
--color-bg: #0f1117;
|
|
14
|
+
--color-surface: #1a1d27;
|
|
15
|
+
--color-border: #2e3143;
|
|
16
|
+
--color-text: #e2e8f0;
|
|
17
|
+
--color-muted: #8892a4;
|
|
18
|
+
--color-accent: #6366f1;
|
|
19
|
+
--color-ok: #22c55e;
|
|
20
|
+
--color-warn: #f59e0b;
|
|
21
|
+
--color-error: #ef4444;
|
|
22
|
+
--radius: 6px;
|
|
23
|
+
--font-sans: system-ui, -apple-system, sans-serif;
|
|
24
|
+
--font-mono: "JetBrains Mono", "Fira Code", monospace;
|
|
25
|
+
--space: 4px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/* ─── Reset & base ─────────────────────────────────────────────────────── */
|
|
29
|
+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
30
|
+
body {
|
|
31
|
+
background: var(--color-bg);
|
|
32
|
+
color: var(--color-text);
|
|
33
|
+
font-family: var(--font-sans);
|
|
34
|
+
font-size: 14px;
|
|
35
|
+
line-height: 1.6;
|
|
36
|
+
padding: calc(var(--space) * 8);
|
|
37
|
+
max-width: 900px;
|
|
38
|
+
margin: 0 auto;
|
|
39
|
+
}
|
|
40
|
+
h1, h2, h3 { font-weight: 600; margin-bottom: calc(var(--space) * 3); }
|
|
41
|
+
h1 { font-size: 1.5rem; margin-bottom: calc(var(--space) * 6); }
|
|
42
|
+
h2 { font-size: 1.1rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: calc(var(--space) * 10); }
|
|
43
|
+
p { color: var(--color-muted); margin-bottom: calc(var(--space) * 4); }
|
|
44
|
+
section { margin-bottom: calc(var(--space) * 12); }
|
|
45
|
+
|
|
46
|
+
/* ─── Card ──────────────────────────────────────────────────────────────── */
|
|
47
|
+
.card {
|
|
48
|
+
background: var(--color-surface);
|
|
49
|
+
border: 1px solid var(--color-border);
|
|
50
|
+
border-radius: var(--radius);
|
|
51
|
+
padding: calc(var(--space) * 5);
|
|
52
|
+
margin-bottom: calc(var(--space) * 4);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* ─── Badge ─────────────────────────────────────────────────────────────── */
|
|
56
|
+
.badge {
|
|
57
|
+
display: inline-block;
|
|
58
|
+
font-size: 11px;
|
|
59
|
+
font-weight: 600;
|
|
60
|
+
padding: 2px 8px;
|
|
61
|
+
border-radius: 999px;
|
|
62
|
+
text-transform: uppercase;
|
|
63
|
+
letter-spacing: 0.04em;
|
|
64
|
+
}
|
|
65
|
+
.badge-ok { background: color-mix(in srgb, var(--color-ok) 15%, transparent); color: var(--color-ok); }
|
|
66
|
+
.badge-warn { background: color-mix(in srgb, var(--color-warn) 15%, transparent); color: var(--color-warn); }
|
|
67
|
+
.badge-error { background: color-mix(in srgb, var(--color-error) 15%, transparent); color: var(--color-error); }
|
|
68
|
+
.badge-info { background: color-mix(in srgb, var(--color-accent) 15%, transparent); color: var(--color-accent); }
|
|
69
|
+
|
|
70
|
+
/* ─── Tabs ──────────────────────────────────────────────────────────────── */
|
|
71
|
+
.tabs { border-bottom: 1px solid var(--color-border); display: flex; gap: calc(var(--space) * 1); margin-bottom: calc(var(--space) * 4); }
|
|
72
|
+
.tab {
|
|
73
|
+
padding: calc(var(--space) * 2) calc(var(--space) * 4);
|
|
74
|
+
cursor: pointer;
|
|
75
|
+
border-bottom: 2px solid transparent;
|
|
76
|
+
color: var(--color-muted);
|
|
77
|
+
font-size: 13px;
|
|
78
|
+
font-weight: 500;
|
|
79
|
+
background: none;
|
|
80
|
+
border-top: none;
|
|
81
|
+
border-left: none;
|
|
82
|
+
border-right: none;
|
|
83
|
+
}
|
|
84
|
+
.tab:hover { color: var(--color-text); }
|
|
85
|
+
.tab.active { border-bottom-color: var(--color-accent); color: var(--color-text); }
|
|
86
|
+
.tab-panel { display: none; }
|
|
87
|
+
.tab-panel.active { display: block; }
|
|
88
|
+
|
|
89
|
+
/* ─── Code block ────────────────────────────────────────────────────────── */
|
|
90
|
+
.code-block {
|
|
91
|
+
background: var(--color-surface);
|
|
92
|
+
border: 1px solid var(--color-border);
|
|
93
|
+
border-radius: var(--radius);
|
|
94
|
+
padding: calc(var(--space) * 4);
|
|
95
|
+
font-family: var(--font-mono);
|
|
96
|
+
font-size: 12px;
|
|
97
|
+
overflow-x: auto;
|
|
98
|
+
white-space: pre;
|
|
99
|
+
color: var(--color-text);
|
|
100
|
+
margin-bottom: calc(var(--space) * 4);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
/* ─── Diff ──────────────────────────────────────────────────────────────── */
|
|
104
|
+
.diff-block { font-family: var(--font-mono); font-size: 12px; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; margin-bottom: calc(var(--space) * 4); }
|
|
105
|
+
.diff-line { display: flex; padding: 2px calc(var(--space) * 3); }
|
|
106
|
+
.diff-line-add { background: color-mix(in srgb, var(--color-ok) 10%, transparent); }
|
|
107
|
+
.diff-line-del { background: color-mix(in srgb, var(--color-error) 10%, transparent); }
|
|
108
|
+
.diff-line-ctx { color: var(--color-muted); }
|
|
109
|
+
.diff-gutter { user-select: none; color: var(--color-muted); min-width: 32px; text-align: right; margin-right: calc(var(--space) * 3); }
|
|
110
|
+
.diff-sign { min-width: 12px; color: var(--color-muted); }
|
|
111
|
+
.diff-line-add .diff-sign { color: var(--color-ok); }
|
|
112
|
+
.diff-line-del .diff-sign { color: var(--color-error); }
|
|
113
|
+
</style>
|
|
114
|
+
</head>
|
|
115
|
+
<body>
|
|
116
|
+
|
|
117
|
+
<h1>haac-aikit HTML Design System</h1>
|
|
118
|
+
<p>Reference file for HTML artifacts generated by the model. Edit the CSS custom properties at the top of this file to retheme all output.</p>
|
|
119
|
+
|
|
120
|
+
<section>
|
|
121
|
+
<h2>Card</h2>
|
|
122
|
+
<div class="card">
|
|
123
|
+
<strong>Card title</strong>
|
|
124
|
+
<p>Use cards to group related content. Nest inside grid or flex containers for multi-column layouts.</p>
|
|
125
|
+
</div>
|
|
126
|
+
</section>
|
|
127
|
+
|
|
128
|
+
<section>
|
|
129
|
+
<h2>Badges</h2>
|
|
130
|
+
<span class="badge badge-ok">ok</span>
|
|
131
|
+
<span class="badge badge-warn">warn</span>
|
|
132
|
+
<span class="badge badge-error">error</span>
|
|
133
|
+
<span class="badge badge-info">info</span>
|
|
134
|
+
</section>
|
|
135
|
+
|
|
136
|
+
<section>
|
|
137
|
+
<h2>Tabs</h2>
|
|
138
|
+
<div class="tabs" id="demo-tabs">
|
|
139
|
+
<button class="tab active" data-panel="p1">Option A</button>
|
|
140
|
+
<button class="tab" data-panel="p2">Option B</button>
|
|
141
|
+
<button class="tab" data-panel="p3">Option C</button>
|
|
142
|
+
</div>
|
|
143
|
+
<div id="p1" class="tab-panel active"><div class="card">Content for Option A.</div></div>
|
|
144
|
+
<div id="p2" class="tab-panel"><div class="card">Content for Option B.</div></div>
|
|
145
|
+
<div id="p3" class="tab-panel"><div class="card">Content for Option C.</div></div>
|
|
146
|
+
<script>
|
|
147
|
+
document.querySelectorAll('.tabs').forEach(tabGroup => {
|
|
148
|
+
tabGroup.addEventListener('click', e => {
|
|
149
|
+
const btn = e.target.closest('.tab');
|
|
150
|
+
if (!btn) return;
|
|
151
|
+
tabGroup.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
|
152
|
+
btn.classList.add('active');
|
|
153
|
+
const panelId = btn.dataset.panel;
|
|
154
|
+
document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
|
|
155
|
+
document.getElementById(panelId).classList.add('active');
|
|
156
|
+
});
|
|
157
|
+
});
|
|
158
|
+
</script>
|
|
159
|
+
</section>
|
|
160
|
+
|
|
161
|
+
<section>
|
|
162
|
+
<h2>Code block</h2>
|
|
163
|
+
<div class="code-block">const greeting = "hello, world";
|
|
164
|
+
console.log(greeting);</div>
|
|
165
|
+
</section>
|
|
166
|
+
|
|
167
|
+
<section>
|
|
168
|
+
<h2>Diff</h2>
|
|
169
|
+
<div class="diff-block">
|
|
170
|
+
<div class="diff-line diff-line-ctx"><span class="diff-gutter">1</span><span class="diff-sign"> </span><span>import { foo } from './foo';</span></div>
|
|
171
|
+
<div class="diff-line diff-line-del"><span class="diff-gutter">2</span><span class="diff-sign">-</span><span>const x = foo();</span></div>
|
|
172
|
+
<div class="diff-line diff-line-add"><span class="diff-gutter">3</span><span class="diff-sign">+</span><span>const x = await foo();</span></div>
|
|
173
|
+
<div class="diff-line diff-line-ctx"><span class="diff-gutter">4</span><span class="diff-sign"> </span><span>export { x };</span></div>
|
|
174
|
+
</div>
|
|
175
|
+
</section>
|
|
176
|
+
|
|
177
|
+
</body>
|
|
178
|
+
</html>
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: html-artifacts
|
|
3
|
+
description: Use when generating output that would benefit from rich formatting — specs, plans, reports, code review explainers, design prototypes, or custom editors. Teaches when to proactively offer HTML instead of markdown and how to structure each artifact type.
|
|
4
|
+
version: "1.0.0"
|
|
5
|
+
source: haac-aikit
|
|
6
|
+
license: MIT
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## When to use
|
|
10
|
+
- Output is > ~80 lines of content
|
|
11
|
+
- Task involves comparison, multiple options, or visual layout
|
|
12
|
+
- User asks for a spec, plan, report, PR explainer, or prototype
|
|
13
|
+
- User mentions "share", "send to team", or "easy to read"
|
|
14
|
+
|
|
15
|
+
## Proactive offer rule
|
|
16
|
+
When conditions above are met but the user didn't explicitly ask for HTML, say one sentence before proceeding:
|
|
17
|
+
|
|
18
|
+
> "I can generate this as an HTML artifact for easier reading — want that?"
|
|
19
|
+
|
|
20
|
+
Wait for a yes/no. If yes, proceed with HTML. If no, use markdown.
|
|
21
|
+
|
|
22
|
+
## Five use-case patterns
|
|
23
|
+
|
|
24
|
+
### 1. Spec / Planning
|
|
25
|
+
**Trigger:** Long spec, multiple options to compare
|
|
26
|
+
**Structure:** Tabs per option, decision log section, embedded mockup slots
|
|
27
|
+
**Don't:** Skip the decision rationale — that's the whole point of the doc
|
|
28
|
+
|
|
29
|
+
### 2. Code Review
|
|
30
|
+
**Trigger:** PR explainer, diff walkthrough, architecture audit
|
|
31
|
+
**Structure:** Rendered diff with color, severity badges (ok/warn/error), inline margin annotations
|
|
32
|
+
**Don't:** Show a raw unified diff without color — unreadable
|
|
33
|
+
|
|
34
|
+
### 3. Report / Research
|
|
35
|
+
**Trigger:** Status report, incident summary, research synthesis
|
|
36
|
+
**Structure:** Executive summary at top, SVG diagrams, section anchors for navigation
|
|
37
|
+
**Don't:** Bury the conclusion — lead with it
|
|
38
|
+
|
|
39
|
+
### 4. Prototype
|
|
40
|
+
**Trigger:** Animation tuning, layout exploration, parameter tweaking
|
|
41
|
+
**Structure:** Sliders/knobs for live adjustment, preview pane, "copy params" export button
|
|
42
|
+
**Don't:** Ship without an export mechanism — the params need to go somewhere
|
|
43
|
+
|
|
44
|
+
### 5. Custom Editor
|
|
45
|
+
**Trigger:** Ticket triage, config editing, dataset curation
|
|
46
|
+
**Structure:** Drag/sort or form UI, constraint warnings, "copy as JSON/prompt" export button
|
|
47
|
+
**Don't:** Let the editor be the only output — always export
|
|
48
|
+
|
|
49
|
+
## Built-in design system
|
|
50
|
+
|
|
51
|
+
Inject this CSS block into every artifact. If the project has `docs/aikit-html-design-system.html`, read it first and use those variable values instead.
|
|
52
|
+
|
|
53
|
+
```css
|
|
54
|
+
:root {
|
|
55
|
+
--color-bg: #0f1117;
|
|
56
|
+
--color-surface: #1a1d27;
|
|
57
|
+
--color-border: #2e3143;
|
|
58
|
+
--color-text: #e2e8f0;
|
|
59
|
+
--color-muted: #8892a4;
|
|
60
|
+
--color-accent: #6366f1;
|
|
61
|
+
--color-ok: #22c55e;
|
|
62
|
+
--color-warn: #f59e0b;
|
|
63
|
+
--color-error: #ef4444;
|
|
64
|
+
--radius: 6px;
|
|
65
|
+
--font-sans: system-ui, -apple-system, sans-serif;
|
|
66
|
+
--font-mono: "JetBrains Mono", "Fira Code", monospace;
|
|
67
|
+
--space: 4px;
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
Pre-built components available: `.card`, `.badge` (`.badge-ok/warn/error/info`), `.tabs` + `.tab` + `.tab-panel`, `.code-block`, `.diff-block` + `.diff-line` + `.diff-line-add/del/ctx`.
|
|
72
|
+
|
|
73
|
+
## Output rules
|
|
74
|
+
- Save to `.aikit/artifacts/<slug>-<timestamp>.html` (this path is gitignored)
|
|
75
|
+
- After saving, print the path and suggest: `open <path>` (macOS) or `xdg-open <path>` (Linux)
|
|
76
|
+
- Pure HTML/CSS/JS only — no external CDN dependencies, no build step
|
|
77
|
+
- Mobile-responsive: use `max-width` + `padding` on body, `<meta name="viewport">`
|
|
78
|
+
|
|
79
|
+
## Markdown-first rule
|
|
80
|
+
Existing brainstorming and planning skills stay markdown-first. Only switch to HTML when the user accepts the proactive offer or explicitly requests it (e.g. via `/html`). This preserves cross-tool compatibility.
|
package/dist/cli.mjs
CHANGED
|
@@ -1280,6 +1280,7 @@ function loadCatalog() {
|
|
|
1280
1280
|
mcpJson: () => read("mcp/mcp.json"),
|
|
1281
1281
|
settingsJson: () => read("settings/settings.json"),
|
|
1282
1282
|
claudeMdReference: () => read("docs/claude-md-reference.md"),
|
|
1283
|
+
htmlDesignSystem: () => read("docs/html-design-system.html"),
|
|
1283
1284
|
aikitRulesJson: () => read("rules/aikit-rules.json")
|
|
1284
1285
|
};
|
|
1285
1286
|
}
|
|
@@ -1536,6 +1537,7 @@ async function runSync(argv) {
|
|
|
1536
1537
|
results.push(safeWrite(".claude/settings.json", catalog.settingsJson(), { ...opts, useMarkers: false }));
|
|
1537
1538
|
if (config.scope !== "minimal") {
|
|
1538
1539
|
results.push(safeWrite("docs/claude-md-reference.md", catalog.claudeMdReference(), { ...opts, useMarkers: false }));
|
|
1540
|
+
results.push(safeWrite("docs/aikit-html-design-system.html", catalog.htmlDesignSystem(), { ...opts, useMarkers: false }));
|
|
1539
1541
|
results.push(safeWrite(".claude/aikit-rules.json", catalog.aikitRulesJson(), { ...opts, useMarkers: false }));
|
|
1540
1542
|
results.push(...syncDir("rules/claude-rules", ".claude/rules", opts, [".md"]));
|
|
1541
1543
|
}
|