HTML Reference Page

What It Does

Produces a single HTML file that opens cleanly in any browser—no npm install, no framework, no hosted doc tool required. That makes it ideal for quarterly stats, system architecture overviews, onboarding checklists, and anything you need to email, drop in Slack, or archive alongside the repo.

The output matches a consistent dark theme and typography so every page feels like part of the same kit, not a one-off export.

Available Components

Header with badge and gradient — Title, optional eyebrow or version badge, and a hero area that sets context at a glance.
Info notes — Callouts for warnings, tips, or “read this first” guidance without breaking the flow of the main narrative.
Content cards — Grouped explanations, definitions, or feature summaries in scannable blocks.
Data tables — Sortable-style layouts for metrics, API fields, or comparison matrices.
Summary tables — Compact roll-ups (e.g., KPI vs. target vs. prior period) at the end of a section.
Resource links — Curated outbound links to specs, dashboards, or runbooks with short annotations.
Tags — Lightweight labels for topic, team, or lifecycle stage.
Source citations — Footnotes or inline references when the page synthesizes data or docs from elsewhere.

Composable, not bespoke

Components are meant to mix and match: a stats page might pair summary tables with data tables; an architecture doc might lean on content cards and resource links. The skill picks the smallest set that communicates clearly.

Example Prompts

Create a reference page for our API

Make an HTML page about our architecture

Build a stats page for Q1 metrics

Create a shareable doc for the team

How It Works

Understand the content

Clarifies audience, purpose, and what “done” looks like—exec summary vs. deep reference—so the layout matches the job.

Choose components

Selects from cards, tables, notes, and links based on the information types you’re presenting (numbers, prose, diagrams described as sections, external references).

Build self-contained HTML

Embeds styles inline or in a single <style> block so the file has no external dependencies beyond optional fonts from a CDN if you want them.

Save for sharing

Writes to output/html/ (or your configured path) with a clear filename—ready to open locally, attach, or host as a static asset.