Agent skill
slides
Create and edit presentation slide decks (`.pptx`) with PptxGenJS, bundled layout helpers, and render/validation utilities. Use when tasks involve building a new PowerPoint deck, recreating slides from screenshots/PDFs/reference decks, modifying slide content while preserving editable output, adding charts/diagrams/visuals, or diagnosing layout issues such as overflow, overlaps, and font substitution.
Install this agent skill to your Project
npx add-skill https://github.com/openai/skills/tree/main/skills/.curated/slides
SKILL.md
Slides
Overview
Use PptxGenJS for slide authoring. Do not use python-pptx for deck generation unless the task is inspection-only; keep editable output in JavaScript and deliver both the .pptx and the source .js.
Keep work in a task-local directory. Only copy final artifacts to the requested destination after rendering and validation pass.
Bundled Resources
assets/pptxgenjs_helpers/: Copy this folder into the deck workspace and import it locally instead of reimplementing helper logic.scripts/render_slides.py: Rasterize a.pptxor.pdfto per-slide PNGs.scripts/slides_test.py: Detect content that overflows the slide canvas.scripts/create_montage.py: Build a contact-sheet style montage of rendered slides.scripts/detect_font.py: Report missing or substituted fonts as LibreOffice resolves them.scripts/ensure_raster_image.py: Convert SVG/EMF/HEIC/PDF-like assets into PNGs for quick inspection.references/pptxgenjs-helpers.md: Load only when you need API details or dependency notes.
Workflow
- Inspect the request and determine whether you are creating a new deck, recreating an existing deck, or editing one.
- Set the slide size up front. Default to 16:9 (
LAYOUT_WIDE) unless the source material clearly uses another aspect ratio. - Copy
assets/pptxgenjs_helpers/into the working directory and import the helpers from there. - Build the deck in JavaScript with an explicit theme font, stable spacing, and editable PowerPoint-native elements when practical.
- Run the bundled scripts from this skill directory or copy the needed ones into the task workspace. Render the result with
render_slides.py, review the PNGs, and fix layout issues before delivery. - Run
slides_test.pyfor overflow checks when slide edges are tight or the deck is dense. - Deliver the
.pptx, the authoring.js, and any generated assets that are required to rebuild the deck.
Authoring Rules
- Set theme fonts explicitly. Do not rely on PowerPoint defaults if typography matters.
- Use
autoFontSize,calcTextBox, and related helpers to size text boxes; do not use PptxGenJSfitorautoFit. - Use bullet options, not literal
•characters. - Use
imageSizingCroporimageSizingContaininstead of PptxGenJS built-in image sizing. - Use
latexToSvgDataUri()for equations andcodeToRuns()for syntax-highlighted code blocks. - Prefer native PowerPoint charts for simple bar/line/pie/histogram style visuals so reviewers can edit them later.
- For charts or diagrams that PptxGenJS cannot express well, render SVG externally and place the SVG in the slide.
- Include both
warnIfSlideHasOverlaps(slide, pptx)andwarnIfSlideElementsOutOfBounds(slide, pptx)in the submitted JavaScript whenever you generate or substantially edit slides. - Fix all unintentional overlap and out-of-bounds warnings before delivering. If an overlap is intentional, leave a short code comment near the relevant element.
Recreate Or Edit Existing Slides
- Render the source deck or reference PDF first so you can compare slide geometry visually.
- Match the original aspect ratio before rebuilding layout.
- Preserve editability where possible: text should stay text, and simple charts should stay native charts.
- If a reference slide uses raster artwork, use
ensure_raster_image.pyto generate debug PNGs from vector or odd image formats before placing them.
Validation Commands
Examples below assume you copied the needed scripts into the working directory. If not, invoke the same script paths relative to this skill folder.
# Render slides to PNGs for review
python3 scripts/render_slides.py deck.pptx --output_dir rendered
# Build a montage for quick scanning
python3 scripts/create_montage.py --input_dir rendered --output_file montage.png
# Check for overflow beyond the original slide canvas
python3 scripts/slides_test.py deck.pptx
# Detect missing or substituted fonts
python3 scripts/detect_font.py deck.pptx --json
Load references/pptxgenjs-helpers.md if you need the helper API summary or dependency details.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
chatgpt-apps
Build, scaffold, refactor, and troubleshoot ChatGPT Apps SDK applications that combine an MCP server and widget UI. Use when Codex needs to design tools, register UI resources, wire the MCP Apps bridge or ChatGPT compatibility APIs, apply Apps SDK metadata or CSP or domain settings, or produce a docs-aligned project scaffold. Prefer a docs-first workflow by invoking the openai-docs skill or OpenAI developer docs MCP tools before generating code.
screenshot
Use when the user explicitly asks for a desktop or system screenshot (full screen, specific app or window, or a pixel region), or when tool-specific capture capabilities are unavailable and an OS-level capture is needed.
figma-create-new-file
Create a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when you need a new file before calling use_figma. Handles plan resolution via whoami if needed. Usage — /figma-create-new-file [editorType] [fileName] (e.g. /figma-create-new-file figjam My Whiteboard)
figma-generate-library
Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.
notion-knowledge-capture
Capture conversations and decisions into structured Notion pages; use when turning chats/notes into wiki entries, how-tos, decisions, or FAQs with proper linking.
figma-implement-design
Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.
Didn't find tool you were looking for?