Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
igorwarzocha avatar

Powerpoint

  • 5.4k installs
  • 125 repo stars
  • Updated February 4, 2026
  • igorwarzocha/opencode-workflows

powerpoint is an agent skill that converts HTML slides to PowerPoint using html2pptx.js, PptxGenJS, Playwright, and Sharp with strict layout and styling rules.

About

Powerpoint guides agents through converting HTML slide markup into accurate PowerPoint decks using the html2pptx.js library alongside PptxGenJS, Playwright, and Sharp. The workflow starts with properly dimensioned HTML bodies for 16:9, 4:3, or 16:10 layouts, then enforces strict text rules: all copy must live inside paragraph or heading tags, lists use ul or ol, and web-safe fonts only. Shape styling with backgrounds, borders, radius, and shadows applies exclusively to div elements while gradients and icons must be rasterized to PNG first because CSS gradients break conversion. The html2pptx API validates dimensions, overflow, unsupported gradients, and misplaced text styling before throwing a consolidated error list. Agents map placeholder divs to chart regions, then layer PptxGenJS bar, line, pie, scatter, table, image, and rich-text elements with hex colors omitting the hash prefix to avoid corruption. Complete examples cover multi-slide generation, axis-labeled charts, time-series granularity rules, scatter data formats, and formatted tables with merged cells.

  • Converts dimension-matched HTML slides to PowerPoint via html2pptx with Playwright rendering and Sharp raster prep.
  • Enforces text-in-paragraph rules, web-safe fonts, div-only shape styling, and PNG rasterization for gradients and icons.
  • Collects validation errors for dimension mismatch, overflow, gradients, and text styling in one report.
  • Maps class placeholder divs to chart coordinates for PptxGenJS bar, line, pie, scatter, table, and image inserts.
  • Documents PptxGenJS color rules, axis labels, time-series granularity, scatter series format, and merged tables.

Powerpoint by the numbers

  • 5,410 all-time installs (skills.sh)
  • +99 installs in the week ending Aug 4, 2026 (Skillselion tracking)
  • Ranked #62 of 688 Office & Documents skills by installs in the Skillselion catalog
  • Security screen: MEDIUM risk (skills.sh audit)
  • Data as of Aug 4, 2026 (Skillselion catalog sync)
At a glance

powerpoint capabilities & compatibility

Capabilities
html slide layout with 16:9, 4:3, and 16:10 dime · html2pptx validation and placeholder coordinate · pptxgenjs charts, tables, images, and rich text · sharp rasterization for gradients and react icon
Works with
playwright
Use cases
presentations · documentation
From the docs

What powerpoint says it does

Convert HTML slides to PowerPoint presentations with accurate positioning using the `html2pptx.js` library.
SKILL.md
ALL text MUST be inside `<p>`, `<h1>`-`<h6>`, `<ul>`, or `<ol>` tags:
SKILL.md
**CRITICAL: Never use CSS gradients (`linear-gradient`, `radial-gradient`)** - They don't convert to PowerPoint
SKILL.md
npx skills add https://github.com/igorwarzocha/opencode-workflows --skill powerpoint

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs5.4k
repo stars125
Security audit3 / 3 scanners passed
Last updatedFebruary 4, 2026
Repositoryigorwarzocha/opencode-workflows

How do I generate PowerPoint decks from HTML without losing positioning, silently dropping text, or corrupting files with bad color syntax?

Convert HTML slide markup into accurate PowerPoint decks with html2pptx, PptxGenJS charts, tables, and validated layout rules.

Who is it for?

Agents automating slide decks from HTML templates that need charts, tables, images, and styled shapes in PowerPoint output.

Skip if: Skip when you only need live web slides, manual PowerPoint design, or decks without html2pptx and PptxGenJS dependencies.

When should I use this skill?

User converts HTML slides to PowerPoint, builds pptx from templates, adds charts to placeholder regions, or debugs html2pptx validation errors.

What you get

Validated .pptx slides with accurate layout, chart placeholders filled via PptxGenJS, and consolidated fix lists when HTML breaks conversion rules.

  • PowerPoint .pptx file
  • Validated HTML slide sources

By the numbers

  • Supports 16:9, 4:3, and 16:10 slide body dimensions
  • html2pptx batches all validation errors before throwing

