claudeers.
// Claude Skills

mckinsey-style-visualization-skill

Agent Skill that turns messy notes into rendered strategy-consulting visuals, with SVG examples and validation.

Actively maintained
100/100
last commit 11 days ago
last release 20 days ago
releases 15
open issues 4
// star history+8 this week (+12.3%)

Install with your AI

Paste into Claude Code, Cursor, or any agent — it reads the repo and wires the tool into your project.

Install and set up mckinsey-style-visualization-skill (claude-skill project) into my current project.
Found on https://claudeers.com/mckinsey-style-visualization-skill
Repo: https://github.com/kgraph57/mckinsey-style-visualization-skill
Homepage/docs: https://github.com/kgraph57/mckinsey-style-visualization-skill
Detected install method: claude-skill → # copy this skill into .claude/skills/mckinsey-style-visualization-skill/
Category: skills. Platforms: cli, api, web, mobile.
Read the repo's README for exact setup and env vars, then install it and wire it into my project.

Claudeers Health Verdict:
active; community-verified: false. Confirm the source before running anything.
// or install directly (claude-skill)
# copy the skill dir into your project:
# .claude/skills/mckinsey-style-visualization-skill/   (or ~/.claude/skills/mckinsey-style-visualization-skill/ for all projects)
// or clone
git clone https://github.com/kgraph57/mckinsey-style-visualization-skill

// compatibility

Platformscli, api, web, mobile
Operating systems
AI compatibilityclaude
LicenseMIT
Pricingopen-source
LanguagePython

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.

Python 3 standard library only. Zero dependencies. Zero API keys. Zero network calls.

English | 日本語

Six-slide board deck rendered by this skill

An actual deck built by this repo: specs (JSON) → SVG slides → animated HTML deck. Nothing hand-drawn.

Why This Gets Starred

  • It actually renders. 16 chart patterns produce real SVG slides — waterfall, executive summary, 2×2, scatter, heatmap, Gantt, small multiples, cover, 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.
  • 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. v1.9.0 shipped every fix. Read the receipts.

60-Second Start

# 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.

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.

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 WaterfallExecutive Summary Strip
Rendered ARR waterfallRendered executive summary
Small MultiplesScatter / Correlation
Rendered small multiplesRendered scatter
Japanese Board Summary(役員会サマリー)Cover Slide
Rendered Japanese board summaryRendered cover slide
Benchmark TableDistribution
Rendered benchmark tableRendered distribution
Capacity GapProcess Flow
Rendered capacity gapRendered process flow

16 patterns render to SVG: cover, waterfall, gap, before_after, time_series, benchmark_table, summary_strip, process_flow, funnel, heatmap, gantt, kpi_scorecard, two_by_two, scatter, distribution, small_multiples. Twelve 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.

