mckinsey-style-visualization-skill

Strategy Consulting Visualization Skill

Messy notes in. Board-ready slides out.

One skill for your AI agent: turn notes, metrics, and prose into consulting-grade visuals — as real SVG slides, as an animated HTML deck, or as a spec any designer or tool can execute.

Rendering existing JSON specs into SVG/HTML uses the Python 3 standard library only, with no API key or network access required. Generating slides from notes in the browser requires your own Anthropic API key. The sample trial needs no key. Automated PDF export has optional browser dependencies.

English | 日本語

Watch the full demo with playback controls →

Actual browser recording. Preview at 2.5× speed; full video at normal speed, without audio.

Actual v3 output: motion manifest (JSON) → interactive story + static reading edition.

v3.0.0-rc.1 — Interactive decision stories

Open the English live demo → · Static reading version · Japanese demo

Change an assumption. See the decision change. Six connected pages take readers from the priority to investigate, through route comparisons and a live value model, to readiness and a conditional rollout. The English decision design uses large body text, assertion-led headlines and whitespace instead of decorative dividers. Press D for the guided demo, or explore the charts and controls yourself. All example data is illustrative, not a client result.

This is a prerelease, not a fully device-certified stable release. v2.4.0 remains the latest stable release. Download the self-contained HTML files from the release assets.

A click-through motion presentation is now available. The six-page English story starts with an overview you can enter, lets readers press exhibits and prominent numbers for evidence, and connects changed assumptions to the conditional rollout. Sorting, retained differences, live equations, gap-filling actions and timeline steps are included in a cursor-led demo. A static reading version comes from the same source. See the motion story guide. The Japanese version is also retained.

python3 scripts/build_motion_deck.py --manifest examples/interactive-deck/motion.en.json -o deck.motion.en.html
python3 scripts/build_motion_deck.py --manifest examples/interactive-deck/motion.en.json --static -o deck.motion.en.static.html

The separately supported contract-backed runtime is described below.

The skill now has an optional stateful interactive companion for decision work: clickable evidence, bounded scenario switches, exact what-if sliders, readiness scoring, drill-downs, accordions, and a deterministic presenter demo. It keeps the restrained, assertion-led slide system and always preserves a static/print conclusion.

“Animated deck” still means the existing quiet reveal. Ask explicitly for an interactive deck, dynamic deck, what-if, clickable evidence, scenario slider, drill-down, or auto-demo to build both audience artifacts:

python3 scripts/build_html_deck.py --manifest examples/interactive-deck/deck.json -o deck.html
python3 scripts/build_interactive_deck.py --manifest examples/interactive-deck/deck.json -o deck.interactive.html

Try the original, entirely illustrative eight-page example: Project Relay — classic HTML, interactive HTML, and static PDF. The public /try/ route remains the classic builder. Core HTML generation uses the Python standard library and writes only the explicit output path; browser/PDF/audit checks use the pinned optional test tools. See interaction selection, scene authoring, accessibility, and presenter operation.

Known verification limits: Safari, physical iPhone/touch, real browser-toolbar 200% zoom, AirPlay/HDMI/projector, VoiceOver/NVDA, real high contrast, and hosted response headers remain manual gates. See the verification record. The English decision layer is tailored to Project Relay, not a universal business-model generator. Public inspiration and independent design choices are recorded in design provenance; this package is not affiliated with or endorsed by McKinsey or any other consulting firm.

What’s new — September 9, 2026

Try a presentation on your phone before setting up an API key. Open the browser trial, choose Explore a sample deck, then Start presentation.

• Present directly in the browser. Swipe or use Previous / Next to move through slides; rotate your phone for a larger landscape view. Desktop keyboard navigation is also supported.
• Share or save HTML. Use the device share sheet where supported, with a download fallback. Present from the browser; reopening interactive HTML from iOS Files is not yet verified.
• Save a PDF. Choose PDF / Print, select landscape in the native print dialog, then use its share/save options. iOS may initially select A4 portrait.
• See the outcome before trying it. The homepage pairs a clearly labeled AI-generated hero concept with actual renderer output and a path from examples to the trial or installation.
• iOS fixes verified in Simulator. Japanese text and controls use an explicit Hiragino fallback; HTML sharing no longer creates an extra text file.

