Implement single-slide PowerPoint pages with PptxGenJS. Use when writing or fixing slide JS files: dimensions, positioning, text/image/chart APIs, styling rules, and export expectations for native .pptx output.
This skill teaches how to generate native .pptx slides using PptxGenJS (JavaScript).
Read pptxgenjs.md for the complete PptxGenJS API reference, including:
| Language | Default | Alternatives |
|---|---|---|
| Chinese | Microsoft YaHei (微软雅黑) |
| — |
| English | Arial | Georgia, Calibri, Cambria, Trebuchet MS |
fontFace: "Microsoft YaHei" // Chinese text
fontFace: "Arial" // English text (or approved alternative)
Use system-safe fonts for cross-platform compatibility. Header/body can use different fonts (e.g., Georgia + Calibri).
Plain body text and caption/legend text must NOT use bold.
// ✅ Correct
slide.addText("Main Title", { bold: true, fontSize: 36, fontFace: "Arial" });
slide.addText("Body text here.", { bold: false, fontSize: 14, fontFace: "Arial" });
// ❌ Wrong
slide.addText("Body text here.", { bold: true, fontSize: 14 });
Use ONLY the provided color palette. Do NOT create or modify colors.
transparency property (0-100)// ✅ Correct: Using palette colors
slide.addShape(pres.shapes.RECTANGLE, { fill: { color: theme.primary } });
slide.addText("Title", { color: theme.accent });
// ❌ Wrong: Colors outside palette
slide.addShape(pres.shapes.RECTANGLE, { fill: { color: "1a1a2e" } });
Gradients are prohibited. Use solid colors only.
// ✅ Correct: Solid colors
slide.background = { color: theme.bg };
// ✅ Correct: Solid + transparency for overlay
slide.addShape(pres.shapes.RECTANGLE, { fill: { color: theme.accent, transparency: 50 } });
Animations and transitions are prohibited. All slides must be static.
All slides except Cover Page MUST include a page number badge in the bottom-right corner.
3 or 03), NOT "3/12"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"
});
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"
});
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.
Each subagent outputs 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", // English text uses Arial
color: theme.primary, bold: true, align: "center"
});
return slide;
}
// Standalone preview - use slide-specific filename (slide-XX-preview.pptx)
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);
// Replace XX with actual slide index (01, 02, etc.) to avoid conflicts
pres.writeFile({ fileName: "slide-01-preview.pptx" });
}
module.exports = { createSlide, slideConfig };
// ❌ WRONG - compile.js won't await
async function createSlide(pres, theme) { ... }
// ✅ CORRECT
function createSlide(pres, theme) { ... }