strategy-consulting-visualization

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 | 日本語

An actual deck built by this repo: specs (JSON) → SVG slides → animated HTML deck. Nothing hand-drawn. Reproduce it: python3 scripts/scaffold_deck.py board-update -o demo && python3 scripts/build_html_deck.py --manifest demo/deck.json -o demo/deck.html

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:

Use the strategy consulting visualization skill to turn these notes into a board slide:
ARR grew from $10M to $15M. Enterprise added $3M, expansion $2.5M, churn -$0.5M.
The board must decide on implementation capacity investment.

The Pipeline

flowchart LR
    A["Messy notes,<br/>metrics, prose"] --> B["Slide spec<br/>(JSON)"]
    B --> C["SVG slides"]
    C --> D["Animated HTML deck"]
    C --> E["PowerPoint / Keynote / Word<br/>(insert SVG)"]
    D --> F["PDF<br/>(browser print)"]

Specs are plain JSON, so they diff, review, and version like code. The renderer and deck builder are single-file Python scripts with no installs.

Gallery

Every image