professional-report-design

name	professional-report-design
description	Professional PDF Reports: IBM/McKinsey style, infographics, data visualization, perfect pagination, print-ready A4/Letter layouts.
triggers	{"extensions":[".html",".pdf",".pptx"],"directories":["reports/","documents/","pdf/","presentation/"],"keywords":["pdf","report","professional","document","print","infographic","chart","presentation"]}
auto_load_when	Creating professional PDF reports, executive summaries, data-driven presentations
agent	document-creator
tools	["Read","Write","Bash"]

Professional Report Design (IBM/McKinsey Style)

Focus: Print-perfect PDF generation, infographics, professional layouts, data visualization

---

1. Core Philosophy

Every page is a canvas:
├── Cover → Executive Summary → Findings → Recommendations → Appendix
├── Every element must survive print (300 DPI, A4/Letter)
├── White space = luxury, not waste
└── Infographics > tables > text for complex data

---

2. A4 Page Architecture

A4 Page Layout (210mm x 297mm):
┌─────────────────────────────────────────────────────┐
│  Header (optional): Logo, report title, page info │
├─────────────────────────────────────────────────────┤
│                                                     │
│  Main Content Area                                  │
│  - Full width: 160mm (25mm margins each side)      │
│  - Two columns: 77mm each + 6mm gap                 │
│                                                     │
├─────────────────────────────────────────────────────┤
│  Footer: Page N of M | Date | Confidentiality      │
└─────────────────────────────────────────────────────┘

---

3. IBM/McKinsey Design System

:root {
  /* Primary Colors */
  --primary: #101828;         /* Deep charcoal - headings */
  --primary-light: #1E293B; /* Secondary headings */
  
  /* Brand Colors */
  --mckinsey-blue: #056DAE;  /* McKinsey blue */
  --ibm-blue: #0F62FE;       /* IBM blue */
  --accent-teal: #0D9488;    /* Accent for highlights */
  --accent-amber: #D97706;   /* Warning/attention */
  --accent-red: #DC2626;     /* Critical/alerts */
  
  /* Neutrals */
  --surface: #F8FAFC;        /* Background */
  --surface-alt: #F1F5F9;    /* Alternate background */
  --border: #E2E8F0;         /* Lines, dividers */
  --text: #1E293B;          /* Body text */
  --text-muted: #64748B;     /* Secondary text */
  --text-subtle: #94A3B8;    /* Tertiary, captions */
  
  /* Typography */
  --font-display: 'IBM Plex Sans', 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', , monospace;
  
  
  : ;
  : ;
  : ;
  : ;
  : ;
  : ;
}


 {
  size: A4;
  :    ; 
  
   {
    : (footer);
  }
   {
    : (page)  (pages);
    : ;
    : (--text-subtle);
  }
}

---

4. Typography System

/* Headings */
h1 {
  font-family: var(--font-display);
  font-size: 26pt;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.2;
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--mckinsey-blue);
}

h2 {
  font-family: var(--font-display);
  font-size: 18pt;
  font-weight: 600;
  color: var(--primary-light);
  margin: 32px 0 12px 0;
  letter-spacing: -0.02em;
}

h3 {
  font-family: var(--font-display);
  font-size: 13pt;
  font-weight: 600;
  color: var(--mckinsey-blue);
  margin: 20px 0 8px 0;
  text-transform: uppercase;
  : ;
}


 {
  : (--font-display);
  : ;
  : ;
  : (--text);
  :    ;
  : justify;
}


 {
  : ;
  : (--text-muted);
  : ;
}


 {
  : ;
  : ;
  : (--text-subtle);
  : uppercase;
  : ;
}

---

5. Infographic Components

5.1 Metric Card (Key Insight)

<div class="metric-card">
  <div class="metric-value">47%</div>
  <div class="metric-label">Cost Reduction</div>
  <div class="metric-context">vs. Industry Average</div>
</div>

