Aws Html Slides

Frontend Slides

Create zero-dependency, animation-rich HTML presentations that run entirely in the browser.

Quick Start — How It Works

When the user invokes this skill, present this workflow overview first:

This skill helps you create browser-based HTML presentations with rich animations. There are two paths:

Rich content blocks (usable in any slide): images/video, data charts, comparison tables, and diagrams — flowcharts, AWS architecture, sequence/UML/ER, network, or mind maps (drawn via the drawio skill; needs the draw.io desktop CLI).

Two Paths

| Path | Flow | |------|------| | New Presentation | Step 1 -> 2 -> 3 -> 4 -> 5 | | PPT Conversion | Step 1 -> 2 -> 3 (extract + generate in one go) |

New Presentation:
  1. Setup (language+mode+editing+pages) -> 2. Topic -> 3. Style -> 4. Fill content.md -> 5. Generate HTML

PPT Conversion:
  1. Setup (language+mode) -> 2. PPT file path -> 3. Style + Extract + Generate (done)

Output structure

my-presentation/
├── index.html        # The presentation (all CSS/JS inline, zero dependencies)
└── assets/           # All media files (auto-copied from your references)
    ├── screenshot.png
    └── demo.mp4

• Navigate with arrow keys, Space, scroll, or click the nav dots
• Click any image to enlarge, Esc to close
• Share by zipping the folder — recipient unzips and opens index.html

---

Core Principles

1. Zero Dependencies — Single HTML files with inline CSS/JS. No npm, no build tools.
2. Show, Don't Tell — Use pre-built visual previews, not abstract choices. People discover what they want by seeing it.
3. Distinctive Design — No generic "AI slop." Every presentation must feel custom-crafted.
4. Viewport Fitting (NON-NEGOTIABLE) — Every slide MUST fit exactly within 100vh. No scrolling within slides, ever. Content overflows? Split into multiple slides.

Design Aesthetics

You tend to converge toward generic, "on distribution" outputs. In frontend design, this creates what users call the "AI slop" aesthetic. Avoid this: make creative, distinctive frontends that surprise and delight.

Focus on:

• Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics.
• Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Draw from IDE themes and cultural aesthetics for inspiration.
• Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions.
• Backgrounds: Create atmosphere and depth rather than defaulting to solid colors. Layer CSS gradients, use geometric patterns, or add contextual effects that match the overall aesthetic.

Avoid generic AI-generated aesthetics:

• Overused font families (Inter, Roboto, Arial, system fonts)
• Cliched color schemes (particularly purple gradients on white backgrounds)
• Predictable layouts and component patterns
• Cookie-cutter design that lacks context-specific character
• Emoji as icons — Never use emoji as card/feature icons. Use Lucide icons via CDN instead. See [html-template.md](html-template.md) "Icons: Lucide" section for setup and icon reference

Interpret creatively and make unexpected choices that feel genuinely designed for the context. Vary between light and dark themes, different fonts, different aesthetics. You still tend to converge on common choices (Space Grotesk, for example) across generations. Avoid this: it is critical that you think outside the box!

Viewport Fitting Rules

These invariants apply to EVERY slide in EVERY presentation:

• Every .slide must have height: 100vh; height: 100dvh; overflow: hidden;
• ALL font sizes and spacing must use clamp(min, preferred, max) — never fixed px/rem
• Content containers need max-height constraints
• Images: max-height: min(50vh, 400px)
• Breakpoints required for heights: 700px, 600px, 500px
• Include prefers-reduced-motion support
• Never negate CSS functions directly (-clamp(), -min(), -max() are silently ignored) — use calc(-1 * clamp(...)) instead

When generating, read viewport-base.css and include its full contents in every presentation.

Content Density Limits Per Slide

| Slide Type | Maximum Content | |------------|-----------------| | Title slide | 1 heading + 1 subtitle + optional tagline | | Content slide | 1 heading + 4-6 bullet points OR 1 heading + 2 paragraphs | | Feature grid | 1 heading + 6 cards maximum (2x3 or 3x2) | | Code slide | 1 heading + 8-10 lines of code | | Quote slide | 1 quote (max 3 lines) + attribution | | Image slide | 1 heading + 1 image (max 60vh height) | | Chart slide | 1 heading + 1-2 charts (max 50vh) + optional 1-line caption | | Table slide | 1 heading + 1 table (max 6 rows) | | Diagram slide | 1 heading + 1 diagram (max 60vh) + optional 1-line caption |

Content exceeds limits? Split into multiple slides. Never cram, never scroll.

---

Step 1: Setup

Single AskUserQuestion — ask all setup questions at once with bilingual labels:

Question 1 — Language / 语言 (header: "Language"): Language / 语言? Options:

• English
• 中文

Question 2 — Mode / 模式 (header: "Mode"): What to do / 你想做什么? Options:

