# Send revol-presentation-html-generator to your agent
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
## Fast path
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
## Suggested prompts
### New install

```text
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete.
```
### Upgrade existing

```text
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run.
```
## Machine-readable fields
```json
{
  "schemaVersion": "1.0",
  "item": {
    "slug": "presentation-html-generator-skill",
    "name": "revol-presentation-html-generator",
    "source": "tencent",
    "type": "skill",
    "category": "内容创作",
    "sourceUrl": "https://clawhub.ai/RevolGMPHL/presentation-html-generator-skill",
    "canonicalUrl": "https://clawhub.ai/RevolGMPHL/presentation-html-generator-skill",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadUrl": "/downloads/presentation-html-generator-skill",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=presentation-html-generator-skill",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "packageFormat": "ZIP package",
    "primaryDoc": "SKILL.md",
    "includedAssets": [
      "SKILL.md",
      "assets/slide-template.html",
      "references/matplotlib-guide.md",
      "references/revealjs-fixes.md",
      "references/prompt-template.md",
      "references/article-template.md"
    ],
    "downloadMode": "redirect",
    "sourceHealth": {
      "source": "tencent",
      "slug": "presentation-html-generator-skill",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-05-01T04:13:29.111Z",
      "expiresAt": "2026-05-08T04:13:29.111Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=presentation-html-generator-skill",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=presentation-html-generator-skill",
        "contentDisposition": "attachment; filename=\"presentation-html-generator-skill-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null,
        "slug": "presentation-html-generator-skill"
      },
      "scope": "item",
      "summary": "Item download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this item.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/presentation-html-generator-skill"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    }
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/presentation-html-generator-skill",
    "downloadUrl": "https://openagent3.xyz/downloads/presentation-html-generator-skill",
    "agentUrl": "https://openagent3.xyz/skills/presentation-html-generator-skill/agent",
    "manifestUrl": "https://openagent3.xyz/skills/presentation-html-generator-skill/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/presentation-html-generator-skill/agent.md"
  }
}
```
## Documentation

### Technical Presentation & Article Generator

Generate Reveal.js HTML presentations and Markdown technical deep-dive articles from complex technical projects or papers. All content in Chinese by default.

### Core Principles

Logic First: Establish overall architecture before diving into details. No fragmented info dumps.
Visualization Driven: Use diagrams (Mermaid, architecture charts) over plain text whenever possible.
Code-Theory Alignment: Every formula/diagram must map to concrete code implementation.
Deep Dive via "What-Why-How-Code": For each core component, follow the 5-step pattern: Concept → Motivation → Mechanism → Code → Comparison.
User Friendly: Leverage HTML/JS features for code highlighting, speaker notes, and interactivity.

### Step 1: Analyze Source Material

Read the project/paper thoroughly. Collect:

Model configs (yaml/json) for precise parameters
Core model code for architecture details and tensor shapes
Training code for loss design
Inference code for inference flow
README / paper for high-level overview

All technical details (parameter values, shapes, formulas) must come from source code, not guesswork.

### Step 2: Plan Content Structure

Organize slides into these modules:

Cover & Context — Title, pain points, one-line innovation summary
High-Level Architecture — System overview, data flow, module interactions
Core Component Deep Dives (~50%+ of slides) — Detailed breakdown per module
Training & Inference Pipelines (AI model/algorithm only) — See Step 4.5 below
Performance & Optimization — Experiments, speedup strategies, latency
Summary & Future Work — Contributions, open problems

### Step 3: Generate Single-File HTML

Produce a self-contained HTML file using Reveal.js via CDN. Must include:

MathJax/KaTeX for LaTeX formulas
highlight.js for code syntax highlighting
Mermaid.js for diagrams (with manual rendering fix)
Speaker notes (<aside class="notes">) on every slide — conversational style, explain "why" not "what"

Reveal.js Config (mandatory):

Reveal.initialize({
    width: 1920,
    height: 960,     // 2:1 aspect ratio for widescreen
    margin: 0.1,
    minScale: 0.2,
    maxScale: 1.5,
    center: true,
});

Centering CSS (mandatory):

.reveal .slides { text-align: center; }
.reveal .slides section {
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    width: 100%; height: 100%;
    padding: 20px 40px; box-sizing: border-box;
}
.grid-2, .grid-3 { max-width: 1700px; width: 100%; }
.reveal .slides section > * { max-width: 100%; box-sizing: border-box; }

### Step 4: Apply Deep Dive Pattern for Each Core Component

For every core module, follow this 5-step structure:

What: Definition, input/output
Why: Design motivation, what problem does it solve
How: Algorithm flowchart, core formulas (MathJax), shape flow (e.g., (B,C,T) → (B,2C,1))
Code: Key code snippet with line-level comments and highlighting
Comparison: Table comparing old vs new approach

### Step 4.5: Training vs Inference Split (AI Model/Algorithm Projects)

When the project involves an AI model or algorithm, the training and inference pipelines MUST be presented as separate, clearly distinguished sections. Do NOT merge them into a single "model overview" slide.

Detection Criteria

If the source material contains ANY of the following, apply this step:

Training scripts (train.py, trainer.py, fit(), loss functions)
Inference scripts (infer.py, predict.py, generate())
Distinct training-only components (data augmentation, loss design, learning rate schedule, gradient accumulation)
Distinct inference-only components (beam search, sampling strategy, post-processing, quantization, TensorRT)
Model behavior differences between training and inference (e.g., dropout, batch norm, teacher forcing vs autoregressive)

