pro-report-builder

Pro Report Builder

Polished consulting reports as standalone HTML. Export to PDF via Chrome headless.

Install

git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/pro-report-builder ~/.claude/skills/

Quick Reference

| Task | Approach | |------|----------| | Create report from scratch | Read [REFERENCE.md](REFERENCE.md) for CSS + HTML patterns | | Add a new component type | Compose from existing components in REFERENCE.md | | Export to PDF | Chrome headless --print-to-pdf (see Export section) | | Customize brand tokens | Edit CSS custom properties in :root block |

When to Use This Skill vs pro-deck-builder

| | pro-report-builder | pro-deck-builder | |---|---|---| | Format | 8.5x11" portrait pages | 16:9 landscape slides | | Content flow | Multi-page, flowing text | Single-slide compositions | | Export | Chrome headless --print-to-pdf | Puppeteer | | Use for | Audit reports, assessments, written deliverables | Presentation decks, pitch slides |

Before You Start

Step 1: Understand the Brief

Ask the user:

1. What type of document? Audit report, assessment, technical brief, case study?
2. How many pages roughly? Helps plan section flow and page distribution.
3. What data do they have? Raw numbers, API exports, spreadsheets? Pull exact values -- never estimate when actuals exist.
4. Where should the file be saved? Default: ./output/

Step 2: Plan the Document Structure

Every report follows this structure:

Cover Page --> Executive Summary --> Analysis Sections (3-6) --> Prioritized Recommendations --> Quick Wins --> Appendix

Each analysis section should occupy 1-2 pages. Recommendation cards are the most space-intensive component -- budget carefully.

Design System

Customizable Brand Identity

The included design system provides a professional default. All color tokens, typography, and spacing are defined as CSS custom properties in :root. Override these to match your brand.

Color Tokens

:root {
  /* Accent -- change this to your brand color */
  --accent:        #3D7A5C;
  --accent-dim:    rgba(61, 122, 92, 0.08);
  --accent-dark:   #2E6B4A;
  --accent-light:  #6AB88A;

  /* Severity */
  --excellent:     #2e8b57;
  --warning:       #D97706;
  --critical:      #c0392b;

  /* Light-mode backgrounds (warm cream) */
  --bg-page:       #FAF7F2;
  --bg-surface:    #F2EDE6;
  --bg-elevated:   #EBE5DD;

  /* Light-mode text */
  --text-primary:  #0f0e0e;
  --text-body:     #57606a;
  --text-muted:    #8b949e;

  /* Borders */
  --border:        rgba(15, 14, 14, 0.1);
  --border-dim:    rgba(15, 14, 14, 0.06);

  /* Callout tints */
  --tint-blue:     #eaf2ed;
  --tint-green:    #eaf5ef;
  --tint-red:      #fef2f2;
  --tint-amber:    #fffbeb;

  /* Dark mode (cover page only) */
  --dark-bg:       #141414;
  --dark-surface:  #1E1E1E;
  --dark-text:     #f0f3f6;
  --dark-muted:    #6e7681;
  --dark-secondary:#9ca3af;
  --dark-border:   rgba(255, 255, 255, 0.08);
}

Color rules:

