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. Python 3 standard library only.
A Claude Code skill for medical/scientific paper writing. Covers the entire manuscript lifecycle from literature search to submission, peer review response, and rejection handling. 日本語版はこちら → README.ja.md
@kgraph57FAQ
mckinsey-style-visualization-skill is a Claude Code plugin with 1 hand-picked skill for content work, indexed on Flowy. Install it with the command on its page. It includes mckinsey-style-visualization-skill. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
$ npx -y skills add kgraph57/mckinsey-style-visualization-skill --agent claude-code
Repo: kgraph57/mckinsey-style-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.
Python 3 standard library only. Zero dependencies. Zero API keys. Zero network calls.
English | 日本語
An actual deck built by this repo: specs (JSON) → SVG slides → animated HTML deck. Nothing hand-drawn.
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.p → your browser prints it → you have a PDF.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.# 1. Get it (this is also how you install it as an agent skill)
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.
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.
Every image is committed output of scripts/render_slide_spec.py — CI fails if any of them drifts from what the renderer actually produces. Specs live in examples/render-specs/.
| ARR Waterfall | Executive Summary Strip |
|---|---|
 |  |
| Small Multiples | Scatter / Correlation |
|---|---|
 |  |
| Japanese Board Summary（役員会サマリー） | Cover Slide |
|---|---|
 |  |
| Benchmark Table | Distribution |
|---|---|
 |  |
| Capacity Gap | Process Flow |
|---|---|
 |  |
