--- name: deck-design-pdf description: > Create presentation decks as high-fidelity PDF files using web technology (HTML, CSS, Tailwind, Font Awesome). Use when the user wants a polished, pixel-perfect deck with responsive layouts, rich typography, icons, and modern design. For editable PPTX output, use deck-design-ppt instead. ---

# Deck Design PDF: Operational Playbook

## What This Skill Does

- **Input:** a deck brief + any structured data the user provides. - **Output:** a **PDF file**: pixel-perfect slides rendered from HTML/CSS via Playwright. Not editable in PowerPoint. This is the high-fidelity, print-ready format.

### When to use this vs deck-design-ppt

| Need | Skill | |---|---| | Editable slides (PowerPoint/Keynote/Slides) | `deck-design-ppt` | | Pixel-perfect PDF: web typography, icons, gradients, CSS layouts | `deck-design-pdf` (this) |

### What the web stack unlocks (beyond pptx)

- CSS Grid and Flexbox: responsive layouts instead of coordinate math - Google Fonts with optical sizing and variable weights - Font Awesome 6 icons inline with text - Gradient backgrounds, box shadows, rounded corners, opacity - ECharts 6 (SVG renderer): 21 chart types, including bar, line, pie, scatter, waterfall, gauge, sankey, treemap, radar, funnel, and heatmap - Tailwind utility classes: rapid, consistent styling

## Phase 1: Understand and Route

### 1. Read the room

Before asking the user anything, scan the working directory for artifacts that establish context: briefs, consultant storyboards (`*-ghost.md`, `*-outline.md`), data files, brand specs, existing build scripts. Read what's there and form a working hypothesis about what this deck needs: objective, audience, tone, density, and data.

Then ask only for what's genuinely ambiguous and would change the deck's argument or audience calibration. Frame questions as choices, not open fields: *"The data suggests a Bain decision-first structure. Does that fit, or is this more of an internal working session?"* One sharp question beats five vague ones. Maximum 1–3 questions, and zero is fine if the artifacts are clear.

### 2. Classify the deck

This determines how deep the planning phase goes. Two paths:

| Signal | Path | What happens next | |---|---|---| | MBB engagement, strategy consulting, due diligence, cost transformation, M&A, pricing, org restructuring | **Consulting** | Load the full consulting reference library (ghost-deck.md, engagement-archetypes.md, skeletons/, firm-dna.md, evidence-recipes.md, density-adaptation.md). Build a rigorous ghost deck with archetype classification, pillar architecture, transitions, and firm overlay. | | Startup pitch, board update, product narrative, conference talk, investor roadshow, internal update | **General** | Stay in this playbook. Build a ghost deck using the universal quality gates below: governing thought, action titles, helicopter test, exhibit assignment. No archetype classification or skeleton required. |

**Consultant handoff**: if a storyboard from the `consultant` skill already exists (governing thought, pillars, action titles, content descriptions), the argument layer is done. Skip ghost deck construction entirely. Validate the argument (run the helicopter test on the titles), then proceed to the production outline.

### 3. Pick style and density

**Style:**

| If the deck is… | Palette | Surface | Font | |---|---|---|---| | Consulting / board / engagement deliverable | `consulting-mckinsey` | Light | Inter | | Framework evaluation, process-transparent | `consulting-bcg` | Light | DM Sans | | Diagnostic, decision support, facts-vs-perspectives | `consulting-bain` | Light | Source Sans 3 | | Startup pitch / product narrative / growth story | `founder` | Light | Plus Jakarta Sans | | Crisis / urgency / downturn memo / high-stakes | `sequoia` | Dark | Georgia + Inter | | Warm, rigorous-but-human strategy work (Anthropic-adjacent ivory + clay) | `anthropic-consulting` | Light | Manrope (not vendored, load via `headExtra`) | | Google-ecosystem client engagement (muted Google Blue) | `meridian-google` | Light | Inter |

The vendored font families are Inter, DM Sans, Plus Jakarta Sans, and Source Sans 3. The agent is not limited to these. Any Google Font can be loaded via a `<link>` tag in `headExtra` when the brief calls for a different typeface.

**Brand identity intake (from brand-system skill)**: if an `identity.js` produced by the `brand-system` skill exists in the working directory, the style decision is already made. Do not route through the table above:

1. **Palette**: `identity.js` emits engine-compatible palette CSS. Write it into this skill's palette directory, then pass its name to `createDeck`:

```javascript const fs = require('fs'); const brand = require('./identity'); fs.writeFileSync('<this-skill>/palettes/' + brand.palette.name + '.css', brand.toCSS()); // then: createDeck({ palette: brand.palette.name, ... }) ```

2. **Fonts**: if `brand.fonts` names a family outside the vendored four, load it via a Google Fonts `<link>` in `headExtra` (network required at build time) or accept the stack's system fallback. 3. **Style direction**: `brand.style` routes composition treatment, not colors:

| `identity.js` style | Compose like | Treatment | |---|---|---| | `institutional` | `consulting-mckinsey` | Restrained chrome, sharp corners, rules over boxes | | `modern` | `founder` | Cards, rounded corners, confident accent use | | `dark` | `sequoia` | Dark surfaces as default, high-contrast accents | | `bento` | `founder` | Card-grid compositions dominate, surface-muted tiles | | `editorial` | none | Typography-led: oversized headings, fewer panels, whitespace as structure | | `data-forward` | `consulting-bcg` | Chart-dense, panel mini-headers, minimal decoration |

The identity's colors and fonts are authoritative. Layout and composition belong to this skill.

