skills
skills copied to clipboard
Add image-based workflow for PPTX skill with CI
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+npmandpyproject.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