# Skill Technical Document
> ---
- Skill: `tranhieutt/skill-technical-document` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add tranhieutt/skill-technical-document`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tranhieutt/skill-technical-document/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tranhieutt (https://skillmd.com/u/tranhieutt)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tranhieutt/skill-technical-document
---
---
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/session
- `red` → security/blocking/guard
- `blue` → enrichment/context/read-path
- `purple` → observability/logging/audit
- _(no class)_ → neutral (matrix, summary, deployment order)
## Step 4: Write content following these rules
**For table cells (`col-desc`):**
- Lead with `Bold summary sentence.` — one sharp phrase
- Follow with detail text
- Bullet points go inside `` — never plain ``
- Inline code uses `` 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 `blocks`
- 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:
```
← Google Fonts +