kgraph57

Mckinsey Style Visualization Skill — Design skill for Claude Code

Design community

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

How to install Mckinsey Style Visualization Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open kgraph57/mckinsey-style-visualization-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Mckinsey Style Visualization Skill does

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

Alternatives in Design

Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★
Weather Orchestrator Command — Fetch the current temperature for Dubai, UAE and create a visual SVG weather card 20.2k ★
Grade — Generate a shareable HTML "Design Report Card" — letter grade, 8 dimensions, evidence (palette, type, rhythm) 3.6k ★

README

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.

Core SVG/HTML generation uses the Python 3 standard library only. **No API key or network access required.** Automated PDF export has optional browser dependencies.

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE) [![CI](https://github.com/kgraph57/mckinsey-style-visualization-skill/actions/workflows/ci.yml/badge.svg)](https://github.com/kgraph57/mckinsey-style-visualization-skill/actions/workflows/ci.yml) [![Skill Format](https://img.shields.io/badge/SKILL.md-ready-blue.svg)](SKILL.md) [![Release](https://img.shields.io/badge/Release-v2.4.0-15296B.svg)](https://github.com/kgraph57/mckinsey-style-visualization-skill/releases/tag/v2.4.0)

English | [日本語](README.ja.md)

![Six-slide board deck rendered by this skill](assets/readme/demo.gif)

_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 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 direct