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 when choosing the stack or implementing deck behavior. Read qa-export-deploy.md before final verification, PDF export, or deployment.