• Warm cream (#FAF7F2) backgrounds on ALL content pages -- NOT white. This is a brand differentiator.
• Dark mode (#141414) is reserved for the cover page only.
• Accent color for accent rules, table headers, bullet markers, priority banner accents, rec-card left stripes. Used deliberately, never for decoration.
• Severity colors (green/amber/red) ONLY for performance indicators. Never decorative.
• Callout tints (blue/green/red/amber) for left-bordered callout boxes matching their severity.

Typography

| Role | Font | Weight | Size | Tracking | Notes | |------|------|--------|------|----------|-------| | Cover title | Switzer | Light (300) | 36pt | -0.03em | Document name on dark cover. | | Cover subtitle | Switzer | Regular (400) | 16pt | normal | Below cover title. Color: --dark-muted. | | Cover tag | Cartograph CF | Regular (400) | 8pt | +0.15em | ALL CAPS. Color: --accent. Above title. | | Section title | Switzer | Regular (400) | 18pt | -0.02em | Content page h2. Followed by accent rule. | | Subsection title | Switzer | SemiBold (600) | 12.5pt | normal | Content page h3. | | Body text | Switzer | Regular (400) | 9.5pt | normal | Paragraphs, descriptions. Line-height: 1.6. | | Table header | Cartograph CF | SemiBold (600) | 7.5pt | +0.05em | ALL CAPS. White text on accent bg. | | Table body | Switzer | Regular (400) | 8.5pt | normal | Alternating row backgrounds. | | KPI value | Cartograph CF | SemiBold (600) | 16pt | -0.02em | KPI card numbers. | | KPI label | Cartograph CF | Regular (400) | 6.5pt | +0.06em | ALL CAPS. Below KPI values. | | Rec-card label | Cartograph CF | SemiBold (600) | 7.5pt | +0.04em | ALL CAPS. Field labels. | | Priority banner | Cartograph CF | SemiBold (600) | 9pt | +0.08em | ALL CAPS. Priority tier labels. | | Page footer | Switzer | Regular (400) | 7pt | +0.03em | Centered. Color: --text-muted. |

Critical typography rules:

1. Cover title uses Light (300), NOT Bold. Light at large sizes = confident, premium.
2. Monospace font for ALL numeric/data content. KPI values, table headers, rec-card labels, priority banners.
3. Body text at 9.5pt with 1.6 line-height. Reading-optimized document, not a slide.
4. Table headers are ALL CAPS monospace on accent background. Distinctive table style.

Font defaults (swappable):

• Switzer: loaded from Fontshare CDN (free). Fallback: system-ui, sans-serif
• Cartograph CF: commercial, loaded via local(). Fallback: JetBrains Mono, monospace

Page Dimensions

Width:   8.5in
Height:  11in
Orientation: Portrait

Spacing

| Zone | Value | |------|-------| | Content padding | 0.6in 0.75in 0.7in | | Cover page padding | 0 1in 1in (bottom-aligned) | | Page footer | Absolute positioned, bottom: 0, padding: 10px 0.75in 14px | | Section title margin-bottom | 4px (then accent rule adds 20px below) | | Subsection title margin | 20px top, 8px bottom |

Component Library

All components are documented with full HTML + CSS in [REFERENCE.md](REFERENCE.md). Here is what is available:

Page Structure

| Component | Class | Use | |-----------|-------|-----| | Page Container | .page | 8.5x11" page with shadow. | | Cover Page | .cover-page | Dark cover with bottom-aligned content. | | Content Area | .content | Padded content region within a page. | | Page Footer | .page-footer | Centered footer with doc name + page number. | | Section Title | .section-title + .accent-rule | Section heading with accent underline. | | Section Continued | .section-continued | "(continued)" tag for multi-page sections. |

Data Display

| Component | Class | Use | |-----------|-------|-----| | KPI Row | .kpi-row / .kpi-card | 4-column grid of big-number cards. | | KPI Card (Risk) | .kpi-card--risk | Red-tinted variant for risk/negative KPIs. | | Data Table | table with severity classes | Striped rows, accent headers, severity colors. |

Content Blocks

| Component | Class | Use | |-----------|-------|-----| | Callout Box | .callout + .callout-{color} | Left-bordered insight box (blue/green/red/amber). | | Body Text | .body-text | Standard paragraph text. | | Bullet List | .bullet-list | Accent-colored dot bullets. | | Numbered List | .numbered-list | Mono-font accent markers. |

Recommendations

| Component | Class | Use | |-----------|-------|-----| | Priority Banner | .priority-banner + level class | Tier label (CRITICAL/HIGH/MEDIUM/LOW). | | Recommendation Card | .rec-card + level class | Multi-field card with left accent stripe. | | Quick Wins Table | Table with .qw-num | Numbered action items table. |

Document Compositions

Mandatory Pages

Every report must include:

1. Cover Page (.cover-page) -- Dark background, document title, metadata (date, account, period)
2. Executive Summary -- KPI row + key findings callout + brie