HTML Presentation Pro

Professional HTML presentation system with multi-expert pipeline processing, Apple-level visual polish, and intelligent companion output suggestions.

What This Skill Provides

Pipeline Overview

Input → Content Strategy → Presentation UX → Behavior Design → Visual Design → HTML Output
                                                                         ↓
                                                              Companion Outputs

Expert Stages:

1. Content Strategy Expert - Headlines, copywriting frameworks, message hierarchy, audience adaptation
2. Presentation UX Expert - Information architecture, cognitive load, pacing, visual hierarchy
3. Human Behavior Expert - Attention hooks, persuasion, retention, engagement triggers
4. Visual Design Expert - Animations, typography, scroll navigation, theming, layouts

Output: Single .html file ready to open in any browser. No dependencies.

Companion Outputs: Based on presentation purpose, suggests and generates supporting materials via integrated skills.

---

Quick Start

For Any Presentation

1. Gather Input - Content, audience, goal, any brand requirements
2. Run Pipeline - Process through 6 stages sequentially
3. Generate HTML - Apply visual design, output file
4. Suggest Companions - Based on purpose, recommend additional outputs
5. Generate Companions - Use integrated skills for additional formats

---

Pipeline Workflow

Stage 1: Input Analysis

Gather from user:

• What is the content/topic?
• Who is the target audience? (Technical / Executive / General)
• What is the goal? (Inform / Persuade / Train / Sell)
• How many sections needed?
• Brand requirements? (Colors, logo)
• Existing copy to work from?
• What will this presentation be used for? (See Purpose Types below)

Create input brief:

Topic: [X]
Audience: [Technical/Executive/General]
Goal: [Inform/Persuade/Train/Sell]
Purpose: [Training/Sales/Marketing/Conference/Internal/Social]
Sections: [N]
Key message: [One sentence]

---

Stage 2: Content Strategy Pass

Load: references/content-strategy.md

Process:

1. Identify message structure (Minto Pyramid - conclusion first)
2. Optimize headlines (power formulas)
3. Apply copywriting framework (PAS, AIDA, or BAB)
4. Adapt language for audience

Output: Section-by-section message map with optimized copy.

---

Stage 3: Presentation UX Pass

Load: references/presentation-ux.md

Process:

1. Structure information architecture (Linear, Hub-spoke, Problem-solution)
2. Apply cognitive load limits (density guidelines)
3. Plan pacing (dense sections balanced with breathing room)
4. Design visual hierarchy per slide

Output: Structure plan with timing, density, and architecture.

---

Stage 4: Human Behavior Pass

Load: references/human-behavior.md

Process:

1. Add opening hook (question, statistic, story, or bold claim)
2. Insert transition techniques (callbacks, questions, previews)
3. Apply persuasion principles (social proof, authority, scarcity)
4. Design retention aids (3-touch rule, chunking, visual memory)
5. Craft CTA (clear action, low friction, benefit-focused)

Output: Engagement plan with hooks, transitions, retention points, CTA.

---

Stage 5: Visual Design Pass

Load as needed:

• references/animation-system.md
• references/typography-system.md
• references/layout-patterns.md
• references/dark-light-theming.md
• references/scroll-navigation.md
• references/print-pdf-export.md ← ALWAYS load for print CSS

Process:

1. Assign layouts (vary every 2-3 sections)
2. Plan theme sequence (30-40% dark sections)
3. Map animations by element type
4. Apply typography (balanced text, proper hierarchy)
5. Configure navigation (dots, keyboard support)
6. Add production print CSS (MANDATORY - see print-pdf-export.md)

---

Stage 6: HTML Output + Companion Suggestions

Generate HTML file with complete print CSS, then suggest companion outputs based on purpose.

---

Companion Outputs

Purpose-Based Recommendations

Based on the presentation purpose, automatically suggest relevant companion materials:

Training / Education Purpose

Companion	Skill	Description
Handout PDF	pdf skill	Key takeaways + exercises in printable format
Reference Guide	pdf/word skill	Detailed documentation for later reference
Speaker Script	word skill	Presenter notes with timing cues
Quiz/Assessment	-	Knowledge check questions
Exercise Workbook	excel skill	Interactive exercises with templates

Workflow:

HTML Presentation → Handout PDF → Reference Guide → Speaker Script

---

Sales / Pitch Purpose

Companion	Skill	Description
Leave-Behind PDF	pdf skill	Executive summary for after meeting
One-Pager	pdf skill	Single-page value proposition
Follow-up Email	-	Template with key points + CTA
ROI Calculator	excel skill	Interactive value calculator
Case Study PDF	pdf skill	Detailed success story
Proposal Doc	word skill	Formal proposal document

Workflow:

HTML Presentation → Leave-Behind PDF → Follow-up Email → Proposal Doc

---

Marketing / Product Launch Purpose

Companion	Skill	Description
Social Media Posts	-	LinkedIn, Twitter thread, carousel content
Email Campaign	-	Launch sequence (3-5 emails)
Blog Post	word skill	Long-form content from presentation
Press Release	word skill	News announcement format
Landing Page Copy	-	Website content derived from presentation
Lead Magnet PDF	pdf skill	Gated content for email capture

