Transform documents, reports, and data into professional McKinsey-style HTML presentations with intelligent chart selection and interactive navigation. Use when: (1) Creating presentations from documents/reports, (2) Converting markdown/text to slides, (3) Generating HTML slides, (4) Applying McKinsey/BCG design, (5) Data visualization in presentations. Keywords: presentation, slides, HTML, McKinsey style, charts, visualization, 幻灯片, 演示文稿
Transforms documents and data into professional McKinsey-style HTML presentations with intelligent visualizations.
npx claudepluginhub within-7/minto-plugin-toolsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
assets/COMPONENTS_INDEX.mdassets/INDEX.mdassets/LAYOUTS_INDEX.mdassets/component-template.htmlassets/components/5w1h-example.htmlassets/components/ansoff-matrix-example.htmlassets/components/chart-examples.htmlassets/components/competitive-4box-example.htmlassets/components/flowchart-example.htmlassets/components/funnel-chart-example.htmlassets/components/gauge-chart-example.htmlassets/components/graphic-list-components.htmlassets/components/inverted-pyramid-example.htmlassets/components/json-html-example.htmlassets/components/kano-model-example.htmlassets/components/market-funnel-example.htmlassets/components/mckinsey-label-bar-example.htmlassets/components/mindmap-example.htmlassets/components/pareto-chart-example.htmlassets/components/polar-chart-example.htmlTransform documents and data into professional McKinsey-style HTML presentations with AI-powered content structuring, intelligent visualization, and automatic quality review.
Core Principle: Preserve 100% of original content while applying professional McKinsey-style design.
Before creating any presentation, consider:
Key Principle: Better to have 20 clear slides than 10 cluttered ones. Content preservation is non-negotiable.
Trigger scenarios:
6-phase AI-powered workflow using subagents:
| Phase | Action | Duration | Output |
|---|---|---|---|
| 1 | Parse Document | ~1 min | Structured content map |
| 2 | Plan Slides | ~2 min | Slide plan with visualizations |
| 3 | Apply Design | ~1 min | McKinsey-styled structure |
| 3.5 | Content Visualization | ~2 min | Enhanced with charts/graphics |
| 4 | Generate HTML | ~3 min | Single-file HTML presentation |
| 5 | Review & Verify | ~2 min | Quality report with scores |
Total: ~10-12 minutes for typical presentation
Goal: Extract structure, data, and conclusions without modification.
Steps:
Exit Criteria: Document fully parsed with content structure mapped.
Goal: Transform parsed content into slide-friendly structure.
Approach: Use Task tool with general-purpose subagent.
MANDATORY - READ ENTIRE FILE: Before invoking subagent, read subagent-prompts.md for the Phase 2 prompt template.
Subagent Task:
Slide Types:
TITLE: Cover slideTOC: Table of contents (if 10+ slides)DATA_VISUALIZATION: Slides with numerical dataCONCEPTUAL: Framework slides (SWOT, timeline, etc.)CONTENT: General content slidesCONCLUSIONS: Key findings with visualizationsINSIGHTS: Recommendations with visualizationsEND: Thank you slideExit Criteria: Structured slide plan with all slides defined, zero content loss.
Goal: Apply McKinsey-style design system.
MANDATORY - READ ENTIRE FILE: Read mckinsey-design-system.md for complete design specifications.
Additional References:
assets/LAYOUTS_INDEX.md - Layout type index with structure examples and configuration parametersassets/layouts/*.html - Actual layout example files for referenceDo NOT load other reference files for this phase.
Key Actions:
Exit Criteria: All slides designed with consistent McKinsey-style branding.
Goal: Beautify content with appropriate charts and graphics, avoiding pure text lists.
Approach: Use Task tool with general-purpose subagent.
MANDATORY - READ ENTIRE FILE: Read chart-selection-guide.md for complete visualization decision trees.
Additional References:
assets/COMPONENTS_INDEX.md - Complete component index with CSS classes, Chart.js configurations, and component selection decision treeassets/components/*.html - Actual component example files for referenceDo NOT load other reference files for this phase.
Subagent Task:
9 Content Structure Types:
Example Files Location: assets/components/*.html and assets/layouts/*.html (e.g., flowchart-example.html, pyramid-chart-example.html)
Exit Criteria: All content slides enhanced with appropriate visualizations, no plain text bullet lists for insights.
Goal: Generate single-file, self-contained HTML presentation.
Approach: Use Task tool with general-purpose subagent executing 4 sub-steps.
MANDATORY - READ ENTIRE FILE: Read template-guide.md for complete template usage instructions.
Additional References:
assets/INDEX.md - Master index with directory structure and quick start guideassets/LAYOUTS_INDEX.md - Layout type index with structure examples and configuration parametersassets/layout-template.html - Layout template with single/double/triple column and card grid examplesassets/component-template.html - Component template with chart and diagram examplesMANDATORY - READ ENTIRE FILE: Read subagent-prompts.md for the Phase 4 prompt template.
Do NOT load other reference files for this phase.
4-Step Process:
templates/cover-slide-template.htmltemplates/toc-slide-template.html (if 10+ slides)templates/content-slide-template.htmltemplates/end-slide-template.htmlNOTE: Also reference assets/layouts/ for additional layout examples and assets/LAYOUTS_INDEX.md for layout selection guidance.
chart_type field (bar, line, pie, doughnut, radar, polarArea, bubble, scatter)visualization_type field (pyramid, timeline, flowchart, mindmap, etc.)assets/components/*.html and assets/layouts/*.html example filesassets/COMPONENTS_INDEX.md for chart component details and assets/LAYOUTS_INDEX.md for layout configurationsAdditional Optimization Tips:
assets/layout-template.html as a reference for layout structureassets/component-template.html as a reference for component structure<style> tag<script> taghttps://cdn.jsdelivr.net/npm/chart.js{original_filename}_beautified.htmlExit Criteria: Complete HTML presentation file generated, ready to open in browser.
Goal: Automatically review generated HTML for quality, integrity, and compliance.
Approach: Use Task tool with html-presentation-reviewer agent from ./agents/html-presentation-reviewer.md.
Invocation:
Use Task tool to call html-presentation-reviewer agent with:
- Generated HTML file path
- Source document path
- Request comprehensive review report
Review Dimensions:
Score Interpretation:
Exit Criteria: HTML presentation reviewed and approved with detailed report.
Generated presentations include:
Content Integrity:
Design Standards:
Quality:
User Request: "Create a McKinsey-style presentation from this report"
Workflow:
Output: report_beautified.html with professional visualizations, quality score, and recommendations.
All detailed guides are in references/:
mckinsey-design-system.md - Colors, typography, layoutstemplate-guide.md - 4 template usage instructionschart-selection-guide.md - Decision trees for visualizationssubagent-prompts.md - Optimized prompts for all phasesIndex Files (New in v2.0):
assets/COMPONENTS_INDEX.md - Complete chart and diagram component index with CSS classes, Chart.js configurations, and selection decision treeassets/LAYOUTS_INDEX.md - Complete layout type index with structure examples, configuration parameters, and layout selection decision treeassets/INDEX.md - Master index with directory structure and quick start guideVisualization examples in assets/:
Components (assets/components/*.html):
Layouts (assets/layouts/*.html):
Guides (assets/guides/):
assets/guides/CHART_EXAMPLES_INDEX.md for complete component listassets/guides/INSIGHT_VISUALIZATION_GUIDE.md for detailed visualization guideassets/guides/TEMPLATE_USAGE_GUIDE.md for template usage examplesassets/guides/HTML_OPTIMIZATION_GUIDE.md for optimization techniquesBefore finalizing presentation, verify 100% content preservation:
Checklist:
IF ANY COUNT DOES NOT MATCH, REGENERATE.
Red Flags:
Use when working with Payload CMS projects (payload.config.ts, collections, fields, hooks, access control, Payload API). Use when debugging validation errors, security issues, relationship queries, transactions, or hook behavior.