{
  "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": {
    "downloadMode": "redirect",
    "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",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "SKILL.md",
      "assets/slide-template.html",
      "references/matplotlib-guide.md",
      "references/revealjs-fixes.md",
      "references/prompt-template.md",
      "references/article-template.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "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."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "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."
        },
        {
          "label": "Upgrade existing",
          "body": "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."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-30T16:55:25.780Z",
      "expiresAt": "2026-05-07T16:55:25.780Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
        "contentDisposition": "attachment; filename=\"network-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "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."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/presentation-html-generator-skill",
    "agentPageUrl": "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"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "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."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "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."
      },
      {
        "label": "Upgrade existing",
        "body": "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."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "Technical Presentation & Article Generator",
        "body": "Generate Reveal.js HTML presentations and Markdown technical deep-dive articles from complex technical projects or papers. All content in Chinese by default."
      },
      {
        "title": "Core Principles",
        "body": "Logic First: Establish overall architecture before diving into details. No fragmented info dumps.\nVisualization Driven: Use diagrams (Mermaid, architecture charts) over plain text whenever possible.\nCode-Theory Alignment: Every formula/diagram must map to concrete code implementation.\nDeep Dive via \"What-Why-How-Code\": For each core component, follow the 5-step pattern: Concept → Motivation → Mechanism → Code → Comparison.\nUser Friendly: Leverage HTML/JS features for code highlighting, speaker notes, and interactivity."
      },
      {
        "title": "Step 1: Analyze Source Material",
        "body": "Read the project/paper thoroughly. Collect:\n\nModel configs (yaml/json) for precise parameters\nCore model code for architecture details and tensor shapes\nTraining code for loss design\nInference code for inference flow\nREADME / paper for high-level overview\n\nAll technical details (parameter values, shapes, formulas) must come from source code, not guesswork."
      },
      {
        "title": "Step 2: Plan Content Structure",
        "body": "Organize slides into these modules:\n\nCover & Context — Title, pain points, one-line innovation summary\nHigh-Level Architecture — System overview, data flow, module interactions\nCore Component Deep Dives (~50%+ of slides) — Detailed breakdown per module\nTraining & Inference Pipelines (AI model/algorithm only) — See Step 4.5 below\nPerformance & Optimization — Experiments, speedup strategies, latency\nSummary & Future Work — Contributions, open problems"
      },
      {
        "title": "Step 3: Generate Single-File HTML",
        "body": "Produce a self-contained HTML file using Reveal.js via CDN. Must include:\n\nMathJax/KaTeX for LaTeX formulas\nhighlight.js for code syntax highlighting\nMermaid.js for diagrams (with manual rendering fix)\nSpeaker notes (<aside class=\"notes\">) on every slide — conversational style, explain \"why\" not \"what\"\n\nReveal.js Config (mandatory):\n\nReveal.initialize({\n    width: 1920,\n    height: 960,     // 2:1 aspect ratio for widescreen\n    margin: 0.1,\n    minScale: 0.2,\n    maxScale: 1.5,\n    center: true,\n});\n\nCentering CSS (mandatory):\n\n.reveal .slides { text-align: center; }\n.reveal .slides section {\n    display: flex; flex-direction: column;\n    justify-content: center; align-items: center;\n    width: 100%; height: 100%;\n    padding: 20px 40px; box-sizing: border-box;\n}\n.grid-2, .grid-3 { max-width: 1700px; width: 100%; }\n.reveal .slides section > * { max-width: 100%; box-sizing: border-box; }"
      },
      {
        "title": "Step 4: Apply Deep Dive Pattern for Each Core Component",
        "body": "For every core module, follow this 5-step structure:\n\nWhat: Definition, input/output\nWhy: Design motivation, what problem does it solve\nHow: Algorithm flowchart, core formulas (MathJax), shape flow (e.g., (B,C,T) → (B,2C,1))\nCode: Key code snippet with line-level comments and highlighting\nComparison: Table comparing old vs new approach"
      },
      {
        "title": "Step 4.5: Training vs Inference Split (AI Model/Algorithm Projects)",
        "body": "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.\n\nDetection Criteria\n\nIf the source material contains ANY of the following, apply this step:\n\nTraining scripts (train.py, trainer.py, fit(), loss functions)\nInference scripts (infer.py, predict.py, generate())\nDistinct training-only components (data augmentation, loss design, learning rate schedule, gradient accumulation)\nDistinct inference-only components (beam search, sampling strategy, post-processing, quantization, TensorRT)\nModel behavior differences between training and inference (e.g., dropout, batch norm, teacher forcing vs autoregressive)\n\nRequired Slide Structure\n\nSlide Group A: Training Pipeline (2-4 slides)\n\nTraining Architecture Overview — Training-specific data flow diagram showing: Dataset → Preprocessing → Model (train mode) → Loss → Optimizer → Update\nTraining Core Details — Loss function design (formulas + code), optimizer config, LR schedule, regularization strategies\nTraining Data Flow — Shape transformations specific to training (include batch dimension, label handling)\nTraining Tricks & Optimization (optional) — Mixed precision, gradient accumulation, distributed training, curriculum learning\n\nSlide Group B: Inference Pipeline (2-4 slides)\n\nInference Architecture Overview — Inference-specific data flow diagram showing: Input → Preprocessing → Model (eval mode) → Post-processing → Output\nInference Core Details — Decoding strategy (greedy/beam/sampling), post-processing, confidence thresholds\nInference Data Flow — Shape transformations specific to inference (note differences from training: no labels, potentially different batch handling)\nInference Optimization (optional) — Quantization, pruning, caching (KV-cache), batching strategies, latency benchmarks\n\nSlide Group C: Training vs Inference Comparison (1 slide)\n\nMust include a comparison table:\n\nAspectTrainingInferenceModemodel.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\n\nVisual Differentiation\n\nUse distinct color schemes: Training slides use 🔵 blue tones (#e3f2fd, #1976d2), Inference slides use 🟢 green tones (#e8f5e9, #388e3c)\nUse labeled section headers: \"🏋️ Training Pipeline\" and \"🚀 Inference Pipeline\"\nMermaid/flowchart diagrams for training and inference should be separate diagrams, not a single combined one\nHighlight components that only exist in one phase (e.g., loss function is training-only; beam search is inference-only)"
      },
      {
        "title": "Step 5: Quality Checklist",
        "body": "Before delivering, verify:\n\nEvery slide fits within viewport (no overflow/truncation)\n Font sizes appropriate (code not too small)\n Every \"Why\" is explained, not just \"What\"\n Core components have code correspondence\n Shape transformations clearly annotated\n Complex formulas have intuitive explanations\n All user-raised questions are addressed\n (AI model projects) Training and inference pipelines are presented separately with distinct visual styles\n (AI model projects) Training-only and inference-only components are clearly marked\n (AI model projects) A Training vs Inference comparison table is included"
      },
      {
        "title": "Workflow: Markdown Technical Article",
        "body": "Follow the article structure template in references/article-template.md.\n\nKey principles:\n\nTable-driven: Use tables for parameter comparisons, model comparisons, shape references\nCode as documentation: Every core module needs code snippet + line comments\nFormula-code alignment: LaTeX symbols must match code variable names\n\"Why\" over \"What\": Explain design motivation for every decision"
      },
      {
        "title": "Workflow: Matplotlib Architecture Diagrams",
        "body": "See references/matplotlib-guide.md for the complete matplotlib diagram generation methodology.\n\nCritical rules:\n\nFancyBboxPatch pad must be proportional: min(w, h) * 0.15\nLine height based on box height: h * 0.75 / n_lines\nLong-distance connections use polylines, not arcs\nNever use set_aspect('equal')\nmacOS fonts: Arial Unicode MS > Heiti TC > STHeiti\nNo emoji in matplotlib (not supported)"
      },
      {
        "title": "Common Pitfalls Quick Reference",
        "body": "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)"
      },
      {
        "title": "Prompt Template",
        "body": "For generating presentations with maximum quality, see references/prompt-template.md for a proven C.R.I.S.P principle prompt."
      },
      {
        "title": "Slide Template",
        "body": "See assets/slide-template.html for a starter HTML template with all required configs pre-set."
      }
    ],
    "body": "Technical Presentation & Article Generator\n\nGenerate Reveal.js HTML presentations and Markdown technical deep-dive articles from complex technical projects or papers. All content in Chinese by default.\n\nCore Principles\nLogic First: Establish overall architecture before diving into details. No fragmented info dumps.\nVisualization Driven: Use diagrams (Mermaid, architecture charts) over plain text whenever possible.\nCode-Theory Alignment: Every formula/diagram must map to concrete code implementation.\nDeep Dive via \"What-Why-How-Code\": For each core component, follow the 5-step pattern: Concept → Motivation → Mechanism → Code → Comparison.\nUser Friendly: Leverage HTML/JS features for code highlighting, speaker notes, and interactivity.\nWorkflow: HTML Presentation Generation\nStep 1: Analyze Source Material\n\nRead the project/paper thoroughly. Collect:\n\nModel configs (yaml/json) for precise parameters\nCore model code for architecture details and tensor shapes\nTraining code for loss design\nInference code for inference flow\nREADME / paper for high-level overview\n\nAll technical details (parameter values, shapes, formulas) must come from source code, not guesswork.\n\nStep 2: Plan Content Structure\n\nOrganize slides into these modules:\n\nCover & Context — Title, pain points, one-line innovation summary\nHigh-Level Architecture — System overview, data flow, module interactions\nCore Component Deep Dives (~50%+ of slides) — Detailed breakdown per module\nTraining & Inference Pipelines (AI model/algorithm only) — See Step 4.5 below\nPerformance & Optimization — Experiments, speedup strategies, latency\nSummary & Future Work — Contributions, open problems\nStep 3: Generate Single-File HTML\n\nProduce a self-contained HTML file using Reveal.js via CDN. Must include:\n\nMathJax/KaTeX for LaTeX formulas\nhighlight.js for code syntax highlighting\nMermaid.js for diagrams (with manual rendering fix)\nSpeaker notes (<aside class=\"notes\">) on every slide — conversational style, explain \"why\" not \"what\"\n\nReveal.js Config (mandatory):\n\nReveal.initialize({\n    width: 1920,\n    height: 960,     // 2:1 aspect ratio for widescreen\n    margin: 0.1,\n    minScale: 0.2,\n    maxScale: 1.5,\n    center: true,\n});\n\n\nCentering CSS (mandatory):\n\n.reveal .slides { text-align: center; }\n.reveal .slides section {\n    display: flex; flex-direction: column;\n    justify-content: center; align-items: center;\n    width: 100%; height: 100%;\n    padding: 20px 40px; box-sizing: border-box;\n}\n.grid-2, .grid-3 { max-width: 1700px; width: 100%; }\n.reveal .slides section > * { max-width: 100%; box-sizing: border-box; }\n\nStep 4: Apply Deep Dive Pattern for Each Core Component\n\nFor every core module, follow this 5-step structure:\n\nWhat: Definition, input/output\nWhy: Design motivation, what problem does it solve\nHow: Algorithm flowchart, core formulas (MathJax), shape flow (e.g., (B,C,T) → (B,2C,1))\nCode: Key code snippet with line-level comments and highlighting\nComparison: Table comparing old vs new approach\nStep 4.5: Training vs Inference Split (AI Model/Algorithm Projects)\n\nWhen 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.\n\nDetection Criteria\n\nIf the source material contains ANY of the following, apply this step:\n\nTraining scripts (train.py, trainer.py, fit(), loss functions)\nInference scripts (infer.py, predict.py, generate())\nDistinct training-only components (data augmentation, loss design, learning rate schedule, gradient accumulation)\nDistinct inference-only components (beam search, sampling strategy, post-processing, quantization, TensorRT)\nModel behavior differences between training and inference (e.g., dropout, batch norm, teacher forcing vs autoregressive)\nRequired Slide Structure\n\nSlide Group A: Training Pipeline (2-4 slides)\n\nTraining Architecture Overview — Training-specific data flow diagram showing: Dataset → Preprocessing → Model (train mode) → Loss → Optimizer → Update\nTraining Core Details — Loss function design (formulas + code), optimizer config, LR schedule, regularization strategies\nTraining Data Flow — Shape transformations specific to training (include batch dimension, label handling)\nTraining Tricks & Optimization (optional) — Mixed precision, gradient accumulation, distributed training, curriculum learning\n\nSlide Group B: Inference Pipeline (2-4 slides)\n\nInference Architecture Overview — Inference-specific data flow diagram showing: Input → Preprocessing → Model (eval mode) → Post-processing → Output\nInference Core Details — Decoding strategy (greedy/beam/sampling), post-processing, confidence thresholds\nInference Data Flow — Shape transformations specific to inference (note differences from training: no labels, potentially different batch handling)\nInference Optimization (optional) — Quantization, pruning, caching (KV-cache), batching strategies, latency benchmarks\n\nSlide Group C: Training vs Inference Comparison (1 slide)\n\nMust include a comparison table:\n\nAspect\tTraining\tInference\nMode\tmodel.train()\tmodel.eval()\nData\tLabeled dataset + augmentation\tRaw input only\nDropout/BN\tActive / running stats update\tDisabled / frozen stats\nOutput\tLoss value\tPredictions\nBatch Size\tLarge (throughput)\tSmall/1 (latency)\nKey Metric\tTraining loss, validation accuracy\tLatency, throughput, quality\nUnique Components\tLoss fn, optimizer, scheduler\tDecoder, post-processor, cache\nVisual Differentiation\nUse distinct color schemes: Training slides use 🔵 blue tones (#e3f2fd, #1976d2), Inference slides use 🟢 green tones (#e8f5e9, #388e3c)\nUse labeled section headers: \"🏋️ Training Pipeline\" and \"🚀 Inference Pipeline\"\nMermaid/flowchart diagrams for training and inference should be separate diagrams, not a single combined one\nHighlight components that only exist in one phase (e.g., loss function is training-only; beam search is inference-only)\nStep 5: Quality Checklist\n\nBefore delivering, verify:\n\n Every slide fits within viewport (no overflow/truncation)\n Font sizes appropriate (code not too small)\n Every \"Why\" is explained, not just \"What\"\n Core components have code correspondence\n Shape transformations clearly annotated\n Complex formulas have intuitive explanations\n All user-raised questions are addressed\n (AI model projects) Training and inference pipelines are presented separately with distinct visual styles\n (AI model projects) Training-only and inference-only components are clearly marked\n (AI model projects) A Training vs Inference comparison table is included\nWorkflow: Markdown Technical Article\n\nFollow the article structure template in references/article-template.md.\n\nKey principles:\n\nTable-driven: Use tables for parameter comparisons, model comparisons, shape references\nCode as documentation: Every core module needs code snippet + line comments\nFormula-code alignment: LaTeX symbols must match code variable names\n\"Why\" over \"What\": Explain design motivation for every decision\nWorkflow: Matplotlib Architecture Diagrams\n\nSee references/matplotlib-guide.md for the complete matplotlib diagram generation methodology.\n\nCritical rules:\n\nFancyBboxPatch pad must be proportional: min(w, h) * 0.15\nLine height based on box height: h * 0.75 / n_lines\nLong-distance connections use polylines, not arcs\nNever use set_aspect('equal')\nmacOS fonts: Arial Unicode MS > Heiti TC > STHeiti\nNo emoji in matplotlib (not supported)\nCommon Pitfalls Quick Reference\nIssue\tRoot Cause\tFix\nSlide content overflow\tToo much content per slide\tUse scrollable containers or split slides\nContent off-center\tMissing Flexbox centering CSS\tApply mandatory centering CSS above\nMermaid not rendering on hidden slides\tstartOnLoad: true only renders visible\tSet startOnLoad: false, manual render on ready + slidechanged\nVertical flowchart overflow\tToo many nodes in HTML/CSS flowchart\tCompress gap/padding/font-size, see references/revealjs-fixes.md\nMatplotlib boxes distorted\tpad in data coordinates, not pixels\tUse proportional pad calculation\nChinese not showing in matplotlib\tWrong font\tUse Arial Unicode MS / Heiti TC\nTraining/Inference merged into one slide\tAI model specifics lost\tSplit into separate slide groups with distinct color themes (blue=train, green=infer)\nPrompt Template\n\nFor generating presentations with maximum quality, see references/prompt-template.md for a proven C.R.I.S.P principle prompt.\n\nSlide Template\n\nSee assets/slide-template.html for a starter HTML template with all required configs pre-set."
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/RevolGMPHL/presentation-html-generator-skill",
    "publisherUrl": "https://clawhub.ai/RevolGMPHL/presentation-html-generator-skill",
    "owner": "RevolGMPHL",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "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"
  }
}