Mckinsey Deck

McKinsey-Style Deck (the style + engine skill)

Build a research-grade-looking, page-turning deck from content the user gives you. Reviewed on screen as an HTML presentation; shared as a print-clean PDF. The whole engine is one file — assets/deck_engine.py — copy it into the project and compose build().

This skill owns the canonical engine. mckinsey-market-research-deck (and any future deck skill) consumes assets/deck_engine.py from HERE — engine fixes land in this file only, never in a project-local or sibling-skill fork. One engine, zero drift.

How to use

1. Copy assets/deck_engine.py into the working dir. Set BRAND (the footer line) and OUT_HTML.
2. Compose the deck inside build() using the renderers (below). Feed them the user's content directly, or load from a JSON if the content is structured.
3. Render + export:

   bashCopy code
   python3 deck_engine.py
   "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless --disable-gpu \
     --no-pdf-header-footer --print-to-pdf="Deck.pdf" "Deck.html"
   

   (Windows/Linux: swap the Chrome path for chrome/google-chrome.)
4. QC (below), fix, re-render, then deliver.

Renderers (all in deck_engine.py)

• cover(title_html, subtitle) — navy hero (uses product-images/cover-hero.png if present), title + one subtitle.
• answer_slide(title, deck, governing, pillars, src) — the executive-summary page (Pyramid Principle: answer first). One-sentence governing thought + 3–4 pillar conclusions, each optionally with a serif key stat. Place right after the cover; reading only the headlines from here to the end must form one persuasive essay (horizontal logic).
• divider(no, title, points) — full-navy section break; big sky-blue number; optional duotone image (divider-<no>.png).
• heroes([(num, label), ...]) — 4-up serif stat strip.
• prose_slide(title, deck, themes, src, cols=2, note=None) — "bold theme + paragraph" blocks (the McKinsey prose page). themes=[(heading, paragraph_html), ...].
• essay_slide(title, deck, lead, paras, src, side=None) — flowing two-column prose + optional side rail.
• table_slide(title, deck, columns, rows, src, note=None, fill=True, bold_keys=(), extra=None) — navy-header table, uniform row heights (header 34px / rows 52px, never stretched); bold_keys highlights total rows; extra= takes a content block (e.g. heroes([...])) to fill a sparse page by composition.
• decision_slide(page, src) — renders a structured exhibit (buildup/breakdown/scenarios + assumptions + READ).
• donut_block(...), bars_chart(...), heatmap_block(...) — titled chart blocks for a page's side rail (charts ride beside their analysis; never alone on a page); charts_slide(...) for the rare full-canvas exhibit. Low-level: donut_svg(...), heatmap hcell(...).
• sources_register(url_set, selected_rows, src) — the numbered, clickable source appendix.
• render(slides) — assembles the page-turning HTML and prints the div-balance check.

Headline = a full-sentence conclusion (the takeaway), never a topic label.

Hard design laws (never violate)

• No eyebrow/kicker labels — no small letter-spaced ALL-CAPS tags above titles or on the cover.
• Cover is minimal: title + one italic subtitle only. No KPI band, no date, no method block.
• Action-title headlines — the headline states the conclusion.
• Notes pinned to a uniform bottom (margin-top:auto) on every page.
• Nothing overlaps the footer. .pad reserves bottom clearance.
• Fill by composition, not by stretching. Essay/prose type auto-scales across 3 tiers by content length. Table row heights are uniform deck-wide (header 34px / rows 52px) and never stretch — fill a sparse table page via table_slide(..., extra=heroes([...])) or more rows. If a page is still thin at the top tier, add content — never inflate type or rows.
• No mid-word truncation — use clipw(), never raw [:n].
• Flat — no shadows/bevels (navy cover/divider are the only image-shadow exception).
• Images — clean cutout on pure white, no shadow, blended via mix-blend-mode:multiply; every image gets an italic caption. Cover/divider images: anchored bottom-right, height:100% (never >100%, or the PDF clips the subject), left-edge gradient mask so the square dissolves into navy.

Palette (baked into the engine CSS)

navy #051C2C · blue #1F6FB2 · sky #5AA9E0 · ink #23272E · muted #7B8593 · hairline #E3E6EB. Headlines Georgia; body Inter. Color is rationed: navy structure + grays, blue/sky as small accents.

QC before delivery (always self-run)

bashCopy code
# structure — must be 0, or an unclosed div breaks pagination
python3 -c "h=open('Deck.html').read();print('div diff:',h.count('<div')-h.count('</div>'))"
pdfinfo Deck.pdf | grep Pages
# visual — render every page and eyeball
pdftoppm -png -r 92 Deck.pdf _q   # then look at _q-*.png

Check each page: no footer overlap · no mid-word "…metal o" cuts · <30% whitespace · notes at a uniform bottom · images blended with captions · cover has no eyebrow/date. Fix, re-render, re-check.

Browser caching trap: open-ing an already-open HTML only refocuses the stale tab — verify by rendering the PDF, and tell the user to hard-refresh (Cmd+Shift+R).

Make links clickable

If you list URLs (sources/appendix), wrap each in <a href="<full-url>">…</a> — Chrome's --print-to-pdf turns them into clickable PDF link annotations (verify: the PDF bytes contain /URI).