Html Presentation

Optional follow-ups:

• Documentation URLs for content research
• Style preferences (must comply with black aesthetic)
• Specific slide structures or examples

📁 Folder-Based Output Structure (MANDATORY)

Every presentation MUST be generated inside its own project folder. Never output a loose HTML file.

Folder Structure

<folder-name>/
├── index.html                    # Main presentation file
├── images/                       # All image assets
│   ├── workflow-diagram.gif      # Animated GIF exports from Draw.io
│   ├── architecture.gif          # System design animated exports
│   └── ...                       # Any other image assets
├── drawio/                       # Draw.io XML source files (if applicable)
│   ├── workflow-diagram.drawio   # Editable diagram source
│   ├── architecture.drawio       # Editable diagram source
│   └── ...

Folder Rules

• Folder is created inside the workspace root (or user-specified path)
• Folder name comes from the user interview (Step 0, question 2)
• images/ directory is always created (even if empty initially)
• drawio/ directory is created only when workflow diagrams are needed
• The HTML file references images using relative paths: images/filename.gif

Shared Feedback Reference (MANDATORY)

• Presentation feedback is stored OUTSIDE generated project folders
• Use a shared file at .github/skills/HTML_presentation/presentation-feedback.md
• This file accumulates reusable lessons across presentations
• Before generating ANY new presentation, the agent MUST read this shared feedback file first
• New review feedback from the current project must be appended to the shared feedback file after each pause point

🎯 Core Design Principles (MANDATORY)

1. Gradient-Based Black Theme (🔥 NON-NEGOTIABLE)

