document

name	document
description	Create beautiful single-page HTML documents with editorial design quality. Use this skill when the user asks to "create a document", "make a one-pager", "build a report", "create a resume", "make a landing page", "write a brief", "design a handout", or mentions documents, one-pagers, reports, briefs, or resumes. Produces polished single-file HTML with print-ready styling.
version	1.0.0

Document

Create polished single-page HTML documents — reports, one-pagers, resumes, briefs, handouts — with editorial design quality. Output is a single index.html that looks great in browser and prints cleanly.

Architecture

Single index.html with:

• Google Fonts loaded via CDN
• All CSS inline in <style>
• All content in semantic HTML
• Print stylesheet via @media print
• No JavaScript required (documents are static)

Interactive Workflow

Before generating, ask the user these questions:

1. What type of document? (one-pager, report, resume, brief, handout, letter)
2. What's the content? (paste text, describe sections, or provide bullet points)
3. Theme preference?

Present theme options:

Light Themes

• Warm Paper — Cream background (#efedea), dark ink, red accents. Editorial/magazine feel.
• Clean White — Pure white, blue accents, generous whitespace. Corporate/modern.
• Soft Gray — Light gray (#f8f9fa), teal accents, subtle borders. Technical/documentation.

Dark Themes

• Ink — Near-black (#1a1a1a), white text, amber accents. Dramatic/executive.
• Midnight — Dark blue (#0f172a), cyan accents, glowing highlights. Tech/startup.
• Terminal — Dark background, green monospace text, scanline texture. Developer/hacker.

4. Font style? (editorial, corporate, playful, technical)

Design System

Color Architecture

Define theme as CSS custom properties:

/* Warm Paper (default light) */
:root {
  --bg: #efedea;
  --bg-surface: #fff;
  --ink: #1a1a1a;
  --ink-muted: #666;
  --accent: #e63946;
  --accent-light: rgba(230, 57, 70, 0.08);
  --border: #e0ddd8;
  --code-bg: #1a1a1a;
  --code-text: #4ade80;
}

Typography Scale

Use a modular scale (1.25 ratio):

Element	Size	Weight	Font
Document title	48px	700	Sans-serif
Section heading (h2)	32px	600	Sans-serif
Subsection (h3)	24px	600	Sans-serif
Body text	16px	400	Sans-serif
Captions/labels	13px	500	Monospace
Code	14px	400	Monospace

Layout

• Max content width: 800px, centered with margin: 0 auto
• Generous padding: 80px 60px
• Section spacing: 48px between major sections
• Line-height: 1.7 for body text (readability)

Visual Elements

• Pull quotes: Large italic text with left accent border
• Callout boxes: Light accent background with border-left
• Data tables: Alternating row colors, monospace numbers
• Horizontal rules: Thin, muted, with generous margin
• Page header: Document title + date + author in a compact header block

Print Optimization

@media print {
  body { background: white; }
  .no-print { display: none; }
  h2, h3 { page-break-after: avoid; }
  table, figure { page-break-inside: avoid; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
}

Content Patterns

One-Pager

• Header block: logo area, title, subtitle, date
• 2-3 column layout for key metrics or features
• Call-to-action block at the bottom
• Fits on exactly one printed page

Report

• Title page section with large heading
• Table of contents with anchor links
• Numbered sections with clear hierarchy
• Charts and tables inline
• Executive summary at the top

Resume

• Name and contact as a clean header
• Two-column layout: sidebar (skills, contact, education) + main (experience)
• Consistent date formatting
• Print-optimized to fit 1-2 pages

Additional Resources

For detailed layout patterns, consult:

• references/layout-patterns.md — Specific CSS patterns for each document type