skills icon indicating copy to clipboard operation
skills copied to clipboard

Add image-based workflow for PPTX skill with CI

Open robtaylor opened this issue 4 months ago • 0 comments

Summary

This PR adds an image-based workflow for the PPTX skill that handles complex HTML slides (SVG diagrams, CSS gradients, intricate layouts) that the existing html2pptx converter struggles with.

Key additions:

  • Puppeteer-based HTML→PNG rendering (render-slides.js)
  • PPTX creation from PNG images with diagram overlay support (create-from-images.js)
  • Proper dependency management with package.json + npm and pyproject.toml + uv
  • Lock files for reproducible builds
  • Comprehensive test suite with Claude-style test slides
  • CI workflow with GitHub Actions (3 jobs: Node.js, Python deps, Integration)

Test Slides

The test suite includes slides that simulate what Claude would generate for professional presentations:

Slide Description
architecture-slide.html System architecture with SVG diagrams, gradients, arrows
metrics-slide.html Dashboard with KPI cards, line chart, donut chart
diagram-overlay.html Standalone data flow diagram for overlay testing
test-slide.html Basic slide with SVG and CSS gradients

Test Plan

  • [x] CI passes (Node.js workflow: 24s, Python deps: 10s, Integration: 28s)
  • [x] Tests render 4 complex HTML slides to PNG
  • [x] Tests create PPTX with diagram overlays
  • [x] Tests verify PPTX structure (ZIP signature)

Files Changed (15 files, +4122/-10)

Category Files
Scripts render-slides.js, create-from-images.js
Dependencies package.json, package-lock.json, pyproject.toml, uv.lock
Documentation SKILL.md (updated)
Tests test-workflow.js, 4 test slide HTML files
CI .github/workflows/test-pptx-skill.yml
Config .gitignore (updated)

🤖 Generated with Claude Code

robtaylor avatar Dec 09 '25 13:12 robtaylor