S

slides

Verified

by openai · Updated Apr 16, 2026

opus
1.6Kin17.9Kout
$1.747m 23s

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.

slidespowerpointpptxpresentationpptxgenjsjavascriptlayout-validation

See It In Action

1 turns·claude
The project codebase is in your current working directory. Explore the files to understand the code before making changes. need this 6-slide board update pdf turned into an editable deck today, keep the charts/layout/notes intact and make sure nothing overflows before the CEO review

I'll start by exploring the project files to understand what we're working with.

Now let me read the helpers and reference docs to understand the full API.

I have a full understanding of the deck spec and the tooling. Let me invoke the slides skill and build the deck.

Now I'll write the full deck generation script.

The file generated successfully. All overlaps are intentional (text layered on background shapes — header bars, metric cards, badge pills, callout boxes, timeline segments). Now let me render and validate.

Good — all 35 warnings are intentional overlaps (text-on-shape layering for header bars, metric cards, badge pills, callout box, and timeline segments). Zero out-of-bounds issues. Let me visually review the rendered slides.

Let me check individual slides more closely for any layout issues.

Slides 1-3 look great. Let me check the remaining three.

Slides 1-5 look clean. Slide 6 has an issue - the numbered priorities are running together as one block without line breaks. Let me fix that.

I see the issue. The priority items need explicit breakType to force paragraph breaks in PptxGenJS. Let me fix slide 6.

Now rebuild, render, and review slide 6.

The items are still running together. The calcTextBox estimates are too small for the actual rendered font. Let me use a single text block with explicit newline separators instead.

Slide 6 now has properly separated numbered priorities. All 6 slides look clean. Let me run the final overflow check and create the montage.

All 35 warnings are intentional overlaps only (text layered on background shapes). Zero out-of-bounds issues. Now let me copy the final artifacts to the project root.

Deck is ready. Here's what was delivered:

nexus_ai_q1_board_update.pptx (191 KB) — 6 editable slides, 16:9 widescreen

SlideContent
1Title — navy full-bleed, logo, date, confidential
2Executive Summary — 3 metric cards + summary paragraph
3Financial Performance — native stacked bar chart (Subscription/Services) + variance table
4Product & Engineering — 3 feature cards with status badges + roadmap timeline
5Go-to-Market & Growth — native MRR line chart + key wins bullets
6Strategic Priorities & Board Ask — numbered list + navy callout box

What's preserved/editable:

  • Both charts are native PowerPoint charts (editable data, not images)
  • All speaker notes intact on every slide
  • Brand colors (navy/blue/green/amber) and Inter font throughout
  • Zero out-of-bounds issues; all overlaps are intentional (text on background shapes)

build_deck.js is the source script if you need to regenerate or tweak anything.

Claude Sonnet 4.6

External Tools

ToolType
nodebinary
npmbinary
python3binary
sofficebinary

Permissions

ScopeDescription
filesystem:read
filesystem:write
process:spawn

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 .pptx or .pdf to 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

  1. Inspect the request and determine whether you are creating a new deck, recreating an existing deck, or editing one.
  2. Set the slide size up front. Default to 16:9 (LAYOUT_WIDE) unless the source material clearly uses another aspect ratio.
  3. Copy assets/pptxgenjs_helpers/ into the working directory and import the helpers from there.
  4. Build the deck in JavaScript with an explicit theme font, stable spacing, and editable PowerPoint-native elements when practical.
  5. 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.
  6. Run slides_test.py for overflow checks when slide edges are tight or the deck is dense.
  7. 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 PptxGenJS fit or autoFit.
  • Use bullet options, not literal characters.
  • Use imageSizingCrop or imageSizingContain instead of PptxGenJS built-in image sizing.
  • Use latexToSvgDataUri() for equations and codeToRuns() 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) and warnIfSlideElementsOutOfBounds(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.py to 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.

FAQ

What does slides do?

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.

When should I use slides?

Use it when you need a repeatable workflow that produces source code, downloadable file, image output.

What does slides output?

In the evaluated run it produced source code, downloadable file, image output.

How do I install or invoke slides?

Ask the agent to use this skill when the task matches its documented workflow.

Which agents does slides support?

Agent support is inferred from the source, but not explicitly declared.

What tools, channels, or permissions does slides need?

It uses node, npm, python3, soffice; channels commonly include code, file, image, text; permissions include filesystem:read, filesystem:write, process:spawn.

Is slides safe to install?

Static analysis marked this skill as medium risk; review side effects and permissions before enabling it.

How is slides different from an MCP or plugin?

A skill packages instructions and workflow conventions; tools, MCP servers, and plugins are dependencies the skill may call during execution.

Does slides outperform not using a skill?

About slides

When to use slides

You need to generate a new editable PowerPoint deck from scratch. You need to recreate slides from screenshots, PDFs, or reference decks while preserving editability. You need to diagnose slide layout issues such as overflow, overlaps, or font substitution before delivery.

When slides is not the right choice

You only need a static PDF/image presentation rather than an editable .pptx deck. You want to author slides with Python-only tooling instead of JavaScript/PptxGenJS.

What it produces

Produces source code, downloadable file and image output.