PPTX Generator & Editor
Overview
This skill handles all PowerPoint tasks: reading/analyzing existing presentations, editing template-based decks via XML manipulation, and creating presentations from scratch using PptxGenJS. It includes a complete design system (color palettes, fonts, style recipes) and detailed guidance for every slide type.
Quick Reference
| Item | Value |
|---|
| Dimensions | 10" x 5.625" (LAYOUT_16x9) |
| Colors | 6-char hex without # (e.g., "FF0000") |
| English font | Arial (default), or approved alternatives |
| Chinese font | Microsoft YaHei |
| Page badge position | x: 9.3", y: 5.1" |
| Theme keys | primary, secondary, accent, light, bg |
| Shapes | RECTANGLE, OVAL, LINE, ROUNDED_RECTANGLE |
| Charts | BAR, LINE, PIE, DOUGHNUT, SCATTER, BUBBLE, RADAR |
Reference Files
| File | Contents |
|---|
| slide-types.md | 5 slide page types (Cover, TOC, Section Divider, Content, Summary) + additional layout patterns |
| design-system.md | Color palettes, font reference, style recipes (Sharp/Soft/Rounded/Pill), typography & spacing |
| editing.md | Template-based editing workflow, XML manipulation, formatting rules, common pitfalls |
| pitfalls.md | QA process, common mistakes, critical PptxGenJS pitfalls |
| pptxgenjs.md | Complete PptxGenJS API reference |
Reading Content
# Text extraction
python -m markitdown presentation.pptx
Creating from Scratch — Workflow
Use when no template or reference presentation is available.
Step 1: Research & Requirements
Search to understand user requirements — topic, audience, purpose, tone, content depth.
Step 2: Select Color Palette & Fonts
Use the Color Palette Reference to select a palette matching the topic and audience. Use the Font Reference to choose a font pairing.
Step 3: Select Design Style
Use the Style Recipes to choose a visual style (Sharp, Soft, Rounded, or Pill) matching the presentation tone.
Step 4: Plan Slide Outline
Classify every slide as exactly one of the 5 page types. Plan the content and layout for each slide. Ensure visual variety — do NOT repeat the same layout across slides.
Step 5: Generate Slide JS Files
Create one JS file per slide in slides/ directory. Each file must export a synchronous createSlide(pres, theme) function. Follow the Slide Output Format and the type-specific guidance in slide-types.md. Generate up to 5 slides concurrently using subagents if available.
Tell each subagent:
- File naming:
slides/slide-01.js, slides/slide-02.js, etc.
- Images go in:
slides/imgs/
- Final PPTX goes in:
slides/output/
- Dimensions: 10" x 5.625" (LAYOUT_16x9)
- Fonts: Chinese = Microsoft YaHei, English = Arial (or approved alternative)
- Colors: 6-char hex without # (e.g.
"FF0000")
- Must use the theme object contract (see Theme Object Contract)
- Must follow the PptxGenJS API reference
Step 6: Compile into Final PPTX
Create slides/compile.js to combine all slide modules:
// slides/compile.js
const pptxgen = require('pptxgenjs');
const pres = new pptxgen();
pres.layout = 'LAYOUT_16x9';
const theme = {
primary: "22223b", // dark color for backgrounds/text
secondary: "4a4e69", // secondary accent
accent: "9a8c98", // highlight color
light: "c9ada7", // light accent
bg: "f2e9e4" // background color
};
for (let i = 1; i <= 12; i++) { // adjust count as needed
const num = String(i).padStart(2, '0');
const slideModule = require(`./slide-${num}.js`);
slideModule.createSlide(pres, theme);
}
pres.writeFile({ fileName: './output/presentation.pptx' });
Run with: cd slides && node compile.js
Step 7: QA (Required)
See QA Process.
Output Structure
slides/
├── slide-01.js # Slide modules
├── slide-02.js
├── ...
├── imgs/ # Images used in slides
└── output/ # Final artifacts
└── presentation.pptx
Slide Output Format
Each slide is a complete, runnable JS file:
// slide-01.js
const pptxgen = require("pptxgenjs");
const slideConfig = {
type: 'cover',
index: 1,
title: 'Presentation Title'
};
// MUST be synchronous (not async)
function createSlide(pres, theme) {
const slide = pres.addSlide();
slide.background = { color: theme.bg };
slide.addText(slideConfig.title, {
x: 0.5, y: 2, w: 9, h: 1.2,
fontSize: 48, fontFace: "Arial",
color: theme.primary, bold: true, align: "center"
});
return slide;
}
// Standalone preview - use slide-specific filename
if (require.main === module) {
const pres = new pptxgen();
pres.layout = 'LAYOUT_16x9';
const theme = {
primary: "22223b",
secondary: "4a4e69",
accent: "9a8c98",
light: "c9ada7",
bg: "f2e9e4"
};
createSlide(pres, theme);
pres.writeFile({ fileName: "slide-01-preview.pptx" });
}
module.exports = { createSlide, slideConfig };
Theme Object Contract (MANDATORY)
The compile script passes a theme object with these exact keys:
| Key | Purpose | Example |
|---|
theme.primary | Darkest color, titles | "22223b" |
theme.secondary | Dark accent, body text | "4a4e69" |
theme.accent | Mid-tone accent | "9a8c98" |
theme.light | Light accent | "c9ada7" |
theme.bg | Background color | "f2e9e4" |
NEVER use other key names like background, text, muted, darkest, lightest.
Page Number Badge (REQUIRED)
All slides except Cover Page MUST include a page number badge in the bottom-right corner.
- Position: x: 9.3", y: 5.1"
- Show current number only (e.g.
3 or 03), NOT "3/12"
- Use palette colors, keep subtle
Circle Badge (Default)
slide.addShape(pres.shapes.OVAL, {
x: 9.3, y: 5.1, w: 0.4, h: 0.4,
fill: { color: theme.accent }
});
slide.addText("3", {
x: 9.3, y: 5.1, w: 0.4, h: 0.4,
fontSize: 12, fontFace: "Arial",
color: "FFFFFF", bold: true,
align: "center", valign: "middle"
});
Pill Badge
slide.addShape(pres.shapes.ROUNDED_RECTANGLE, {
x: 9.1, y: 5.15, w: 0.6, h: 0.35,
fill: { color: theme.accent },
rectRadius: 0.15
});
slide.addText("03", {
x: 9.1, y: 5.15, w: 0.6, h: 0.35,
fontSize: 11, fontFace: "Arial",
color: "FFFFFF", bold: true,
align: "center", valign: "middle"
});
Dependencies
pip install "markitdown[pptx]" — text extractionnpm install -g pptxgenjs — creating from scratchnpm install -g react-icons react react-dom sharp — icons (optional)