• Pure black background (#000000) on every slide
• Purple/magenta gradients at TOP-LEFT and BOTTOM-RIGHT corners
• Gradient specifications:
  • Top-left purple: rgba(139, 0, 255, 0.4)
  • Top-left magenta: rgba(217, 70, 239, 0.35)
  • Bottom-right: rgba(50, 20, 80, 0.3)
• Gradients must be PROMINENT and VISIBLE
• No light mode, no alternatives, no toggle switches

2. Center-Aligned Content (CRITICAL)

• All content vertically and horizontally centered
• Symmetric positioning around slide midpoint
• Gradients frame content like a stage
• Never offset or asymmetrically positioned

3. Text Containment & Typography (MANDATORY)

• All text center-aligned and contained within boundaries
• Container: 85% max-width
• Paragraphs: 88% max-width
• Headings: 95% max-width
• All text includes: word-wrap: break-word; overflow-wrap: break-word;
• Font scaling using clamp() for responsiveness

4. Icon-First Design

• Prefer icons over generic shapes
• Use Font Awesome CDN or SVG
• Each concept gets an associated icon
• Icons are focal points; text supports icons

5. Interactive Elements (MANDATORY)

• ALL feature cards and bullet points are TAB-focusable (tabindex="0")
• Styled with gradient borders and smooth transitions
• Exactly ONE element highlighted at a time when selected
• TAB focus MUST also move the selected/highlighted state to the newly focused element
• If a slide has multiple tabbable items, pressing TAB must advance selection to the next item in order
• Selection via: TAB focus, click, ENTER, SPACE
• Soft bottle-pop audio feedback (600Hz → 200Hz, 120ms)

6. Keyboard-Interactive Bullets (MANDATORY)

• First bullet/point always visible on slide load
• Subsequent points hidden (opacity: 0, visibility: hidden)
• TAB key reveals points sequentially with animation
• Each TAB press reveals exactly ONE new point
• Slide-in animation (0.6s slideInLeft)
• Focus indicators clearly visible

7. Professional Animations

• Timing: 0.6s fade transitions, smooth cubic-bezier easing
• Staggered delays: 0.1s - 0.7s between elements
• Easing: cubic-bezier(0.4, 0, 0.2, 1)
• Smooth 60fps at 1920x1080
• No jarring or flashy effects

8. Navigation & Controls (ENHANCED)

• Keyboard: ← → arrow keys to change slides
• Buttons: Previous/Next positioned at RIGHT SIDE (vertical stack)
• Navigation Hidden by default (show on hover over right edge)
• Progress indicator: "X / Y" slides (simple text display)
• Smooth fade transitions between slides
• Right-side navigation appears on presentation container hover

9. Glass Window Effect - Main Content (CRITICAL)

• Semi-transparent frosted glass wraps ALL main content
• Positioned around centered-content (not navigation)
• Backdrop blur: 15px for depth and sophistication
• Padding: 5vh vertical, 6vw horizontal (generous spacing)
• Border: thin cyan line (rgba(0,217,255,0.25))
• Box shadow: subtle drop shadow (rgba 0,0,0 at 30%)
• Max-width: 95%, max-height: 90vh for responsive fit
• Hover effect: subtle glow enhancement (border-width 1.5px)
• Professional, minimal appearance that frames content
• Keeps all content centered and readable

🎞️ Animation Rules

• Fade-in elements
• Slide-in components
• Flow animations (SVG paths)
• Highlight active nodes
• Smooth easing (cubic-bezier)

📎 Style Rules

• Max 3 primary colors
• Minimal text
• Clean spacing
• Smooth animations

Principle: Show > Tell

Implementation Steps (STEP-WISE GENERATION)

Generation MUST proceed step by step. After each major step, save progress and ask for user feedback before continuing. Do NOT generate the entire presentation in one shot.

Step 0: Review Shared Feedback Before Starting

• Read .github/skills/HTML_presentation/presentation-feedback.md before planning or generating anything
• Extract reusable constraints, repeated corrections, and visual preferences from prior projects
• Apply those lessons to the current presentation from the start
• If the file does not exist yet, create it from the shared feedback template and continue

Step 1: Create Project Folder & Structure

• Create the project folder with the name from the interview
• Create images/ subfolder
• Create drawio/ subfolder (if workflow diagrams needed)
• Confirm folder structure with user before proceeding

Step 2: Understand the Topic & Create Outline

• Research the subject matter
• Identify key concepts and learning outcomes
• Determine optimal slide count and flow
• Plan one idea per slide
• Present the outline to the user:

Slide 1: Title Slide
  - Topic name, presenter, visual hook
  
Slide 2-N: Core Content
  - One concept per slide
  - Mix of key points, cards, diagrams
  
Slide N+1: Summary/Call-to-Action
  - Key takeaways or next steps

• ⏸️ PAUSE: Ask user to approve or revise the outline before proceeding

Step 3: Handle Workflow Diagrams & Animated GIFs (if applicable)

If the user needs animated workflow diagrams, follow the Draw.io Animated GIF Workflow below.

If the user already has GIF assets:

• Ask user to place them in the <folder>/images/ directory
• Confirm file names and reference them in the HTML

Step 4: Build HTML — Title + First 2-3 Slides

• Generate the initial HTML scaffold with:
  1. Gradient backgrounds on EVERY slide
  2. Center-aligned content inside glass window
  3. Icon-based feature cards with tabindex
  4. Keyboard-navigable bullet points
  5. Right-aligned navigation controls (HIDDEN by default)
  6. Glass window effect wrapping main content (not nav)
  7. Soft bottle-pop audio on interactions
  8. Responsive typography with clamp()
  9. Proper slide visibility handling
• Save as <folder>/index.html
• ⏸️ PAUSE: Ask user to open in browser, review, and provide feedback
• Append feedback and actions taken to .github/skills/HTML_presentation/presentation-feedback.md

Step 5: Build Remaining Content Slides

• Add the remaining content slides (in batches of 3-4 if >8 slides)
• Incorporate any feedback from Step 4
• Save and update index.html
• ⏸️ PAUSE: Ask user to review new slides and provide feedback
• Append feedback and actions taken to .github/skills/HTML_presentation/presentation-feedback.md

Step 6: Add Diagram Slides & Animations

• Insert system design / workflow diagram slides
• Reference animated GIFs from images/ folder if applicable
• Wire up SVG-based diagram animations for inline diagrams
• Save and update index.html
• ⏸️ PAUSE: Ask user to review diagram slides specifically
• Append feedback and actions taken to .github/skills/HTML_presentation/presentation-feedback.md

Step 7: Final Polish & Summary Slide

• Add summary / call-to-action slide
• Final animation pass (transitions, timing, staggering)
• Final accessibility pass (TAB order, focus indicators)
• Save final index.html
• ⏸️ PAUSE: Ask user for final review
• Append feedback and actions taken to .github/skills/HTML_presentation/presentation-feedback.md

🔄 Draw.io Animated GIF Workflow (FOR WORKFLOW DIAGRAMS)

When the user needs animated workflow/system design diagrams and does NOT have pre-made GIFs, guide them through this process:

When to Use

• User answered YES to "Do you need animated workflow diagrams?" in the interview
• User answered NO to "Do you already have animated GIF assets?"

Process

1. Generate Draw.io XML

Create a .drawio XML file that represents the workflow/system design:

• Use Draw.io's native XML format
• Include proper styling matching the presentation theme (dark background, cyan/magenta accents)
• Use clear node labels and directional arrows
• Save as <folder>/drawio/<diagram-name>.drawio

Draw.io XML Template (Dark Theme):

<mxfile>
  <diagram name="Workflow">
    <mxGraphModel dx="1422" dy="762" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1920" pageHeight="1080" background="#000000">
      <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>
        <!-- Nodes: Use dark fill with cyan/magenta borders -->
        <mxCell id="2" value="Component" style="rounded=1;whiteSpace=wrap;fillColor=#1a1a2e;strokeColor=#00d9ff;fontColor=#ffffff;fontSize=16;fontStyle=1;arcSize=20;shadow=1;" vertex="1" parent="1">
          <mxGeometry x="100" y="200" width="200" height="80" as="geometry"/>
        </mxCell>
        <!-- Arrows: Use cyan colored connectors -->
        <mxCell id="3" style="edgeStyle=orthogonalEdgeStyle;strokeColor=#00d9ff;strokeWidth=2;fontColor=#ffffff;" edge="1" source="2" target="4" parent="1"/>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

2. Present to User

• Show the user the generated .drawio file path
• Instruct them: "Open this file in Draw.io (draw.io desktop app or https://app.diagrams.net)"
• Ask them to review and adjust the diagram if needed

3. Export as Animated GIF

Guide the user through export:

• In Draw.io: File → Export as → Animated GIF (if supported)
• OR: File → Export as → GIF/PNG for static, then animate in the HTML presentation instead
• Alternative: Export as SVG and use CSS/JS animation in the HTML directly
• Save the exported file to: <folder>/images/<diagram-name>.gif

4. Confirm & Reference

• Ask user to confirm the GIF is saved in the images/ folder
• Ask user for the exact filename
• Reference in the HTML: <img src="images/<diagram-name>.gif" alt="Workflow Diagram" />

Fallback: Inline SVG Animation

If the user prefers not to use Draw.io or cannot export animated GIFs:

• Generate the diagram directly as inline SVG in the HTML
• Use the existing System Design Diagram Engine with animated dotted connectors
• This is the default behavior for simple diagrams

🎬 Visual Storytelling Engine (CRITICAL)

Each concept must follow:

1. Introduce → minimal concept
2. Build → add components
3. Animate → show interactions
4. Highlight → active component
5. Explain → short supporting text

Slides must feel like progressive thinking, not static content.

🔵 System Design Diagram Engine (MANDATORY)

At least 1–2 slides must include animated system design diagrams.

Premium Diagram Style (MANDATORY WHEN USER ASKS FOR THIS LOOK)

• Match this visual logic: dark canvas, large title, strong focal blocks, clean negative space, and obvious left-to-right or looped flow
• Prefer a few large blocks over many small blocks
• Diagram blocks should feel like product cards, not plain rectangles
• Use glow-backed blocks with strong contrast and restrained neon accents
• When a presentation opens with a workflow or system diagram, the startup motion should feel mechanical and sequential, like interlocking cogs engaging one stage at a time
• Keep blocks visually separated with generous whitespace so connectors live in the gaps only
• The overall composition must remain readable from a video thumbnail or paused frame
• The motion must feel continuous and premium, not busy or technical for its own sake
• Loop diagrams should use a clean return path outside the main horizontal lane
• If there is a loop-back path, route it around the content, not through the middle of the node labels
• Labels such as tool invocation text or protocol notes may sit near connectors, but must never collide with the animated path
• When the user wants lighter or more abstract visuals, icon-only nodes are allowed and should be preferred over forcing card blocks

Requirements:

• Use SVG (preferred)
• Nodes = services/components and may be represented as boxed nodes or icon-only nodes
• Arrows = connections
• Every diagram node MUST include an icon, whether the node is boxed or icon-only
• Icons must be semantic to the node type, not decorative placeholders
• If the node is boxed, icon placement must stay inside the node with safe padding and must not overlap node text
• If the node is icon-only, keep a safe label gap below or beside the icon and avoid overlap with connectors
• Node layout order should usually be: icon first, title second, supporting label third
• Text inside diagram nodes must remain fully contained; shrink text before allowing overflow
• Node icons should be visually prominent, roughly 18-28% of the boxed node height, or visually dominant if icon-only
• Node text should usually sit below the icon in a vertically centered stack, but icon-only diagrams may place short labels beside the icon when cleaner
• Primary node titles should be short, ideally 1-3 words
• Supporting labels should be optional and lower contrast
• If an external system sits outside the main loop, place it at the diagram edge with a smaller icon-first treatment
• Do not force a rectangle or card around every node if the diagram reads better with standalone icons

MUST include:

• Moving dotted line or balls (not both, moving dotted line preferred) representing data flow
• Startup animation for workflow-first slides should feel like staged mechanical engagement rather than a soft ambient fade
• If moving dotted line is used, it MUST run only in the gap between two connected components
• NEVER draw the animated dotted line underneath, behind, or through a node block
• Each relationship must have its own connector segment; do not use one long animated line behind multiple blocks
• Every animated connector MUST terminate visually at the destination node using an arrowhead or equivalent directional ending
• It must be immediately clear which node is the source and which node is the destination
• The animation must loop continuously to show ongoing flow
• The currently targeted destination node must be highlighted with glow or slight scale while its connector is active
• The flow must not overlap text, icons, labels, or other important elements
• The flow must be clearly visible against the background and must not blend into the glass window or node fills
• The flow speed must be moderate and readable for YouTube capture, not too fast and not too slow
• The dotted line size and spacing must be large enough to read on video, but not so large that it overwhelms the diagram
• Continuous looping animation
• Clear direction of flow
• Active node highlighting (glow or scale)
• Prefer moving dotted segments over moving balls for premium animated diagrams
• Dotted segments should look like traveling packets, not a static dashed border
• Dotted motion should have enough contrast that the viewer notices it immediately without searching
• Connectors should usually be horizontal or gently curved; avoid jagged routing
• Use one animation rhythm across the full diagram so multiple segments feel coordinated
• When several connectors animate at once, stagger them slightly instead of making them identical clones

Diagram Layout Rules (STRICT)

• Main lane diagrams should usually follow a left-to-right reading order
• Keep at least 24-40px of clear space between block edge and connector animation path on 1080p layouts
• Connector animation must sit centered in the gap between nodes
• Use arrowheads that are large enough to survive YouTube compression
• Do not let arrowheads touch the target block; leave a small landing gap
• If there is a bottom loop, route it below the blocks with a broad rounded corner path
• Loop-back connectors should return to the source-side component cleanly without crossing the main lane
• Decorative glows should sit behind blocks, not behind animated connector segments
• Node block sizes should be consistent across siblings unless one block is intentionally emphasized
• For icon-only diagrams, keep at least 24-40px between the icon edge and connector animation path
• For icon-only diagrams, labels must sit outside the connector lane and remain readable at recording size

Diagram Visual Hierarchy (STRICT)

• 1. Title or section heading above the diagram
• 2. Main nodes as the strongest visual elements, whether boxed or icon-only
• 3. Animated dotted connectors as secondary motion cues
• 4. Small labels and annotations as tertiary elements
• Never let annotations overpower the blocks or the direction of flow
• If a diagram contains both a main path and a side path, the main path should be visually dominant

🔁 Flow Animation Implementation

function animateFlowSegment(segmentPath, destinationNode, options = {}) {
  let progress = options.delay || 0;
  const speed = options.speed || 0.0018;
  const dashTravel = options.dashTravel || 38;
  const activeClass = options.activeClass || 'active';

  function loop() {
    progress += speed;
    if (progress > 1) progress = 0;

    segmentPath.style.strokeDashoffset = `${-(progress * dashTravel)}`;

    if (destinationNode) {
      const active = progress > 0.68 || progress < 0.08;
      destinationNode.classList.toggle(activeClass, active);
    }

    requestAnimationFrame(loop);
  }

  loop();
}

Connector CSS Pattern (PREFERRED)

.diagram-connector {
  fill: none;
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 4;
  stroke-linecap: round;
}

.diagram-flow-segment {
  fill: none;
  stroke: rgba(0, 217, 255, 0.96);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 5 18;
  filter: drop-shadow(0 0 12px rgba(0, 217, 255, 0.24));
}

Node Composition Pattern (PREFERRED)

<g class="diagram-node-group" transform="translate(0 0)">
  <rect class="diagram-node" x="0" y="0" width="220" height="120" rx="26"></rect>
  <g class="diagram-icon" transform="translate(110 28)">
    <!-- semantic icon strokes or shapes -->
  </g>
  <text class="diagram-label" x="110" y="72">MCP Server</text>
  <text class="diagram-sub" x="110" y="96">tools and resources</text>
</g>

Icon-Only Node Pattern (ALLOWED)

<g class="diagram-node-group" transform="translate(0 0)">
  <g class="diagram-icon" transform="translate(0 0)">
    <!-- semantic icon strokes or shapes -->
  </g>
  <text class="diagram-label" x="0" y="42">Vector DB</text>
  <text class="diagram-sub" x="0" y="64">memory</text>
</g>

Premium Diagram Checklist

• Use large, centered headline above the system animation
• Use 2-5 strong blocks, not a crowded microservice map
• Put semantic icon in every node
• Run animated dotted flow only between neighboring blocks
• Use clear arrowheads and visible landing direction
• Highlight the destination block during connector activity
• Reserve outer lanes for loop-back connectors
• Keep connector motion smooth, readable, and premium on 1080p video

⏱️ Animation Timeline Engine

let currentStep = 0;

function nextStep() {
  currentStep++;
  runStep(currentStep);
}

Each step must:

• Reveal elements
• Trigger animations
• Highlight components
• Animate flows

🎨 Glass Window (MANDATORY)

.glass-window {
  background: rgba(50, 50, 50, 0.35);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(0, 217, 255, 0.25);
  border-radius: 20px;
  padding: 5vh 6vw;
  margin: auto;
  max-width: 95%;
  max-height: 90vh;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

🔊 Audio Feedback

function createClickSound() {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const now = audioContext.currentTime;

  const osc = audioContext.createOscillator();
  const gain = audioContext.createGain();

  osc.connect(gain);
  gain.connect(audioContext.destination);

  osc.frequency.setValueAtTime(600, now);
  osc.frequency.exponentialRampToValueAtTime(200, now + 0.12);

  gain.gain.setValueAtTime(0.25, now);
  gain.gain.exponentialRampToValueAtTime(0.01, now + 0.12);

  osc.start(now);
  osc.stop(now + 0.12);
}

🎮 Interactivity

• Keyboard navigation (← →)
• TAB reveals bullet points
• Click triggers animations
• Replay capability

✅ Validation Checklist

Diagram

• Moving dotted connector visible and readable
• Flow animation working
• Active node highlighting works
• Arrows clearly indicate direction
• Animated connector appears only between two blocks
• No animated line is visible behind any node block
• Every diagram node includes an icon
• Icons do not overlap diagram labels
• Connector gaps are visually centered between neighboring blocks
• Diagram matches the requested premium hierarchy when requested
• Loop-back path, if used, stays outside the main content lane
• If icon-only nodes are used, they remain readable without forced boxes

Animation

• Smooth transitions
• Step-based reveal working
• No abrupt jumps

UX

• Only one element selected at a time
• Keyboard navigation works
• Audio feedback works

🧠 Ultimate Rule

If forced to choose:

❌ More text
✅ Better visuals

Always prioritize:

Visual clarity + animation

Step 8: Validate Before Delivery

Gradient Rendering:

• Every slide displays gradient backgrounds
• Gradients positioned at top-left and bottom-right
• Colors match specified opacity values
• No faint or barely-visible gradients

Text Containment:

• No text extends beyond safe boundaries
• All elements within 85% max-width container
• Word-wrapping enabled on all text
• Test at 1920x1080 resolution

Interactive Features:

• TAB navigates through all interactive elements
• Only ONE element highlighted when selected
• Click, ENTER, and SPACE all work for selection
• Audio plays on every selection
• Keyboard bullets reveal sequentially on TAB

Animations:

• Smooth fade transitions between slides
• Element animations staggered (0.1s delays)
• No glitches or visual artifacts
• 60fps capable at 1920x1080
• Diagram connector animation is readable in screen recording
• Dotted segment motion looks like traveling flow, not a static dashed border

Navigation & Glass Window:

• Navigation buttons positioned RIGHT side (vertical stack)
• Buttons HIDDEN by default (opacity: 0)
• Buttons VISIBLE on presentation hover
• Glass window effect applied to main content (centered-content)
• Glass window has generous padding (5vh/6vw)
• Progress indicator simple text display (no glass container)
• Smooth fade in (0.3s) when showing navigation
• Glass window has backdrop blur (15px) and subtle shadow

Folder Structure:

• Presentation lives inside its own project folder
• images/ directory exists with any referenced assets
• drawio/ directory exists if workflow diagrams were created
• Shared feedback file .github/skills/HTML_presentation/presentation-feedback.md was read before generation
• Shared feedback file was updated with all review-cycle feedback and actions taken
• All image references use relative paths (images/filename.gif)

Step 9: Deliver

Output a complete project folder with:

• Folder: <folder-name>/
• Main file: <folder-name>/index.html
• UTF-8 encoding
• Proper viewport meta tag
• Font Awesome CDN included
• No dependencies beyond HTML/CSS/JS
• All images referenced via relative images/ paths
• Ready to record with OBS
• Shared feedback updated at .github/skills/HTML_presentation/presentation-feedback.md

Glass Window CSS (MANDATORY - MAIN CONTENT)

/* Glass window effect - wraps main content with frosted background */
.glass-window {
  background: rgba(50, 50, 50, 0.35);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(0, 217, 255, 0.25);
  border-radius: 20px;
  padding: 5vh 6vw;
  margin: auto;
  max-width: 95%;
  max-height: 90vh;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.glass-window:hover {
  background: rgba(70, 70, 90, 0.4);
  border-color: rgba(0, 217, 255, 0.35);
  box-shadow: 0 0 40px rgba(0, 217, 255, 0.25);
}

/* Navigation container - RIGHT aligned, HIDDEN by default */
.nav-container {
  position: absolute;
  right: 3vh;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 2vh;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.presentation-container:hover .nav-container {
  opacity: 1;
  pointer-events: auto;
}

/* Progress indicator - simple, not in glass window */
.progress-window {
  position: absolute;
  bottom: 3vh;
  right: 3vh;
  padding: 1.5vh 2.5vw;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.presentation-container:hover .progress-window {
  opacity: 1;
}

Selection State Management (CRITICAL)

Exactly ONE element selected at a time:

document.querySelectorAll('.feature-card, .provider-item').forEach((element) => {
  element.addEventListener('click', function() {
    playClickSound();
    // Remove from ALL interactive elements
    document.querySelectorAll('.feature-card, .provider-item').forEach(el => {
      el.classList.remove('selected');
    });
    // Add ONLY to clicked element
    this.classList.add('selected');
  });
});

Do NOT:

• ❌ Pre-select first element
• ❌ Add .selected class by default
• ❌ Highlight multiple elements
• ❌ Keep previous selection when clicking new element

Bullet Point Progressive Reveal (MANDATORY)

HTML Structure:

<div class="key-points">
  <div class="point" tabindex="0">
    <!-- VISIBLE by default -->
  </div>
  <div class="point" tabindex="0">
    <!-- HIDDEN, revealed on TAB -->
  </div>
</div>

CSS:

.point:not(:first-child) {
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  pointer-events: none;
}

.point.revealed {
  opacity: 1;
  visibility: visible;
  max-height: 500px;
  pointer-events: auto;
  animation: slideInLeft 0.6s ease-out;
}

JavaScript:

• First point has .revealed by default
• TAB focus reveals points sequentially
• Each TAB reveals exactly ONE point
• Previous points remain revealed

Color Palette

• Primary: #000000 (pure black)
• Text: #ffffff (white)
• Primary Accent: #00d9ff (cyan)
• Secondary Accent: #d946ef (magenta)
• Card Background: rgba(20, 20, 30, 0.6)
• Border Colors: Cyan or magenta with transparency

📝 Feedback System (MANDATORY)

After each pause point, collect and store user feedback in the shared external file .github/skills/HTML_presentation/presentation-feedback.md.

Feedback File Format

# Presentation Feedback Knowledge Base

## How To Use
- Read this file before starting any new presentation
- Apply repeated corrections proactively
- Append new project feedback after each review round

---

## Project: <Topic>
## Folder: <folder-name>
## Date: <Date>

---

### Round 1 — Outline Review
**Date:** <timestamp>
**User Feedback:**
> <user's verbatim feedback>

**Actions Taken:**
- <what was changed based on feedback>

---

### Round 2 — Initial Slides Review
**Date:** <timestamp>
**User Feedback:**
> <user's verbatim feedback>

**Actions Taken:**
- <what was changed>

---

### Round N — Final Review
...

---

## Reusable Guidance
- <patterns that should influence the next presentation>

Feedback Rules

• ALWAYS read .github/skills/HTML_presentation/presentation-feedback.md before starting another presentation
• ALWAYS ask for feedback after each step's pause point
• ALWAYS log feedback verbatim in the shared feedback file
• ALWAYS log what actions were taken in response
• ALWAYS re-read the shared feedback file before starting the next step to ensure accumulated feedback is respected
• If the user says "looks good" or "no changes", still log it as confirmation
• If the same issue appears in multiple rounds, flag it and prioritize fixing it
• At the end of the project, review the shared feedback file for patterns that should be incorporated into this SKILL file

Learning from Feedback

After completing a presentation, if recurring feedback patterns emerge (e.g., "text too small", "diagrams too busy"), the agent should suggest updating this SKILL.md to prevent the issue in future presentations.

Example Usage

User asks:

Create a YouTube presentation on Spring AI ChatClient API. 12 slides, intermediate level, presenter Kumar Pallav

Your workflow:

1. Review shared feedback: Read .github/skills/HTML_presentation/presentation-feedback.md
2. Interview: Ask topic, folder name, audience, length, presenter, key content, workflow diagrams needed, GIF assets available
3. Create folder: spring-ai-chatclient/ with images/, drawio/ (if needed)
4. Outline: Research & present slide outline → ⏸️ ask for feedback → append to shared feedback
5. Diagrams: Generate Draw.io XML if needed → guide user to export GIFs → confirm in images/
6. Build slides 1-3: Title + first content slides → save → ⏸️ ask for feedback → append to shared feedback
7. Build slides 4-8: More content slides → save → ⏸️ ask for feedback → append to shared feedback
8. Build slides 9-12: Diagram + remaining slides → save → ⏸️ ask for feedback → append to shared feedback
9. Polish: Summary slide, final animations → save → ⏸️ final review → append to shared feedback
10. Deliver: Complete spring-ai-chatclient/ folder with index.html, images/

Frequently Enforced Rules

🔥 NON-NEGOTIABLE:

• Gradient backgrounds on EVERY slide
• Center-aligned content only
• Glass window wraps main content (NOT navigation)
• Glass window has generous padding (5vh vertical, 6vw horizontal)
• No text overflow (strict max-widths inside glass)
• Only ONE element selected at a time
• First bullet always visible
• TAB reveals bullets sequentially
• Soft bottle-pop audio on all interactions
• White text on black only
• Responsive 1920x1080 compatible
• Navigation RIGHT aligned and HIDDEN by default (opacity: 0)
• Backdrop blur at least 15px on glass window
• Glass window shows subtle hover effect
• Progress indicator is simple text (no container)
• Animated diagram flow must appear only between connected blocks
• Every diagram node must include an icon
• Diagram connectors must end at the destination block with clear direction
• Premium diagram requests must use segmented dotted flow and strong icon-first blocks
• Icon-only nodes are allowed when they improve clarity

❌ NEVER:

• Light mode or theme toggles
• Off-center content
• Multiple selected elements
• Auto-selected first element
• Pre-revealed bullet points
• Harsh metallic sounds
• Color text variations
• Fixed pixel sizing
• Navigation visible by default (must be hidden initially)
• Glass window without backdrop blur
• Navigation positioned at bottom (must be RIGHT side)
• Glass window on navigation (only on main content)
• Different glass styles per slide
• Glass window with harsh/bright colors
• One long animated connector running behind multiple blocks
• Diagram nodes without icons
• Connectors crossing over node text or icon content
• Tiny icons that disappear in recorded video
• Connector animation that reads like a border effect instead of flow
• Forcing blocks when icon-only nodes would produce a cleaner diagram

✅ ALWAYS:

• Use clamp() for typography
• Include word-wrap on all text
• Test at 1920x1080
• Verify gradients are visible
• Check keyboard accessibility
• Confirm audio plays
• Validate selection states
• Apply glass window effect to main content (centered-content)
• Ensure navigation hidden initially (opacity: 0)
• Test hover over any area to reveal navigation
• Verify smooth fade transitions (0.3s minimum)
• Keep glass window padding consistent (5vh/6vw)
• Record test video if possible
• Use segmented connectors for each node-to-node relationship
• Keep animated flow only in open space between blocks
• Put semantic icons in every diagram node
• Match connector spacing, motion, and block emphasis to the requested premium diagram style
• Use icon-only nodes when the user asks for lighter, simpler, or less boxed diagram visuals

Support & Resources

• Font Library: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css
• Recording: OBS Studio (Open Broadcaster Software)
• Format: 1080p @ 60fps for YouTube
• Upload: YouTube allows direct HTML video comparison
• Testing: Chrome DevTools (Inspect > Application > LocalStorage for debugging)

Output Specification

Output Pattern: <folder-name>/index.html inside a project folder

File Size: Typically 80KB-150KB (HTML + inline CSS/JS, no external dependencies except CDN)

Deliverables:

• ✅ Project folder with organized structure
• ✅ index.html — main presentation (all CSS/JS inline)
• ✅ images/ — all image assets (GIFs, PNGs, etc.)
• ✅ drawio/ — Draw.io XML source files (if applicable)
• ✅ Shared feedback file at .github/skills/HTML_presentation/presentation-feedback.md
• ✅ Font Awesome from CDN
• ✅ Ready to open in browser
• ✅ Ready to record with OBS

Not included:

• ❌ Build tools or compilation
• ❌ Backend servers
• ❌ Database requirements
• ❌ External API calls (except CDN)