# How to Create and Edit PowerPoint (PPTX) Files with Claude Skills: Complete Developer Guide
> Learn to create and edit PPTX files programmatically with Claude Skills. Utilize the html2pptx library for dynamic PowerPoint generation. Get the complete developer guide.
- Repository: [Composio/awesome-claude-skills](https://github.com/composiohq/awesome-claude-skills)
- Tags: how-to-guide
- Published: 2026-08-29
---
**The Claude Skills repository provides an `html2pptx` library that converts static HTML slides into fully-featured PowerPoint presentations using Playwright for browser rendering and PptxGenJS for generation, enabling you to programmatically create and edit PPTX files with dynamic content injections.**
The ComposioHQ/awesome-claude-skills repository offers a robust pipeline for creating and editing PowerPoint (PPTX) files with Claude Skills. By combining HTML templating with JavaScript automation, you can generate professional presentations without manual formatting. This guide walks through the three-layer architecture and implementation details based on the actual source code.
## Three-Layer Architecture for PPTX Generation
The conversion engine follows a strict pipeline defined in [`document-skills/pptx/scripts/html2pptx.js`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/document-skills/pptx/scripts/html2pptx.js).
### 1. Browser Rendering with Playwright
Lines 28-33 of [`html2pptx.js`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/html2pptx.js) initialize a headless Chromium instance using `chromium.launch`. The `page.goto` method loads your HTML file into a virtual browser context where Playwright measures exact pixel dimensions, bounding boxes, and computed CSS values. This rendering step ensures that the spatial relationships designed in your HTML translate accurately to PowerPoint's coordinate system.
### 2. Data Extraction and Validation
The `extractSlideData` function executes within the browser context (lines 36-65) to traverse the DOM and categorize elements by type—distinguishing between images, shapes, text blocks, lists, and placeholders. Lines 68-86 implement a comprehensive validation suite that checks for body-size overflow, layout-size mismatches, and unsupported CSS properties such as gradients or margins on inline elements. Rather than failing on the first error, the engine aggregates all validation issues before throwing an exception, enabling efficient debugging.
### 3. Presentation Generation with PptxGenJS
After successful validation, the library creates slides via `pres.addSlide()` and utilizes helper functions `addBackground` and `addElements` (lines 20-33 and 32-41) to map extracted data to PptxGenJS API calls. The system handles unit conversion automatically, transforming browser pixels into PowerPoint's native inches and points before returning the slide object and placeholder metadata to your Claude Skill.
## Creating HTML Slides for Conversion
Before conversion, you must author static HTML slides that follow specific formatting rules documented in [`document-skills/pptx/html2pptx.md`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/document-skills/pptx/html2pptx.md) (lines 13-46). All text content must reside inside semantic tags like ``, `
` through ``, ``, or ``. The guidelines prohibit manual bullet characters and recommend web-safe fonts to ensure consistent rendering across platforms.
## Implementing the Conversion Workflow
To create PowerPoint files with Claude Skills, call the exported `html2pptx` function and pass a configured PptxGenJS instance.
```javascript
const pptxgen = require('pptxgenjs');
const html2pptx = require('./document-skills/pptx/scripts/html2pptx');
(async () => {
const pptx = new pptxgen();
pptx.layout = 'LAYOUT_16x9';
// Convert static HTML slide into PowerPoint slide
const { slide, placeholders } = await html2pptx('slides/data.html', pptx);
// Insert chart into first placeholder
if (placeholders.length) {
const chartData = [{
name: 'Sales',
labels: ['Q1','Q2','Q3','Q4'],
values: [4500,5500,6200,7100]
}];
slide.addChart(pptx.charts.BAR, chartData, {
...placeholders[0],
showTitle: true,
title: 'Quarterly Sales',
chartColors: ['4472C4']
});
}
await pptx.writeFile({ fileName: 'presentation.pptx' });
})();
```
## Editing Slides with Dynamic Content
After the initial conversion, manipulate the returned slide object directly using PptxGenJS methods.
**Adding shapes and rich text:**
```javascript
// Add rounded rectangle
slide.addShape(pptx.shapes.ROUNDED_RECTANGLE, {
x: 1, y: 4, w: 3, h: 1.5,
fill: { color: '70AD47' },
rectRadius: 0.2
});
// Add formatted text
slide.addText([
{ text: 'Bold ', options: { bold: true } },
{ text: 'Italic ', options: { italic: true } },
{ text: 'Normal' }
], { x: 1, y: 2, w: 8, h: 1 });
```
**Inserting images using coordinate positioning:**
```javascript
const { slide, placeholders } = await html2pptx('slides/cover.html', pptx);
slide.addImage({
path: 'logo.png',
x: 0.5,
y: 0.5,
w: 2,
h: 2
});
```
## Complete Production Example
Below is a comprehensive workflow demonstrating multiple slides with chart integration:
```javascript
const pptx = new pptxgen();
pptx.layout = 'LAYOUT_16x9';
pptx.author = 'Your Name';
pptx.title = 'My Presentation';
// Convert title slide
const { slide: titleSlide } = await html2pptx('slides/title.html', pptx);
// Convert content slide with placeholders
const { slide: bodySlide, placeholders } = await html2pptx('slides/content.html', pptx);
// Add line chart to placeholder
const data = [{
name: 'Revenue',
labels: ['2021','2022','2023'],
values: [10,15,20]
}];
bodySlide.addChart(pptx.charts.LINE, data, {
...placeholders[0],
showTitle: true,
title: 'Revenue Growth'
});
// Export final presentation
await pptx.writeFile({ fileName: 'presentation.pptx' });
```
## Summary
- The **html2pptx** library in [`document-skills/pptx/scripts/html2pptx.js`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/document-skills/pptx/scripts/html2pptx.js) provides a three-stage pipeline: Playwright rendering, DOM validation, and PptxGenJS generation.
- **Static HTML slides** must follow strict formatting rules documented in [`document-skills/pptx/html2pptx.md`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/document-skills/pptx/html2pptx.md) (lines 13-46) to pass validation.
- The `html2pptx` function returns a slide object and placeholder metadata, allowing you to **inject charts, images, and shapes** programmatically.
- All coordinate calculations happen automatically inside the library, converting browser pixels to PowerPoint inches/points.
- Final output uses standard PptxGenJS `writeFile()` methods to produce distributable PPTX files.
## Frequently Asked Questions
### What HTML elements are supported by the html2pptx converter?
The converter supports standard semantic elements including paragraphs (``), headings (`
` through ``), ordered and unordered lists (``, ``), images, and div-based shapes. According to [`document-skills/pptx/html2pptx.md`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/document-skills/pptx/html2pptx.md), you must avoid manual bullet characters and ensure all text resides within supported container tags to pass the validation layer in [`html2pptx.js`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/html2pptx.js).
### How does the library handle CSS styling and fonts?
During the extraction phase in [`html2pptx.js`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/html2pptx.js), the engine reads computed CSS properties but enforces constraints on unsupported features. Lines 68-86 specifically reject gradients and margins on inline elements. Use web-safe fonts only, as the conversion process maps browser-rendered text directly to PowerPoint text boxes without font embedding capabilities.
### Can I add charts to slides created from HTML templates?
Yes. The `html2pptx` function returns both a slide object and an array of placeholder definitions. You can pass these placeholder coordinates to `slide.addChart()` along with your data arrays. This approach allows you to design the layout statically in HTML while populating data dynamically through your Claude Skill code.
### What validation errors should I watch for during conversion?
The validation layer in lines 68-86 of [`html2pptx.js`](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/html2pptx.js) specifically checks for body-size overflow, layout-size mismatches against your chosen PptxGenJS layout (such as `LAYOUT_16x9`), and unsupported CSS properties. The engine aggregates all errors before throwing an exception, allowing you to fix multiple issues simultaneously rather than iterating through one error at a time.