**Density:**

| Context | Level | What changes | |---|---|---| | Startup pitch, roadshow, board update | **L1 Narrative** | 1 message per slide. Fewer elements, each scaled up to fill the body zone. | | Corporate strategy, business review | **L2 Structured** | Multi-panel layouts. Evidence density moderate. | | MBB engagement, due diligence, deep analysis | **L3 Dense** | Multi-evidence composites. Chained arguments. |

**Show deck vs. working deck**: infer from audience and objective, don't ask. "Board presentation" → `tier: 'presentation'` (body ≥15pt, room-safe). "Diligence data room" → `tier: 'document'` (body ≥12pt, dense but legible). The tier shifts ALL text tokens automatically.

For L2+ consulting decks, apply firm-specific conventions from [firm-dna.md](firm-dna.md). For density adaptation rules, see [density-adaptation.md](density-adaptation.md).

## Phase 1.5: Ghost Deck

Before writing any HTML, build the **ghost deck**, the narrative skeleton that precedes all visualization. Charts and code are execution. The ghost deck is the thinking.

The ghost deck process produces two artifacts: - **`{slug}-ghost.md`**: the argument layer. Governing thought, action titles, exhibit types. A senior reviewer can approve this without knowing CSS. - **`{slug}-outline.md`**: the execution layer. Ghost deck + density tiers, layout geometry, chart dimensions, column alignment. This is what the build phase reads.

**Process management.** Building a ghost deck requires populating multiple interdependent layers and passing quality gates that may trigger backtracking. Use your task management tools to track which layers are complete, which gates have passed, and what needs revisiting. Externalize this state. Don't try to hold it all in one pass.

### Universal quality gates

These apply to **every deck**: consulting, startup, board update, conference talk. They are not consulting methodology. They are good deck design.

Start from the governing thought, one sentence that states the deck's answer. Build pillars that support it. Write action titles for every slide before you touch any charts. Read the titles in sequence. If they don't tell a complete story, the problem is in the pillars, not the titles. Only assign exhibits once the argument holds. Cut any slide that isn't load-bearing.

**What must exist in every ghost deck:**

| Layer | What it is | Depends on | |---|---|---| | **Governing thought** | One sentence: the deck's answer. If you can't write it, the analysis isn't done. | The brief and data | | **Action titles** | Full-sentence conclusion for every slide. "Revenue grew 12% driven by pricing power", not "Revenue Overview." | Governing thought | | **Helicopter test** | Read all titles in sequence. Complete, persuasive story in 2 minutes? If not, fix the titles. | Action titles | | **Exhibit assignment** | What visual proves each slide's claim. Use [chart-taxonomy.md](chart-taxonomy.md): "What does this slide need to prove?" → exhibit type. | Helicopter test passed | | **Dead slide test** | Can any slide be removed without breaking the argument? If yes, remove it. | All of the above |

**Common deck patterns.** For non-consulting decks, [chart-taxonomy.md](chart-taxonomy.md) § Deck Archetypes provides narrative arcs and exhibit mixes for common formats: investor/roadshow (Problem → Solution → Traction → Market → Model → Team → Ask), board updates (Headlines → KPIs → Progress → Risks → Decisions), due diligence memos, transformation roadmaps, and more. Use these as starting points for the slide sequence, then write action titles and apply the quality gates above. Don't force a pattern that doesn't fit the brief. Adapt or combine as the argument requires.

**Backtracking, not patching.** If the helicopter test fails, the problem is upstream: the pillars don't support the governing thought, or the titles are topic labels instead of conclusions. Go back to where the argument breaks. Don't patch titles to paper over a structural gap.

**When the brief supports multiple valid governing thoughts**: surface the options and let the user choose before proceeding. Otherwise, commit to the strongest hypothesis and work forward.

### Consulting path

For MBB engagements and strategy consulting, the ghost deck goes deeper. Load the full reference library:

| Doc | Purpose | |---|---| | [ghost-deck.md](ghost-deck.md) | 5-layer model, quality gates, anti-patterns | | [engagement-archetypes.md](engagement-archetypes.md) | 8 archetypes, 5 transition types, rising-stakes progression | | `skeletons/*.md` | Pillar architecture, slide-by-slide index, kill conditions per archetype | | [firm-dna.md](firm-dna.md) | McKinsey/BCG/Bain epistemology, communication signatures | | [evidence-recipes.md](evidence-recipes.md) | 10 data-shape recipes, layering rules | | [density-adaptation.md](density-adaptation.md) | L1/L2/L3 compression/expansion rules |

On top of the universal quality gates, the consulting path adds:

- **Archetype classification**: classify the engagement using [engagement-archetypes.md](engagement-archetypes.md), then load the matching skeleton from `skeletons/`. The skeleton provides a pillar architecture and slide-by-slide index as a starting point. Customize it to the specific brief. - **Pillar architecture**: 3–5 MECE pillars supporting the governing thought. Work backward: "What must be true for the governing thought to hold?" - **Transition architecture**: at each pillar boundary, select a transition type (Pivot, Narrowing, Escalation, Synthesis, Decision Gate). Verify rising-stakes progression: Recognition → Clarity → Conviction → Urgency. - **Firm overlay**: apply [firm-dna.md](firm-dna.md) conventions for the target firm style. This affects header structure, communication signature, and composition patterns, not the argument itself. - **Evidence recipes**: for each exhibit, check [evidence-recipes.md](evidence-recipes.md) for the standard composition: primary chart + supporting elements + annotation layers, governed by density level.

These layers have depende