Tested with iPhone 17 / iOS 26.3 Simulator Safari: sample loading, presentation, swipe navigation, rotation, nine-page print preview, and PDF/HTML saving to Files. Existing 335 tests pass. Physical iPhone hardware, live API generation and AirPlay/projector output remain unverified. See the test record.

What’s new — September 8, 2026

• Refined business slides and diagrams. Updated the executive summary, growth waterfall, priority matrix, process flow and roadmap layouts, with clearer hierarchy, labels and decision cues. Regenerated the English and Japanese landing decks and site previews from the current renderer.
• Real deliverables on the site. The homepage now shows actual slide previews alongside a complete A4 brief, with links to the finished PDFs. Examples use illustrative business data.
• HTML first, PDF for sharing. Keep chart data in JSON and report prose in Markdown, refine the generated HTML, then export it directly to PDF. Decks and reports include a Save as PDF button; scripts/export_pdf.py also supports command-line export.
• Reference-based layouts. A design study of nine public documents from six consulting firms informs the analytical slide and compact report templates.

Explore the updated nine-slide board deck (PDF), one-page decision brief (PDF), and source HTML. See HTML to PDF for export commands. Automated PDF export requires Python Playwright and installed Chrome or Chromium; core SVG/HTML generation has no third-party Python dependencies.

Why This Gets Starred

• Install it and get a complete deck immediately. scripts/scaffold_deck.py <archetype> copies a full, coherent 9-12 slide deck — cover through closing — into a working directory. Swap the illustrative data for yours and build. Six archetypes ship, one in Japanese.
• It actually renders. 22 patterns produce real SVG slides — waterfall, executive summary, 2×2, scatter, heatmap, Gantt, small multiples, cover, section dividers, agendas, closings, and more. Every gallery image below is committed renderer output, verified fresh by CI on every push.
• Animated HTML decks from one command. Combine slides into a single self-contained HTML file: quiet staggered reveals, keyboard navigation, progress bar, zero external requests. Press p → your browser prints it → you have a PDF.
• A browser-native report mode. scripts/build_html_report.py turns Markdown into a self-contained, print-to-A4 HTML document with numbered exhibits — the same visual system, for documents instead of decks.
• Works with your slide tools. The SVGs drop straight into PowerPoint, Keynote, and Word (Insert → Picture). For Google Slides, export PNG from any browser first.
• Japanese business documents are first-class. CJK text wraps correctly (measured per fullwidth character, not by spaces), fonts fall back to Noto Sans JP / Hiragino, and there are dedicated profiles for 稟議書, 役員会資料, 週報, 学会抄録.
• Charts that survive an audit. Bar proportions match the data (Lie Factor ≈ 1.0), zero baselines are marked, cell text passes WCAG AA contrast across the whole color ramp, and the accent navy stays readable in greyscale print — all of it asserted in the test suite, not promised in prose.
• Roasted by five design legends, then fixed. We ran the whole system through a five-perspective design panel — Tufte's data-ink discipline, an ex-McKinsey chart master, Swiss grid typography, FT-style data journalism, and modern design engineering. They scored it 5.8/10 and listed every flaw. A previous release shipped every fix. Read the receipts.

60-Second Start

# 1. Install it as an agent skill (Claude Code, Cursor, Codex, and 70+ agents)
npx skills add kgraph57/mckinsey-style-visualization-skill

Or clone it directly (also gets you the runnable scripts below):

# 1. Get it (Claude Code clone install)
git clone https://github.com/kgraph57/mckinsey-style-visualization-skill.git ~/.claude/skills/strategy-consulting-visualization
cd ~/.claude/skills/strategy-consulting-visualization

# 2. Render one slide → SVG
python3 scripts/render_slide_spec.py examples/render-specs/arr-waterfall.json -o slide.svg

# 3. Build the full animated deck → one HTML file
python3 scripts/build_html_deck.py --manifest examples/demo-deck.json -o deck.html
open deck.html   # ← arrows to navigate, "p" to print → PDF

Or skip the terminal and just ask your agent: