← ClaudeAtlas

dark-terminal-doclisted

Use when a single-file HTML technical document should carry a dark developer / terminal aesthetic — monospace type, terminal-green accents, near-black background. Trigger on: "dark terminal doc", "terminal-style HTML", "developer-terminal aesthetic", "make it look like a terminal", "dark developer-facing HTML page", or when the user wants a reference sheet, comparison table, changelog or API cheatsheet rendered in that specific look, or one matching a document already produced in this style. For a document with no stated aesthetic, use the harness design skills instead.
Tamircohen28/tamirs-superpowers · ★ 2 · AI & Automation · score 74
Install: claude install-skill Tamircohen28/tamirs-superpowers
# Dark Terminal Document Design System ## Why this skill exists Standard markdown renders poorly in meetings, portfolios, and async handoffs. Notion exports are generic, Confluence is ugly, and spinning up a React/Next.js site for a one-off comparison table is overkill. This skill produces a **single self-contained HTML file** — no dependencies, no build step, no framework — that looks like a polished internal developer tool: dark IDE aesthetic, dense tables, semantic status colors. The output opens directly in any browser, can be emailed as an attachment, or dropped into GitHub Pages. Naive approaches fail because: ad-hoc inline styles drift from the design system, font loading order breaks the monospace/sans split, and brand accent colors used directly in body text create contrast issues (they need pastelizing). --- ## Workflow 1. **Confirm the document type** from the user's request: - Comparison doc (two subjects side by side) → use all columns + summary cards - Reference/cheatsheet (one subject, many rows) → Command / Syntax / Description - Changelog/release notes (chronological) → Change / Impact / Description - Feature breakdown (one product, feature × status) → Feature / Status / Notes 2. **Identify brand colors** for comparison docs. For single-subject docs, pick one `--brand-a` accent and omit `--brand-b`. 3. **Load the CSS design system** from `references/css-design-system.md` and copy the token block verbatim. Override only `--brand-a` and `--b