---
name: skill-technical-document
type: workflow
description: |
Generate a polished internal technical HTML document following the SDD visual
design system. Use when asked to "tạo tài liệu kỹ thuáºt", "generate HTML
reference", "visual report", "technical doc", "tạo report HTML", "làm tài
liệu nội bộ", or when asked to document a subsystem (hooks, memory, agents,
ADRs, audit findings) in a browser-readable format with sidebar navigation.
argument-hint: "[document topic, subsystem, or report scope]"
user-invocable: true
allowed-tools: Read, Glob, Grep, Write
effort: 3
when_to_use: "Use when asked to generate an internal technical HTML document, visual reference, subsystem report, or browser-readable documentation artifact."
Goal
Generate a single, self-contained .html file that looks and feels like
hooks_visual_report.html — warm off-white palette, JetBrains Mono + Inter
fonts, fixed sidebar with section nav, and layered content sections —
without needing any external CSS framework or JS library.
Instructions
Step 1: Identify document type
Pick the layout template based on content:
| Document type |
Primary component |
Secondary components |
| Hook / agent reference |
Hook-table |
Deployment priority list |
| Architecture / flow |
Diagram-block |
Section tables |
| Audit / compliance |
Matrix-table |
Callouts, checklists |
| ADR / decision record |
Priority-list |
Callouts, diagram |
| Memory / config reference |
Hook-table |
Callouts |
Step 2: Plan sections (max 7)
Map content → § 00, § 01, ... sections. Each section needs:
- A unique
id for the sidebar anchor
- A
section-num label
- A
section-desc (1–2 sentences)
- One primary component (table, diagram, or list)
Step 3: Assign nav dot colors
Nav dots communicate semantics, not decoration:
green → start/lifecycle/sessionred → security/blocking/guardblue → enrichment/context/read-pathpurple → observability/logging/audit- (no class) → neutral (matrix, summary, deployment order)
Step 4: Write content following these rules
For table cells (col-desc):
- Lead with
<strong>Bold summary sentence.</strong> — one sharp phrase
- Follow with detail text
- Bullet points go inside
<ul class="behaviors"> — never plain <ul>
- Inline code uses
<code> inside .col-desc
For hook/agent names (hn):
- Always monospace
- Never truncate — use full filename including extension
For numbers in doc-meta:
- Must be real, meaningful counts (files, hooks, layers, date)
- Don't invent stats
For event badges:
- SessionStart →
.ev-green
- PreToolUse:Bash/Task (when it can
exit 2) → .ev-red + add <span class="blocks">blocks</span>
- UserPromptSubmit, PreToolUse:Read/Write →
.ev-blue
- PostToolUse, SubagentStart, PreCompact →
.ev-purple
- Stop, sub-process, utility →
.ev-orange
- Warnings/partial states →
.ev-amber
Diagram block (dark canvas):
- Background: dark (
--text = #1A1614)
- Highlighted items:
.hl → #F5A673
- Dimmed items:
.dim → #6B6058
- Always has
.diagram-caption with // description text
Step 5: Assemble HTML file
Structure:
<html>
<head> ← Google Fonts + <style> block from resources/css_template.md
<body>
<div class="shell">
<nav class="sidebar"> ← brand + nav-links + sidebar-footer
<main class="main">
<header class="doc-header"> ← eyebrow + title + subtitle + meta-stats
<section § 00> ← diagram-block (flow map)
<hr class="section-sep">
<section § 01..N> ← tables / matrices / priority lists
<hr class="section-sep"> between each
<div class="doc-footer">
<script> ← scroll-highlight JS (see resources/components.md)
Step 6: Output
- Save to
docs/ as {topic}_visual_report.html or {topic}_reference.html
- Single file, no external dependencies
- Run the Quality Checklist from
resources/checklist.md before finalizing
Examples
See examples/audit_summary_example.html — a compact 3-section doc showing
header + diagram + matrix + priority-list in ~200 lines.
See examples/agent_reference_example.html — a full 5-section agent reference
with hook-tables and event badges.
Constraints
- SKILL.md must use the exact CSS tokens from
resources/css_template.md —
never invent new color values
- Never use Tailwind, Bootstrap, or any external CSS framework
- Never use placeholder text ("Lorem ipsum") — all content must be real
- Keep
<style> block complete but minified — put readable reference in
resources/css_template.md
- Sidebar must always have a
sidebar-footer with at least 2 metadata lines
- Section count: minimum 2, maximum 7 — more than 7 = split into 2 docs
doc-meta stats must be real numbers sourced from the actual content- Always include the scroll-highlight
<script> at end of <body>
1---2name: skill-technical-document3description: ---4---5---6name: skill-technical-document7type: workflow8description: |9 Generate a polished internal technical HTML document following the SDD visual10 design system. Use when asked to "tạo tài liệu kỹ thuáºt", "generate HTML11 reference", "visual report", "technical doc", "tạo report HTML", "làm tài12 liệu ná»™i bá»™", or when asked to document a subsystem (hooks, memory, agents,13 ADRs, audit findings) in a browser-readable format with sidebar navigation.14argument-hint: "[document topic, subsystem, or report scope]"15user-invocable: true16allowed-tools: Read, Glob, Grep, Write17effort: 318when_to_use: "Use when asked to generate an internal technical HTML document, visual reference, subsystem report, or browser-readable documentation artifact."19---2021# Goal2223Generate a single, self-contained `.html` file that looks and feels like24`hooks_visual_report.html` — warm off-white palette, JetBrains Mono + Inter25fonts, fixed sidebar with section nav, and layered content sections —26without needing any external CSS framework or JS library.2728# Instructions2930## Step 1: Identify document type3132Pick the layout template based on content:3334| Document type | Primary component | Secondary components |35| ------------------------- | ----------------- | ------------------------ |36| Hook / agent reference | Hook-table | Deployment priority list |37| Architecture / flow | Diagram-block | Section tables |38| Audit / compliance | Matrix-table | Callouts, checklists |39| ADR / decision record | Priority-list | Callouts, diagram |40| Memory / config reference | Hook-table | Callouts |4142## Step 2: Plan sections (max 7)4344Map content → `§ 00`, `§ 01`, ... sections. Each section needs:45- A unique `id` for the sidebar anchor46- A `section-num` label47- A `section-desc` (1–2 sentences)48- One primary component (table, diagram, or list)4950## Step 3: Assign nav dot colors5152Nav dots communicate semantics, not decoration:53- `green` → start/lifecycle/session54- `red` → security/blocking/guard55- `blue` → enrichment/context/read-path56- `purple` → observability/logging/audit57- _(no class)_ → neutral (matrix, summary, deployment order)5859## Step 4: Write content following these rules6061**For table cells (`col-desc`):**62- Lead with `<strong>Bold summary sentence.</strong>` — one sharp phrase63- Follow with detail text64- Bullet points go inside `<ul class="behaviors">` — never plain `<ul>`65- Inline code uses `<code>` inside `.col-desc`6667**For hook/agent names (`hn`):**68- Always monospace69- Never truncate — use full filename including extension7071**For numbers in `doc-meta`:**72- Must be real, meaningful counts (files, hooks, layers, date)73- Don't invent stats7475**For event badges:**76- SessionStart → `.ev-green`77- PreToolUse:Bash/Task (when it can `exit 2`) → `.ev-red` + add `<span class="blocks">blocks</span>`78- UserPromptSubmit, PreToolUse:Read/Write → `.ev-blue`79- PostToolUse, SubagentStart, PreCompact → `.ev-purple`80- Stop, sub-process, utility → `.ev-orange`81- Warnings/partial states → `.ev-amber`8283**Diagram block (dark canvas):**84- Background: dark (`--text` = `#1A1614`)85- Highlighted items: `.hl` → `#F5A673`86- Dimmed items: `.dim` → `#6B6058`87- Always has `.diagram-caption` with `// description` text8889## Step 5: Assemble HTML file9091Structure:92```93<html>94 <head> ← Google Fonts + <style> block from resources/css_template.md95 <body>96 <div class="shell">97 <nav class="sidebar"> ← brand + nav-links + sidebar-footer98 <main class="main">99 <header class="doc-header"> ← eyebrow + title + subtitle + meta-stats100 <section § 00> ← diagram-block (flow map)101 <hr class="section-sep">102 <section § 01..N> ← tables / matrices / priority lists103 <hr class="section-sep"> between each104 <div class="doc-footer">105 <script> ← scroll-highlight JS (see resources/components.md)106```107108## Step 6: Output109110- Save to `docs/` as `{topic}_visual_report.html` or `{topic}_reference.html`111- Single file, no external dependencies112- Run the Quality Checklist from `resources/checklist.md` before finalizing113114# Examples115116See `examples/audit_summary_example.html` — a compact 3-section doc showing117header + diagram + matrix + priority-list in ~200 lines.118119See `examples/agent_reference_example.html` — a full 5-section agent reference120with hook-tables and event badges.121122# Constraints123124- SKILL.md must use the exact CSS tokens from `resources/css_template.md` —125 never invent new color values126- Never use Tailwind, Bootstrap, or any external CSS framework127- Never use placeholder text ("Lorem ipsum") — all content must be real128- Keep `<style>` block complete but minified — put readable reference in129 `resources/css_template.md`130- Sidebar must always have a `sidebar-footer` with at least 2 metadata lines131- Section count: minimum 2, maximum 7 — more than 7 = split into 2 docs132- `doc-meta` stats must be real numbers sourced from the actual content133- Always include the scroll-highlight `<script>` at end of `<body>`134135<!-- Generated by Skill Creator Ultra v1.0 -->
tranhieutt