HTML Presentation Beautifier

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

Presentation Design Philosophy

Before creating any presentation, consider:

• Audience: Who will see this? (determines complexity and formality)

• Core Message: What's the single most important takeaway?

• Story Arc: How do slides build towards the conclusion?

• Visual Hierarchy: Which data and insights deserve emphasis?

Key Principle: Better to have 20 clear slides than 10 cluttered ones. Content preservation is non-negotiable.

When to Use This Skill

Trigger scenarios:

• "Create a presentation from this document/report"

• "Transform this analysis into slides"

• "Generate McKinsey-style presentation"

• "Visualize this data professionally"

• "Make HTML slides from this content"

Process Overview

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

Phase 1: Document Parsing

Goal: Extract structure, data, and conclusions without modification.

Steps:

• Read source document completely

• Identify document type (report, analysis, research)

• Extract structural elements:

• Headings and subheadings

• Bullet points and lists

• Data tables and numerical data

• Key conclusions and recommendations

• Map content hierarchy: main topics → subtopics → details

• Identify quantitative data suitable for charts

Exit Criteria: Document fully parsed with content structure mapped.

Phase 2: Content Structuring (Using Subagent)

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:

• Input: Parsed document content

• Output: JSON slide plan with slide types, titles, content, visualization assignments

• Critical: Preserve 100% of content, assign visualizations to all insights/conclusions

Slide Types:

• TITLE : Cover slide

• TOC : Table of contents (if 10+ slides)

• DATA_VISUALIZATION : Slides with numerical data

• CONCEPTUAL : Framework slides (SWOT, timeline, etc.)

• CONTENT : General content slides

• CONCLUSIONS : Key findings with visualizations

• INSIGHTS : Recommendations with visualizations

• END : Thank you slide

Exit Criteria: Structured slide plan with all slides defined, zero content loss.

Phase 3: Design & Layout

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 parameters

