pptx-skill

PPTX Skill - PowerPoint Conversion Skill

This skill converts HTML slides into PowerPoint presentation files.

Feature Overview

1. Create New Presentation (HTML → PPTX)

Convert HTML slide files to PowerPoint

2. Edit Existing Presentation

Modify the contents of PPTX files

3. Thumbnail Generation

Generate preview images of presentations

Core Workflow

HTML → PPTX Conversion

1. Prepare HTML Slides

   • slides/ Check HTML files in the directory
   • Verify each file is 720pt × 405pt (16:9) format

2. Run html2pptx.js

   node .claude/skills/pptx-skill/scripts/html2pptx.js
   

3. Verify Results

   • Check the generated PPTX file
   • Visually verify with thumbnails

Script Usage

html2pptx.js

Convert HTML files to PPTX

import { html2pptx } from './.claude/skills/pptx-skill/scripts/html2pptx.js';
import PptxGenJS from 'pptxgenjs';

const pres = new PptxGenJS();
pres.layout = 'LAYOUT_WIDE'; // 16:9

// 각 슬라이드 변환
await html2pptx('slides/slide-01.html', pres);
await html2pptx('slides/slide-02.html', pres);

// 저장
await pres.writeFile({ fileName: 'presentation.pptx' });

thumbnail.py

Generate presentation thumbnail grid

python .claude/skills/pptx-skill/scripts/thumbnail.py presentation.pptx output-thumbnail

Options:

• --cols N: Number of columns (default 5, range 3-6)
• --outline-placeholders: Show placeholder areas

pack.py / unpack.py

PPTX file packaging/unpackaging

# 언패킹
python .claude/skills/pptx-skill/ooxml/scripts/unpack.py presentation.pptx output_dir

# 패킹
python .claude/skills/pptx-skill/ooxml/scripts/pack.py input_dir presentation.pptx

validate.py

Validate PPTX structure

python .claude/skills/pptx-skill/ooxml/scripts/validate.py unpacked_dir --original presentation.pptx

Detailed Documentation

• html2pptx.md - Detailed guide for HTML to PPTX conversion
• ooxml.md - Office Open XML technical reference

PptxGenJS Core Rules

Color Codes

// 올바른 사용 - # 없이
{ color: 'FF0000' }

// 잘못된 사용 - 파일 손상 유발
{ color: '#FF0000' }

Add Slides

const slide = pres.addSlide();

// 텍스트 추가
slide.addText('제목', {
  x: 0.5,
  y: 0.5,
  w: 9,
  h: 1,
  fontSize: 36,
  color: '1a1a2e',
  bold: true
});

// 이미지 추가
slide.addImage({
  path: 'image.png',
  x: 1,
  y: 2,
  w: 4,
  h: 3
});

// 도형 추가
slide.addShape(pres.ShapeType.rect, {
  x: 0.5,
  y: 1,
  w: 3,
  h: 2,
  fill: { color: '1e3a5f' }
});

Add Charts

// 막대 차트
slide.addChart(pres.ChartType.bar, [
  {
    name: '시리즈 1',
    labels: ['A', 'B', 'C'],
    values: [10, 20, 30]
  }
], {
  x: 1,
  y: 2,
  w: 8,
  h: 4
});

// 원형 차트
slide.addChart(pres.ChartType.pie, [...], {...});

// 선형 차트
slide.addChart(pres.ChartType.line, [...], {...});

Full Conversion Process

┌─────────────────┐
│   HTML 슬라이드  │
│   slides/*.html │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│  html2pptx.js   │
│  (Playwright +  │
│   PptxGenJS)    │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│   PPTX 파일     │
│ presentation.   │
│     pptx        │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│  thumbnail.py   │
│  (미리보기)     │
└─────────────────┘

Dependencies

Node.js

• pptxgenjs: PowerPoint generation
• playwright: browser rendering
• sharp: image processing

Python

• markitdown: markdown conversion
• defusedxml: XML parsing
• pillow: image processing

System

• LibreOffice: PDF/image conversion (soffice)
• Poppler: PDF to image (pdftoppm)

Precautions

1. Color Codes: Do not use the # prefix in PptxGenJS
2. Fonts: Use only web-safe fonts
3. Text: Only p, h1-h6, ul, ol tags are converted
4. Gradients: CSS gradients are replaced with images
5. Verification: Always check with thumbnails after conversion