Workflow:

HTML Presentation → Lead Magnet PDF → Email Campaign → Social Posts

---

Conference / Speaking Purpose

Companion	Skill	Description
Speaker Notes	word skill	Detailed presenter script
PPTX Version	pptx skill	Traditional slides for venue requirements
Attendee Handout	pdf skill	Takeaways + contact info
Bio + Abstract	word skill	Speaker bio and session description
Q&A Prep	word skill	Anticipated questions + answers

Workflow:

HTML Presentation → PPTX Version → Speaker Notes → Handout PDF

---

Social Media / Content Marketing Purpose

Companion	Skill	Description
LinkedIn Carousel	-	Slide-by-slide social content
Twitter/X Thread	-	Key points as thread
Instagram Slides	-	Visual-optimized story/carousel
YouTube Script	word skill	Video narration script
Podcast Outline	word skill	Audio discussion points
Newsletter Edition	-	Email newsletter version

Workflow:

HTML Presentation → LinkedIn Carousel → Twitter Thread → Newsletter

---

Executive / Strategy Purpose

Companion	Skill	Description
Amazon 6-Pager	word skill	Narrative memo format
Executive Summary	pdf skill	One-page strategic overview
Board Deck	pptx skill	Formal presentation for board
Decision Doc	word skill	Options + recommendation
Financial Model	excel skill	Supporting numbers + projections

Workflow:

HTML Presentation → Amazon 6-Pager → Executive Summary → Financial Model

---

Internal / Team Purpose

Companion	Skill	Description
Meeting Notes	word skill	Key decisions + action items
Project Brief	word skill	Context + scope document
Wiki/Doc Page	word skill	Internal documentation
Slack Summary	-	Quick post for async sharing
Recording Transcript	word skill	Text version for accessibility

Workflow:

HTML Presentation → Wiki Page → Slack Summary → Meeting Notes

---

Multi-Format Integration

Skill Integration Guide

When generating companion outputs, use these skills:

pptx skill

Use for: Traditional PowerPoint when required by venue, client, or company policy.

Integration:

1. Export HTML presentation structure
2. Invoke pptx skill with section content
3. Apply consistent branding
4. Note: PPTX loses HTML-specific animations

Trigger: "I need a PowerPoint version" or conference/corporate requirements.

---

pdf skill

Use for: Printable handouts, leave-behinds, lead magnets, executive summaries.

Integration:

1. Extract key content from HTML presentation
2. Invoke pdf skill with appropriate template
3. Optimize for print (no animations, readable typography)
4. Include QR code linking to HTML version if desired

Trigger: "I need a printable version" or "Create a handout."

---

word skill

Use for: Long-form documents, scripts, Amazon 6-pagers, proposals, speaker notes.

Integration:

1. Extract narrative content from HTML presentation
2. Invoke word skill with document type
3. Expand bullet points into prose (for narrative formats)
4. Include appropriate headers, sections, formatting

Trigger: "I need a document version" or specific document type requested.

---

excel skill

Use for: ROI calculators, data tables, exercise workbooks, financial models.

Integration:

1. Identify data-heavy sections from HTML presentation
2. Invoke excel skill with data structure
3. Add formulas for interactive calculations
4. Create professional formatting

Trigger: "I need a calculator" or "Create an interactive spreadsheet."

---

Pipeline Depth Selection

Full Pipeline (All 6 stages + Companions)

Use when:

• Creating from scratch
• Raw content needs optimization
• Persuasion is critical
• External audience
• Multiple output formats needed

Partial Pipeline (Stages 3-6)

Use when:

• Content/copy already optimized
• User provides final messaging
• Focus is on design execution + companions

Design Only (Stages 5-6)

Use when:

• Converting existing presentation
• User provides complete slide content
• Only visual polish needed
• No companion outputs needed

---

When to Load Reference Files

Content Strategy (references/content-strategy.md)

• Optimizing headlines or copy
• Applying PAS, AIDA, BAB frameworks
• Adapting for audience types
• Structuring message hierarchy

Presentation UX (references/presentation-ux.md)

• Planning information architecture
• Managing cognitive load and density
• Designing visual hierarchy
• Planning pacing and rhythm

Human Behavior (references/human-behavior.md)

• Creating opening hooks
• Adding persuasion elements
• Designing for retention
• Crafting CTAs

Animation System (references/animation-system.md)

• Planning animation strategy
• Implementing JavaScript observers
• Need specific animation CSS

Typography System (references/typography-system.md)

• Setting up text hierarchy
• Creating statement sections
• Implementing gradient text

Layout Patterns (references/layout-patterns.md)

• Planning section variety
• Implementing specific layouts
• Creating grids, comparisons, diagrams

Dark/Light Theming (references/dark-light-theming.md)

• Planning section sequence
• Styling dark sections
• Creating color palettes

Scroll Navigation (references/scroll-navigation.md)