Animated HTML Decks

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:

  • Quiet, staggered element reveals on every slide — the restrained kind, not slide-carnival transitions (prefers-reduced-motion respected)
  • Keyboard + click navigation, progress bar, slide counter, deep links (deck.html#3)
  • Print stylesheet: p or Cmd+P gives you one slide per page → save as PDF
  • Zero external requests — fonts, styles, scripts, and SVGs are all inline. Email it, host it, present offline.

Try the committed demo: examples/demo-deck.html (open locally after cloning).

Export Anywhere

TargetHowFidelity
PDFOpen the HTML deck → print → save as PDFVector, one slide per page
PowerPoint / Keynote / WordInsert the SVG files as picturesVector, scales losslessly
Google Slides / DocsRender SVG → PNG in any browser, then insertRaster at any resolution
Design tools (Figma, Illustrator)Open the SVG directlyFully editable vectors
Docs / wikis / GitHubEmbed the SVG — GitHub renders it inlineWhat you see in this README

Roasted by Five Design Legends

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 lensVerdictSharpest cut
Edward Tufte — data-ink, honest scales5.5/10"Meaningless decorated rectangles baked into the renderer"
Gene Zelazny — ex-McKinsey, Say It With Charts6.5/10"The flagship example violates its own headline rule"
Vignelli × Müller-Brockmann — Swiss grid6/10"A corporate template, not a design system"
Alan Smith — FT data journalism5.5/10"The waterfall draws off-canvas on negative bridges" (he proved it)
Modern design engineering5.5/10"2016 visuals wearing a 2020s spec sheet"

Then we shipped every fix in v1.9.0: 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 Discipline Under the Hood

The renderer is the visible part. The skill underneath is a full operating system for executive visualization:

  • Message first: every visual starts from the reader's decision, gets a single-proposition insight headline, and only then picks a chart — gated by the five comparison types (component / item / time series / distribution / correlation).
  • A real style system: design tokens on an 8px grid, a fixed type scale, one navy, an emphasis ladder (fill > line > text) with hard caps — the same constants the renderer executes.
  • A quality rubric with teeth: 24-point scoring across strategy, data integrity, data-ink honesty, hierarchy, portability, and safety, plus blocking gates (no color-only meaning, no invented data, no implied rendering that doesn't exist).
  • An adversarial review loop: expert lenses that hunt overclaims, insider jargon, accessibility failures, and cultural assumptions before anything is called publishable.

By Role

The persona playbook gives every role a copy-paste prompt and a rendered example:

RoleAsk ForRendered Example
SalesPipeline QBR, proposal visualsSales funnel
Project manager / PMORoadmap with critical pathPMO gantt
MarketingChannel × segment performanceMarketing heatmap
HR / People opsTalent scorecardHR scorecard
Product managerEffort vs. impact prioritizationProduct 2x2
Engineer / Tech leadIncident postmortem flowIncident flow
Researcher / ClinicianStudy outcome summaryResearch before-after

Japanese business formats (稟議書, 週報・月報, 役員会資料, 学会抄録, 提案書) have dedicated profiles in document-type-profiles.md.

One-Minute Example

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: inputslide specsevaluation.

What You Can Point It At

Starting PointYou Get
Board update metrics5-slide story: cover, waterfall, trend, gap, recommendation
Revenue bridge dataWaterfall with drivers, honest baselines, assumptions
Competitor / vendor dataBenchmark table + 2×2 positioning with leader highlights
KPI before/after dataImpact slide with deltas and an implication headline
Process description / SOPProcess flow with owners and the bottleneck highlighted
Segment metrics over timeSmall-multiples grid on one honest shared scale
Research notes / whitepaperNumbered report figures with sources and distributions
Any prose — "visualize this"Input triage → right pattern → document profile → spec

Install

# 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.

Star It, Break It, Share It

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:

  • A messy input and the slide it produced (Discussions)
  • A business scenario that needs a pattern we don't have (request template)
  • An output that's broken, confusing, or overconfident — it becomes a regression test

Star History Chart

Repository map & package internals
LayerWhat It DoesFile
Skill entrypointTells agents when and how to use the skillSKILL.md
Input triageMaps any input to a pattern familyinput-triage.md
Document profilesAdapts format and tone per deliverabledocument-type-profiles.md
Pattern libraryComparison-type gate + 28-pattern catalogvisualization-patterns.md
Style systemTokens, palette, typography, chart rulesstyle-system.md
Prompt templatesReproducible spec formatsprompt-templates.md
Quality rubric24-point scoring + blocking gates + deck checkquality-rubric.md
Expert review loopAdversarial pre-publication reviewexpert-review-loop.md
SVG rendererSpec JSON → styled SVG sliderender_slide_spec.py
Deck builderSVG slides → animated single-file HTML deckbuild_html_deck.py
Structural reviewLint a drafted spec documentreview_slide_spec.py
ValidationPackage integrity + render parityvalidate_skill.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.

Disclaimer

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.

License

MIT. See LICENSE.

// faq

What is mckinsey-style-visualization-skill?

Agent Skill that turns messy notes into rendered strategy-consulting visuals, with SVG examples and validation.. It is open-source on GitHub.

Is mckinsey-style-visualization-skill free to use?

mckinsey-style-visualization-skill is open-source under the MIT license, so it is free to use.

What category does mckinsey-style-visualization-skill belong to?

mckinsey-style-visualization-skill is listed under skills in the Claudeers registry of Claude-compatible tools.

1 views
73 stars
unclaimed
updated 28 days ago

// embed badge

mckinsey-style-visualization-skill on Claudeers
[![Claudeers](https://claudeers.com/api/badge/mckinsey-style-visualization-skill.svg)](https://claudeers.com/mckinsey-style-visualization-skill)

// retro hit counter

mckinsey-style-visualization-skill hit counter
[![Hits](https://claudeers.com/api/counter/mckinsey-style-visualization-skill.svg)](https://claudeers.com/mckinsey-style-visualization-skill)

// reviews

// guestbook

0/500

// related in Claude Skills

🔓

An agentic skills framework & software development methodology that works.

// skillsobra/Shell272,506MIT[ claude ]
🔓

Public repository for Agent Skills

// skillsanthropics/Python169,406[ claude ]
🔓

💫 Toolkit to help you get started with Spec-Driven Development

// skillsgithub/Python129,208MIT[ claude ]
🔓

AI coding assistant skill (Claude Code, Codex, OpenCode, Cursor, Gemini CLI, and more). Turn any folder of code, SQL schemas, R scripts, shell scripts, docs,…

// skillsGraphify-Labs/Python106,387MIT[ claude ]
→ see how mckinsey-style-visualization-skill connects across the ecosystem