Pptx
Turn HTML slide markup into a real .pptx deck with correct slide dimensions and element positioning for pitches, updates, or stakeholder docs.
Overview
pptx is an agent skill for the Build phase that converts HTML slides into accurately positioned PowerPoint files using html2pptx.js and documented PptxGenJS patterns.
Install
npx skills add https://github.com/tfriedel/claude-office-skills --skill pptxWhat is this skill?
- html2pptx.js converts HTML slides to PowerPoint with layout-accurate positioning
- Three layout presets: 16:9 (720×405pt), 4:3 (720×540pt), and 16:10 (720×450pt)
- Supports headings, lists, inline formatting, images, div shapes, and chart placeholders
- Hard rule: all visible text must live in p/h1–h6/ul/ol or it is dropped in export
- Documents PptxGenJS as an alternate programmatic assembly path
- 3 standard slide layout presets (16:9, 4:3, 16:10)
- Chart placeholders use class="placeholder" and return id,x,y,w,h coordinates
Adoption & trust: 1.4k installs on skills.sh; 725 GitHub stars; 1/3 security scanners passed (skills.sh audits); trending (+100% hot-view momentum).
What problem does it solve?
You have slide content as HTML but PowerPoint drops or misplaces text when markup does not follow strict export rules.
Who is it for?
Solo builders generating pitch decks, training slides, or client one-pagers from agent-written HTML under fixed 16:9, 4:3, or 16:10 layouts.
Skip if: Teams that only need Google Slides, already finished native .pptx templates with no HTML source, or fully automated chart data binding without placeholder setup.
When should I use this skill?
When you need to create or convert HTML-based slides into a .pptx with enforced text-tag and dimension rules.
What do I get? / Deliverables
You get a .pptx whose slides respect chosen aspect-ratio dimensions and mapped elements, ready to edit or send without retyping content.
- .pptx presentation file
- Validated HTML slide source aligned to export rules
Recommended Skills
Journey fit
Canonical shelf is Build because the skill produces presentation artifacts as part of product and go-to-market documentation, not distribution or analytics. Docs subphase fits deck generation, readme-style slide specs, and deliverable formatting rules agents follow while authoring materials.
How it compares
Use this procedural HTML-to-deck skill instead of asking the agent to invent OOXML or paste unstyled text into PowerPoint manually.
Common Questions / FAQ
Who is pptx for?
pptx is for indie and solo builders using coding agents who author slides as HTML and need a reliable PowerPoint export for stakeholders.
When should I use pptx?
Use pptx in the Build phase while preparing docs—when you are drafting deck HTML, fixing layout dimensions, or exporting before validate pitches and launch updates.
Is pptx safe to install?
Review the Security Audits panel on this Prism page and inspect the skill package in your repo before granting filesystem access for generated .pptx files.
SKILL.md
READMESKILL.md - Pptx
# 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](#creating-html-slides) 2. [Using the html2pptx Library](#using-the-html2pptx-library) 3. [Using PptxGenJS](#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) - `<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 `<br>` tags** - Use separate text elements for each line **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: `margin`, `padding` (not supported in PowerPoint text runs) - Example: `<span style="font-weight: bold; color: #667eea;">Bold blue text</span>` - Flexbox works - positions calculated from rendered layout - Use hex colors with `#` prefix in CSS - **Text alignment**: Use CSS `text-align` (`center`, `right`, etc.) when needed as a hint to PptxGenJS for text formatting if text lengths are slightly off ### Shape Styling (DIV elements only) **IMPORTANT: Backgrounds, borders, and shadows only work on `<div>` elements, NOT on text elements (`<p>`, `<h1>`-`<h6>`, `<ul>`, `<ol>`)** - **Backgrounds**: CSS `background` or `background-color` on `<div>` elements only - Example: `<div style="background: #f0f0f0;">` - Creates a shape with background - **Borders**: CSS `border` on `<div>` elements converts to PowerPoint shape borders - Supports uniform borders: `border: 2px solid #333333` - Supports partial borders: `border-left`, `border-right`, `border-top`, `border-bottom` (rendered as line shapes) - Example: `<div style="border-left: 8pt solid #E76F51;">` - **Border radius**: CSS `border-radius` on `<div>` elements for rounded corners - `border-radius: 50%` or higher creates circular shape - Percentages <50% calculated relative to shape's smaller dimension - Supports px and pt units (e.g., `border-radius: 8pt;`, `border-radius: 12px;`) - Example: `<div style="border-radius: 25%;">` on 100x200px box = 25% of 100px = 25px radius - **Box shadows**: CSS `box-shadow` on `<div>` elements converts to PowerPoint shadows - Supports outer shadows only (inset shadows are ignored to prevent corruption) - Example: `<div style="box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);">` - Note: Inset/inner shadows ar