frago-view-content-generate-tips-html
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.
$ Installer
git clone https://github.com/tsaijamey/frago /tmp/frago && cp -r /tmp/frago/src/frago/resources/skills/frago-view-content-generate-tips-html ~/.claude/skills/frago// tip: Run this command in your terminal to install the skill
SKILL.md
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
<!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
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:
<section>Slide 1</section>
<section>Slide 2</section>
<section>Slide 3</section>
Vertical Navigation (Nested)
Nested <section> creates sub-slides within a section:
<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
<section>
<h1>Main Heading</h1>
<h2>Subtitle</h2>
<p>Body paragraph</p>
</section>
Lists
<section>
<h2>Key Points</h2>
<ul>
<li>Point 1</li>
<li>Point 2</li>
<li>Point 3</li>
</ul>
</section>
Code Blocks
<section>
<h2>Code Example</h2>
<pre><code class="language-python">
def hello():
print("Hello, World!")
</code></pre>
</section>
Images
<section>
<h2>Architecture Diagram</h2>
<img src="./images/architecture.png" alt="Architecture diagram">
</section>
Fragment Animations
class="fragment" makes elements appear progressively:
<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:
- Presentation theme and target audience
- Section outline
- 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:
- User provides core content for current slide
- Agent generates HTML + CSS
- User previews:
frago view slides.html - User provides feedback for adjustments
- Move to next slide when satisfied
Phase 4: Overall Optimization
- Check slide transitions
- Unify visual style
- Add fragment animations
- Final preview confirmation
Template Library
| Template | Purpose | Path |
|---|---|---|
| Basic skeleton | Quick start | templates/basic-structure.html |
| Cover slide | Opening | templates/cover-slide.html |
| Content slide | Body content | templates/content-slide.html |
| Comparison slide | Comparison | templates/comparison-slide.html |
| Timeline slide | Timeline | templates/timeline-slide.html |
| Closing slide | Ending | 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 - Advanced CSS techniques + pywebview limitations
- reveal.js Official Documentation
Repository
tsaijamey
Author
tsaijamey/frago/src/frago/resources/skills/frago-view-content-generate-tips-html
35
Stars
4
Forks
Updated4d ago
Added6d ago