html-presentation-beautifier

# 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**:
1. Read source document completely
2. Identify document type (report, analysis, research)
3. Extract structural elements:
   - Headings and subheadings
   - Bullet points and lists
   - Data tables and numerical data
   - Key conclusions and recommendations
4. Map content hierarch