--- name: frago-view-content-generate-tips-html description: HTML/reveal.js content generation guide. Use this skill when you need to create HTML presentations that can be previewed via `frago view`. Covers reveal.js advanced design, CSS techniques, and multi-page collaboration workflow. --- # HTML/reveal.js Content Generation Guide Create professionally designed HTML presentations and preview them via `frago view`. ## Quick Start ### Basic Structure ```html Presentation Title
Slide 1
Slide 2
``` **Note**: `frago view` automatically injects reveal.js library, no manual inclusion needed. ### Trigger Condition HTML file automatically enters presentation mode when it contains `class="reveal"` or `class="slides"`. ### Preview Commands ```bash frago view slides.html # Default theme frago view slides.html --theme dracula # Specify theme frago view slides.html --fullscreen # Fullscreen mode ``` --- ## Available Themes | Theme | Style | Use Case | |-------|-------|----------| | `black` | Dark background (default) | Technical presentations | | `white` | Light background | Formal reports | | `dracula` | Dracula color scheme | Developer presentations | | `moon` | Dark blue | Night mode | | `night` | Dark blue gradient | Tech style | | `serif` | Serif font | Academic presentations | | `solarized` | Solarized color scheme | Soft style | | `blood` | Dark red | Emphasis style | | `beige` | Beige | Warm style | | `sky` | Blue | Fresh style | | `league` | Gray gradient | Business style | | `simple` | Simple white | Minimalist style | --- ## Slide Organization ### Horizontal Navigation Each `
` is one slide: ```html
Slide 1
Slide 2
Slide 3
``` ### Vertical Navigation (Nested) Nested `
` creates sub-slides within a section: ```html
Topic A - Overview
Topic A - Detail 1
Topic A - Detail 2
Topic B - Overview
``` --- ## Common Elements ### Headings and Text ```html

Main Heading

Subtitle

Body paragraph

``` ### Lists ```html

Key Points

  • Point 1
  • Point 2
  • Point 3
``` ### Code Blocks ```html

Code Example


def hello():
    print("Hello, World!")
``` ### Images ```html

Architecture Diagram

Architecture diagram
``` --- ## Fragment Animations `class="fragment"` makes elements appear progressively: ```html

First step appears

Second step appears

Slide up and fade in

Highlight in red

``` **Animation Types**: | Type | Effect | |------|--------| | `fade-in` | Fade in | | `fade-out` | Fade out | | `fade-up` | Slide up and fade in | | `fade-down` | Slide down and fade in | | `fade-left` | Slide left and fade in | | `fade-right` | Slide right and fade in | | `highlight-red` | Highlight in red | | `highlight-green` | Highlight in green | | `highlight-blue` | Highlight in blue | | `grow` | Grow | | `shrink` | Shrink | --- ## Keyboard Shortcuts | Shortcut | Function | |----------|----------| | `→` / `Space` | Next slide | | `←` | Previous slide | | `↑` / `↓` | Vertical navigation | | `F` | Fullscreen | | `Esc` | Exit fullscreen / Overview | | `O` | Slide overview | | `S` | Speaker notes | --- ## Multi-Page PPT Collaboration Workflow ### Phase 1: Planning Confirm with user: 1. Presentation theme and target audience 2. Section outline 3. Type and core information for each slide ### Phase 2: Skeleton Generation Create basic structure and output directory: ``` outputs/presentation/ ├── slides.html # Main file └── images/ # Images directory ``` ### Phase 3: Slide-by-Slide Design Iterative workflow: 1. User provides core content for current slide 2. Agent generates HTML + CSS 3. User previews: `frago view slides.html` 4. User provides feedback for adjustments 5. Move to next slide when satisfied ### Phase 4: Overall Optimization 1. Check slide transitions 2. Unify visual style 3. Add fragment animations 4. Final preview confirmation --- ## Template Library | Template | Purpose | Path | |----------|---------|------| | Basic skeleton | Quick start | [templates/basic-structure.html](templates/basic-structure.html) | | Cover slide | Opening | [templates/cover-slide.html](templates/cover-slide.html) | | Content slide | Body content | [templates/content-slide.html](templates/content-slide.html) | | Comparison slide | Comparison | [templates/comparison-slide.html](templates/comparison-slide.html) | | Timeline slide | Timeline | [templates/timeline-slide.html](templates/timeline-slide.html) | | Closing slide | Ending | [templates/closing-slide.html](templates/closing-slide.html) | --- ## Design Pitfalls | Pitfall | Reason | Alternative | |---------|--------|-------------| | Too much text | Slides are not documents | Extract keywords | | External CDN | Not available offline | Local resources | | iframe embedding | Security restrictions | Screenshots | | Complex JavaScript | pywebview limitations | CSS implementation | --- ## References - [REFERENCE.md](REFERENCE.md) - Advanced CSS techniques + pywebview limitations - [reveal.js Official Documentation](https://revealjs.com/)