@drunkcoding/agents-and-skills 0.0.12 → 0.0.14

package/.claude-plugin/marketplace.json

@@ -12,7 +12,7 @@
       "name": "tech-graph",
       "source": "./plugins/tech-graph",
       "description": "6-step wizard for technical diagrams (SVG/PNG) via fireworks-tech-graph",
-      "version": "0.0.12",
+      "version": "0.0.14",
       "category": "diagram",
       "keywords": [
         "diagram",
@@ -26,7 +26,7 @@
       "name": "html-effectiveness",
       "source": "./plugins/html-effectiveness",
       "description": "Generate self-contained interactive HTML reports from 20 upstream templates via a conversational agent.",
-      "version": "0.0.12",
+      "version": "0.0.14",
       "category": "reports",
       "keywords": [
         "html",
@@ -40,8 +40,8 @@
     {
       "name": "team-superpower",
       "source": "./plugins/team-superpower",
-      "description": "Coordination layer that runs the obra/superpowers skill chain across a Claude Code agent team — one /team-feature command takes an idea through brainstorming, plan, TDD implementation, review, and finish with at most 4 owner touchpoints.",
-      "version": "0.0.12",
+      "description": "Full-stack engineering team that runs the Superpowers skill chain across 8 roles — designer, planner, software-architect, security-engineer, backend-developer, frontend-developer, qa-engineer, reviewer — with a pre-impl architecture+security gate and a post-impl QA gate.",
+      "version": "0.0.14",
       "category": "workflow",
       "keywords": [
         "agent-teams",
@@ -50,14 +50,17 @@
         "orchestration",
         "workflow",
         "brainstorming",
-        "code-review"
+        "code-review",
+        "architecture",
+        "security",
+        "qa"
       ]
     },
     {
       "name": "plugin-validator",
       "source": "./plugins/plugin-validator",
       "description": "Orchestrated validator for Claude Code plugins — validates skills, agents, commands, and hooks across every plugin under plugins/**.",
-      "version": "0.0.12",
+      "version": "0.0.14",
       "category": "tooling",
       "keywords": [
         "validation",

package/README.md

@@ -10,7 +10,7 @@ Published on npm as [`@drunkcoding/agents-and-skills`](https://www.npmjs.com/pac
 |--------|-------------|
 | [`tech-graph`](plugins/tech-graph) | 6-step wizard for technical diagrams (SVG + PNG). |
 | [`html-effectiveness`](plugins/html-effectiveness) | Conversational agent that generates self-contained interactive HTML reports from 20 templates. |
-| [`team-superpower`](plugins/team-superpower) | Agent-team conductor that runs the obra/superpowers skill chain end-to-end with at most 4 owner touchpoints. |
+| [`team-superpower`](plugins/team-superpower) | Full-stack engineering team running the Superpowers skill chain — 8 roles (designer, planner, software-architect, security-engineer, backend-developer, frontend-developer, qa-engineer, reviewer) with a pre-impl arch+security gate and a post-impl QA gate. |
 | [`plugin-validator`](plugins/plugin-validator) | Orchestrated validator that checks every plugin's skills, agents, commands, and hooks for spec compliance — runs in parallel and proposes batched fixes. |
 
 ## Install

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drunkcoding/agents-and-skills",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "Personal collection of Claude Code skills and agents, installable via `npx skills`.",
   "keywords": [
     "claude-code",

package/plugins/html-effectiveness/.claude-plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "html-effectiveness",
   "displayName": "HTML Effectiveness Reports",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "Generate self-contained interactive HTML reports from 20 upstream templates via a conversational agent.",
   "author": {
     "name": "Steven Hoang"

package/plugins/html-effectiveness/README.md

@@ -12,12 +12,17 @@ Override output dir in repo `CLAUDE.md`:
 html-effectiveness.reportDir: my/custom/reports
 ```
 
-## Sync upstream
+## Vendored templates
 
-Re-fetch templates from `ThariqS/html-effectiveness`:
+Templates are vendored from `ThariqS/html-effectiveness`. The pinned SHA lives in `templates/manifest.json` (`_meta.upstream_sha`). Re-fetch is **manual** — only run when you want to refresh the snapshot:
 
 ```bash
-node plugins/html-effectiveness/scripts/sync-upstream.js
+node plugins/html-effectiveness/scripts/extract.js fetch <id>.html
+node plugins/html-effectiveness/scripts/extract.js split <id>.html
 ```
 
-See `docs/template-gallery.md` for the full pattern catalog.
+Files land under `.tmp/html-effectiveness/extract/` and are cleaned up automatically. Hand-merge any changes back into `templates/<id>.html.tmpl`.
+
+## Scratch convention
+
+All plugin scratch lives under `.tmp/html-effectiveness/<purpose>/` (gitignored). Helper API: `scripts/_tmp.js` exports `getTmpDir`, `cleanup`, and `withTmp` for try/finally + signal-handler cleanup.

package/plugins/html-effectiveness/agents/report-builder.md

@@ -42,6 +42,10 @@ On every run:
 5. On success: print the absolute path; offer `snip render --format html < <path>` to preview in the browser.
 6. On render error: surface stderr; locate the offending slot from the `template:slot` prefix; ask the user to fix; retry.
 
+## Output
+
+A self-contained interactive HTML report at `<reportDir>/YYYY-MM-DD-<slug>.html` plus a `<slug>.html.data.json` sidecar for later re-rendering. The absolute path is printed to the user on success, with an offer to preview via `snip render --format html`.
+
 ## Regen path
 
 If the user invokes the agent on an existing `<name>.data.json`:

package/plugins/html-effectiveness/assets/base.css

@@ -1,27 +1,47 @@
-/* Theme variables, typography, print baseline. Populated from upstream during Task 7. */
+/* Shared design tokens + page baseline. Vendored from ThariqS/html-effectiveness. */
 :root {
-  --bg: #ffffff;
-  --fg: #111111;
-  --muted: #666666;
-  --accent: #2563eb;
-  --border: #e5e7eb;
-  --radius: 6px;
-  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-  --mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+  --ivory: #FAF9F5;
+  --slate: #141413;
+  --clay: #D97757;
+  --oat: #E3DACC;
+  --olive: #788C5D;
+  --rust: #B04A3F;
+  --gray-100: #F0EEE6;
+  --gray-300: #D1CFC5;
+  --gray-500: #87867F;
+  --gray-700: #3D3D3A;
+  --white: #FFFFFF;
+
+  --serif: ui-serif, Georgia, serif;
+  --sans: system-ui, -apple-system, sans-serif;
+  --mono: ui-monospace, "SF Mono", Menlo, monospace;
+
+  --radius-panel: 12px;
+  --radius-row: 8px;
+  --border-thick: 1.5px solid var(--gray-300);
+
+  /* legacy aliases for components.css stubs */
+  --bg: var(--ivory);
+  --fg: var(--slate);
+  --muted: var(--gray-500);
+  --accent: var(--clay);
+  --border: 1px solid var(--gray-300);
+  --radius: var(--radius-panel);
+  --font: var(--sans);
   --transition: 150ms ease;
 }
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg: #0b0b0c;
-    --fg: #f5f5f7;
-    --muted: #9aa0a6;
-    --accent: #60a5fa;
-    --border: #2a2a2c;
-  }
-}
 * { box-sizing: border-box; }
-html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--font); }
-a { color: var(--accent); text-decoration: none; }
+html, body {
+  margin: 0;
+  padding: 0;
+  background: var(--ivory);
+  color: var(--slate);
+  font-family: var(--sans);
+  font-size: 15px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+}
+a { color: var(--clay); text-decoration: none; }
 a:hover { text-decoration: underline; }
 @media print {
   details { display: block; }

package/plugins/html-effectiveness/docs/template-gallery.md

@@ -0,0 +1,28 @@
+# Template Gallery
+
+Generated from `templates/manifest.json`. Upstream: `ThariqS/html-effectiveness@a1fb5673c26f87be9b833e1876cf4fd0f30f5f2d` (fetched 2026-05-13).
+
+| ID | Title | Pattern | Use cases | Required slots |
+|----|-------|---------|-----------|----------------|
+| `01-exploration-code-approaches` | Code-Approaches Exploration | `comparison_board` | "compare implementations", "approach trade-offs", "design alternatives" | `title` |
+| `02-exploration-visual-designs` | Visual Design Exploration | `comparison_board` | "compare designs", "UI alternatives", "visual options" | `title` |
+| `03-code-review-pr` | PR Code Review Board | `code_review_board` | "PR review", "code review", "diff review" | `title` |
+| `04-code-understanding` | Code Walkthrough | `knowledge_explorer` | "explain code", "walk through architecture", "trace logic" | `title` |
+| `05-design-system` | Design System Sheet | `design_system_sheet` | "design tokens", "color palette", "typography" | `title` |
+| `06-component-variants` | Component Variant Matrix | `design_system_sheet` | "component variants", "states gallery" | `title` |
+| `07-prototype-animation` | Animation Prototype | `interactive_report` | "animation prototype", "motion preview" | `title` |
+| `08-prototype-interaction` | Interaction Prototype | `interactive_report` | "interaction prototype", "ux flow" | `title` |
+| `09-slide-deck` | Slide Deck | `slide_deck` | "slide deck", "presentation", "pitch" | `title` |
+| `10-svg-illustrations` | SVG Illustration Gallery | `knowledge_explorer` | "illustrate concept", "svg gallery" | `title` |
+| `11-status-report` | Status Report | `interactive_report` | "weekly status", "project update", "team digest", "monthly recap", "engineering status" | `title`, `date_range` |
+| `12-incident-report` | Incident Report | `interactive_report` | "incident report", "post-mortem", "outage writeup" | `title` |
+| `13-flowchart-diagram` | Flowchart Diagram | `knowledge_explorer` | "flowchart", "process diagram", "decision tree" | `title` |
+| `14-research-feature-explainer` | Feature Explainer | `knowledge_explorer` | "explain feature", "feature deep-dive" | `title` |
+| `15-research-concept-explainer` | Concept Explainer | `knowledge_explorer` | "explain concept", "tutorial", "primer" | `title` |
+| `16-implementation-plan` | Implementation Plan | `annotated_timeline` | "implementation plan", "phased rollout", "roadmap" | `title` |
+| `17-pr-writeup` | PR Writeup | `interactive_report` | "PR description", "release notes", "change writeup" | `title` |
+| `18-editor-triage-board` | Triage Board | `kanban_board` | "bug triage", "issue board", "kanban" | `title` |
+| `19-editor-feature-flags` | Feature Flags Matrix | `decision_matrix` | "feature flags", "rollout matrix" | `title` |
+| `20-editor-prompt-tuner` | Prompt Tuner | `interactive_report` | "prompt tuning", "LLM config" | `title` |
+
+_20 templates._

package/plugins/html-effectiveness/scripts/_tmp.js

@@ -0,0 +1,37 @@
+import { mkdirSync, rmSync } from 'node:fs';
+import { dirname, resolve, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const REPO_ROOT = resolve(HERE, '..', '..', '..');
+export const ROOT = join(REPO_ROOT, '.tmp', 'html-effectiveness');
+
+export function getTmpDir(purpose) {
+  if (!purpose || /[\\/]/.test(purpose)) {
+    throw new Error(`purpose must be a single path segment, got: ${purpose}`);
+  }
+  const dir = join(ROOT, purpose);
+  rmSync(dir, { recursive: true, force: true });
+  mkdirSync(dir, { recursive: true });
+  return dir;
+}
+
+export function cleanup(purpose) {
+  rmSync(join(ROOT, purpose), { recursive: true, force: true });
+}
+
+export function withTmp(purpose, fn) {
+  const dir = getTmpDir(purpose);
+  const onSig = () => {
+    try { cleanup(purpose); } finally { process.exit(130); }
+  };
+  process.once('SIGINT', onSig);
+  process.once('SIGTERM', onSig);
+  try {
+    return fn(dir);
+  } finally {
+    cleanup(purpose);
+    process.off('SIGINT', onSig);
+    process.off('SIGTERM', onSig);
+  }
+}

package/plugins/html-effectiveness/scripts/catalog.js

@@ -0,0 +1,47 @@
+#!/usr/bin/env node
+// Generate docs/template-gallery.md from templates/manifest.json.
+// Idempotent. Run after editing manifest.
+
+import { readFileSync, writeFileSync, mkdirSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const PLUGIN_ROOT = dirname(HERE);
+
+function build() {
+  const manifest = JSON.parse(readFileSync(join(PLUGIN_ROOT, 'templates/manifest.json'), 'utf8'));
+  const meta = manifest._meta || {};
+  const rows = Object.entries(manifest)
+    .filter(([k]) => k !== '_meta')
+    .sort(([a], [b]) => a.localeCompare(b));
+
+  const lines = [];
+  lines.push('# Template Gallery');
+  lines.push('');
+  lines.push(`Generated from \`templates/manifest.json\`. Upstream: \`${meta.upstream_repo}@${meta.upstream_sha}\` (fetched ${meta.fetched_at}).`);
+  lines.push('');
+  lines.push('| ID | Title | Pattern | Use cases | Required slots |');
+  lines.push('|----|-------|---------|-----------|----------------|');
+  for (const [id, e] of rows) {
+    const reqSlots = Object.entries(e.slots || {})
+      .filter(([, s]) => (typeof s === 'object' ? s.required : false))
+      .map(([n]) => `\`${n}\``)
+      .join(', ') || '—';
+    const use = (e.use_cases || []).map((u) => `"${u}"`).join(', ');
+    lines.push(`| \`${id}\` | ${e.title} | \`${e.pattern}\` | ${use} | ${reqSlots} |`);
+  }
+  lines.push('');
+  lines.push(`_${rows.length} templates._`);
+  lines.push('');
+  return lines.join('\n');
+}
+
+function main() {
+  const out = join(PLUGIN_ROOT, 'docs/template-gallery.md');
+  mkdirSync(dirname(out), { recursive: true });
+  writeFileSync(out, build(), 'utf8');
+  process.stdout.write(out + '\n');
+}
+
+if (import.meta.url === pathToFileURL(process.argv[1]).href) main();

package/plugins/html-effectiveness/scripts/extract.js

@@ -0,0 +1,104 @@
+#!/usr/bin/env node
+import { writeFileSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { pathToFileURL } from 'node:url';
+import { getTmpDir, ROOT } from './_tmp.js';
+
+const UPSTREAM_REPO = 'ThariqS/html-effectiveness';
+const API_BASE = 'https://api.github.com';
+const RAW_BASE = 'https://raw.githubusercontent.com';
+
+async function ghFetch(url, accept = 'application/vnd.github+json') {
+  const headers = { 'Accept': accept, 'User-Agent': 'html-effectiveness-vendor' };
+  if (process.env.GITHUB_TOKEN) headers['Authorization'] = `Bearer ${process.env.GITHUB_TOKEN}`;
+  const res = await fetch(url, { headers });
+  if (!res.ok) {
+    throw new Error(`HTTP ${res.status} ${res.statusText} for ${url}`);
+  }
+  return res;
+}
+
+export async function fetchUpstreamFile(filename, ref = 'main') {
+  const url = `${RAW_BASE}/${UPSTREAM_REPO}/${ref}/${filename}`;
+  const res = await ghFetch(url, 'text/plain');
+  return await res.text();
+}
+
+export async function fetchUpstreamSha(ref = 'main') {
+  const url = `${API_BASE}/repos/${UPSTREAM_REPO}/commits/${ref}`;
+  const res = await ghFetch(url);
+  const json = await res.json();
+  return json.sha;
+}
+
+export async function listUpstreamFiles(ref = 'main') {
+  const url = `${API_BASE}/repos/${UPSTREAM_REPO}/contents?ref=${ref}`;
+  const res = await ghFetch(url);
+  const json = await res.json();
+  return json.filter((e) => e.type === 'file').map((e) => e.name);
+}
+
+export function extractParts(html) {
+  const styles = [];
+  const scripts = [];
+  let body = html;
+  body = body.replace(/<style[^>]*>([\s\S]*?)<\/style>/g, (_, css) => {
+    styles.push(css.trim());
+    return '';
+  });
+  body = body.replace(/<script[^>]*>([\s\S]*?)<\/script>/g, (_, js) => {
+    if (js.trim()) scripts.push(js.trim());
+    return '';
+  });
+  body = body
+    .replace(/<!doctype[^>]*>/i, '')
+    .replace(/<\/?html[^>]*>/gi, '')
+    .replace(/<head[\s\S]*?<\/head>/gi, '')
+    .replace(/<\/?body[^>]*>/gi, '');
+  return { styles, scripts, body: body.trim() };
+}
+
+function ensureWorkdir() {
+  return getTmpDir('extract');
+}
+
+function readFromWorkdir(name) {
+  return readFileSync(join(ROOT, 'extract', name), 'utf8');
+}
+
+function writeToWorkdir(dir, name, content) {
+  writeFileSync(join(dir, name), content);
+}
+
+async function cli() {
+  const [, , cmd, arg] = process.argv;
+  if (cmd === 'fetch') {
+    if (!arg) { process.stderr.write('usage: extract.js fetch <file>\n'); process.exit(1); }
+    const dir = ensureWorkdir();
+    const html = await fetchUpstreamFile(arg);
+    writeToWorkdir(dir, arg, html);
+    process.stdout.write(`${join(dir, arg)}\n`);
+  } else if (cmd === 'sha') {
+    process.stdout.write(await fetchUpstreamSha() + '\n');
+  } else if (cmd === 'list') {
+    const files = await listUpstreamFiles();
+    process.stdout.write(files.join('\n') + '\n');
+  } else if (cmd === 'split') {
+    if (!arg) { process.stderr.write('usage: extract.js split <file>\n'); process.exit(1); }
+    const html = readFromWorkdir(arg);
+    const { styles, scripts, body } = extractParts(html);
+    const base = arg.replace(/\.html$/, '');
+    const dir = join(ROOT, 'extract');
+    writeToWorkdir(dir, `${base}.body.html`, body + '\n');
+    writeToWorkdir(dir, `${base}.styles.css`, styles.join('\n\n/* --- */\n\n') + '\n');
+    writeToWorkdir(dir, `${base}.scripts.js`, scripts.join('\n\n/* --- */\n\n') + '\n');
+    process.stdout.write(`${dir}/${base}.{body.html,styles.css,scripts.js}\n`);
+  } else {
+    process.stderr.write('usage: extract.js {fetch <file>|sha|list|split <file>}\n');
+    process.exit(1);
+  }
+}
+
+if (import.meta.url === pathToFileURL(process.argv[1]).href) {
+  cli().catch((e) => { process.stderr.write(e.stack + '\n'); process.exit(1); });
+}

package/plugins/html-effectiveness/scripts/render.js

@@ -4,7 +4,7 @@
 
 import { readFileSync, writeFileSync, mkdirSync } from 'node:fs';
 import { dirname, resolve, join } from 'node:path';
-import { fileURLToPath } from 'node:url';
+import { fileURLToPath, pathToFileURL } from 'node:url';
 import { parseArgs } from 'node:util';
 import { render as mustache } from './mustache.js';
 
@@ -173,4 +173,4 @@ function cli() {
   }
 }
 
-if (import.meta.url === `file://${process.argv[1]}`) cli();
+if (import.meta.url === pathToFileURL(process.argv[1]).href) cli();

package/plugins/html-effectiveness/skills/html-effectiveness/SKILL.md

@@ -26,7 +26,7 @@ If the request fits a report-style output and rendering as HTML would be clearer
 
 ## Template catalog
 
-20 templates ship with this plugin. See `docs/template-gallery.md` for the full table (auto-generated from `templates/manifest.json`). Highlights:
+20 templates ship with this plugin. Full table in `plugins/html-effectiveness/docs/template-gallery.md` (regen via `node plugins/html-effectiveness/scripts/catalog.js`). Highlights:
 
 - `01` / `02` — exploration comparisons (code approaches, visual designs)
 - `03` — code review board
@@ -77,7 +77,7 @@ Preserved from upstream `ThariqS/html-effectiveness`:
 ## Technical requirements
 
 - Single `.html` file, fully self-contained.
-- CSS variables for light/dark theming via `prefers-color-scheme`.
+- CSS variables for theming (light-only baseline, matching upstream palette).
 - System font stack and 150ms smooth transitions.
 - Responsive design 375px–1440px.
 - Semantic HTML5 with ARIA labels.
@@ -89,6 +89,6 @@ Preserved from upstream `ThariqS/html-effectiveness`:
 - **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.
 - **Render error**: surface `template:slot expected <type> got <type>` to the user; fix the slot value; retry.
 
-## Sync
+## Vendored templates
 
-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.
+Templates are vendored, not auto-synced. The pinned upstream SHA lives at `templates/manifest.json` → `_meta.upstream_sha`. To refresh a single template: `node plugins/html-effectiveness/scripts/extract.js fetch <id>.html` then `split <id>.html`. Files land in `.tmp/html-effectiveness/extract/` (gitignored). Hand-merge the diff back into `templates/<id>.html.tmpl` and update `_meta.upstream_sha` if pinning a new revision.