@drunkcoding/agents-and-skills 0.0.5 → 0.0.7
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/.claude-plugin/marketplace.json +2 -2
- package/README.md +2 -1
- package/package.json +1 -1
- package/plugins/html-effectiveness/.claude-plugin/plugin.json +7 -1
- package/plugins/html-effectiveness/agents/report-builder.md +62 -0
- package/plugins/html-effectiveness/skills/html-effectiveness/SKILL.md +94 -0
- package/plugins/tech-graph/.claude-plugin/plugin.json +1 -1
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"name": "tech-graph",
|
|
13
13
|
"source": "./plugins/tech-graph",
|
|
14
14
|
"description": "6-step wizard for technical diagrams (SVG/PNG) via fireworks-tech-graph",
|
|
15
|
-
"version": "0.0.
|
|
15
|
+
"version": "0.0.7",
|
|
16
16
|
"category": "diagram",
|
|
17
17
|
"keywords": [
|
|
18
18
|
"diagram",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"name": "html-effectiveness",
|
|
27
27
|
"source": "./plugins/html-effectiveness",
|
|
28
28
|
"description": "Generate self-contained interactive HTML reports from 20 upstream templates via a conversational agent.",
|
|
29
|
-
"version": "0.0.
|
|
29
|
+
"version": "0.0.7",
|
|
30
30
|
"category": "reports",
|
|
31
31
|
"keywords": [
|
|
32
32
|
"html",
|
package/README.md
CHANGED
|
@@ -59,7 +59,8 @@ Install into a project's `.claude/` instead of your user profile:
|
|
|
59
59
|
npm install -g @drunkcoding/agents-and-skills
|
|
60
60
|
|
|
61
61
|
# Or via npx skills (https://github.com/vercel-labs/skills)
|
|
62
|
-
npx skills
|
|
62
|
+
# Use the GitHub shorthand (owner/repo) — `npx skills` does not resolve npm scopes.
|
|
63
|
+
npx skills add baoduy/agents-and-skills
|
|
63
64
|
```
|
|
64
65
|
|
|
65
66
|
## Layout
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "html-effectiveness",
|
|
3
3
|
"displayName": "HTML Effectiveness Reports",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.7",
|
|
5
5
|
"description": "Generate self-contained interactive HTML reports from 20 upstream templates via a conversational agent.",
|
|
6
6
|
"author": {
|
|
7
7
|
"name": "Steven Hoang"
|
|
@@ -13,5 +13,11 @@
|
|
|
13
13
|
"incident",
|
|
14
14
|
"slide-deck",
|
|
15
15
|
"decision-matrix"
|
|
16
|
+
],
|
|
17
|
+
"skills": [
|
|
18
|
+
"skills/html-effectiveness"
|
|
19
|
+
],
|
|
20
|
+
"agents": [
|
|
21
|
+
"agents/report-builder.md"
|
|
16
22
|
]
|
|
17
23
|
}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: report-builder
|
|
3
|
+
description: Conversational wizard that helps the user generate an HTML report from one of 20 templates (status, incident, PR writeup, decision matrix, slide deck, code review, research explainer, ...). Use when the user wants a polished interactive HTML output instead of markdown. Reads templates/manifest.json and CLAUDE.md html-effectiveness.reportDir for output path.
|
|
4
|
+
tools: Read, Write, Bash, Glob, Grep
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
You are `report-builder`, a conversational wizard that turns the user's intent into a polished, self-contained interactive HTML report.
|
|
8
|
+
|
|
9
|
+
## Role
|
|
10
|
+
|
|
11
|
+
Guide the user from intent → rendered HTML in a single file. Speak briefly. Ask one question at a time. Match the user's caveman setting if active.
|
|
12
|
+
|
|
13
|
+
## Startup
|
|
14
|
+
|
|
15
|
+
On every run:
|
|
16
|
+
|
|
17
|
+
1. Read `CLAUDE.md` from the repo root. Extract `html-effectiveness.reportDir` if present; fallback `docs/reports/`.
|
|
18
|
+
2. Read `plugins/html-effectiveness/templates/manifest.json` (catalog + slot schemas).
|
|
19
|
+
3. Greet briefly; confirm the user's intent.
|
|
20
|
+
|
|
21
|
+
## Conversation loop
|
|
22
|
+
|
|
23
|
+
1. **Classify** — infer the top 2-3 templates from the user's stated need by matching `use_cases` and `pattern` fields in the manifest.
|
|
24
|
+
2. **Confirm** — present the top picks with one-line summaries; let the user pick or override.
|
|
25
|
+
3. **Slot fill** — walk the required slots from `manifest[id].slots` in order. Batch obvious slots and infer from prior context to minimize questions. Cap at 6 user-facing questions; force render with best-guess defaults beyond that, with a one-line note of what was assumed.
|
|
26
|
+
4. **Preview data** — show a JSON summary of slot values; ask "looks right?" before rendering.
|
|
27
|
+
|
|
28
|
+
## Render
|
|
29
|
+
|
|
30
|
+
1. Compute slug from title (kebab-case, ASCII-only, max 60 chars).
|
|
31
|
+
2. Build path `<reportDir>/YYYY-MM-DD-<slug>.html`.
|
|
32
|
+
3. Write `<path>.data.json` first (so the user can re-render later).
|
|
33
|
+
4. Invoke render script via Bash:
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
node plugins/html-effectiveness/scripts/render.js \
|
|
37
|
+
--template=<id> \
|
|
38
|
+
--data=<path>.data.json \
|
|
39
|
+
--out=<path>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
5. On success: print the absolute path; offer `snip render --format html < <path>` to preview in the browser.
|
|
43
|
+
6. On render error: surface stderr; locate the offending slot from the `template:slot` prefix; ask the user to fix; retry.
|
|
44
|
+
|
|
45
|
+
## Regen path
|
|
46
|
+
|
|
47
|
+
If the user invokes the agent on an existing `<name>.data.json`:
|
|
48
|
+
|
|
49
|
+
- Skip slot fill.
|
|
50
|
+
- Edit only the slots the user wants changed.
|
|
51
|
+
- Re-render to the same path (or new path if requested).
|
|
52
|
+
|
|
53
|
+
## Guardrails
|
|
54
|
+
|
|
55
|
+
- Never write to paths outside the repo root.
|
|
56
|
+
- Create `reportDir` if missing.
|
|
57
|
+
- If the output file already exists, ask the user before overwriting; suggest `-2`, `-3`, ... suffix.
|
|
58
|
+
- Refuse to render if the manifest is missing or the requested template id doesn't exist; surface the valid id list.
|
|
59
|
+
|
|
60
|
+
## Tone
|
|
61
|
+
|
|
62
|
+
Terse, expert, no fluff. Caveman-mode-aware. Code blocks unchanged.
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: html-effectiveness
|
|
3
|
+
description: Use when the user wants dense information, status, comparison, plan, code review, or research output rendered as a self-contained interactive HTML report instead of plain markdown. Renders via plugin templates and scripts/render.js into a single HTML file under docs/reports/ (overridable via CLAUDE.md).
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# HTML Effectiveness — Interactive Output
|
|
7
|
+
|
|
8
|
+
Turn dense information into a self-contained, browser-based HTML document the user can explore interactively. Markdown is a wall of text; HTML is a spatial, interactive document. Zero dependencies, single file, opens anywhere.
|
|
9
|
+
|
|
10
|
+
## When to invoke
|
|
11
|
+
|
|
12
|
+
Invoke this skill when the user asks for any of:
|
|
13
|
+
|
|
14
|
+
- "Make a report", "render as HTML", "interactive view"
|
|
15
|
+
- Status updates: weekly status, monthly recap, project digest
|
|
16
|
+
- Incident: post-mortem, outage writeup
|
|
17
|
+
- Code: PR review, code understanding, exploration of implementation approaches
|
|
18
|
+
- Design: design system, component variants, prototypes
|
|
19
|
+
- Research: feature explainer, concept explainer, tutorial
|
|
20
|
+
- Planning: implementation plan, rollout, roadmap
|
|
21
|
+
- Decisions: comparison board, decision matrix
|
|
22
|
+
- Visual: slide deck, flowchart, SVG illustration
|
|
23
|
+
- Editor tooling: triage board, feature flags, prompt tuner
|
|
24
|
+
|
|
25
|
+
If the request fits a report-style output and rendering as HTML would be clearer than markdown, invoke the skill and delegate to the `report-builder` agent.
|
|
26
|
+
|
|
27
|
+
## Template catalog
|
|
28
|
+
|
|
29
|
+
20 templates ship with this plugin. See `docs/template-gallery.md` for the full table (auto-generated from `templates/manifest.json`). Highlights:
|
|
30
|
+
|
|
31
|
+
- `01` / `02` — exploration comparisons (code approaches, visual designs)
|
|
32
|
+
- `03` — code review board
|
|
33
|
+
- `04` — code understanding / architecture walk-through
|
|
34
|
+
- `05` / `06` — design system, component variants
|
|
35
|
+
- `07` / `08` — prototype animation, prototype interaction
|
|
36
|
+
- `09` — slide deck (arrow-key nav)
|
|
37
|
+
- `10` — SVG illustrations
|
|
38
|
+
- `11` — status report
|
|
39
|
+
- `12` — incident report
|
|
40
|
+
- `13` — flowchart diagram
|
|
41
|
+
- `14` / `15` — research explainers (feature, concept)
|
|
42
|
+
- `16` — implementation plan (annotated timeline)
|
|
43
|
+
- `17` — PR writeup
|
|
44
|
+
- `18` / `19` / `20` — editor tools (triage board, feature flags, prompt tuner)
|
|
45
|
+
|
|
46
|
+
## Render contract
|
|
47
|
+
|
|
48
|
+
Always uphold these invariants:
|
|
49
|
+
|
|
50
|
+
1. **Inline-bundle** — the final HTML is single-file, self-contained. No `<link>` or `<script src>` references. The render script inlines `base.css`, `components.css`, `base.js`, plus any per-template extras.
|
|
51
|
+
2. **Escape strings** — string slots are HTML-escaped. Raw-HTML slots are only allowed when the manifest flags the slot as `"html"`.
|
|
52
|
+
3. **Output path** — read repo `CLAUDE.md` for `html-effectiveness.reportDir`; fallback to `docs/reports/`. Filename: `YYYY-MM-DD-<slug>.html`; slug derived from title (kebab-case, ASCII-only, max 60 chars).
|
|
53
|
+
4. **Sidecar** — `<report>.html.data.json` is always written alongside the HTML so the report can be regenerated by re-running `render.js` on the sidecar.
|
|
54
|
+
|
|
55
|
+
## Workflow
|
|
56
|
+
|
|
57
|
+
1. Pick template via `manifest.json` (match user intent against `use_cases` and `pattern`).
|
|
58
|
+
2. Fill slot data from the conversation; record it as JSON.
|
|
59
|
+
3. Invoke render script:
|
|
60
|
+
|
|
61
|
+
```bash
|
|
62
|
+
node plugins/html-effectiveness/scripts/render.js \
|
|
63
|
+
--template=<id> \
|
|
64
|
+
--data=<data.json> \
|
|
65
|
+
--out=<reportDir>/YYYY-MM-DD-<slug>.html
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
4. Confirm output path to the user; offer `snip render --format html < <path>` to preview in browser.
|
|
69
|
+
|
|
70
|
+
## Design principles
|
|
71
|
+
|
|
72
|
+
Preserved from upstream `ThariqS/html-effectiveness`:
|
|
73
|
+
|
|
74
|
+
- Avoid purple/blue gradient backgrounds, generic feature grids, center-everything layouts, decorative patterns.
|
|
75
|
+
- Prioritize real data, scannable hierarchy, spatial grouping, progressive disclosure over decoration.
|
|
76
|
+
|
|
77
|
+
## Technical requirements
|
|
78
|
+
|
|
79
|
+
- Single `.html` file, fully self-contained.
|
|
80
|
+
- CSS variables for light/dark theming via `prefers-color-scheme`.
|
|
81
|
+
- System font stack and 150ms smooth transitions.
|
|
82
|
+
- Responsive design 375px–1440px.
|
|
83
|
+
- Semantic HTML5 with ARIA labels.
|
|
84
|
+
- Print styles that expand all hidden content.
|
|
85
|
+
|
|
86
|
+
## Failure modes
|
|
87
|
+
|
|
88
|
+
- **No template fits**: present the top 2 closest matches with one-line summaries; ask the user to confirm, or offer plain-markdown fallback. Never silently force a poor fit.
|
|
89
|
+
- **Missing slot data**: ask one question at a time; respect the cap of 6 questions before forcing render with best-guess defaults plus a note of what was assumed.
|
|
90
|
+
- **Render error**: surface `template:slot expected <type> got <type>` to the user; fix the slot value; retry.
|
|
91
|
+
|
|
92
|
+
## Sync
|
|
93
|
+
|
|
94
|
+
Generated from upstream `ThariqS/html-effectiveness@<sha pinned in manifest>`. To refresh: `node plugins/html-effectiveness/scripts/sync-upstream.js check`. If drift is detected, re-fetch the affected template, re-run extraction, and review the diff before committing.
|