A WorkBuddy / CodeBuddy skill for creating zero-dependency, animation-rich HTML presentations — entirely in the browser, no npm, no build tools.
- New deck from scratch — describe your topic, get a fully animated HTML presentation
- Convert PPT/PPTX — upload a PowerPoint file, get a pixel-perfect web version
- 8 handcrafted templates — choose by visual style, not abstract descriptions
- Smart template detection — automatically picks the best template from content + color signals
- Fullscreen navigation — arrow keys, scroll, touch swipe
- PDF export — one-click export via Puppeteer or browser print
| Style Name | Best For | Key Colors |
|---|---|---|
| Dark Elegance | Investor decks, fundraising, luxury brands | Navy #0d0d1a + Gold #c9a84c |
| Vibrant Energy | Tech talks, conferences, AI startups | Deep purple #0a0014 + Violet #7c3aed + Pink #ec4899 |
| Clean Minimal | Business reviews, OKR reports, internal decks | Warm white #fafaf8 + Blue #2563eb |
| Claude Warmth | Brand storytelling, culture decks, warm narratives | Cream #F6F0E8 + Terracotta #DA7756 |
| Warm Inspire | Product launches, feature reveals, dramatic reveals | Dark amber #110800 + Gold #f59e0b |
| ForAI White | Design portfolios, agency pitches, minimal editorial | Pure white #ffffff + Ink #0a0a0a |
| Pash Orange | Agency / studio pitches, orange brand identity | White #FFFFFF + Pure orange #FF5C00 |
| Hhart Red Power | Creative studio pitches, red brand, photography | Near-black #0a0a0a + Crimson #C8102E |
Open assets/index.html locally to browse all templates visually.
In WorkBuddy / CodeBuddy, install this skill directly from the Marketplace, or add it manually:
# Option A: from Marketplace (search "frontend-presentation-slides")
# Option B: clone this repo into your skills folder
git clone https://github.com/chouraycn/frontend-presentation-slides \
~/.codebuddy/skills/frontend-presentation-slidesJust ask in natural language. The skill auto-detects the right mode:
Make me a 10-slide investor pitch deck for a B2B SaaS product
Convert my attached keynote.pptx to a web presentation
Create a tech talk using the Vibrant Energy template, topic: Rust for beginners
使用橙色配色做一个品牌故事演示文稿
制作幻灯片 · 创建演示文稿 · 做PPT · 生成slides · PPT转HTML · pitch deck · 网页版幻灯片 · 投资人演讲 · 融资路演 · 技术分享 · 季度报告 · 产品发布
frontend-presentation-slides/
├── SKILL.md # Skill definition (WorkBuddy entry point)
├── .codebuddy-plugin/
│ └── plugin.json # Plugin manifest for Marketplace
├── assets/
│ ├── index.html # Visual template gallery
│ ├── templates/ # 8 ready-to-use HTML templates (organized in folders)
│ │ ├── pitch-deck/ # D1 - Dark Elegance
│ │ ├── tech-talk/ # D2 - Vibrant Energy
│ │ ├── quarterly-report/ # D3 - Clean Minimal
│ │ ├── claude-warmth/ # D4 - Claude Warmth
│ │ ├── product-launch/ # D5 - Warm Inspire
│ │ ├── forai-white/ # D6 - ForAI White
│ │ ├── pash-orange/ # D7 - Pash Orange
│ │ └── hhart-red/ # D8 - Hhart Red Power
│ ├── style-previews/ # Single-slide style preview pages
│ └── demos/ # Feature demos (charts)
├── scripts/
│ ├── generate_slides.py # Core AI → HTML generator
│ ├── extract_pptx.py # PPTX → slide JSON extractor
│ ├── export_pdf.py # HTML → PDF via Puppeteer/Playwright
│ ├── export_pptx.py # HTML → PPTX round-trip exporter
│ ├── export_video.py # HTML → MP4 video exporter
│ ├── inline_fonts.py # Inline web fonts for offline use
│ ├── embed_images.py # Embed external images as base64
│ ├── parse_html.py # Parse existing HTML slides → JSON
│ ├── apply_comments.py # Apply review comments to slides
│ ├── audit_deck.py # Content quality audit tool
│ ├── charts.js # Zero-dependency SVG chart engine
│ └── interactive.js # Zero-dependency interactive components
└── references/ # Design guidelines & troubleshooting docs
| Script | Purpose | Requires |
|---|---|---|
scripts/generate_slides.py |
Convert AI-structured slide JSON → HTML | Python 3.10+ |
scripts/extract_pptx.py |
Parse .pptx and emit structured slide data | python-pptx |
scripts/export_pdf.py |
Headless-Chrome PDF export | pyppeteer or playwright |
scripts/export_pptx.py |
Convert HTML slides back to .pptx | python-pptx |
scripts/export_video.py |
Export HTML slides to MP4 video | playwright, ffmpeg |
scripts/inline_fonts.py |
Embed Google Fonts inline for offline HTML | Python 3.10+ |
scripts/embed_images.py |
Embed external images as base64 data URIs | Python 3.10+ |
scripts/parse_html.py |
Parse existing HTML slides back to JSON | Python 3.10+ |
scripts/apply_comments.py |
Apply replace/insert/delete/highlight/note review ops | Python 3.10+ |
scripts/audit_deck.py |
Content quality audit (length, contrast, duplicates) | Python 3.10+ |
scripts/charts.js |
Zero-dependency SVG chart engine (9 chart types) | Node.js 16+ |
scripts/interactive.js |
Zero-dependency interactive components (poll, quiz, wordcloud…) | Node.js 16+ |
- Zero dependencies — every output is a single
.htmlfile with inline CSS and JS - Show, don't tell — style previews let users pick aesthetics visually, not via text descriptions
- Unique design — no "AI aesthetic"; each template feels handcrafted
- Production-ready — well-commented, accessible, performant code
The skill's detect_template engine scores content against 8 templates using:
- Keyword signals — topic-specific vocabulary (financial terms, tech stack, design language…)
- Structural signals — slide types, chart count, CTA presence
- Color signals (Fix-6) — explicit color fields (
palette,bg_color,accent_color) and hex/rgb values are parsed and mapped to the nearest template's color identity
MIT © chouray