<style>
.metric-card {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  padding: 20px 28px;
  border-radius: 4px;
  text-align: center;
  break-inside: avoid;
}
.metric-value {
  font-size: 36pt;
  font-weight: 700;
  line-height: 1;
}
.metric-label {
  font-size: 11pt;
  font-weight: 600;
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
 {
  : ;
  : ;
  : ;
}

5.2 Progress Ring

<div class="progress-ring">
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="45" fill="none" stroke="var(--border)" stroke-width="8"/>
    <circle cx="50" cy="50" r="45" fill="none" stroke="var(--mckinsey-blue)" 
            stroke-width="8" stroke-dasharray="283" stroke-dashoffset="70"/>
  </svg>
  <span class="progress-value">75%</span>
</div>

5.3 Comparison Bar

<div class="comparison-bar">
  <div class="bar-row">
    <span class="bar-label">Current State</span>
    <div class="bar-track"><div class="bar-fill" style="width: 35%"></div></div>
    <span class="bar-value">35%</span>
  </div>
  <div class="bar-row">
    <span class="bar-label">Target State</span>
    <div class="bar-track"><div class="bar-fill target" style="width: 78%"></div></div>
    <span class="bar-value">78%
  

---

6. Data Visualization

6.1 Simple Bar Chart (CSS-only)

<div class="chart-container">
  <h4>Revenue by Region (USD Millions)</h4>
  <div class="bar-chart">
    <div class="bar-item">
      <span class="bar-label">North America</span>
      <div class="bar-wrapper"><div class="bar" style="width: 92%"></div></div>
      <span class="bar-value">$42.5M</span>
    </div>
    <div class="bar-item">
      <span class="bar-label">Europe</span>
      <div class="bar-wrapper"><div class="bar" style=>
      $31.2M
    
    
      Asia Pacific
      
      $24.8M
    
  

6.2 Timeline

<div class="timeline">
  <div class="timeline-item">
    <div class="timeline-marker"></div>
    <div class="timeline-date">Q1 2024</div>
    <div class="timeline-content">
      <h4>Assessment Complete</h4>
      <p>Initial baseline analysis and stakeholder interviews</p>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-marker"></div>
    <div class="timeline-date">Q2 2024</div>
    <div class="timeline-content">
      <h4>Implementation Started</h4>
      <p>Phase 1 rollout to pilot markets
    
  

---

7. Table Patterns

7.1 Executive Summary Table

<table class="executive-table">
  <thead>
    <tr>
      <th>Metric</th>
      <th>Current</th>
      <th>Target</th>
      <th>Change</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Customer Satisfaction</td>
      <td>72%</td>
      <td>85%</td>
      <td class="positive">+13%</td>
    </tr>
    <tr>
      <td>Operating Cost</td>
      <td>$4.2M</td>
      <td>$3.1M
      -26%
    
  

---

8. Page Overflow Prevention (CRITICAL)

8.1 The Golden Rules

/* NEVER split these across pages */
.no-break, 
.table, 
figure, 
.chart-container,
.infographic,
.metric-card,
.callout-box,
.key-insight {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* Keep paragraphs together */
p {
  orphans: 3;   /* Min 3 lines at bottom of page */
  widows: 3;    /* Min 3 lines at top of page */
}

/* Images max-width */
img, svg {
  max-width: 100%;
  max-height: 180mm; /* Prevent tall images */
  object-fit: contain;
}

8.2 Long Tables

/* For tables longer than half a page */
table.long-table {
  font-size: 9pt;
}

table.long-table thead {
  position: sticky;
  top: 0;
}

/* Table row keeps together */
table tbody tr {
  break-inside: avoid;
}

8.3 Section Break Strategy

/* Major sections get new page */
.section-intro {
  break-before: page;
}

.section-findings {
  break-before: page;
}

.section-appendix {
  break-before: page;
}

/* Subsections stay on same page when possible */
h2 {
  break-after: avoid;
  page-break-after: avoid;
}

---

9. Professional Layouts

9.1 Cover Page

<div class="cover-page">
  <div class="cover-header-bar"></div>
  
  <div class="cover-logo">
    <img src="logo.svg" style="height: 40px;"/>
  </div>
  
  <div class="cover-title-block">
    <div class="cover-category">STRATEGIC ASSESSMENT</div>
    <h1>Digital Transformation<br/>Initiative 2024</h1>
    <div class="cover-subtitle">Executive Summary & Recommendations</div>
  </div>
  
  <div class="cover-meta">
    <div class="meta-row">
      <span class="meta-label">Prepared for</span>
      <span =>Executive Leadership Team
    
    
      Date
      May 2024
    
    
      Classification
      CONFIDENTIAL
    
  
  
  
    OmniRule Analytics
  

9.2 Executive Summary (2-column)

<div class="two-column">
  <div class="column">
    <h3>Key Findings</h3>
    <ul class="summary-list">
      <li><strong>73%</strong> of processes require automation</li>
      <li><strong>$2.4M</strong> potential annual savings identified</li>
      <li><strong>8 weeks</strong> estimated implementation timeline</li>
    </ul>
  </div>
  <div class="column">
    <h3>Recommendations</h3>
    <ul class="summary-list">
      <li>Implement RPA for finance operations</li>
      <li>Consolidate vendor contracts
      Establish Center of Excellence
    
  

---

10. Playwright PDF Generation

import { chromium } from 'playwright';

interface PDFOptions {
  format?: 'A4' | 'Letter';
  margin?: { top: string; right: string; bottom: string; left: string };
  scale?: number;
}

async function generatePDF(html: string, outputPath: string, options: PDFOptions = {}) {
  const browser = await chromium.launch({ 
    headless: true,
    args: ['--no-sandbox']  // For server environments
  });
  
  const page = await browser.newPage({
    viewport: { width: 2480, height: 3508 },  // A4 at 300 DPI
  });
  
  // Set content with proper viewport
  await page.setContent(html, { 
    waitUntil: 'networkidle',
    timeout: 30000
  });
  
  
   page.( ..);
  
  
   page.({
    : outputPath,
    : options. || ,
    : ,
    : ,
    : options. || {
      : ,
      : , 
      : ,
      : 
    },
    : ,
  });
  
   browser.();
}

---

11. Common Issues & Solutions

Problem	Solution
Text cuts off mid-sentence	Add orphans: 3; widows: 3; to paragraphs
Table header repeats on each page	Use <thead> with position: sticky
Image too large/broken	Set max-height: 170mm; object-fit: contain
Footer overlaps content	Increase bottom margin in @page
Colors wrong in print	Add print-color-adjust: exact to colored elements
Chinese/Japanese fonts missing	Embed as WOFF2 base64 or use system fonts
Charts look blurry	Use SVG instead of PNG, 2x resolution
Page numbers wrong	Use CSS counters: counter(pages)

---

12. Quick Reference

Element	CSS Property	Value
Page size	@page size	A4 (210 × 297mm)
Margins	@page margin	20mm 25mm 18mm 25mm
No page break	break-inside	avoid
New page	break-before	page
Keep together	break-after	avoid
Orphan lines	orphans	3
Widow lines	widows	3
Print colors	print-color-adjust	exact

---

Anti-Patterns

❌ Never Do	✅ Do Instead
Fixed heights in mm for text containers	Use min-height or let content expand
Position: fixed for headers	Use @page margin boxes
overflow: hidden on main containers	Use break-inside: avoid on children
Images larger than 170mm	Scale down, use object-fit: contain
Different margins per page	Use consistent @page margins
Screen-only @media for print	Write print-first CSS by default
PNG for charts at 72 DPI	Use SVG or 300 DPI PNG
External fonts via @import	Embed as base64 WOFF2

🌍 Universal Language Support

• Turkish Native: This skill natively supports Turkish. If the user prompt is in Turkish, all analysis, formatting, and output MUST be entirely in Turkish. You do not need explicit "write in Turkish" instructions.