# Technical Documentation

> Create polished technical documentation as clean HTML and PDF artifacts with a natural developer-documentation aesthetic. Use when Codex is asked to generate, redesign, or export technical reports, implementation guides, onboarding documents, API/configuration summaries, architecture notes, endpoint catalogs, setup checklists, or similar docs that should look professional without feeling artificial, overly corporate, or too plain.

- Skill: `lechuit/technical-documentation` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add lechuit/technical-documentation`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lechuit/technical-documentation/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: lechuit (https://skillmd.com/u/lechuit)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/lechuit/technical-documentation

---


# Technical Documentation

## Overview

Build technical documentation as a source HTML file plus an exported PDF. Favor a calm, documentation-native visual language: readable type, restrained color, thin borders, dotted separators, status dots, clear tables, and code blocks that feel like a developer artifact rather than a marketing deck.

## Workflow

1. Clarify the document purpose, audience, source facts, and final format. If source code or configs exist locally, inspect them before writing claims.
2. Create or update a standalone HTML file. Start from `assets/technical-doc-template.html` when useful, then replace sample content with the user's real content.
3. Keep content concise and structured: title, context, sections, tables, endpoint/config examples, warnings, and implementation notes.
4. Render to PDF with `scripts/render_html_to_pdf.js` or an equivalent browser print workflow.
5. Verify the output before delivery: inspect page count, extract PDF text for removed/required phrases, and review a screenshot or rendered pages for layout issues.
6. Deliver both HTML and PDF paths when both are generated.

## Visual Rules

Read `references/natural-technical-style.md` when creating or redesigning a document. Core rules:

- Use a white A4 page on a subtle gray workspace.
- Use 1px borders, dotted separators, and flat tonal layers instead of heavy shadows or gradients.
- Use small status dots and monospace labels for technical metadata.
- Keep radius small, usually 4px.
- Avoid oversized hero sections, decorative blobs, loud palettes, heavy badges, and artificial SaaS styling.
- Keep tables and code blocks compact, but leave enough whitespace for scanning.
- Do not depend on remote CDNs or web fonts unless the user explicitly wants that.

## Content Rules

- Verify technical facts from source files, configs, APIs, or user-provided material whenever possible.
- Separate operational setup, credentials, environment variables, endpoints, payloads, validation, and deployment notes into clear sections.
- Mark secrets and credentials as placeholders; never include real secrets.
- State environment variables only when they are actually needed or relevant.
- For branch-specific or version-specific claims, use exact names and dates only when verified.
- Preserve user-requested removals. After edits, search generated text for phrases the user asked to remove.

## Template

Use `assets/technical-doc-template.html` as a starting point for A4 HTML reports. It includes:

- Three print-ready pages.
- Header, section kicker, footer, provider/config cards, tables, callouts, and code blocks.
- CSS variables for a muted technical palette.
- Print rules for stable PDF generation.

Copy it into the target workspace, rename it for the document, and edit the content directly. Keep the CSS local unless the target project already has a documented design system.

## Rendering

Use the bundled renderer when Playwright is available:

```bash
node /path/to/technical-documentation/scripts/render_html_to_pdf.js input.html output.pdf preview.png
```

When using Codex's bundled runtime, set `NODE_PATH` to the bundled Node modules directory if plain `node` cannot resolve Playwright.

If Playwright is not available in the active Node environment, use the workspace dependency runtime when present, install dependencies only with user approval if needed, or fall back to the browser/PDF tools available in the environment.

After rendering, verify:

- PDF page count matches the intended document.
- Important headings and required notes are present.
- Removed phrases are absent.
- No blank trailing pages were generated.
- Text does not overlap or clip in the screenshot/PDF.