agent-harness-kit 0.8.0 → 0.10.0

package/src/templates/.claude/output-styles/harness-terse.md

@@ -0,0 +1,42 @@
+---
+name: harness-terse
+description: Solo-dev terse output style for the agent-harness-kit. Cuts ceremonial wrappers (decorative summaries, "let me explain my plan" preambles, "in summary" closers) and biases toward Vietnamese-flavoured English when the user writes mixed VN/EN. Tuned for code-review and refactor work, where the diff is the deliverable and prose around it is noise.
+---
+
+# Output style: harness-terse
+
+You are operating inside the agent-harness-kit — a solo-developer Claude
+Code harness with structural tests, skill side-cars, and a tight
+human-in-the-loop pattern. The user reads diffs and tool calls directly;
+prose is for genuine signal, not narration.
+
+## Rules
+
+1. **No decorative summaries.** Skip "I'll start by…", "Now let me…",
+   "In summary…" and other rituals. State what changed, in one or two
+   sentences.
+2. **No "let me read the file" preambles.** State the action and call
+   the tool — the user sees both.
+3. **Diff > prose.** When a code change is the deliverable, point at the
+   files and let the diff speak. Only add prose where the diff is not
+   self-explanatory.
+4. **Use `path:line` for code references** so the user can jump.
+5. **Match the user's language.** If they write in Vietnamese, reply in
+   Vietnamese. If mixed VN/EN, mirror their balance.
+6. **End turns with what changed + what's next, one sentence each.** No
+   bullet lists summarising the previous turn — the user sees the tool
+   calls.
+7. **When uncertain, ask one focused question.** Don't pad with multiple
+   "or alternatively" branches.
+8. **Skills are first-class.** When a user request maps to a skill,
+   invoke it rather than freestyle the work. Skills carry the harness's
+   safety net (structural tests, baseline monotonic, side-cars).
+
+## What this style is NOT for
+
+- Long-form explanations to non-technical stakeholders.
+- Tutorial / educational responses where worked-out reasoning matters.
+- First-time user onboarding where the user explicitly asks for verbose
+  guidance.
+
+In those cases, fall back to Claude Code's default style.

package/src/templates/.claude/settings.json.hbs

@@ -22,6 +22,7 @@
     ]
   },
   "model": "{{model}}",
+  "outputStyle": "harness-terse",
   "env": {
     "AGENT_HARNESS_KIT_VERSION": "{{kitVersion}}"
   }

package/src/templates/.claude/skills/add-adr/SKILL.md.vi

@@ -0,0 +1,64 @@
+<!-- LOCALE_TODO: translate body to vi -->
+<!-- Source: .claude/skills/add-adr/SKILL.md -->
+<!-- Edit only the markdown body — keep frontmatter verbatim so the kit's renderer + Claude Code parse it identically across locales. -->
+
+---
+name: add-adr
+description: Use this skill whenever a decision is made about architecture, dependencies, frameworks, naming conventions, or layer order. Creates a numbered ADR (Architecture Decision Record) in `docs/adr/` in the canonical Nygard format. Always invoke this before changing layer order, adding a layer, swapping a major dependency, or introducing a new external service.
+allowed-tools: Read, Write, Glob
+suggested-turns: 6
+---
+
+## Steps
+
+1. **Find the next number.** List `docs/adr/` and pick the highest existing
+   number + 1 (zero-padded to 4 digits).
+2. **Generate the file.** Write `docs/adr/{NNNN}-{kebab-title}.md` with the
+   sections below.
+3. **Update affected configs.** If the ADR changes layer order or adds a
+   layer, update `harness.config.json` AND the structural-test config in the
+   same commit as the ADR.
+4. **Append to the index.** Add a one-line entry under "Recent decisions" in
+   `docs/architecture.md`.
+
+## ADR template (write exactly this shape)
+
+```markdown
+# ADR <NNNN> — <title>
+
+- **Status:** proposed | accepted | superseded by <link>
+- **Date:** YYYY-MM-DD
+- **Deciders:** <names or "project owner">
+
+## Context
+
+<What forces are in play? What constraints? What did we learn that triggered this?>
+
+## Decision
+
+<What we decided. Single sentence then a list.>
+
+## Consequences
+
+Positive: ...
+Negative: ...
+
+## Alternatives considered
+
+- <alternative>: <why rejected>
+- <alternative>: <why rejected>
+```
+
+## Output contract
+
+```
+### ADR: <NNNN>-<slug>
+### Status: <status>
+### Configs updated: <list or "none">
+### docs/architecture.md updated: yes/no
+```
+
+## Anti-patterns
+
+- Don't write an ADR for a one-line refactor — those go in commit messages.
+- Don't change the status of an existing ADR retroactively. Supersede it.

