Visual Explainer
nicobailon/visual-explainer
Turns systems, code changes, plans and data into self-contained HTML pages where figures carry the explanation, with options for slide decks and narrated MP4 videos.
Agent skill
A skill your agent uses when turning any content into clear, professional visualizations - board slides, reports, proposals, research summaries, training materials, technical diagrams, infographics…
$ npx skills add kgraph57/mckinsey-style-visualization-skill --skill strategy-consulting-visualization -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install kgraph57/mckinsey-style-visualization-skill strategy-consulting-visualization --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
Claude Code skills documentation · loads skills from .claude/skills/
Install the "strategy-consulting-visualization" agent skill from https://github.com/kgraph57/mckinsey-style-visualization-skill/tree/main into .claude/skills/strategy-consulting-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "strategy-consulting-visualization", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add kgraph57/mckinsey-style-visualization-skill --skill strategy-consulting-visualization -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install kgraph57/mckinsey-style-visualization-skill strategy-consulting-visualization --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "strategy-consulting-visualization" agent skill from https://github.com/kgraph57/mckinsey-style-visualization-skill/tree/main into .agents/skills/strategy-consulting-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "strategy-consulting-visualization", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add kgraph57/mckinsey-style-visualization-skill --skill strategy-consulting-visualization -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install kgraph57/mckinsey-style-visualization-skill strategy-consulting-visualization --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "strategy-consulting-visualization" agent skill from https://github.com/kgraph57/mckinsey-style-visualization-skill/tree/main into .cursor/skills/strategy-consulting-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "strategy-consulting-visualization", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add kgraph57/mckinsey-style-visualization-skill --skill strategy-consulting-visualization -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install kgraph57/mckinsey-style-visualization-skill strategy-consulting-visualization --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "strategy-consulting-visualization" agent skill from https://github.com/kgraph57/mckinsey-style-visualization-skill/tree/main into .gemini/skills/strategy-consulting-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "strategy-consulting-visualization", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install kgraph57/mckinsey-style-visualization-skill strategy-consulting-visualizationInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add kgraph57/mckinsey-style-visualization-skill --skill strategy-consulting-visualization -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "strategy-consulting-visualization" agent skill from https://github.com/kgraph57/mckinsey-style-visualization-skill/tree/main into .github/skills/strategy-consulting-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "strategy-consulting-visualization", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add kgraph57/mckinsey-style-visualization-skill --skill strategy-consulting-visualization -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install kgraph57/mckinsey-style-visualization-skill strategy-consulting-visualization --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "strategy-consulting-visualization" agent skill from https://github.com/kgraph57/mckinsey-style-visualization-skill/tree/main into .opencode/skills/strategy-consulting-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "strategy-consulting-visualization", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
strategy-consulting-visualizationA skill your agent uses when turning any content into clear, professional visualizations - board slides, reports, proposals, research summaries, training materials, technical diagrams, infographics…
Strategy Consulting Visualization is an agent skill from kgraph57/mckinsey-style-visualization-skill. Use when turning any content into clear, professional visualizations - board slides, reports, proposals, research summaries, training materials, technical diagrams, infographics, process flows, timelines, benchmarks, waterfall charts, or data-backed visual specs for any audience.
Its SKILL.md is about 3.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 447 other files, including scripts, reference files and assets (for example `.github/ISSUE_TEMPLATE/bug-report.md`, `.github/ISSUE_TEMPLATE/buyer-inquiry.md` and `.github/ISSUE_TEMPLATE/example-request.md`).
It sits in Media & Creative, covering Slides and decks, Infographics and Proposals and quotes. The repository describes itself as: Agent Skill that turns messy notes into rendered strategy-consulting visuals, with SVG examples and validation. The licence is MIT.
11 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit 49d1370. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Ships 1 file in scripts/, which the agent can run.
Shell commands in SKILL.md call:
python3From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Strategy Consulting Visualization loads about 3.2k tokens when it runs, and up to ~33k if it reads all its reference files. Until then it costs about 79 tokens; SKILL.md has 1,471 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
The full file from kgraph57/mckinsey-style-visualization-skill at commit 49d1370, republished under its MIT licence (© kgraph57). 1,471 words, ~3,187 tokens.
.claude/skills/strategy-consulting-visualization/SKILL.md (or your agent's skills folder). This skill also uses 444 other files; get the full folder from GitHub.Use this skill to turn any content into professional visualization specs with strategy-consulting clarity: insight-led headlines, disciplined layout, accurate data, restrained design, and explicit implications. It covers board slides first, and generalizes to reports, proposals, training materials, technical diagrams, infographics, and any input that benefits from visual structure.
Skip the pattern-by-pattern build when the user just wants a complete, real deck or document immediately.
Full deck — scaffold a ready-made archetype from templates/decks/, then fill in the illustrative placeholders with real data:
python3 scripts/scaffold_deck.py --list # 6 archetypes with slide counts
python3 scripts/scaffold_deck.py board-update -o my-deck # copies deck.json + specs/
# edit my-deck/specs/*.json with real data, keeping the pattern shapes intact
python3 scripts/build_html_deck.py --manifest my-deck/deck.json -o my-deck/deck.htmlDocument — write Markdown (with spec:/svg: exhibit references where a chart belongs) and build it straight to a browser-ready, print-to-A4 HTML report:
python3 scripts/build_html_report.py my-report.md -o my-report.html --lang entemplates/reports/ has three starting points (board pre-read, one-pager, proposal memo).
Speaker script — the podium version of any deck: add a top-level "notes" field (a string, or a list of paragraph strings) to the slides that need narration, then build a print-first, one-slide-per-page HTML script with the narration set below each slide. The renderer ignores notes entirely, so adding it never changes the rendered slide, and a slide with no notes still gets its own page with a muted "no script" marker.
python3 scripts/build_speaker_script.py --manifest my-deck/deck.json -o my-deck/script.html --lang enDeck as an article — the same deck read top-to-bottom on a single 680px reading column instead of click-through slides or a side-nav document: a paper-first hero (kicker/lead from the manifest's optional series/lead keys), then each slide's SVG followed by its notes as reading prose, with optional per-slide label/refs fields adding a section tag and a "Links" aside that rolls up into an end-of-article links section.
python3 scripts/build_html_article.py --manifest my-deck/deck.json -o my-deck/article.html --lang enAll four fast paths still obey the style system and quality rubric below — they only skip writing specs from a blank page. Fall back to the full workflow for anything the templates don't already cover.
references/input-triage.md to map any input type to a pattern family.references/document-type-profiles.md to set canvas, density, and tone.references/visualization-patterns.md, starting from the comparison-type gate at the top of that file. Structural patterns (section_divider, agenda, bullet_list, closing, quote, end_cover, cover) are deck furniture, not the argument — use them for connective tissue between slides (opening, orienting, transitioning, closing) and spend the insight-headline discipline on the content slides they connect.references/style-system.md, using the canvas from the document profile. Write copy to its Word Budget: when text does not fit, cut words or split the slide — never shrink type.references/prompt-templates.md.
When the environment allows running scripts, render supported patterns to SVG with python3 scripts/render_slide_spec.py <spec.json>. Twenty-two patterns render (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), on a 16:9 canvas only; every other pattern and canvas is spec-only. cover, section_divider, and end_cover are full-bleed navy and skip the header/footer chrome; every other renderable pattern uses the standard white content chrome. Tell the user which they are getting — never imply a spec-only pattern will render. Spec examples are in examples/render-specs/.references/quality-rubric.md. For decks, also run its deck-level headline check.references/expert-review-loop.md to remove blind spots, overclaims, jargon, accessibility issues, and cultural assumptions.references/iterative-review-loop.md until the output reaches the stopping criteria.Return a concise deliverable with:
Strategic question (or the reader's key question for non-strategy documents)Insight headlineRecommended visualizationSlide spec (or figure, page, or diagram spec matching the document profile)Data and assumptionsQuality checkExpert review notes when the output is public, high-stakes, cross-functional, or broad-audienceWhen the user requests a batch, deck, or multi-figure document, repeat the contract per visual and add a brief flow summary explaining how the visuals build the argument.
When the user requests a particular firm's style or supplies a reference, read references/reference-reproduction.md before selecting a theme. Consult references/consulting-reference-evidence.json and inspect the specific source page. Record geometry, hierarchy, chart encoding, notes and deviations. Choose presentation, analytical pre-read, or reading document explicitly. Do not claim exact fidelity from a colour preset alone. The worked examples are in templates/reference-layouts/.
For business presentation requests, prefer "theme": "executive" consistently across the deck: sans-serif headlines, neutral comparison marks, and navy for the main outcome. In a metric-led summary, use focus_block only for the single decision-critical column. For diagrams, keep executive process flows to five steps with optional owner/duration fields and priority matrices to six numbered options; split denser content across slides. See references/style-system.md for the supported options; retain classic when the user requests serif styling.
Slides render to 16:9. Supported chart/diagram patterns also render compact document exhibits with --exhibit; arbitrary canvases remain spec-only. HTML reports support A4 briefing/editorial layouts with editable captions and sources. Optional scripts/build_briefing_docx.cjs creates editable A4 Word briefs and requires Node packages docx and sharp.
White content slides with black text, a single navy accent (#15296B), and grey hierarchy.
Navy full-bleed slides only when opening a deck (cover), opening a section (section_divider), or closing a deck (end_cover) — never for a content slide.
Classic uses serif headlines; executive and analytical content use sans-serif headlines. A reference-led request takes precedence over these defaults.
High information density with clear hierarchy; no decorative clutter.
All numbers must be visible, consistently formatted, and tied to the user's data or cited assumptions.
This skill is not affiliated with, endorsed by, or sponsored by McKinsey & Company, Boston Consulting Group, Bain & Company, or any other consulting firm. Use category language such as "strategy consulting visualization" in user-facing outputs unless the user specifically asks for comparative style references.
Do not invent client names, confidential labels, benchmark data, or source citations. If a visual depends on uncertain or missing data, mark the assumption explicitly in Data and assumptions.
references/consulting-design-study.md for the six-firm page-level design study.
references/reference-reproduction.md for measured reproduction, supported routes and fidelity review.
references/persona-playbook.md for role-based entry points (sales, marketing, product, PMO, HR, engineering, research, finance, executive) with prompts and example specs.
references/input-triage.md for mapping any input — numbers, prose, processes, ideas — to a pattern family.
references/document-type-profiles.md for adapting format, density, and tone to slides, reports, proposals, training materials, technical docs, and infographics.
references/visualization-patterns.md for pattern selection and use cases.
references/style-system.md for palette, typography, spacing, and layout rules.
references/prompt-templates.md for slide specs and image-generation prompts.
references/quality-rubric.md for final scoring and marketplace-quality checks.
references/expert-review-loop.md for challenging assumptions, overclaims, accessibility, localization, and audience-fit risks.
references/public-reference-corpus.md for public executive-report sources to study without copying.
references/iterative-review-loop.md for draft, review, revise, and score cycles.
templates/decks/ and scripts/scaffold_deck.py for ready-made deck archetypes (--list to see all six).
templates/reports/ and scripts/build_html_report.py for Markdown-to-report documents with numbered exhibits.
scripts/build_speaker_script.py for a print-first, one-slide-per-page podium script built from a deck's notes field.
scripts/build_html_article.py for reading the same deck top-to-bottom as a single web-page article, slide by slide with its notes as prose.
Use JSON for charts and Markdown for the narrative. Generate HTML, review it in the browser, and export that same HTML to PDF. HTML is the primary layout artifact; Word is an optional separate export. Reports use A4 print styles; decks use one 16:9 slide per page.
python3 -m pip install playwright
python3 scripts/build_html_report.py templates/reference-layouts/decision-brief.md -o brief.html
python3 scripts/export_pdf.py brief.html -o brief.pdf
python3 scripts/export_pdf.py examples/demo-deck.html -o deck.pdfPDF export requires installed Google Chrome or Chromium (--browser /path/to/browser for a custom executable). SVG and HTML generation remain Python-standard-library only. Alternatively, open the generated HTML, choose Save as PDF, and select the browser’s PDF destination. Inspect every page after changing content; longer reports may need deliberate page breaks.
© kgraph57, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 444 other files (scripts, references, assets) in the repository root of kgraph57/mckinsey-style-visualization-skill.
Open the folder on GitHubat commit 49d1370
Strategy Consulting Visualization next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Strategy Consulting Visualization this skillkgraph57/mckinsey-style-visualization-skill | 127 | — | ~3.2k | Automated safety check: Pass | MIT | |
| Visual Explainernicobailon/visual-explainer | 10k | — | ~3.3k | Automated safety check: Pass | MIT | |
| Guizang Material Illustrationop7418/guizang-material-illustration | 1.2k | — | ~1.6k | Automated safety check: Pass | None | |
| Apple Bento Gridhubeiqiao/apple-bento-grid | 235 | — | ~2.8k | Automated safety check: Pass | MIT | |
| Data Viz Rendererzebbern/claude-code-guide | 4.7k | — | ~1.3k | Automated safety check: Pass | MIT | |
| Alt Text DesignOwl-Listener/inclusive-design-skills | 103 | — | ~946 | Automated safety check: Pass | MIT |
nicobailon/visual-explainer
Turns systems, code changes, plans and data into self-contained HTML pages where figures carry the explanation, with options for slide decks and narrated MP4 videos.
op7418/guizang-material-illustration
Generate Guizang-style material illustrations, labeled explanatory visuals, material-styled chart illustrations, and data-first editorial images from articles, notes, product concepts, workplace…
hubeiqiao/apple-bento-grid
Create Apple-inspired bento grid presentation cards for showcasing project stats, timelines, and achievements.
zebbern/claude-code-guide
Generate self-contained HTML/SVG infographics from JSON data, including stat cards, bar charts, flow diagrams, and mixed dashboards.
Owl-Listener/inclusive-design-skills
Write meaningful alternative text for images, charts, diagrams, and visual content.
aws-samples/sample-strands-agent-with-agentcore
Use this skill any time the user needs a visual output as an image or PDF — charts, diagrams, posters, infographics, abstract artwork, or any visual design.
A skill your agent uses when turning any content into clear, professional visualizations - board slides, reports, proposals, research summaries, training materials, technical diagrams, infographics…. Strategy Consulting Visualization is an agent skill from kgraph57/mckinsey-style-visualization-skill. Use when turning any content into clear, professional visualizations - board slides, reports, proposals, research summaries, training materials, technical diagrams, infographics, process flows, timelines, benchmarks, waterfall charts, or data-backed visual specs for any audience.
Strategy Consulting Visualization fits situations like: turning any content into clear; professional visualizations - board slides; research summaries; training materials.
Run `npx skills add kgraph57/mckinsey-style-visualization-skill --skill strategy-consulting-visualization -a claude-code`. Or copy the skill folder (the kgraph57/mckinsey-style-visualization-skill repository) into .claude/skills/strategy-consulting-visualization in your project. Claude Code loads it when a task matches its description.
Run `npx skills add kgraph57/mckinsey-style-visualization-skill --skill strategy-consulting-visualization -a codex`. Or copy the skill folder (the kgraph57/mckinsey-style-visualization-skill repository) into .agents/skills/strategy-consulting-visualization in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add kgraph57/mckinsey-style-visualization-skill --skill strategy-consulting-visualization -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/strategy-consulting-visualization, .gemini/skills/strategy-consulting-visualization, .github/skills/strategy-consulting-visualization and .opencode/skills/strategy-consulting-visualization in your project.
Going by SKILL.md and its folder, Strategy Consulting Visualization needs the command-line tools its instructions call (python3). Our summary lists: Python 3.
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
Strategy Consulting Visualization is published under the MIT licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.
About 3.2k tokens (SKILL.md is roughly 13k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 30k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Strategy Consulting Visualization: Visual Explainer (nicobailon/visual-explainer, 10k stars), Guizang Material Illustration (op7418/guizang-material-illustration, 1.2k stars), Apple Bento Grid (hubeiqiao/apple-bento-grid, 235 stars) and Data Viz Renderer (zebbern/claude-code-guide, 4.7k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
kgraph57 (a GitHub user) maintains it in kgraph57/mckinsey-style-visualization-skill, which has 127 GitHub stars. The repository was last updated on September 9, 2026.
Source: kgraph57/mckinsey-style-visualization-skill on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.