• assets/layouts/*.html

• Actual layout example files for reference

Do NOT load other reference files for this phase.

Key Actions:

• Select appropriate layout for each slide type

• Apply McKinsey color palette (#F85d42, #556EE6, #34c38f, etc.)

• Set typography hierarchy (titles 48-64px, subtitles 28-36px, body 16-20px)

• Optimize spacing (40-60px padding, 20-30px element spacing)

• Ensure responsive design (1200px, 768px, mobile breakpoints)

Exit Criteria: All slides designed with consistent McKinsey-style branding.

Phase 3.5: Content Visualization Beautification (Using Subagent)

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 tree

• assets/components/*.html

• Actual component example files for reference

Do NOT load other reference files for this phase.

Subagent Task:

• Input: Structured slide plan from Phase 2

• Output: Enhanced slide plan with specific visualization types assigned

• Process: Analyze content structure → Match to visualization type → Reference example files

9 Content Structure Types:

• Progressive (递进型) → progression, timeline, flowchart

• Temporal (时间序列型) → timeline, strategy-roadmap

• Parallel (并列型) → emphasis-box, mindmap, matrix

• Hierarchical (层级型) → pyramid, inverted-pyramid

• Comparative (对比型) → comparison, pros-cons, venn-diagram

• Framework (分析框架型) → swot, ansoff, 5w1h, competitive-4box

• Transformation (转化流程型) → funnel, value-stream

• Cyclical (循环型) → cycle, circular-flow

• Causal (因果型) → problem-solution, pareto, gauge

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.

Phase 4: HTML Generation (Using Subagent)

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 guide

• assets/LAYOUTS_INDEX.md

• Layout type index with structure examples and configuration parameters

• assets/layout-template.html

• Layout template with single/double/triple column and card grid examples

• assets/component-template.html

• Component template with chart and diagram examples

MANDATORY - 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:

Step 4.1: Template Selection

• Slide #1 → templates/cover-slide-template.html

• Slide #2 → templates/toc-slide-template.html (if 10+ slides)

• Slides #3-#N-1 → templates/content-slide-template.html

• Slide #N → templates/end-slide-template.html

NOTE: Also reference assets/layouts/ for additional layout examples and assets/LAYOUTS_INDEX.md for layout selection guidance.

Step 4.2: Content Analysis & Chart Selection

• For DATA_VISUALIZATION slides: Use chart_type field (bar, line, pie, doughnut, radar, polarArea, bubble, scatter)

• For other slides: Use visualization_type field (pyramid, timeline, flowchart, mindmap, etc.)

• Copy CSS and HTML from corresponding assets/components/.html and assets/layouts/.html example files

• IMPORTANT: Reference assets/COMPONENTS_INDEX.md for chart component details and assets/LAYOUTS_INDEX.md for layout configurations

Additional Optimization Tips:

• Use assets/layout-template.html as a reference for layout structure

• Use assets/component-template.html as a reference for component structure

• All charts must use 100% width within their containers

• Charts on chart pages must use 2-column or 3-column layouts (never single column)

Step 4.3: Apply Optimization

• Integrate template structure with content

• Apply McKinsey design system (exact colors, fonts, layouts)

• Insert exact text from slide plan (preserve data precision: 1723.498, not 1723.5)

• Initialize Chart.js charts with McKinsey colors

• Implement conceptual visualizations from assets/

Step 4.4: HTML File Output

• Assemble complete single-file HTML

• All CSS inline in <style> tag

• All JavaScript inline in <script> tag

• Include Chart.js CDN: https://cdn.jsdelivr.net/npm/chart.js

• Save to: {original_filename}_beautified.html

Exit Criteria: Complete HTML presentation file generated, ready to open in browser.

Phase 5: Review & Verify (Using Subagent)

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:

• Content Integrity (CRITICAL) - 100% preservation verification

• Code Quality - HTML/CSS/JS validity

• McKinsey Style Compliance - Design standards check

• Chart Validity - Visualization correctness

• Interactivity - Feature testing

Score Interpretation:

• Score ≥85: Approved, optional improvements

• Score 75-84: Acceptable, address major issues

• Score <75: Needs regeneration

Exit Criteria: HTML presentation reviewed and approved with detailed report.

Interactive Features

Generated presentations include:

• Navigation: Previous/Next buttons, slide counter, arrow keys (←/→), Space (next)

• Fullscreen: Toggle button, Escape to exit

• Keyboard Shortcuts: Home (first slide), End (last slide)

• Responsive Design: Desktop, tablet, mobile layouts

• Chart Interactivity: Hover tooltips, legend toggling

NEVER Do These

Content Integrity:

• NEVER modify original content or conclusions - preserve 100%

• NEVER delete, skip, or omit any content

• NEVER summarize or compress - show complete detail

• NEVER truncate lists - if source has 15 items, show all 15

• NEVER paraphrase - use exact wording from source

• NEVER add fabricated data - only use source data

Design Standards:

• NEVER deviate from McKinsey color scheme (#F85d42, #556EE6, #34c38f, #50a5f1, #f1b44c, #74788d)

• NEVER use inconsistent typography - maintain hierarchy

• NEVER present conclusions/insights as plain text bullet lists - always visualize

• NEVER use generic AI aesthetics (purple gradients, Inter font, default border-radius)

Quality:

• NEVER sacrifice content for aesthetics - better 20 dense slides than 10 incomplete ones

• NEVER skip Phase 5 review - quality verification is mandatory

Quick Start Example

User Request: "Create a McKinsey-style presentation from this report"

Workflow:

• Parse (Phase 1): Read report, extract structure

• Plan (Phase 2): Invoke subagent → Get slide plan

• Design (Phase 3): Load design system → Apply McKinsey style

• Visualize (Phase 3.5): Invoke subagent → Enhance with charts/graphics

• Generate (Phase 4): Invoke subagent → Create HTML file

• Review (Phase 5): Invoke reviewer agent → Get quality report

Output: report_beautified.html with professional visualizations, quality score, and recommendations.

Resources

All detailed guides are in references/ :

• Design System: mckinsey-design-system.md

• Colors, typography, layouts

• Templates: template-guide.md

• 4 template usage instructions

• Chart Selection: chart-selection-guide.md

• Decision trees for visualizations

• Subagent Prompts: subagent-prompts.md

• Optimized prompts for all phases

Index Files (New in v2.0):

• assets/COMPONENTS_INDEX.md

• Complete chart and diagram component index with CSS classes, Chart.js configurations, and selection decision tree

• assets/LAYOUTS_INDEX.md

• Complete layout type index with structure examples, configuration parameters, and layout selection decision tree

• assets/INDEX.md

• Master index with directory structure and quick start guide

Visualization examples in assets/ :

Components (assets/components/*.html ):

• Chart examples: chart-examples.html, mckinsey-label-bar-example.html, pareto-chart-example.html

• Special charts: pyramid-chart-example.html, funnel-chart-example.html, gauge-chart-example.html

• Diagrams: swot-analysis.html, ansoff-matrix.html, 5w1h.html, competitive-4box.html

• Flowcharts: flowchart.html, mindmap.html, timeline.html, swimlane.html

Layouts (assets/layouts/*.html ):

• Cover layouts: 01-cover-page.html, NEW_01-cover-page.html

• Content layouts: 05-chart-text.html, NEW_02-content-page-chart-insights.html

• Special layouts: 07-radar-card-layout.html, 08-table-of-contents.html

• NEW layouts: NEW_03-content-page-text-only.html, NEW_04-content-page-three-charts.html

Guides (assets/guides/ ):

• See assets/guides/CHART_EXAMPLES_INDEX.md for complete component list

• See assets/guides/INSIGHT_VISUALIZATION_GUIDE.md for detailed visualization guide

• See assets/guides/TEMPLATE_USAGE_GUIDE.md for template usage examples

• See assets/guides/HTML_OPTIMIZATION_GUIDE.md for optimization techniques

Content Integrity Verification (MANDATORY)

Before finalizing presentation, verify 100% content preservation:

Checklist:

• Section counts match (source vs presentation)

• Bullet point counts match

• Data point counts match

• Conclusion counts match

• Exact wording preserved (no paraphrasing)

IF ANY COUNT DOES NOT MATCH, REGENERATE.

Red Flags:

• "Key points" instead of complete lists

• Charts showing only "top N items"

• Bullet counts that don't match source

• Phrasing that doesn't match source exactly