package/src/templates/.claude/skills/add-feature/SKILL.md.vi.hbs

@@ -0,0 +1,50 @@
+---
+name: add-feature
+description: Use this skill whenever the user asks to add, implement, or build a new feature, capability, endpoint, page, command, or anything user-visible. Enforces the Anthropic two-fold harness pattern — read feature_list.json, pick exactly one feature, implement incrementally, run the structural test on every save, and never declare "done" without updating the JSON. Always invoke this skill instead of writing new feature code freehand.
+allowed-tools: Read, Edit, Write, Bash(npm run:*), Bash(pytest:*), Bash(ruff:*), Bash(git:*), Glob, Grep
+suggested-turns: 25
+---
+
+## Các bước
+
+1. **Đọc `feature_list.json`.** Xác nhận feature tồn tại và `passes:
+   false`. Nếu user mô tả feature chưa có trong danh sách, **dừng lại**:
+   hỏi xem có nên thêm qua `/add-adr` trước không.
+2. **Đọc `docs/architecture.md`** cho domain bị ảnh hưởng. Xác định
+   những layer nào sẽ thay đổi.
+3. **Chạy `/inspect-module`** trên mỗi module bị ảnh hưởng. Làm điều này
+   ngay cả khi bạn nghĩ đã hiểu khu vực đó — phải kiểm chứng, không phỏng đoán.
+4. **Lập kế hoạch trước.** Viết một đoạn văn ngắn vào `.harness/PLAN.md`
+   *trước khi thay đổi code*. (Pattern theo Anthropic Claude 4 prompt-guide.)
+5. **Bắt đầu từ thay đổi nhỏ nhất.** Sửa ít nhất đủ để một `steps[]`
+   chuyển từ failing → passing.
+6. **Chạy structural test.** {{#if isPython}}`python -m harness.structural_test`{{else}}`npm run harness:check`{{/if}}.
+   Nếu fail, sửa vi phạm trước khi tiếp tục — không bao giờ disable test.
+7. **Smoke test.** Chạy smoke test liên quan trong `scripts/dev-up.sh`.
+8. **Cập nhật `feature_list.json` CHỈ** bằng cách đổi field `passes` của
+   một item. Không bao giờ xóa hoặc viết lại items. (Quy tắc Anthropic
+   "JSON hơn Markdown": "model ít có khả năng thay đổi/ghi đè JSON files
+   so với Markdown.")
+9. **Append vào PROGRESS.** Một dòng vào `.harness/PROGRESS.md`:
+   `YYYY-MM-DD HH:MM | <feature_id> | done`.
+10. **Commit.** Message: `feat(<domain>): <feature_id> - <ngắn gọn>`.
+
+## Các failure mode cần tránh (mỗi dòng tương ứng một lỗi đã quan sát thực tế)
+
+- Không tuyên bố feature đã xong khi chưa chạy smoke test.
+- Không đánh dấu `passes: true` khi structural test còn failing.
+- Không thêm feature mới vào `feature_list.json` giữa session — đề xuất
+  cho session sau qua ADR.
+- Không refactor code không liên quan trong cùng commit.
+
+## Output contract
+
+Sau khi triển khai, tóm tắt:
+
+```
+### Feature: <id>
+### Files changed: <list>
+### Structural test: PASS|FAIL
+### Smoke test: PASS|FAIL
+### Reviewer subagents to invoke: architecture-reviewer, security-reviewer (nếu chạm auth/IO), reliability-reviewer (nếu chạm retries/timeouts)
+```

package/src/templates/.claude/skills/debug-flow/SKILL.md.vi.hbs

@@ -0,0 +1,42 @@
+<!-- LOCALE_TODO: translate body to vi -->
+<!-- Source: .claude/skills/debug-flow/SKILL.md.hbs -->
+<!-- Edit only the markdown body — keep frontmatter verbatim so the kit's renderer + Claude Code parse it identically across locales. -->
+
+---
+name: debug-flow
+description: Use this skill whenever the user reports a bug, unexpected output, or "this doesn't work". Runs the dev server, drives the failing flow via Playwright MCP if installed (else captures stdout/stderr), and produces a minimal repro before any fix. Mirrors the OpenAI Chrome-DevTools-Protocol-into-runtime pattern at solo scale — verify the failure before you propose a fix.
+allowed-tools: Read, Bash({{devCmd}}), Bash(curl:*), Bash(playwright:*), Bash(scripts/dev-up.sh)
+suggested-turns: 20
+---
+
+## Steps
+
+1. **Start the dev server** via `scripts/dev-up.sh`. Wait for the readiness
+   probe.
+2. **Drive the failing flow.**
+   - If the bug is UI: use Playwright MCP (`mcp__playwright__*`) — the
+     Anthropic claude.ai-clone pattern.
+   - If MCP unavailable: fall back to `curl -i` + screenshot via
+     `scrot`/`screencapture`/`gnome-screenshot`.
+3. **Capture context.** Request payload (if any), response status, stderr
+   tail (last 50 lines), last 3 git commits.
+4. **Write a minimal repro** to `.harness/repros/<date>-<slug>.md` with:
+   environment, steps, expected, actual.
+5. **Only then propose a fix.** Run the structural test and the relevant
+   smoke test after the fix. Re-run the repro to confirm.
+
+## Output contract
+
+```
+### Repro saved: .harness/repros/<filename>
+### Failure mode: <one-line summary>
+### Smallest failing input: <code or curl command>
+### Proposed fix location: <file:line>
+```
+
+## Anti-patterns
+
+- Don't propose a fix before reproducing the bug locally.
+- Don't fix more than the user reported in the same commit.
+- Don't add a defensive try/except over the failing call without
+  understanding why it fails.

package/src/templates/.claude/skills/deliver-html/SKILL.md.hbs

@@ -0,0 +1,96 @@
+---
+name: deliver-html
+description: Use this skill whenever the user asks to analyze, audit, review, summarize, produce a report, write a plan, make a proposal, draft a decision doc, list "next actions", or any other task that produces a DOCUMENT a HUMAN reads-and-acts-on. Outputs a self-contained <slug>.html at repo root using the shared dark-theme CSS. Why HTML and not Markdown: golden principle #9 — Markdown is great for files an agent reads-and-edits (CLAUDE.md, SKILL.md, ADRs), but a HUMAN reading a 700-line MD deliverable will scroll, miss the conclusion, and ask the agent to clarify — burning turns and tokens. HTML deliverable is read once, decided once. Do NOT use this skill for files the agent itself reads (those stay MD), for stdout output from /review-this-pr or /garbage-collection (pass-through MD), or for short summaries under ~30 lines (overhead not worth it).
+allowed-tools: Read, Write, Bash(node .claude/skills/deliver-html/scripts/wrap-html.mjs:*), Bash(cat:*), Bash(ls:*)
+suggested-turns: 6
+---
+
+## When to use
+
+Trigger words from the user (English / Vietnamese):
+
+- "analyze X", "audit X", "review X for me" / "phân tích X", "audit X", "review giúp tôi"
+- "produce a report on X" / "báo cáo về X", "tổng kết X"
+- "plan for X", "proposal for X", "decision doc for X" / "plan cho X", "đề xuất X"
+- "what should we do about X", "next actions for X" / "next actions cho X"
+
+Do **NOT** use for:
+
+- Editing `CLAUDE.md`, `SKILL.md`, `docs/*.md`, or any agent-read file (those stay MD).
+- Pass-through stdout from `/review-this-pr`, `/garbage-collection`, `/inspect-module` (the agent itself consumes that — keep it MD).
+- Short summaries (< 30 lines of body). Just answer inline.
+- Files that will be diffed in a PR. Source-of-truth stays MD.
+
+## Steps
+
+1. **Pick a template** based on what the user is asking for:
+   - `decision-doc` (default) — analysis + recommendation + next actions
+   - `audit-report` — findings table with severity, current vs. target state
+   - `status-report` — shipped progress + remaining work + KPIs
+
+2. **Write the MD body** in working memory. Use standard GitHub-flavored
+   Markdown: `#`/`##`/`###` headings, paragraphs, `-`/`1.` lists, fenced
+   ```` ```code``` ````, `> blockquote`, `| a | b |` tables, and inline
+   `code`/`**bold**`/`*italic*`/`[link](url)`.
+
+   You may also use these CSS hooks via raw HTML for richer visuals:
+   - `<div class="card good|warn|bad|info|next">…</div>` — bordered callout
+   - `<span class="pill good|warn|bad|info|alt">P0</span>` — inline badge
+   - `<div class="grid2|grid3">…</div>` — column layout
+   - `<div class="stat good|warn|info"><div class="lbl">…</div><div class="num">…</div></div>` — stat tile
+
+3. **Pick a slug** (kebab-case, derived from title). Default: same dir as
+   CWD (repo root). Example: title "Phân tích auth flow" → file
+   `phan-tich-auth-flow.html`.
+
+4. **Render** with the side-car script:
+
+   ```bash
+   node .claude/skills/deliver-html/scripts/wrap-html.mjs \
+     --title "Phân tích auth flow" \
+     --subtitle "Bằng chứng, lập luận, next actions" \
+     --template decision-doc \
+     --in /tmp/body.md \
+     --out phan-tich-auth-flow.html
+   ```
+
+   The script:
+   - Reads `assets/report.css` (single source of truth for the style).
+   - Auto-detects locale from `harness.config.json` `.claudeMd.humanLanguage` (override with `--lang`).
+   - Converts MD → HTML (self-rolled subset: headings, lists, code blocks,
+     tables, blockquotes, links, inline formatting — no npm dependency).
+   - Writes `<slug>.html` at the path you pass.
+
+5. **Print the deliverable contract** (the script already does this — copy it
+   into your response):
+
+   ```
+   ### Deliverable
+   **File:** <path>  (<size>)
+   **Template:** decision-doc | audit-report | status-report
+   **Lang:** vi | en
+   **Open:** `open <slug>.html`  (macOS)  /  `xdg-open <slug>.html`  (linux)
+   ```
+
+## Output contract
+
+The script writes exactly one file (`<slug>.html`) at the requested path and
+prints the deliverable contract on stdout. The HTML is self-contained
+(CSS inlined) so it can be emailed / sent on Slack / attached to a PR with no
+dependencies.
+
+## Anti-patterns
+
+- **Don't write raw HTML markup in your MD body** beyond the CSS hook
+  patterns above (cards, pills, grids, stats). The wrap script handles the
+  document chrome — your job is content.
+- **Don't inline `<style>` blocks in the body.** The wrap script injects
+  shared CSS once. Inline overrides drift over time.
+- **Don't use this skill for `docs/*.md` updates.** Those are agent-read;
+  they stay MD per principle #9.
+- **Don't claim "done" without writing the file.** The deliverable IS the
+  file. If `wrap-html.mjs` errored, do not move on.
+- **Don't open a deliverable shorter than ~30 lines as HTML.** A short
+  answer belongs in the chat response, not a file.
+- **Don't translate the CSS.** Style is locale-agnostic. Only the `lang`
+  attribute and body copy localize.

package/src/templates/.claude/skills/deliver-html/SKILL.md.vi.hbs

@@ -0,0 +1,89 @@
+---
+name: deliver-html
+description: Use this skill whenever the user asks to analyze, audit, review, summarize, produce a report, write a plan, make a proposal, draft a decision doc, list "next actions", or any other task that produces a DOCUMENT a HUMAN reads-and-acts-on. Outputs a self-contained <slug>.html at repo root using the shared dark-theme CSS. Why HTML and not Markdown: golden principle #9 — Markdown is great for files an agent reads-and-edits (CLAUDE.md, SKILL.md, ADRs), but a HUMAN reading a 700-line MD deliverable will scroll, miss the conclusion, and ask the agent to clarify — burning turns and tokens. HTML deliverable is read once, decided once. Do NOT use this skill for files the agent itself reads (those stay MD), for stdout output from /review-this-pr or /garbage-collection (pass-through MD), or for short summaries under ~30 lines (overhead not worth it).
+allowed-tools: Read, Write, Bash(node .claude/skills/deliver-html/scripts/wrap-html.mjs:*), Bash(cat:*), Bash(ls:*)
+suggested-turns: 6
+---
+
+## Khi nào dùng
+
+Trigger keyword từ user (tiếng Việt / English):
+
+- "phân tích X", "audit X", "review giúp tôi" / "analyze X", "audit X", "review X for me"
+- "báo cáo về X", "tổng kết X" / "produce a report on X"
+- "plan cho X", "đề xuất X", "decision doc cho X" / "plan for X", "proposal for X"
+- "next actions cho X", "ta nên làm gì với X"
+
+**KHÔNG** dùng cho:
+
+- Chỉnh sửa `CLAUDE.md`, `SKILL.md`, `docs/*.md`, hoặc bất kỳ file agent đọc (giữ MD).
+- Output stdout từ `/review-this-pr`, `/garbage-collection`, `/inspect-module` (agent tự consume — giữ MD).
+- Tóm tắt ngắn (< 30 dòng body). Trả lời inline.
+- File sẽ được diff trong PR. Source-of-truth phải MD.
+
+## Các bước
+
+1. **Chọn template** theo yêu cầu user:
+   - `decision-doc` (mặc định) — phân tích + đề xuất + next actions
+   - `audit-report` — bảng findings có severity, trạng thái hiện tại vs. mong muốn
+   - `status-report` — đã ship + còn lại + KPI
+
+2. **Viết body bằng MD** trong working memory. Dùng GitHub-flavored Markdown
+   thông thường: `#`/`##`/`###` headings, paragraph, `-`/`1.` list, fenced
+   ```` ```code``` ````, `> blockquote`, `| a | b |` table, inline
+   `code`/`**bold**`/`*italic*`/`[link](url)`.
+
+   Có thể nhúng các CSS hook qua raw HTML cho visual tốt hơn:
+   - `<div class="card good|warn|bad|info|next">…</div>` — callout viền màu
+   - `<span class="pill good|warn|bad|info|alt">P0</span>` — badge inline
+   - `<div class="grid2|grid3">…</div>` — bố cục cột
+   - `<div class="stat good|warn|info"><div class="lbl">…</div><div class="num">…</div></div>` — ô số liệu
+
+3. **Chọn slug** (kebab-case từ title). Default: cùng thư mục CWD (repo root).
+   Ví dụ: title "Phân tích auth flow" → file `phan-tich-auth-flow.html`.
+
+4. **Render** bằng side-car script:
+
+   ```bash
+   node .claude/skills/deliver-html/scripts/wrap-html.mjs \
+     --title "Phân tích auth flow" \
+     --subtitle "Bằng chứng, lập luận, next actions" \
+     --template decision-doc \
+     --in /tmp/body.md \
+     --out phan-tich-auth-flow.html
+   ```
+
+   Script sẽ:
+   - Đọc `assets/report.css` (single source of truth cho style).
+   - Auto-detect locale từ `harness.config.json` `.claudeMd.humanLanguage` (override bằng `--lang`).
+   - Convert MD → HTML (self-rolled subset: heading, list, code block, table,
+     blockquote, link, inline format — không cần npm dependency).
+   - Ghi `<slug>.html` tại path bạn truyền.
+
+5. **In deliverable contract** (script tự in — bạn copy vào response):
+
+   ```
+   ### Deliverable
+   **File:** <path>  (<size>)
+   **Template:** decision-doc | audit-report | status-report
+   **Lang:** vi | en
+   **Open:** `open <slug>.html`  (macOS)  /  `xdg-open <slug>.html`  (linux)
+   ```
+
+## Output contract
+
+Script ghi đúng 1 file (`<slug>.html`) tại path đã yêu cầu và in deliverable
+contract ra stdout. HTML self-contained (CSS inline) nên có thể gửi qua email
+/ Slack / đính kèm PR mà không cần dependency.
+
+## Anti-patterns
+
+- **Đừng viết raw HTML trong MD body** ngoài các CSS hook đã liệt kê
+  (cards, pills, grids, stats). Wrap script lo phần document chrome — bạn lo nội dung.
+- **Đừng inline `<style>` trong body.** Wrap script inject shared CSS một lần.
+  Inline override sẽ drift theo thời gian.
+- **Đừng dùng skill này cho `docs/*.md`.** Đó là agent-read; giữ MD theo principle #9.
+- **Đừng claim "xong" mà chưa ghi file.** Deliverable CHÍNH LÀ cái file.
+  Nếu `wrap-html.mjs` lỗi, dừng — không chuyển bước.
+- **Đừng tạo HTML cho output < 30 dòng.** Câu ngắn → trả lời inline trong chat.
+- **Đừng dịch CSS.** Style là locale-agnostic. Chỉ `lang` attribute và body copy localize.

package/src/templates/.claude/skills/deliver-html/assets/report.css

@@ -0,0 +1,233 @@
+/* report.css — single source of truth for deliver-html HTML output.
+ *
+ * Extracted from NEXT_ACTIONS.html / PHAN_TICH.html so every deliverable
+ * shares the same dark Github-flavored look. Edit here, every future HTML
+ * deliverable picks it up. Existing HTML files at repo root keep inline
+ * copies (self-contained shipping artefacts — see ADR-0002).
+ */
+
+:root {
+  --bg: #0f1419;
+  --panel: #161b22;
+  --panel2: #1c2128;
+  --border: #30363d;
+  --text: #e6edf3;
+  --muted: #8b949e;
+  --accent: #58a6ff;
+  --accent2: #a371f7;
+  --good: #3fb950;
+  --warn: #d29922;
+  --bad: #f85149;
+  --code-bg: #1c2128;
+  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  line-height: 1.65;
+  font-size: 16px;
+}
+.wrap { max-width: 1180px; margin: 0 auto; padding: 32px 24px 80px; }
+
+/* ----- Hero ----- */
+header.hero {
+  border: 1px solid var(--border);
+  background: linear-gradient(180deg, #161b22 0%, #0f1419 100%);
+  border-radius: 14px;
+  padding: 30px 36px;
+  margin-bottom: 28px;
+  position: relative;
+}
+header.hero::after {
+  content: attr(data-badge);
+  position: absolute;
+  top: 24px;
+  right: 32px;
+  background: rgba(163, 113, 247, 0.15);
+  color: var(--accent2);
+  border: 1px solid rgba(163, 113, 247, 0.5);
+  border-radius: 6px;
+  padding: 4px 12px;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+}
+header.hero[data-badge-tone="good"]::after {
+  color: var(--good);
+  background: rgba(63, 185, 80, 0.15);
+  border-color: rgba(63, 185, 80, 0.5);
+}
+header.hero[data-badge-tone="warn"]::after {
+  color: var(--warn);
+  background: rgba(210, 153, 34, 0.15);
+  border-color: rgba(210, 153, 34, 0.5);
+}
+header.hero[data-badge-tone="bad"]::after {
+  color: var(--bad);
+  background: rgba(248, 81, 73, 0.15);
+  border-color: rgba(248, 81, 73, 0.5);
+}
+header.hero h1 { margin: 0 0 8px; font-size: 30px; letter-spacing: -0.02em; }
+header.hero .sub { color: var(--muted); margin: 0 0 16px; font-size: 15px; }
+header.hero .meta {
+  display: flex;
+  gap: 22px;
+  flex-wrap: wrap;
+  font-size: 13px;
+  color: var(--muted);
+}
+header.hero .meta span strong { color: var(--text); }
+header.hero .tldr {
+  margin-top: 18px;
+  padding: 14px 18px;
+  background: rgba(88, 166, 255, 0.07);
+  border: 1px solid rgba(88, 166, 255, 0.25);
+  border-radius: 8px;
+  font-size: 14.5px;
+}
+header.hero .tldr strong { color: var(--accent); }
+
+/* ----- Typography ----- */
+h2 {
+  margin-top: 44px;
+  margin-bottom: 14px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border);
+  font-size: 22px;
+}
+h2 .num {
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  border-radius: 8px;
+  background: var(--panel2);
+  color: var(--accent);
+  font-size: 14px;
+  font-weight: 600;
+  margin-right: 10px;
+  border: 1px solid var(--border);
+}
+h3 { margin-top: 28px; margin-bottom: 8px; font-size: 17px; color: var(--accent); }
+h4 { margin-top: 18px; margin-bottom: 6px; font-size: 15px; }
+h5 { margin: 12px 0 6px; font-size: 13.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
+h6 { margin: 10px 0 4px; font-size: 12.5px; color: var(--muted); }
+p { margin: 10px 0 14px; }
+a { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+/* ----- Code ----- */
+code, kbd {
+  font-family: var(--mono);
+  background: var(--code-bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 1px 6px;
+  font-size: 12.5px;
+}
+pre {
+  background: var(--code-bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 14px 16px;
+  overflow-x: auto;
+  font-family: var(--mono);
+  font-size: 12.5px;
+  line-height: 1.55;
+}
+pre code { background: none; border: none; padding: 0; }
+
+/* ----- Tables ----- */
+table { width: 100%; border-collapse: collapse; margin: 14px 0 20px; font-size: 14px; }
+th, td { border: 1px solid var(--border); padding: 9px 12px; text-align: left; vertical-align: top; }
+th { background: var(--panel); font-weight: 600; }
+tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); }
+
+/* ----- Lists ----- */
+ul, ol { padding-left: 22px; }
+li { margin: 5px 0; }
+
+/* ----- Cards (border-left accent) ----- */
+.card { border: 1px solid var(--border); border-radius: 10px; padding: 18px 22px; background: var(--panel); margin: 16px 0; }
+.card.good { border-left: 4px solid var(--good); }
+.card.warn { border-left: 4px solid var(--warn); }
+.card.bad  { border-left: 4px solid var(--bad); }
+.card.info { border-left: 4px solid var(--accent); }
+.card.next { border-left: 4px solid var(--accent2); }
+.card h4 { margin-top: 0; }
+
+/* ----- Pills (inline badges) ----- */
+.pill {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 11.5px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  border: 1px solid var(--border);
+  margin-right: 6px;
+}
+.pill.good { background: rgba(63, 185, 80, 0.12);  color: var(--good);    border-color: rgba(63, 185, 80, 0.5); }
+.pill.warn { background: rgba(210, 153, 34, 0.12); color: var(--warn);    border-color: rgba(210, 153, 34, 0.5); }
+.pill.bad  { background: rgba(248, 81, 73, 0.12);  color: var(--bad);     border-color: rgba(248, 81, 73, 0.5); }
+.pill.info { background: rgba(88, 166, 255, 0.12); color: var(--accent);  border-color: rgba(88, 166, 255, 0.5); }
+.pill.alt  { background: rgba(163, 113, 247, 0.12);color: var(--accent2); border-color: rgba(163, 113, 247, 0.5); }
+
+/* ----- Grids ----- */
+.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
+.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 14px 0; }
+.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 14px 0; }
+@media (max-width: 800px) {
+  .grid2, .grid3, .grid4 { grid-template-columns: 1fr; }
+}
+
+/* ----- Stat tiles ----- */
+.stat { border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; background: var(--panel); }
+.stat .num { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
+.stat .lbl { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
+.stat.good .num { color: var(--good); }
+.stat.warn .num { color: var(--warn); }
+.stat.bad  .num { color: var(--bad);  }
+.stat.info .num { color: var(--accent); }
+.stat.alt  .num { color: var(--accent2); }
+
+/* ----- Blockquote ----- */
+blockquote {
+  border-left: 4px solid var(--accent);
+  margin: 14px 0;
+  padding: 8px 16px;
+  color: var(--muted);
+  background: var(--panel2);
+  border-radius: 0 8px 8px 0;
+}
+blockquote p { margin: 4px 0; }
+
+/* ----- TOC ----- */
+.toc { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px 22px; margin: 20px 0 28px; font-size: 14px; }
+.toc h4 { margin: 6px 0 8px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
+.toc ol { margin: 0; padding-left: 22px; columns: 2; }
+@media (max-width: 800px) { .toc ol { columns: 1; } }
+
+/* ----- Side-by-side diff ----- */
+.diff-side { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
+.diff-side .col { border: 1px solid var(--border); border-radius: 10px; background: var(--panel); padding: 14px 16px; }
+.diff-side .col.before { border-top: 3px solid var(--warn); }
+.diff-side .col.after  { border-top: 3px solid var(--good); }
+.diff-side .col h5 { margin: 0 0 8px; }
+@media (max-width: 800px) { .diff-side { grid-template-columns: 1fr; } }
+
+/* ----- Horizontal rule ----- */
+hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }
+
+/* ----- Footer ----- */
+footer {
+  margin-top: 60px;
+  padding-top: 20px;
+  border-top: 1px solid var(--border);
+  color: var(--muted);
+  font-size: 12.5px;
+}

package/src/templates/.claude/skills/deliver-html/templates/audit-report.html.tmpl

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="{{lang}}">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>{{title}}</title>
+<style>
+{{css}}
+</style>
+</head>
+<body>
+<div class="wrap">
+<header class="hero" data-badge="{{badge}}" data-badge-tone="warn">
+  <h1>{{title}}</h1>
+  <p class="sub">{{subtitle}}</p>
+  <div class="meta">
+    <span><strong>Generated:</strong> {{generatedAt}}</span>
+    <span><strong>Template:</strong> audit-report</span>
+  </div>
+</header>
+
+{{content}}
+
+<footer>
+  <p>Generated by agent-harness-kit / <code>/deliver-html</code> — HTML for humans, MD for agents.</p>
+</footer>
+</div>
+</body>
+</html>