22 patterns render to SVG: cover, section_divider, end_cover, agenda, bullet_list, closing, quote, waterfall, gap, before_after, time_series, benchmark_table, summary_strip, process_flow, funnel, heatmap, gantt, kpi_scorecard, two_by_two, scatter, distribution, small_multiples. Thirteen more patterns (Sankey, pyramid, maps, decision trees, …) ship as structured specs and image-generation prompts — the catalog says exactly which is which. We don't pretend.
python3 scripts/build_html_deck.py cover.json bridge.json summary.json -o deck.html --title "Q4 Review"
One command, one file, and you get:
prefers-reduced-motion respected)deck.html#3)p or Cmd+P gives you one slide per page → save as PDFTry the committed demo: examples/demo-deck.html (open locally after cloning).
Skip writing specs from a blank page. Pick an archetype, copy it, swap in real data:
python3 scripts/scaffold_deck.py --list # see all 6 archetypes + slide counts
python3 scripts/scaffold_deck.py board-update -o my-deck --title "FY27 Board Update"
# edit my-deck/specs/*.json with real numbers — the pattern shapes are already right
python3 scripts/build_html_deck.py --manifest my-deck/deck.json -o my-deck/deck.html
scaffold_deck.py refuses to overwrite a non-empty directory unless you pass --force, and prints the next two commands when it's done.
Six deck archetypes ship pre-filled with a coherent illustrative storyline — every slide renders, nothing is a stub.
| Archetype | Use For | Storyline |
|---|---|---|
board-update | Recurring board / steering updates | Cover → agenda → executive summary → KPI scorecard → ARR waterfall → trend → risk view → closing → end cover |
strategy-recommendation | "Where to play, how to win" strategy decks | Cover → agenda → context → two section dividers (Where to play / How to win) → 2×2 → benchmark table → gap or bridge → roadmap → closing → end cover |
project-status | PMO / steering-committee status reviews | Cover → summary → roadmap → KPI scorecard → blockers → path-to-green flow → closing → end cover |
market-entry | Entry or expansion investment cases | Cover → agenda → market trend → competitor benchmark → segment 2×2 → entry-path flow → distribution or scatter → closing → end cover |
sales-proposal | Customer-facing proposals | Cover → client situation → before/after → approach flow → plan → why-us benchmark → customer quote → closing → end cover |
board-update-ja | 役員会向け月次アップデート（日本語） | board-update と同じ構成を、翻訳調ではなく自然な日本語の見出しで |
For a document instead of a deck, write Markdown and build it straight to a single self-contained, print-to-A4 HTML report:
python3 scripts/build_html_report.py my-report.md -o my-report.html --lang en
title, subtitle, author, date, classification, lang) drives a navy title band — the only navy surface in the document.##/### headings auto-number and build a "Contents" TOC with anchor links; standard Markdown (bullets, ordered lists, tables, bold/italic, code, blockquotes, links) renders as clean editorial typography — everything HTML-escaped first, so nothing in the source can inject markup. — it becomes an auto-numbered Exhibit N — Caption with the full slide SVG embedded inline, no header/footer chrome needed.  embeds an existing SVG file the same way.p / Cmd+P exports an A4-portrait PDF with the title band as the first page.Three starting points ship in templates/reports/: board-pre-read.md, one-pager.md, proposal-memo.md. See the committed demo: examples/demo-report.html (built from examples/demo-report.md).
Any slide spec can carry a top-level "notes" field — a string, or a list of paragraph strings — holding the spoken narration for that slide. The SVG renderer ignores it completely, so adding notes never changes a rendered slide. Build the same deck manifest into a print-first, one-slide-per-page script:
python3 scripts/build_speaker_script.py --manifest my-deck/deck.json -o my-deck/script.html --lang en
--lang ja loosens line-height to 1.9 with palt for CJK).See the committed demo: examples/demo-script.html (built with --lang ja from templates/decks/board-update-ja/deck.json).
The same notes field also drives a reading-mode build: the whole deck laid out vertically on a single 680px column, each slide's SVG followed by its narration as prose — a paper-first article, like a published M3-series piece, not a side-nav document.
python3 scripts/build_html_article.py --manifest my-deck/deck.json -o my-deck/article.html --lang en
series key, the title, an optional lead paragraph from lead (falling back to description for older manifests), and meta chips for slide count, presenter, and date (from the deck's cover slide).<article> on the full 680px column — meta line (number + optional per-spec label), heading, SVG, then its notes as prose. There is no "Contents" jump list in this mode; it is a single linear scroll.refs ([{"label": ..., "url": ...}]) render as a "Links" aside below the notes and roll up, deduped by URL, into an "All links" section after the last slide; only http(s)/mailto URLs render as links.--title overrides the manifest title; zero external requests except the href of a ref link itself.See the committed demo: examples/demo-article.html (built from templates/decks/board-update/deck.json).
| Target | How | Fidelity |
|---|---|---|
| Open the HTML deck → print → save as PDF | Vector, one slide per page | |
| PowerPoint / Keynote / Word | Insert the SVG files as pictures | Vector, scales losslessly |
| Google Slides / Docs | Render SVG → PNG in any browser, then insert | Raster at any resolution |
| Design tools (Figma, Illustrator) | Open the SVG directly | Fully editable vectors |
| Docs / wikis / GitHub | Embed the SVG — GitHub renders it inline | What you see in this README |
Most chart generators say "beautiful". We wanted defensible, so we convened a five-perspective design review panel (as rigorous AI personas) and told them to be merciless:
| Reviewer lens | Verdict | Sharpest cut |
|---|---|---|
| Edward Tufte — data-ink, honest scales | 5.5/10 | "Meaningless decorated rectangles baked into the renderer" |
| Gene Zelazny — ex-McKinsey, Say It With Charts | 6.5/10 | "The flagship example violates its own headline rule" |
| Vignelli × Müller-Brockmann — Swiss grid | 6/10 | "A corporate template, not a design system" |
| Alan Smith — FT data journalism | 5.5/10 | "The waterfall draws off-canvas on negative bridges" (he proved it) |
| Modern design engineering | 5.5/10 | "2016 visuals wearing a 2020s spec sheet" |
Then we shipped every fix in a prior release: zero-floor waterfalls, CJK-correct wrapping, no silent truncation, a single re-derived navy that survives greyscale printing, diverging heatmaps for signed data, WCAG-AA cell text asserted across the entire ramp, decoration stripped, a comparison-type gate before every chart choice, and a rubric that now measures data-ink integrity and deck-level storyline logic.
The result is a visual system you can defend in front of a board, an auditor, or a design critic — because it already survived one.
The renderer is the visible part. The skill underneath is a full operating system for executive visualization:
The persona playbook gives every role a copy-paste prompt and a rendered example:
| Role | Ask For | Rendered Example |
|---|---|---|
| Sales | Pipeline QBR, proposal visuals |  |
| Project manager / PMO | Roadmap with critical path |  |
| Marketing | Channel × segment performance |  |
| HR / People ops | Talent scorecard |  |
| Product manager | Effort vs. impact prioritization |  |
| Engineer / Tech lead | Incident postmortem flow |  |
| Researcher / Clinician | Study outcome summary |  |
Japanese business formats (稟議書, 週報・月報, 役員会資料, 学会抄録, 提案書) have dedicated profiles in document-type-profiles.md.
Give the skill this:
ARR grew from $10M to $15M.
Enterprise expansion contributed $3M. Existing customers added $2.5M. Churn cost $0.5M.
AI workflow adoption grew from 18% to 64%.
The board needs to decide whether to invest in implementation capacity.
It returns a decision-framed spec — strategic question, single-proposition headline, pattern choice with reasoning, exact values and labels, assumptions, and a rubric score — that renders to the waterfall you saw in the gallery. See the full worked proof: input → slide specs → evaluation.
| Starting Point | You Get |
|---|---|
| Board update metrics | 5-slide story: cover, waterfall, trend, gap, recommendation |
| Revenue bridge data | Waterfall with drivers, honest baselines, assumptions |
| Competitor / vendor data | Benchmark table + 2×2 positioning with leader highlights |
| KPI before/after data | Impact slide with deltas and an implication headline |
| Process description / SOP | Process flow with owners and the bottleneck highlighted |
| Segment metrics over time | Small-multiples grid on one honest shared scale |
| Research notes / whitepaper | Numbered report figures with sources and distributions |
| Any prose — "visualize this" | Input triage → right pattern → document profile → spec |
# Personal skill (Claude Code)
git clone https://github.com/kgraph57/mckinsey-style-visualization-skill.git ~/.claude/skills/strategy-consulting-visualization
# Project skill
git clone https://github.com/kgraph57/mckinsey-style-visualization-skill.git .claude/skills/strategy-consulting-visualization
Verify the package (same checks CI runs):
python3 -m unittest discover -s tests
python3 scripts/validate_skill.py # → OK: skill package passed validation
The validator re-renders every committed SVG and the demo deck from source specs and fails on any drift — the gallery cannot silently rot.
If this turned your rough notes into a usable slide, star the repo — stars are how other people find tools that actually render instead of hallucinate.
Even better contributions:
| Layer | What It Does | File |
|---|---|---|
| Skill entrypoint | Tells agents when and how to use the skill | SKILL.md |
| Input triage | Maps any input to a pattern family | input-triage.md |
| Document profiles | Adapts format and tone per deliverable | document-type-profiles.md |
| Pattern library | Comparison-type gate + 35-pattern catalog | visualization-patterns.md |
| Style system | Tokens, palette, typography, chart rules | style-system.md |
| Prompt templates | Reproducible spec formats | prompt-templates.md |
| Quality rubric | 24-point scoring + blocking gates + deck check | quality-rubric.md |
| Expert review loop | Adversarial pre-publication review | expert-review-loop.md |
| SVG renderer | Spec JSON → styled SVG slide (22 patterns) | render_slide_spec.py |
| Deck builder | SVG slides → animated single-file HTML deck | build_html_deck.py |
Iterative review-loop examples (draft → review → revision, four scenarios) live in examples/review-loop/. Distribution and commercial docs: MARKETPLACE.md, BUYER_BRIEF.md, ROADMAP.md, SECURITY.md, CHANGELOG.md.
This is an independent skill package. It is not affiliated with, endorsed by, or sponsored by McKinsey & Company, Boston Consulting Group, Bain & Company, or any other consulting firm. Named firms may appear only as common style references or search terms.
MIT. See LICENSE.
.github/
ISSUE_TEMPLATE/
bug-report.md
buyer-inquiry.md
example-request.md
marketplace-listing.md
PULL_REQUEST_TEMPLATE.md
workflows/
ci.yml
.gitignore
assets/
readme/
board-update-preview.svg
demo.gif
examples/
before-after.svg
benchmark-table.svg
executive-strip.svg
gap.svg
market-entry.svg
market-share.svg
timeline.svg
two-by-two.svg
waterfall.svg
hero-before-after.svg
skill-overview.svg
slide-spec-preview.svg
visual-patterns-preview.svg
rendered/
adoption-before-after.svg
adoption-trend.svg
arr-waterfall.svg
board-closing.svg
board-deck-cover.svg
capacity-gap.svg
customer-quote.svg
deal-size-distribution.svg
deck-end-cover.svg
eng-incident-flow.svg
executive-summary.svg
hr-talent-scorecard.svg
jp-board-summary.svg
marketing-channel-heatmap.svg
onboarding-flow.svg
phase-divider.svg
pmo-rollout-gantt.svg
pricing-retention-scatter.svg
product-priority-two-by-two.svg
research-outcomes-before-after.svg
rollout-constraints.svg
sales-pipeline-funnel.svg
segment-adoption-multiples.svg
strategy-agenda.svg
vendor-benchmark.svg
social/
launch-card.svg
BUYER_BRIEF.md
CHANGELOG.md
COMMERCIALIZATION.md
CONTRIBUTING.md
DISTRIBUTION.md
docs/
superpowers/
plans/
2026-06-09-skill-marketplace-readiness.md
specs/
2026-06-09-skill-marketplace-readiness-design.md
2026-08-02-full-presentation-system-design.md
examples/
EXAMPLES.md
board-update-input.md
board-update-slide-spec.md
demo-article.html
demo-deck.html
demo-deck.json
demo-report.html
demo-report.md
demo-script.html
evaluation-report.md
render-specs/
adoption-before-after.json
adoption-trend.json
arr-waterfall.json
board-closing.json
board-deck-cover.json
capacity-gap.json
customer-quote.json
deal-size-distribution.json
deck-end-cover.json
eng-incident-flow.json
executive-summary.json
hr-talent-scorecard.json
jp-board-summary.json
marketing-channel-heatmap.json
onboarding-flow.json
phase-divider.json
pmo-rollout-gantt.json
pricing-retention-scatter.json
product-priority-two-by-two.json
research-outcomes-before-after.json
rollout-constraints.json
sales-pipeline-funnel.json
segment-adoption-multiples.json
strategy-agenda.json
vendor-benchmark.json
review-loop/
board-update-draft-v1.md
board-update-draft-v2.md
board-update-review-v1.md
board-update-review-v2.md
investment-memo-draft-v1.md
investment-memo-draft-v2.md
investment-memo-review-v1.md
investment-memo-review-v2.md
market-entry-draft-v1.md
market-entry-draft-v2.md
market-entry-review-v1.md
market-entry-review-v2.md
vendor-selection-draft-v1.md
vendor-selection-draft-v2.md
vendor-selection-review-v1.md
vendor-selection-review-v2.md
GROWTH.md
INSTALLATION.md
LAUNCH.md
LICENSE
marketplace/
MARKETPLACE_TARGETS.md
MARKETPLACE.md
manifest.json
QUICKSTART.md
README.ja.md
README.md
references/
document-type-profiles.md
expert-review-loop.md
input-triage.md
iterative-review-loop.md
persona-playbook.md
prompt-templates.md
public-reference-corpus.md
quality-rubric.md
style-system.md
visualization-patterns.md
ROADMAP.md
scripts/
build_html_article.py
build_html_deck.py
build_html_report.py
build_speaker_script.py
render_slide_spec.py
review_slide_spec.py
scaffold_deck.py
validate_skill.py
SECURITY.md
SKILL.md
SUBMISSION.md
templates/
decks/
board-update/
board-update-ja/
deck.json
specs/
01-cover.json
02-agenda.json
03-executive-summary.json
04-kpi-scorecard.json
05-arr-waterfall.json
06-adoption-trend.json
07-risks.json
08-closing.json
09-end-cover.json
deck.json
specs/
01-cover.json
02-agenda.json
03-executive-summary.json
04-kpi-scorecard.json
05-arr-waterfall.json
06-adoption-trend.json
07-capacity-risk-heatmap.json
08-closing.json
09-end-cover.json
market-entry/
deck.json
specs/
01-cover.json
02-agenda.json
03-market-trend.json
04-competitive-benchmark.json
05-segment-priority.json
06-entry-approach.json
07-target-fit.json
08-closing.json
09-end-cover.json
project-status/
deck.json
specs/
01-cover.json
02-agenda.json
03-status-summary.json
04-timeline.json
05-kpi-scorecard.json
06-blockers.json
07-path-to-green.json
08-closing.json
09-end-cover.json
sales-proposal/
deck.json
specs/
01-cover.json
02-situation.json
03-proof.json
04-approach.json
05-plan.json
06-why-us.json
07-reference.json
08-closing.json
09-end-cover.json
strategy-recommendation/
deck.json
specs/
01-cover.json
02-agenda.json
03-context.json
04-divider-where-to-play.json
05-segment-priority.json
06-divider-how-to-win.json
07-competitive-benchmark.json
08-capability-gap.json
09-roadmap.json
10-closing.json
11-end-cover.json
reports/
board-pre-read.md
one-pager.md
proposal-memo.md
specs/
arr-waterfall.json
benchmark-table.json
kpi-scorecard.json
two-by-two.json
tests/
test_build_html_article.py
test_build_html_deck.py
test_build_html_report.py
test_build_speaker_script.py
test_render_slide_spec.py
test_review_slide_spec.py
test_scaffold_deck.py
test_validate_skill.py
TRACTION.md© 2026 Flowy · Free and open source
Built for Claude Code · Not affiliated with Anthropic
| Deck scaffolder |
| Copies a ready-made deck archetype into a working directory |
| scaffold_deck.py |
| Report builder | Markdown → self-contained, print-to-A4 HTML report | build_html_report.py |
| Speaker script builder | Deck manifest + notes → print-first, one-slide-per-page podium script | build_speaker_script.py |
| Slide article builder | Deck manifest + notes → self-contained, top-to-bottom reading article | build_html_article.py |
| Structural review | Lint a drafted spec document | review_slide_spec.py |
| Validation | Package integrity + render parity | validate_skill.py |