← ClaudeAtlas

dark-terminal-doclisted

Use when the user wants a polished, shareable single-file HTML technical document with a dark developer / terminal aesthetic — including comparison tables (A vs B), reference sheets, cheatsheets, changelogs, release notes, feature breakdowns, and API docs. Trigger phrases: "make a comparison table", "write a reference doc", "create a feature breakdown", "styled HTML doc", "dark terminal doc", "developer-facing HTML", "comparison cheatsheet", "technical reference page", "release notes HTML", "offline HTML doc", "single-file HTML page", "API cheatsheet", "git cheatsheet", "vs comparison".
Tamircohen28/tamirs-superpowers · ★ 0 · Data & Documents · score 78
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