224 lines
8.7 KiB
Markdown
224 lines
8.7 KiB
Markdown
# McKinsey/BCG Style Visualization - Claude Code Skill
|
||
|
||
> Professional consulting-style data visualization and infographics creation skill for strategic analysis and executive presentations.
|
||
|
||
[](https://opensource.org/licenses/MIT)
|
||
[](https://code.claude.com/)
|
||
|
||
## Overview
|
||
|
||
This Claude Code Skill enables the creation of high-density, professional consulting presentation slides and data visualizations in the style of top-tier strategy firms (McKinsey, BCG, Bain). The output combines institutional authority with editorial financial-report aesthetics, designed for boardroom-ready executive presentations.
|
||
|
||
## Features
|
||
|
||
- **11 Visualization Types:** Time-series growth charts, gap/funnel visualizations, before/after comparisons, market share charts, investment infographics, timelines, comparison diagrams, strategic frameworks, competitive benchmarking tables, waterfall charts, and cover slides
|
||
- **Detailed Design System:** Comprehensive color palettes with hex codes, typography specifications, and aspect ratio standards
|
||
- **Prompt Engineering Templates:** Ready-to-use templates for generating each visualization type
|
||
- **Strategic Framing Guidance:** Instructions for creating hypothesis-driven, insight-led visualizations
|
||
- **Quality Checklist:** Comprehensive checklist to ensure professional output
|
||
|
||
## Installation
|
||
|
||
### Method 1: Clone this repository
|
||
|
||
```bash
|
||
# Clone to your personal skills directory
|
||
git clone https://github.com/kgraph57/Helix.git ~/.claude/skills/mckinsey-style-visualization
|
||
|
||
# Or clone to a project-specific skills directory
|
||
git clone https://github.com/kgraph57/Helix.git .claude/skills/mckinsey-style-visualization
|
||
```
|
||
|
||
### Method 2: Manual installation
|
||
|
||
1. Download the `SKILL.md` file from this repository
|
||
2. Create a directory in your Claude skills folder:
|
||
```bash
|
||
mkdir -p ~/.claude/skills/mckinsey-style-visualization
|
||
```
|
||
3. Copy `SKILL.md` into the directory
|
||
|
||
### Method 3: Direct download
|
||
|
||
```bash
|
||
# Personal skills
|
||
mkdir -p ~/.claude/skills/mckinsey-style-visualization
|
||
curl -o ~/.claude/skills/mckinsey-style-visualization/SKILL.md https://raw.githubusercontent.com/kgraph57/Helix/main/SKILL.md
|
||
|
||
# Project skills
|
||
mkdir -p .claude/skills/mckinsey-style-visualization
|
||
curl -o .claude/skills/mckinsey-style-visualization/SKILL.md https://raw.githubusercontent.com/kgraph57/Helix/main/SKILL.md
|
||
```
|
||
|
||
## Usage
|
||
|
||
### Automatic Invocation
|
||
|
||
Claude will automatically use this skill when you ask for:
|
||
- Strategic analysis visualizations
|
||
- Competitive benchmarking charts
|
||
- Executive presentation slides
|
||
- Market analysis infographics
|
||
- Consulting-style data visualizations
|
||
|
||
Example prompts:
|
||
- "Create a McKinsey-style competitive benchmarking table comparing these AI models"
|
||
- "Generate a professional consulting-style timeline showing our product milestones"
|
||
- "Build a strategic framework visualization for market positioning analysis"
|
||
|
||
### Manual Invocation
|
||
|
||
You can also invoke the skill directly using the slash command:
|
||
|
||
```
|
||
/mckinsey-style-visualization [your request]
|
||
```
|
||
|
||
Example:
|
||
```
|
||
/mckinsey-style-visualization Create a before/after comparison showing ROI improvement
|
||
```
|
||
|
||
## When to Use This Skill
|
||
|
||
✅ **Use this skill when:**
|
||
- Creating strategic analysis presentations for executive audiences
|
||
- Developing competitive benchmarking visualizations
|
||
- Building data-driven consulting deliverables
|
||
- Designing market analysis infographics
|
||
- Producing high-information-density business reports
|
||
- Visualizing complex strategic frameworks and comparisons
|
||
|
||
❌ **Do NOT use for:**
|
||
- Marketing materials or promotional content
|
||
- Startup pitch decks with bright colors
|
||
- Decorative or artistic visualizations
|
||
- Low-information-density slides
|
||
|
||
## Visualization Types
|
||
|
||
This skill supports 11 professional visualization types:
|
||
|
||
1. **Time-Series Growth Charts** - Adoption rates, market growth, performance over time
|
||
2. **Gap/Funnel Visualizations** - Dramatic differences, maturity gaps, conversion funnels
|
||
3. **Before/After Comparisons** - Impact, ROI, performance improvement
|
||
4. **Market Share / Adoption Rate** - Percentage breakdowns, market penetration
|
||
5. **Investment / Scale Infographics** - Organizational investments, scale of operations
|
||
6. **Timeline Visualizations** - Chronological events, policy changes, milestones
|
||
7. **Comparison / Contrast Diagrams** - Regional, organizational, or strategic differences
|
||
8. **Strategic Frameworks** - 2×2 matrices, positioning analysis, capability assessment
|
||
9. **Competitive Benchmarking Tables** - Multi-dimensional comparisons across players
|
||
10. **Waterfall Charts** - Cumulative effects, step-by-step changes, variance analysis
|
||
11. **Cover Slides** - Professional opening slides for consulting presentations
|
||
|
||
## Design Principles
|
||
|
||
### Color Palette
|
||
|
||
**Content Slides:**
|
||
- Background: Pure White `#FFFFFF`
|
||
- Primary Text: Sharp Black `#000000`
|
||
- Primary Accent: Deep Royal Blue `#1E3A8A`
|
||
- Secondary Accent: Medium Blue `#2563EB`
|
||
- Grey Hierarchy: `#374151`, `#6B7280`, `#D1D5DB`, `#F3F4F6`
|
||
|
||
**Cover Slides:**
|
||
- Background: Deep Navy Blue `#1E3A5F`
|
||
- Primary Text: Pure White `#FFFFFF`
|
||
- Secondary Text: Light Grey `#E5E7EB`
|
||
- Optional Accent: Subtle Gold `#D4AF37`
|
||
|
||
### Typography
|
||
|
||
**Content Slides:**
|
||
- Headlines: Serif (Times New Roman / Georgia) - Bold
|
||
- Body Text: Sans-serif (Inter / Helvetica / Arial) - Regular
|
||
- Data Labels: Sans-serif - Medium or Semibold
|
||
|
||
**Cover Slides:**
|
||
- Main Title: Serif - Regular or Medium (48-72pt equivalent)
|
||
- Subtitle: Sans-serif - Light or Regular (18-24pt equivalent)
|
||
- Metadata: Sans-serif - Light (10-12pt equivalent)
|
||
|
||
### Aspect Ratio
|
||
|
||
- **Default:** Landscape 16:9 (recommended for all visualizations)
|
||
- **Alternative:** Landscape 3:2
|
||
- **Avoid:** Portrait orientation (unless specifically requested)
|
||
|
||
## Examples
|
||
|
||
### Example 1: Time-Series Growth Chart
|
||
```
|
||
Create a professional consulting-style time-series growth chart showing AI adoption
|
||
from 38% in 2023 to 72% in 2025. Use landscape 16:9 format, white background,
|
||
royal blue line chart, with annotation "2x growth in 2 years".
|
||
```
|
||
|
||
### Example 2: Competitive Benchmarking Table
|
||
```
|
||
Create a McKinsey-style competitive benchmarking table comparing 5 GenAI video models
|
||
across architecture, temporal consistency, and prompt adherence. Use landscape 16:9 format,
|
||
white background, hairline borders, and clear ranking indicators.
|
||
```
|
||
|
||
### Example 3: Cover Slide
|
||
```
|
||
Create a professional consulting-style cover slide with deep navy blue background,
|
||
large serif title "The Future of AI in Healthcare: Strategic Implications for 2026",
|
||
and subtitle "Executive Summary for Board Review".
|
||
```
|
||
|
||
## Quality Checklist
|
||
|
||
Before delivering any visualization, verify:
|
||
|
||
- [ ] Aspect ratio: Landscape orientation used
|
||
- [ ] Color palette: White background, black text, royal blue accents (for content slides)
|
||
- [ ] Typography: Serif headline, sans-serif data labels
|
||
- [ ] Data accuracy: All numbers, percentages, and labels are correct
|
||
- [ ] Strategic insight: Headline is insight-driven, not descriptive
|
||
- [ ] Visual clarity: No clutter, every element serves a purpose
|
||
- [ ] Annotations: Key insights and context provided
|
||
- [ ] Consistency: If multiple charts, all follow same design system
|
||
|
||
## Contributing
|
||
|
||
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
|
||
|
||
## License
|
||
|
||
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
||
|
||
## Author
|
||
|
||
**KEN**
|
||
小児科医 | アートコレクター | クロスフィッター
|
||
|
||
## Acknowledgments
|
||
|
||
- Inspired by McKinsey & Company presentation style guidelines
|
||
- Based on BCG visual identity and data visualization standards
|
||
- Influenced by Financial Times editorial design principles
|
||
- Informed by Harvard Business Review chart design best practices
|
||
|
||
## Related Skills
|
||
|
||
This skill works well with:
|
||
- **design-sensei** - Additional design principles and accessibility
|
||
- **paper-presentation-slides** - Academic presentation context
|
||
- **paper-article-generator** - Article-embedded visualizations
|
||
|
||
## Version History
|
||
|
||
- **v1.1** (2026-02-11): Added Type 11 Cover Slide, detailed color palette with hex codes, enhanced typography specifications, and cover slide prompt templates
|
||
- **v1.0** (2026-02-11): Initial skill creation with comprehensive visualization types, aspect ratio standards, and prompt engineering templates
|
||
|
||
## Support
|
||
|
||
If you encounter any issues or have questions, please [open an issue](https://github.com/kgraph57/Helix/issues) on GitHub.
|
||
|
||
---
|
||
|
||
**Note:** This skill is designed for use with Claude Code and follows the [Agent Skills](https://platform.claude.com/docs/en/agents-and-tools/agent-skills/overview) open standard.
|