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.
Scanned 2/12/2026
Install to Claude Code
Skills Directorynpx -y skills add majiayu000/claude-skill-registry --skill frago-view-content-generate-tips-html --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of Frago View Content Generate Tips Html?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/majiayu000-frago-view-content-generate-tips-html)More formats (shields.io, HTML) on the badges page.
---
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Presentation Title</title>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>Slide 2</section>
</div>
</div>
</body>
</html>
```
**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 `<section>` is one slide:
```html
<section>Slide 1</section>
<section>Slide 2</section>
<section>Slide 3</section>
```
### Vertical Navigation (Nested)
Nested `<section>` creates sub-slides within a section:
```html
<section>
<section>Topic A - Overview</section>
<section>Topic A - Detail 1</section>
<section>Topic A - Detail 2</section>
</section>
<section>
<section>Topic B - Overview</section>
</section>
```
---
## Common Elements
### Headings and Text
```html
<section>
<h1>Main Heading</h1>
<h2>Subtitle</h2>
<p>Body paragraph</p>
</section>
```
### Lists
```html
<section>
<h2>Key Points</h2>
<ul>
<li>Point 1</li>
<li>Point 2</li>
<li>Point 3</li>
</ul>
</section>
```
### Code Blocks
```html
<section>
<h2>Code Example</h2>
<pre><code class="language-python">
def hello():
print("Hello, World!")
</code></pre>
</section>
```
### Images
```html
<section>
<h2>Architecture Diagram</h2>
<img src="./images/architecture.png" alt="Architecture diagram">
</section>
```
---
## Fragment Animations
`class="fragment"` makes elements appear progressively:
```html
<p class="fragment">First step appears</p>
<p class="fragment">Second step appears</p>
<p class="fragment fade-up">Slide up and fade in</p>
<p class="fragment highlight-red">Highlight in red</p>
```
**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/)
No comments yet. Be the first to comment!
