Generates and edits .pptx files using JavaScript-based layout helpers and render utilities.

Install

mkdir -p .claude/skills/slides && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/9556" && unzip -o skill.zip -d .claude/skills/slides && rm skill.zip

Installs to .claude/skills/slides

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

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.
404 chars✓ has a “when” triggerlonger than Claude Code's old 250-char listing cap (fine on current versions)
Advanced

Key capabilities

  • Create slide decks
  • Edit slide content
  • Validate layouts
  • Render slides

How it works

Uses PptxGenJS to programmatically build and validate PowerPoint presentations.

Inputs & outputs

You give it
Slide content
You get back
PowerPoint deck

When to use slides

  • Programmatically generating a slide deck from data
  • Converting PDFs to slide formats
  • Fixing layout overflows in existing presentations

About this skill

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.

Inspection-Only Requests

Use inspection-only mode when the user asks to explain, summarize, translate, or review a specific slide without asking for edits.

  • Do not modify the deck.
  • If the deck is not named and multiple plausible .pptx files exist, inspect the most likely local candidates and say which one you used. Ask for clarification only when the choice remains materially ambiguous.
  • For a request such as "slide 17, explain the last sentence", extract the actual slide text from the .pptx package instead of relying on memory or filenames.
  • Report whether the requested slide number exists. If it does not, name the deck and slide count.
  • Keep the answer anchored to the exact sentence or phrase being explained, then explain it in the user's language.
  • Use python-pptx or direct OOXML/ZIP inspection only for read-only extraction. Do not use python-pptx to generate replacement decks.

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.

When not to use it

  • Using python-pptx for generation
  • Ignoring layout warnings

Prerequisites

PptxGenJS

Limitations

  • Fix all overlap and out-of-bounds warnings
  • Set slide size up front

How it compares

Enables programmatic generation and validation of editable decks rather than manual creation.

Compared to similar skills

slides side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
slides (this skill)02moReviewAdvanced
screenshots13moReviewBeginner
frontend-slides05moNo flagsBeginner
n8n-code-javascript72moReviewIntermediate

Try saying

Example prompts that trigger this skill in your AI assistant.

You might also like

screenshots

sickn33

Generate marketing screenshots of your app using Playwright. Use when the user wants to create screenshots for Product Hunt, social media, landing pages, or documentation.

11

frontend-slides

alenazaharovaux

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstra

00

n8n-code-javascript

czlonkowski

Write JavaScript code in n8n Code nodes. Use when writing JavaScript in n8n, using $input/$json/$node syntax, making HTTP requests with $helpers, working with dates using DateTime, troubleshooting Code node errors, or choosing between Code node modes.

7122

browser-tools

Whamp

Lightweight Chrome automation toolkit with shared configuration, JSON-first output, and six focused scripts for starting, navigating, inspecting, capturing, evaluating, and cleaning up browser sessions.

694

fix-dependabot-alerts

microsoft

Fix Dependabot security alerts by updating vulnerable npm dependencies. Use when the user mentions "dependabot", "security alerts", "vulnerability", "CVE", or wants to update packages with security issues.

1872

browser-extension-builder

davila7

Expert in building browser extensions that solve real problems - Chrome, Firefox, and cross-browser extensions. Covers extension architecture, manifest v3, content scripts, popup UIs, monetization strategies, and Chrome Web Store publishing. Use when: browser extension, chrome extension, firefox addon, extension, manifest v3.

637

Search skills

Search the agent skills registry