Pptx
Turn agent-authored HTML slides into correctly positioned PowerPoint decks without manual copy-paste layout fixes.
Overview
pptx is an agent skill most often used in Build (also Launch and Validate) that converts HTML slides into positioned PowerPoint files using html2pptx and PptxGenJS rules.
Install
npx skills add https://github.com/ailabs-393/ai-labs-claude-skills --skill pptxWhat is this skill?
- Converts HTML slides to PowerPoint via html2pptx with accurate element positioning
- Documents 16:9, 4:3, and 16:10 body dimensions (720pt-wide layouts)
- Enforces text inside p/h1–h6/ul/ol so content is not silently dropped in export
- Supports lists, inline formatting, images, div shapes, and chart placeholder regions
- Covers PptxGenJS usage alongside the html2pptx library path
- Documents 3 standard slide aspect layouts: 16:9, 4:3, and 16:10 at 720pt width
Adoption & trust: 770 installs on skills.sh; 399 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your agent built HTML slides but PowerPoint export drops text, misaligns layout, or manual rebuild wastes hours before a pitch or stakeholder readout.
Who is it for?
Builders who want programmatic deck generation from HTML with layout rules the agent can follow in one session.
Skip if: Users who only need Google Slides or PDF exports with no HTML pipeline, or one-slide screenshots without editable PowerPoint objects.
When should I use this skill?
User needs HTML slides converted to PowerPoint, html2pptx, PptxGenJS deck generation, or slide layout dimensions and markup rules.
What do I get? / Deliverables
You get a .pptx with faithfully placed text, lists, images, and chart placeholders generated from validated HTML slide markup.
- .pptx presentation with positioned slides
- HTML slide source following converter text and list rules
- Chart placeholder coordinates for follow-up chart insertion
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Presentation generation is a build-time documentation and deliverable artifact skill—decks are produced alongside specs, reports, and investor materials. Docs is the primary shelf because the workflow is HTML slide authoring and export rules (dimensions, text tags, placeholders), same family as technical and product documentation outputs.
Where it fits
Export a narrative prototype deck for user tests or advisor reviews from HTML storyboards.
Generate a technical architecture deck that shares the same HTML source as internal docs.
Produce an investor or launch pitch .pptx with chart placeholders filled in a second pass.
How it compares
Markup-driven deck generator with strict HTML rules—not a generic “make slides pretty” design-only prompt skill.
Common Questions / FAQ
Who is pptx for?
Solo builders and small teams using coding agents to produce investor, sales, or internal decks as real PowerPoint files from HTML.
When should I use pptx?
Use it while building docs and deliverables, when validating a story with a prototype deck, or at launch when polishing pitch or enablement slides—not for unrelated backend or monitoring work.
Is pptx safe to install?
The skill is documentation for local conversion workflows; review the Security Audits panel on this page and audit any html2pptx or PptxGenJS dependencies you install.
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) - `<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: `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 are not supported by PowerPoint and will be skipp