html-presentation-deck

The saved excerpt is a snapshot from review. The external source remains the complete and most current version.

---
name: html-presentation-deck
description: Create, redesign, or extend web-based presentation decks with slide navigation, fullscreen mode, table of contents, progress UI, responsive layouts, and motion. Use when Codex needs to turn a topic, outline, document, PPTX, screenshots, or an existing HTML/frontend project into an HTML presentation, React slide deck, Vite presentation, Tailwind/Framer Motion deck, or a deployable/exportable web slideshow.
---

# HTML Presentation Deck

Build presentation-first web apps rather than traditional PowerPoint files. Prefer React, TypeScript, Vite, Tailwind CSS, and Framer Motion for new custom decks, while preserving an existing project's framework and conventions.

## Workflow

1. Inspect the workspace, source material, and reference project before choosing an implementation.
2. Convert the content into a slide outline with one clear message per slide and intentional section rhythm.
3. Choose the smallest suitable engine:
   - Extend the existing frontend when one is provided.
   - Use React/Vite for custom visual systems, rich interactions, or reusable components.
   - Use Slidev when Markdown authoring, code demos, presenter tools, or built-in export matter more than React.
   - Use Reveal.js for a lightweight standards-based HTML deck with conventional presentation controls.
4. Define slide content as structured data or composable slide components. Keep navigation state separate from slide content.
5. Implement presentation controls and visual polish.
6. Run the app, inspect it in a browser at desktop and narrow viewports, and exercise every navigation path.
7. Build production output and, when requested, export PDF or prepare deployment.

Read [architecture.md](references/architecture.md) when choosing the stack or implementing deck behavior. Read [qa-export-deploy.md](references/qa-export-deploy.md) before final verification, PDF export, or deployment.

## Default Visual Baseline Rule

Default visual quality comes before adding more features. Unless the user explicitly asks for multiple visual directions, ship one stable default style first.

The default presentation should use a coherent original dark tech baseline:

- deep graphite / deep blue-black background, close to black but not pure black
- cool-gray or slightly warm-white body text that is not overexposed
- one primary low-saturation cyan / cool-blue tech accent
- a controlled support palette such as electric blue, muted violet-blue, teal, restrained amber, and soft coral
- optional warm-gold light only as a small detail, never as the main tone
- 4-6 coordinated chart colors are allowed when they come from the same token system
- restrained cards, navigation, buttons, charts, progress, tooltips, and background motion using the same token system
- visible but quiet motion
- clear hierarchy, generous safe area, and no dashboard collage feeling

Rules:

1. The default theme must be stable before any experimental theme/tone is added.
2. New themes or tones must not break or pollute the default theme.
3. Color systems must be controlled through tokens such as CSS variables.
4. Charts, cards, navigation, buttons, progress, tooltips, and background must share the same tokens.
5. Do not sacrifice visual unity just to demonstrate more features.
6. If the user did not ask for many styles, implement one stable default tone and optionally one experimental tone.
7. Default build passing is not enough; the first impression must still feel unified, premium, clean, and presentation-ready.

## Original Dark Tech Baseline Rule

Default style should first reference a premium dark technology presentation, not a black-gold luxury launch by default.

- Default baseline should feel like deep slate, graphite, deep navy-black, cool gray, low-saturation cyan-blue, subtle grid, and restrained technology glow.
- Default baseline should not automatically mean black-gold, champagne-gold, luxury roadshow, finance pitch, or formal gala.
- Black-gold / ch