Frontend Slides

Always load references/VIEWPORT_RULES.md before generating or modifying slides.

Mode Detection

First classify the request:

Mode A: New Presentation

User wants slides from a topic/notes/content.

Mode B: PPT Conversion

User provides .ppt/.pptx to convert. Load references/PPT_CONVERSION.md.

Mode C: Existing HTML Enhancement

User wants edits to an existing HTML deck.

Before editing:

• Read current structure.
• Check density against references/VIEWPORT_RULES.md.
• If new content risks overflow, proactively split into continuation slides.

Mode D: PDF Export

User wants HTML slides exported to PDF. Load references/PDF_EXPORT.md.

Phase Flow

Use the detailed steps in references/WORKFLOW.md. The required sequence is:

1. Content discovery (single AskUserQuestion form).
2. Image evaluation (only if image folder provided).
3. Style discovery (guided previews or direct preset selection).
4. Generate full deck (with viewport-safe structure).
5. Optional PDF export (when requested).
6. Delivery (cleanup, open file, clear usage notes).

Required AskUserQuestion Form (Single Call)

For new presentations, ask all of these together. If the 'AskUserQuestion' tool is unavailable, stop and ask these in the chat:

1. Purpose (Pitch / Teaching / Conference / Internal)
2. Length (Short / Medium / Long)
3. Content readiness (ready / rough notes / topic only)
4. Images (No images / ./assets / custom path)
5. Inline editing (Yes / No)

If content is not ready, propose outline and confirm before styling.

Style Selection Protocol

Option A: Guided (default)

• Ask whether to generate options.
• Ask mood (up to 2):
  • Impressed/Confident
  • Excited/Energized
  • Calm/Focused
  • Inspired/Moved
• Generate three previews in .Codex-design/slide-previews/:
  • style-a.html
  • style-b.html
  • style-c.html
• Ask user to choose A/B/C or mix.

Option B: Direct preset

If user already knows the style, select preset directly from references/STYLE_PRESETS.md and skip previews.

Generation Requirements

When producing final HTML:

• Include slide navigation (keyboard + touch).
• Use Intersection Observer-based reveal flow.
• Keep one slide per viewport (100vh/100dvh).
• Ensure text scales with clamp().
• Ensure no element introduces vertical overflow.
• If nav dots are implemented as <button>, reset native button appearance so dots stay perfectly circular (appearance: none; -webkit-appearance: none; padding: 0; margin: 0; line-height: 0; aspect-ratio: 1 / 1;).
• Respect reduced-motion users.
• Include a default @media print block in generated decks so one slide exports to one PDF page cleanly.

If user opted into editing, load and follow EDIT_MODE.md exactly.

If user provided images, load and follow IMAGE_PIPELINE.md.

File Layout

Single deck:

presentation.html
assets/

Named deck variant:

[presentation-name].html
[presentation-name]-assets/

Delivery Checklist

1. Remove temporary preview files.
2. Open final HTML in browser.
3. Report:
   • output path
   • chosen style
   • slide count
   • PDF path (if exported)
   • navigation controls
   • inline edit instructions (if enabled)

Quality Guardrails

• Do not use generic purple-on-white aesthetics.
• Do not default to Inter/Roboto/system for display typography.
• Do not cram overflow content into a slide.
• Do not add images to already-dense slides without restructuring.

When uncertain, split content into more slides.