Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub ยท Content Creation
revol-presentation-html-generator
Generate high-quality technical HTML presentations (Reveal.js) and Markdown technical deep-dive articles from projects or papers. Covers architecture diagram...
skill openclawclawhub Free
Generate high-quality technical HTML presentations (Reveal.js) and Markdown technical deep-dive articles from projects or papers. Covers architecture diagram...
โฌ 0 downloads โ
0 stars Unverified but indexed
Install for OpenClaw
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- SKILL.md, assets/slide-template.html, references/matplotlib-guide.md, references/revealjs-fixes.md, references/prompt-template.md, references/article-template.md
Validation
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- 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.
New install
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
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.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 1.0.0
Provenance
- Publisher
- RevolGMPHL
- Source page
- View original listing
- Canonical URL
- Open canonical page
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.
Category context
Writing, remixing, publishing, visual generation, and marketing content production.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
5 Docs1 Assets
- SKILL.md
- references/article-template.md
- references/matplotlib-guide.md
- references/prompt-template.md
- references/revealjs-fixes.md
- assets/slide-template.html