How to Create and Edit PowerPoint (PPTX) Files with Claude Skills: Complete Developer Guide

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.

1. Browser Rendering with Playwright

Lines 28-33 of 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 (lines 13-46). All text content must reside inside semantic tags like <p>, <h1> through <h6>, <ul>, or <ol>. 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.

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:

// 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:

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:

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 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 (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 (<p>), headings (<h1> through <h6>), ordered and unordered lists (<ol>, <ul>), images, and div-based shapes. According to 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.

How does the library handle CSS styling and fonts?

During the extraction phase in 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 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}