Orientation Manifest + 5-Phase Training

Presentation Agent.

Turn ideas into interactive HTML slide decks in 20 minutes. Single self-contained file, keyboard navigation, responsive on mobile.

Part A

Agent Manifest

What this agent produces, what it needs, how long it takes, and how to run it.

What it produces

A single-file, self-contained interactive HTML presentation deck with:

  • Multiple slides with keyboard navigation (left / right arrows)
  • Smooth slide transitions and animations
  • Dot navigation and progress bar at bottom
  • Visual component library (stat grids, split layouts, quote blocks)
  • Responsive design with dark / ivory / white color alternation
  • No external dependencies except Google Fonts
  • Opens in any modern browser

What it needs

Required inputs

  • Topic / title: The presentation subject (e.g., “The Future of AI”, “Product Launch Strategy”)
  • Key message: The central argument or takeaway
  • Audience: Who are you presenting to? (executives, developers, customers)

Recommended inputs

  • Talking points: 3-5 main ideas you want to cover
  • Data / statistics: Numbers, percentages, or metrics to support key points
  • Desired slide count: How many slides? (default: 8-12)

Optional inputs

  • Brand colors (override default accent)
  • Specific quotes to include
  • Call-to-action URL or closing message

Estimated time

  • Gather materials: 5 minutes
  • Generate deck: 10 minutes
  • Review & refine: 5 minutes
  • Total: 20 minutes

How to run

  1. Collect your presentation brief (see 04-context.html for template)
  2. Run the agent with your brief as input
  3. The agent executes the 5-phase process (see 03-process.html)
  4. Receive a single HTML file ready to present
  5. Open in browser, use arrow keys to navigate
  6. Review against quality gates (see 05-quality.html)

Pro tip. Prepare your brief in a text editor or document first. The more detail you provide upfront, the better the output. Copy-paste talking points directly into the prompt.

Part B

Agent Training: Build Steps Overview

This agent executes a 5-phase workflow to build complete presentations. Each phase builds on the previous one.

Phase 1 — Intake

Parse the brief. Extract topic, audience, key message, talking points, data, and desired slide count. Confirm understanding before proceeding.

Phase 2 — Structure

Plan the slide sequence. Typically:

  1. Title / hero slide (dark background, large heading)
  2. Context / problem slide
  3. Key point 1 + data (ivory background with stat grid or split layout)
  4. Key point 2 + data
  5. Key point 3 + data
  6. Quote or insight slide
  7. Call-to-action or closing slide

Decide which slide types to use for visual variety (full-bleed dark, ivory stat grid, split layout, quote).

Phase 3 — Build

Write each slide’s content and assemble components:

  • Stat grids: 3-column or 4-column layouts for numerical data
  • Reality grids: Thematic cards with title, description, and optional quote
  • Split layouts: Text on left, visual / image on right
  • Quote blocks: Large italic text with source attribution
  • Section labels: Uppercase labels for visual hierarchy
  • Signature lines: Small decorative dividers between sections

Phase 4 — Assemble

Combine all slides into a single HTML file with the deck shell:

  • Slide container with positioned, overlapping slides
  • CSS transitions (opacity + horizontal slide effect)
  • JavaScript for keyboard navigation (left / right arrows)
  • Dot navigation at bottom (click to jump to slide)
  • Arrow buttons (next / prev)
  • Progress bar at top
  • Slide counter

Phase 5 — QC

Check all five quality gates (see 05-quality.html):

  1. Completeness: All slides present, navigation functional
  2. Content: Talking points covered, data accurate, narrative arc clear
  3. Visual design: Consistent components, proper color alternation, responsive
  4. Interaction: Smooth transitions, controls work, keyboard nav functional
  5. Deliverability: Single self-contained file, no external deps (except fonts)

Key principle. Each slide must advance the narrative. No filler. Every stat grid supports a key point. Every quote reinforces the message.

Next Steps

Read these in order before running the agent.

  1. Read 03-process.html to understand the step-by-step workflow
  2. Review 04-context.html for input template and component reference
  3. Study 05-quality.html for acceptance criteria
  4. Reference 02-golden-example.html to see a complete working presentation
  5. Prepare your brief and run the agent