• Implementing scroll behavior
• Adding navigation dots
• Setting up keyboard controls

Print PDF Export (references/print-pdf-export.md)

• ALWAYS load - Required for every presentation
• Production-ready print CSS for browser Print to PDF
• Landscape orientation, full-page slides, dark backgrounds
• Multi-column layout support (comparison, three-column)
• Fixes all common PDF export issues

---

Common Scenarios with Companions

Technical Training

Pipeline emphasis:

• Content: Minto Pyramid, technical vocabulary
• UX: Hub-and-spoke structure, deep sections allowed
• Behavior: Authority signals, spaced repetition
• Design: Dark sections for code, architecture diagrams

Recommended companions:

1. Handout PDF - Key concepts + code snippets
2. Exercise Workbook (Excel) - Hands-on practice
3. Reference Guide (PDF) - Complete documentation
4. Speaker Script (Word) - For trainers

---

Sales Pitch

Pipeline emphasis:

• Content: PAS framework, benefit-focused headlines
• UX: Linear narrative, breathing room, short dense slides
• Behavior: All Cialdini principles, strong hook, clear CTA
• Design: Highlight sections for CTA

Recommended companions:

1. Leave-Behind PDF - Executive summary
2. ROI Calculator (Excel) - Interactive value proof
3. Follow-up Email - Next steps template
4. Proposal Doc (Word) - Formal proposal

---

Marketing Launch

Pipeline emphasis:

• Content: AIDA framework, emotional language
• UX: Visual-heavy, minimal text
• Behavior: Excitement building, urgency in CTA
• Design: Brand colors, gradient highlights

Recommended companions:

1. Lead Magnet PDF - Gated content for email capture
2. LinkedIn Carousel - Social distribution
3. Email Campaign - 3-5 email sequence
4. Blog Post (Word) - Long-form content

---

Conference Talk

Pipeline emphasis:

• Content: Story-based, relatable language
• UX: Statement sections for impact, varied pacing
• Behavior: Emotional journey, callbacks, vision close
• Design: Visual-heavy, minimal text

Recommended companions:

1. PPTX Version - For venue requirements
2. Speaker Notes (Word) - Detailed script
3. Attendee Handout (PDF) - Takeaways + contact
4. Twitter Thread - Post-talk distribution

---

Executive Strategy

Pipeline emphasis:

• Content: Data-driven, outcome-focused
• UX: Low density, key points only
• Behavior: Authority, confidence building
• Design: Clean, professional, minimal

Recommended companions:

1. Amazon 6-Pager (Word) - Narrative memo
2. Executive Summary (PDF) - One-page overview
3. Financial Model (Excel) - Supporting analysis
4. Decision Doc (Word) - Options + recommendation

---

Companion Output Workflow

After generating HTML presentation:

Step 1: Identify Purpose

"What will this presentation be used for?"
→ Training / Sales / Marketing / Conference / Social / Executive / Internal

Step 2: Suggest Companions

Based on purpose, suggest 3-4 most relevant companion outputs with brief rationale.

Step 3: Prioritize

"Which companion outputs would be most valuable?"
→ User selects or confirms suggestions

Step 4: Generate

For each selected companion:

1. Extract relevant content from HTML presentation
2. Invoke appropriate skill (pdf, word, excel, pptx)
3. Adapt content for format (prose for docs, data for excel, etc.)
4. Deliver with consistent branding

---

Best Practices Summary

Pipeline:

• Gather input brief first (including purpose)
• Process stages sequentially
• Load references only when needed
• Suggest companions based on purpose

Content Strategy:

• Lead with conclusion (Minto)
• One message per slide
• Adapt vocabulary to audience

Presentation UX:

• 7±2 sections maximum
• 3-second comprehension test
• Balance dense with breathing room

Human Behavior:

• Hook in first 30 seconds
• Repeat key messages 3x
• Single clear CTA

Visual Design:

• 1.1-1.3s animation duration
• 30-40% dark sections
• Vary layouts every 2-3 sections

Companion Outputs:

• Match companions to purpose
• Generate in priority order
• Maintain consistent messaging across formats

---

Resources

Pipeline References:

• content-strategy.md - Headlines, copywriting, message hierarchy
• presentation-ux.md - Information architecture, cognitive load, pacing
• human-behavior.md - Attention, persuasion, retention, CTAs

Design References:

• animation-system.md - Animation CSS and JavaScript patterns
• typography-system.md - Text hierarchy and styling
• scroll-navigation.md - Scroll snap and navigation
• dark-light-theming.md - Color palettes and theming
• layout-patterns.md - 10+ layout definitions

Assets:

• assets/template.html - Minimal starting template

Integrated Skills:

• pptx skill - PowerPoint generation
• pdf skill - PDF document generation
• word skill - Word document generation
• excel skill - Excel spreadsheet generation

---

Version: 2.0.0 Pipeline Added: 2026-01-09 Companion Outputs Added: 2026-01-09 Tested: HGMGT Claude Code Training (18 sections, FAANG-level expectations)