HTML Presentation Generator

Generate professional HTML presentations following Within7 company standards with strict design constraints.

Decision Tree

Choose output format based on requirements:

Workflow

Step 1: Analyze Requirements

Identify slide types needed:

• Cover page: Title, subtitle, optional background
• TOC page: Table of contents with numbered sections
• Content pages: Data tables, charts, text content
• Summary page: Key metrics and takeaways
• End page: Thank you/contact information

Step 2: Load Templates

MANDATORY - READ ENTIRE FILE: Before proceeding, you MUST read templates-guide.md completely.

For each slide type, load corresponding template:

• Cover: templates/cover.html
• TOC: templates/toc.html
• Content: templates/base-template.html
• Summary: templates/summary.html
• End: templates/end.html

Step 3: Integrate Components

MANDATORY - READ ENTIRE FILE: For data visualization, read components-guide.md completely.

Copy component HTML from components/ directory:

• Tables: data-table.html
• Bar charts: bar-chart.html
• Radar charts: radar-chart.html
• Icons: icons.html

Step 4: Assemble Presentation

For single-file output:

1. Start with navigation-template.html as base
2. Replace slide sections with content from templates
3. Update slide count and navigation logic
4. Verify all CSS variables are defined

For multi-file output:

1. Create separate HTML file for each slide
2. Use individual templates directly
3. Name files: slide-01.html, slide-02.html, etc.

Design System Constraints

Core Rules

• Canvas size: 960×540px (16:9 at 72dpi)
• Safe margins: 40px on all sides
• Responsive: ONLY use transform:scale(...), NO reflow
• Single file HTML, zero external dependencies

CSS Variables

--bg-main: #FFFFFF
--bg-header: #000000
--accent: #F85d42
--gray: #74788d
--aux1: #556EE6
--aux2: #34c38f
--aux3: #50a5f1
--aux4: #f1b44c
--gray-light: #F5F5F5
--page-bg: #e0e0e0

Layout System

• 12-column grid (60px columns, 20px gaps)
• Card: 8px border-radius, 20px padding
• Header: 60px height, black background

NEVER Do These

Common Mistakes

Breaking Layout

• Never change canvas size (960×540px is mandatory)
• Never use responsive reflow (use transform:scale only)
• Never remove safe margins (40px minimum)

Design Violations

• Never use external CSS/JS files
• Never use system fonts other than specified
• Never modify CSS variable values
• Never add custom animations

Content Errors

• Never exceed 5-6 bullet points per slide
• Never use font sizes smaller than 16px
• Never place text within 20px of edges
• Never use more than 3 accent colors per slide

Anti-Patterns

Generic AI-Generated Designs

• Purple gradients on white backgrounds
• All corners rounded to 8px
• Cookie-cutter card layouts
• Generic, personality-free styles

Poor Data Visualization

• Charts without axis labels
• Tables without total rows
• Numbers left-aligned (always right-align)
• Inconsistent decimal formatting

Quick Reference

File Structure

skills-ppt-sop/
├── SKILL.md
├── references/
│   ├── templates-guide.md
│   └── components-guide.md
├── templates/
│   ├── navigation-template.html
│   ├── cover.html
│   ├── toc.html
│   ├── base-template.html
│   ├── summary.html
│   └── end.html
└── components/
    ├── data-table.html
    ├── bar-chart.html
    ├── radar-chart.html
    └── icons.html

Template Selection Guide

Component Usage

Output Verification

Before delivering, verify:

• All CSS variables are defined
• Canvas size is 960×540px
• No external dependencies
• Navigation works (for single-file output)
• All numbers are right-aligned in tables
• Font sizes meet minimum requirements
• Safe margins maintained