🎁 Get the FREE AI Skills Starter Guide β€” Subscribe β†’
BytesAgainBytesAgain
BytesAgain β€Ί Skills β€Ί Text to PPT
πŸ¦€ ClawHub

Text to PPT

by @rendylong

Convert any text input (research reports, summaries, proposals, plans, etc.) into a beautiful HTML-based presentation. Use when the user asks to create a PPT...

Versionv1.0.0
Downloads2,283
#clawhub
TERMINAL
clawhub install text-to-ppt

πŸ“– About This Skill

name: text-to-ppt description: Convert any text input (research reports, summaries, proposals, plans, etc.) into a beautiful HTML-based presentation. Use when the user asks to create a PPT, slides, presentation, deck, or convert text/documents into slides. Also triggers on phrases like "做成PPT", "η”ŸζˆεΉ»η―η‰‡", "做δΈͺζΌ”η€Ίζ–‡η¨Ώ", "转成slides", "create presentation", "make slides", "text to presentation". Supports data visualization with Chart.js, Font Awesome icons, and modern design themes.

Text-to-PPT β€” ζ–‡ζœ¬θ½¬ HTML ζΌ”η€Ίζ–‡η¨Ώ

Convert any text input into a visually stunning, single-file HTML presentation.

CRITICAL: Two-Phase Generation

ALWAYS use the two-phase approach. NEVER generate the full HTML in one shot.

Phase 1: Plan (fast, single call)

Read the input text, then produce a slide-by-slide outline in JSON format:

{
  "title": "Presentation Title",
  "language": "zh-CN",
  "density": "detailed",
  "theme": "dark",
  "slides": [
    {
      "number": 1,
      "type": "title",
      "heading": "Main Title",
      "content": "Subtitle or tagline",
      "layout": "centered",
      "notes": "Visual: large title with accent underline"
    },
    {
      "number": 2,
      "type": "content",
      "heading": "Section Title",
      "points": ["Point 1", "Point 2", "Point 3"],
      "layout": "bullets",
      "hasData": false,
      "notes": "Use numbered badges for each point"
    },
    {
      "number": 3,
      "type": "chart",
      "heading": "Key Metrics",
      "chartType": "bar",
      "chartData": {
        "labels": ["A", "B", "C"],
        "datasets": [{"label": "Sales", "data": [100, 200, 150]}]
      },
      "points": ["Insight 1", "Insight 2"],
      "layout": "split",
      "hasData": true,
      "notes": "Left: chart, Right: insights as stat cards"
    }
  ]
}

Rules for Phase 1:

  • Output ONLY the JSON plan. No HTML. No explanation.
  • Identify data points β†’ mark hasData: true and provide chartType + chartData
  • Choose layout: centered, bullets, split, grid, timeline, cards, fullchart, quote
  • Target 8-15 slides. Never exceed 20.
  • This should take <10 seconds.

    • Phase 2: Generate (parallel, page-by-page)

    Read references/design-system.md β€” this is where the full design spec lives.

    Then generate HTML for each slide independently. Each slide is a self-contained

    block.

    For each slide, the agent should: 1. Take ONE slide from the plan (by number) 2. Read only the design system reference if not already loaded 3. Generate ONLY that one slide's HTML

    ...
    4. No , no , no β€” just the slide div

    BATCHING: Generate slides in parallel using sub-agents. Spawn up to 5 sub-agents simultaneously, each generating 1-2 slides.

    Phase 3: Assemble

    After all slides are generated: 1. Read the shell template from references/shell-template.html 2. Insert all slide divs into the shell 3. Ensure chart canvas IDs are unique across all slides 4. Save to Obsidian vault: ~/Documents/longhai/Longhai/ 5. Tell user the file path

    Execution Strategy

    When running as the main agent:

    1. Phase 1 yourself (fast, just JSON) 2. Write the plan to a temp file 3. Spawn sub-agents for Phase 2 (parallel slide generation) 4. Collect results and assemble in Phase 3

    Sub-agent task format (for Phase 2):

    Generate HTML for slide {N} of a presentation.
    SLIDE PLAN:
{JSON for this specific slide}
    DESIGN SYSTEM: Read references/design-system.md for theme colors, components, and rules.
    OUTPUT: Return ONLY a single 
    ...
     block.
No , , or  tags. Use inline styles. Include