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

Pptx

  • 869 installs
  • 432 repo stars
  • Updated November 11, 2025
  • ailabs-393/ai-labs-claude-skills

pptx is a Claude skill that converts HTML slide decks into formatted PowerPoint files using html2pptx.js and PptxGenJS for developers who need pixel-accurate .pptx exports from web markup.

About

pptx is an AI Labs Claude skill for turning HTML slides into fully formatted PowerPoint presentations with accurate positioning, typography, and images. The workflow uses the html2pptx.js library and PptxGenJS, enforcing slide body dimensions for 16:9 (720pt × 405pt), 4:3 (720pt × 540pt), and 16:10 (720pt × 450pt) layouts. Supported elements include headings, paragraphs, styled lists, bold and strong text, and images with explicit sizing rules. Developers reach for pptx when agents or scripts produce HTML slide markup that must become editable .pptx files for stakeholders without manual PowerPoint rebuilds.

  • Converts semantic HTML slides into native PowerPoint .pptx files
  • Supports 16:9, 4:3, and 16:10 layouts with exact pt dimensions
  • Preserves headings, paragraphs, ordered/unordered lists, bold, italic, underline, color, images, and background shapes
  • Requires all text inside <p>, <h1>-<h6>, <ul>, or <ol> tags
  • Uses placeholder class to reserve space for dynamic charts

Pptx by the numbers

  • 869 all-time installs (skills.sh)
  • +6 installs in the week ending Aug 2, 2026 (Skillselion tracking)
  • Ranked #306 of 1,337 Generative Media skills by installs in the Skillselion catalog
  • Security screen: MEDIUM risk (skills.sh audit)
  • Data as of Aug 3, 2026 (Skillselion catalog sync)
npx skills add https://github.com/ailabs-393/ai-labs-claude-skills --skill pptx

Add your badge

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

Listed on Skillselion
Installs869
repo stars432
Security audit2 / 3 scanners passed
Last updatedNovember 11, 2025
Repositoryailabs-393/ai-labs-claude-skills

How do you convert HTML slides to PowerPoint?

Convert clean HTML slide decks into fully formatted PowerPoint presentations with accurate positioning, typography, and images.

Who is it for?

Developers or technical writers who generate HTML-based slide markup and need automated, layout-accurate PowerPoint exports.

Skip if: Native PowerPoint template design from scratch, Google Slides workflows, or decks that require complex animations and transitions.

When should I use this skill?

User asks to convert HTML slides to PowerPoint, generate a .pptx deck, or use html2pptx.js or PptxGenJS.

What you get

Formatted .pptx presentations with positioned text, lists, typography, and embedded images.

  • .pptx presentation files
  • positioned slide layouts

By the numbers

  • Supports 3 slide aspect ratios: 16:9, 4:3, and 16:10
  • Default 16:9 layout uses 720pt × 405pt body dimensions

Files

SKILL.mdMarkdownGitHub ↗

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

Related skills

How it compares

Use pptx over generic document skills when HTML slide markup must become editable PowerPoint files with enforced pt-based layout fidelity.

FAQ

What slide dimensions does the pptx skill support?

The pptx skill supports 16:9 (720pt × 405pt), 4:3 (720pt × 540pt), and 16:10 (720pt × 450pt) HTML slide body dimensions before html2pptx.js converts them into positioned PowerPoint slides.

Which libraries does pptx use for HTML to PowerPoint conversion?

pptx uses the html2pptx.js library for accurate HTML-to-slide positioning and documents PptxGenJS usage for programmatic PowerPoint generation from structured slide markup.

Is Pptx safe to install?

skills.sh reports 2 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.