• New Presentation / 新建演示 — Create from scratch / 从零开始创建
• Convert PPT / 转换 PPT — Convert .pptx to HTML / 将 .pptx 转为 HTML

Question 3 — Editing / 编辑 (header: "Editing"): Inline editing in browser / 浏览器内编辑? Options:

• Yes / 是 (Recommended) — Press E to edit, Esc to save / 按 E 编辑，Esc 保存
• No / 否 — View only, smaller file / 仅展示，文件更小

Question 4 — Pages / 页数 (header: "Pages"): How many slides / 多少页? Options:

• Short / 简短 (5-10)
• Medium / 中等 (10-20)
• Long / 详细 (20+)

After the user answers, use the selected language for ALL subsequent messages, AskUserQuestion labels, and option descriptions. Technical terms (e.g. PPT, HTML) remain in English.

---

Disclaimer (always on): Every presentation includes a fixed AWS disclaimer on every slide: "© 2026, Amazon Web Services, Inc. or its affiliates. All rights reserved." — not optional.

For PPT mode: Page Count is ignored (determined by the PPT content). Editing choice still applies.

---

Step 2: Topic / PPT Path

New Presentation

Ask the user to type a brief topic in chat. This is used for project folder naming (e.g. "bedrock-agents", "s3-security").

PPT Conversion

Ask the user to provide the .pptx file path.

---

Step 3: Style Selection + Project Setup

Style Selection (both paths)

Show the 2 available presets. Available presets are defined in [STYLEPRESETS.md](STYLEPRESETS.md).

| # | Preset | Vibe | Theme | |---|--------|------|-------| | 1 | Neon Cyber | Futuristic, techy, neon glow, 3D-ready | Specialty | | 2 | re:Invent Keynote | Futuristic, keynote-stage, high-tech, 3D-ready | Specialty |

Open the preview directory in Finder so the user can browse and double-click any style to preview it. The preview files are bundled inside the skill directory at preview/ (relative to the skill base directory).

open /preview/

User picks a number (1-2) or says "Mix elements".