Required Slide Structure

Slide Group A: Training Pipeline (2-4 slides)

Training Architecture Overview — Training-specific data flow diagram showing: Dataset → Preprocessing → Model (train mode) → Loss → Optimizer → Update
Training Core Details — Loss function design (formulas + code), optimizer config, LR schedule, regularization strategies
Training Data Flow — Shape transformations specific to training (include batch dimension, label handling)
Training Tricks & Optimization (optional) — Mixed precision, gradient accumulation, distributed training, curriculum learning

Slide Group B: Inference Pipeline (2-4 slides)

Inference Architecture Overview — Inference-specific data flow diagram showing: Input → Preprocessing → Model (eval mode) → Post-processing → Output
Inference Core Details — Decoding strategy (greedy/beam/sampling), post-processing, confidence thresholds
Inference Data Flow — Shape transformations specific to inference (note differences from training: no labels, potentially different batch handling)
Inference Optimization (optional) — Quantization, pruning, caching (KV-cache), batching strategies, latency benchmarks

Slide Group C: Training vs Inference Comparison (1 slide)

Must include a comparison table:

AspectTrainingInferenceModemodel.train()model.eval()DataLabeled dataset + augmentationRaw input onlyDropout/BNActive / running stats updateDisabled / frozen statsOutputLoss valuePredictionsBatch SizeLarge (throughput)Small/1 (latency)Key MetricTraining loss, validation accuracyLatency, throughput, qualityUnique ComponentsLoss fn, optimizer, schedulerDecoder, post-processor, cache

Visual Differentiation

Use distinct color schemes: Training slides use 🔵 blue tones (#e3f2fd, #1976d2), Inference slides use 🟢 green tones (#e8f5e9, #388e3c)
Use labeled section headers: "🏋️ Training Pipeline" and "🚀 Inference Pipeline"
Mermaid/flowchart diagrams for training and inference should be separate diagrams, not a single combined one
Highlight components that only exist in one phase (e.g., loss function is training-only; beam search is inference-only)

### Step 5: Quality Checklist

Before delivering, verify:

Every slide fits within viewport (no overflow/truncation)
 Font sizes appropriate (code not too small)
 Every "Why" is explained, not just "What"
 Core components have code correspondence
 Shape transformations clearly annotated
 Complex formulas have intuitive explanations
 All user-raised questions are addressed
 (AI model projects) Training and inference pipelines are presented separately with distinct visual styles
 (AI model projects) Training-only and inference-only components are clearly marked
 (AI model projects) A Training vs Inference comparison table is included

### Workflow: Markdown Technical Article

Follow the article structure template in references/article-template.md.

Key principles:

Table-driven: Use tables for parameter comparisons, model comparisons, shape references
Code as documentation: Every core module needs code snippet + line comments
Formula-code alignment: LaTeX symbols must match code variable names
"Why" over "What": Explain design motivation for every decision

### Workflow: Matplotlib Architecture Diagrams

See references/matplotlib-guide.md for the complete matplotlib diagram generation methodology.

Critical rules:

FancyBboxPatch pad must be proportional: min(w, h) * 0.15
Line height based on box height: h * 0.75 / n_lines
Long-distance connections use polylines, not arcs
Never use set_aspect('equal')
macOS fonts: Arial Unicode MS > Heiti TC > STHeiti
No emoji in matplotlib (not supported)

### Common Pitfalls Quick Reference

IssueRoot CauseFixSlide content overflowToo much content per slideUse scrollable containers or split slidesContent off-centerMissing Flexbox centering CSSApply mandatory centering CSS aboveMermaid not rendering on hidden slidesstartOnLoad: true only renders visibleSet startOnLoad: false, manual render on ready + slidechangedVertical flowchart overflowToo many nodes in HTML/CSS flowchartCompress gap/padding/font-size, see references/revealjs-fixes.mdMatplotlib boxes distortedpad in data coordinates, not pixelsUse proportional pad calculationChinese not showing in matplotlibWrong fontUse Arial Unicode MS / Heiti TCTraining/Inference merged into one slideAI model specifics lostSplit into separate slide groups with distinct color themes (blue=train, green=infer)

### Prompt Template

For generating presentations with maximum quality, see references/prompt-template.md for a proven C.R.I.S.P principle prompt.

### Slide Template

See assets/slide-template.html for a starter HTML template with all required configs pre-set.
## Trust
- Source: tencent
- Verification: Indexed source record
- Publisher: RevolGMPHL
- Version: 1.0.0
## Source health
- Status: healthy
- Item download looks usable.
- Yavira can redirect you to the upstream package for this item.
- Health scope: item
- Reason: direct_download_ok
- Checked at: 2026-05-01T04:13:29.111Z
- Expires at: 2026-05-08T04:13:29.111Z
- Recommended action: Download for OpenClaw
## Links
- [Detail page](https://openagent3.xyz/skills/presentation-html-generator-skill)
- [Send to Agent page](https://openagent3.xyz/skills/presentation-html-generator-skill/agent)
- [JSON manifest](https://openagent3.xyz/skills/presentation-html-generator-skill/agent.json)
- [Markdown brief](https://openagent3.xyz/skills/presentation-html-generator-skill/agent.md)
- [Download page](https://openagent3.xyz/downloads/presentation-html-generator-skill)