Files

SKILL.mdMarkdownGitHub ↗

<instructions> <powerpoint_professional_suite>

<high_fidelity_creation> The preferred method for precise layout positioning: 1. HTML: Create slides (720pt x 405pt). Text MUST be in <p>, <h1>-<h6>, or <ul>. 2. Visuals: You MUST rasterize gradients/icons as PNGs using Sharp FIRST. Reference: references/html2pptx.md. 3. Execution: Run html2pptx.js to generate the presentation. </high_fidelity_creation>

<template_structure> For deck editing or template mapping:

  • Audit: Generate thumbnail grid (scripts/thumbnail.py) to analyze layout.
  • Duplication: Use scripts/rearrange.py to duplicate and reorder slides.
  • Text Injection: Use scripts/replace.py with the JSON inventory to populate content.

</template_structure>

<design_quality>

  • Fonts: You MUST use web-safe fonts ONLY (Arial, Helvetica, Georgia).
  • Colors: You MUST NOT use the # prefix in PptxGenJS hex codes (causes corruption).
  • Layout: You SHOULD prefer two-column or full-slide layouts. You MUST NOT stack charts below text.
  • Verification: You MUST generate a final thumbnail grid with --cols 4 to inspect for text cutoff or overlap issues.

</design_quality>

</powerpoint_professional_suite> </instructions>

HTML to PowerPoint Guide

Convert HTML slides to PowerPoint presentations with accurate positioning using the html2pptx.js library.

Table of Contents

1. Creating HTML Slides 2. Using the html2pptx Library 3. Using PptxGenJS

---

Creating HTML Slides

Every HTML slide must include proper body dimensions:

Layout Dimensions

  • 16:9 (default): width: 720pt; height: 405pt
  • 4:3: width: 720pt; height: 540pt
  • 16:10: width: 720pt; height: 450pt

Supported Elements

  • <p>, <h1>-<h6> - Text with styling
  • <ul>, <ol> - Lists (never use manual bullets •, -, *)
  • <b>, <strong> - Bold text (inline formatting)
  • <i>, <em> - Italic text (inline formatting)
  • <u> - Underlined text (inline formatting)
  • <span> - Inline formatting with CSS styles (bold, italic, underline, color)
  • <br> - Line breaks
  • <div> with bg/border - Becomes shape
  • <img> - Images
  • class="placeholder" - Reserved space for charts (returns { id, x, y, w, h })

Critical Text Rules

ALL text MUST be inside `<p>`, `<h1>`-`<h6>`, `<ul>`, or `<ol>` tags:

  • ✅ Correct: <div><p>Text here</p></div>
  • ❌ Wrong: <div>Text here</div> - Text will NOT appear in PowerPoint
  • ❌ Wrong: <span>Text</span> - Text will NOT appear in PowerPoint
  • Text in <div> or <span> without a text tag will be silently ignored

*NEVER use manual bullet symbols (•, -, , etc.)** - Use <ul> or <ol> lists instead

ONLY use web-safe fonts that are universally available:

  • ✅ Web-safe fonts: Arial, Helvetica, Times New Roman, Georgia, Courier New, Verdana, Tahoma, Trebuchet MS, Impact, Comic Sans MS
  • ❌ Wrong: 'Segoe UI', 'SF Pro', 'Roboto', custom fonts - Might cause rendering issues

Styling

  • Use display: flex on body to prevent margin collapse from breaking overflow validation
  • Use margin for spacing (padding included in size)
  • Inline formatting: Use <b>, <i>, <u> tags OR <span> with CSS styles
  • <span> supports: font-weight: bold, font-style: italic, text-decoration: underline, color: #rrggbb
  • <span> does NOT support: `mar

Related skills

FAQ

Why is my HTML text missing in the PowerPoint output?

Text outside p, h1-h6, ul, or ol tags is silently ignored; wrap all visible copy in those elements.

How do I add charts after html2pptx conversion?

Use class placeholder divs to get x, y, w, h coordinates, then call slide.addChart with PptxGenJS using those bounds.

Why did my PptxGenJS file corrupt?

PptxGenJS hex colors must omit the hash prefix; using #FF0000 breaks the document per the skill rules.

Is Powerpoint safe to install?

skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.