> 3D & motion effects (optional, experimental): Both specialty styles can be enriched with self-contained, offline 3D/motion effects — CSS 3D heroes, hand-written WebGL shader backgrounds, and GSAP-orchestrated titles. Each technique ships in two palettes: re:Invent purple (demos/) and Neon Cyber cyan (demos/neon/). These are standalone demos + a reference, not part of the default flow — see [effects-reference.md](effects-reference.md) and the demos/ directory. The lightweight CSS default (animated-blob cover for #2, particle/grid background for #1) remains the baseline.

PPT Conversion — Extract + Generate (end of PPT path)

After style is chosen, do everything in one step:

1. Create the project folder with assets/ directory
2. Extract content — Run uv run --with python-pptx python scripts/extract-pptx.py
3. Show the user a summary of extracted slides (titles, content previews, image counts)
4. Generate HTML — Convert to chosen style, preserving all text, images (from assets/), slide order, and speaker notes (as HTML comments)
5. Open in browser — Use open /index.html
6. Summarize — Output location, style name, slide count, navigation instructions

PPT conversion is complete. Steps 4-5 are skipped.

New Presentation — Create Project Folder

After style is chosen, create the project folder and generate content.md using the script (not AI):

mkdir -p /assets
uv run python /scripts/gen-content.py  /content.md --lang 
touch /index.html

Where ` is the middle value of the chosen range (Short=8, Medium=15, Long=25). is en or zh` based on the Language choice in Step 1.

Tell the user: Fill in /content.md with your content, then come back. I'll review it before generating.

Also mention the optional rich blocks so the user knows what's available (the template header in content.md documents each in full):

• ### chart — data charts (bar, line, pie, etc.)
• ### table — comparison tables
• ### diagram — flowcharts, AWS architecture diagrams, sequence/UML/ER, network topology, or mind maps, drawn via the drawio skill. Example: a slide with ### diagram + type: aws + a plain-language description of the components. Note: diagrams require the draw.io desktop CLI (brew install --cask drawio); if it's not installed, I'll flag it at review and fall back to a CSS layout. See [diagram-reference.md](diagram-reference.md).

IMPORTANT: Do NOT fill in or modify content.md on behalf of the user. The content must come from the user. If the user asks you to draft content, confirm the topic and outline with them first via AskUserQuestion before writing anything. Never assume or auto-generate slide content without explicit user approval.

---

Step 4: Content Review (New Presentation only)

Read the completed content.md and perform a review before proceeding:

1. Parse all slides — Extract headings, body text, and media references
2. Validate media files — Check that every referenced file exists (resolve relative paths from cwd, absolute paths as-is, pasted image paths as-is). Report any missing files.
3. Check for issues — Flag:

• Empty slides (heading but no body or media)
• Slides that exceed content density limits (too many bullets, etc.)
• Inconsistent page numbering
• Media files referenced but not found
• Chart blocks: validate type is one of line/bar/doughnut/pie/radar/polarArea, labels count matches data count
• Table blocks: validate markdown table syntax is well-formed
• Diagram blocks: validate type (if present) is one of flowchart/aws/sequence/class/er/network/mindmap, and the description is non-empty. If the deck has any ### diagram block, note that rendering needs the draw.io desktop CLI (drawio) — flag once here if it's missing, and mention the fallbacks in [diagram-reference.md](diagram-reference.md)

1. Present a summary table to the user showing: slide number, title, content preview, media count, any warnings
2. Ask for confirmation via AskUserQuestion (header: "Review"):

• "Looks good, proceed" — Continue to Step 5
• "I need to fix some things" — User edits content.md, then re-run review

Only proceed to generation after user confirms the content review.

---

Step 5: Generate HTML (New Presentation only)

Generate the full presentation using content from Step 4 and style from Step 3.

Before generating, read these supporting files:

• [html-template.md](html-template.md) — HTML architecture and JS features
• [viewport-base.css](viewport-base.css) — Mandatory CSS (include in full)
• [animation-patterns.md](animation-patterns.md) — Animation reference for the chosen feeling
• [chart-reference.md](chart-reference.md) — Chart.js patterns (only if content.md contains ### chart blocks)
• [diagram-reference.md](diagram-reference.md) — draw.io diagram patterns via the drawio skill (only if content.md contains ### diagram blocks)
• Layout patterns file for the chosen style (if available) — CSS classes + HTML templates for rich layouts. These are extracted from preview files and contain the actual implementation details. Read the matching file:
• Style #2 re:Invent Keynote → [layout-reinvent.md](layout-reinvent.md)
• (Style #1 Neon Cyber: use STYLE_PRESETS.md + the preview file directly)
• [effects-reference.md](effects-reference.md) (optional, either specialty style) — only when the user wants richer 3D/motion. The catalog is palette-agnostic; use the matching token set and demo dir: style #1 Neon → demos/neon/, style #2 re:Invent → demos/.

Layout rule: Never use plain left-aligned bullet lists. Always use a layout pattern from the layout reference file (pill cards, feature grid, split divider, process flow, etc.). Match content type to the recommended layout in the "Layout Selection Guide" table.

Key requirements:

• Single self-contained HTML file, all CSS/JS inline
• Include the FULL contents of viewport-base.css in the `` block
• Use fonts from Fontshare or Google Fonts — never system fonts
• Add detailed comments explaining each section
• Every section needs a clear /* === SECTION NAME === */ comment block
• If inline editing was opted in at Step 1: include inline editing code (E to enter edit mode, Esc to save & exit)
• Always include .slide-footer with AWS disclaimer on every slide: "© 2026, Amazon Web Services, Inc. or its affiliates. All rights reserved."
• Always include .page-number element — shows current / total, updated by JS. See [html-template.md](html-template.md) "Page Number" section

Asset bundling (when images or videos are used):

1. Copy all referenced images/videos into [presentation-name]/assets/
2. Place the HTML file at [presentation-name]/index.html
3. All src paths in HTML must be relative: assets/image.png, assets/video.mp4
4. The folder is self-contained — zip and share, everything works

If no images or videos are used, a single HTML file is sufficient — no folder needed.

Lightbox: When images are included, always include the click-to-enlarge lightbox. See [html-template.md](html-template.md) "Image Lightbox" section for implementation.

Parallel Generation (8+ slides)

When generating presentations with 8 or more slides, use parallel sub-agents for faster generation.

| Slides | Strategy | |--------|----------| | 1-7 | Single agent generates everything directly | | 8+ | Framework agent + slide batch agents (1 agent per ~5 slides) in parallel |

Strategy: split by slide batches, assemble at the end.

1. Create a _parts/ directory inside the presentation folder
2. Launch sub-agents in parallel (all run_in_background: true):

• Framework agent: Reads style preset from [STYLEPRESETS.md](STYLEPRESETS.md) + viewport-base.css + html-template.md + animation-patterns.md, generates _parts/00-head.html (DOCTYPE through ` with all CSS) and _parts/99-foot.html` (particle canvas + lightbox + all JS + closing tags)
• Slide batch agents (~5 slides each): Each generates a batch of ` elements to parts/10-slides.html, parts/20-slides.html`, etc.

1. Provide each slide agent with:

• A compact CSS class reference (class names + HTML patterns to follow)
• The exact content for their batch of slides
• Instruction to write ONLY ` elements — no , , or `

1. After all agents complete, concatenate: `cat _parts/*.html > in

…

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: lanceli93
• Source: lanceli93/aws-html-slides
• License: MIT

Install and usage instructions live in the source repository linked above.