document-design_skill

Overview

This skill helps create professional, print-ready HTML documents that export cleanly to PDF with consistent branding. It provides brand configuration, CSS patterns for print layout, and practical document components so you can produce proposals, reports, one-pagers, newsletters, slides, and event materials quickly. Use it to generate HTML that prints to 8.5"×11" letter layouts with reliable margins and footers.

How this skill works

It first checks for a local brand configuration file and applies those colors, fonts, and style rules to generate CSS variables. It then builds page-structured HTML with fixed dimensions, print-ready CSS (including @page rules, print color adjustments, and page-break controls), and common components like cover headers, budget tables, and highlight boxes. The output is saved as an HTML file you can open in Chrome and export to PDF with background graphics enabled.

When to use it

• You need a print-ready PDF from HTML (proposals, reports, one-pagers).
• You want documents that match an organization’s brand colors and fonts.
• You need repeatable templates for newsletters, slides, or event materials.
• You must produce print-safe CSS with fixed page and footer behavior.
• You want a quick workflow to preview HTML and export high-quality PDFs.

Best practices

• Check for .claude/pdf-playground.local.md and use its brand frontmatter; fall back to sensible defaults if missing.
• Design print-first: target 8.5"×11" with page padding and a reserved footer area.
• Use CSS variables derived from brand colors and compute a slightly darker primary for accents.
• Load web fonts via a single @import and set clear fallback fonts for print reliability.
• Avoid complex animations and rely on static layout; use page-break-inside: avoid on multi-element blocks.

Example use cases

• Create a branded proposal HTML that exports to a client-ready PDF with cover, TOC, and budget table.
• Design a one-pager or product brief using the highlight-box and section-title patterns for visual hierarchy.
• Build an event program or flyer that prints reliably with a fixed footer and contact details.
• Generate a multi-page report with consistent headings, page breaks, and a printable table style.
• Produce a newsletter template that can be reused by swapping content while keeping brand CSS variables.