Generates single-file HTML slide decks from briefs, notes, or content. Supports 13 layouts, 8 style presets, PDF export. Auto-triggers on 'create slide deck' or similar requests.
npx claudepluginhub varnan-tech/opendirectory --plugin opendirectory-gtm-skillsThis skill uses the workspace's default tool permissions.
Generate a professionally designed HTML slide deck from a brief, content notes, or an existing file. Output is a single self-contained HTML file -- opens in any browser, no build tools.
Generates self-contained HTML or React slide decks for fullscreen browser presentations from ideas, outlines, or content. Pipeline: outline structure, select design theme, output single artifact.
Generates self-contained HTML slide decks for product presentations. Reads pm-context.md, extracts brand colors from websites, adds keyboard navigation and print-friendly layouts.
Generates self-contained HTML slide decks from topics, outlines, data, or documents using 22 layout types, ALPA design system, responsive typography, and keyboard/touch navigation.
Share bugs, ideas, or general feedback.
Generate a professionally designed HTML slide deck from a brief, content notes, or an existing file. Output is a single self-contained HTML file -- opens in any browser, no build tools.
Critical rules -- non-negotiable:
clamp(). Never fixed px/rem on anything that scales.references/style-presets.md.Need three things to start. If all three present in the message: skip to Step 2.
If any missing, ask exactly:
"To get started, I need three things:
- Purpose -- what is this deck for? (investor pitch / sales call / conference talk / internal presentation / onboarding / other)
- Audience -- who will see it? (VCs, prospects, your team, executives, conference room, LinkedIn)
- Topic or content -- paste notes, a URL, a brief description, or upload a file"
Wait for all three before continuing.
Ask all questions in one message, grouped by category. User can skip any -- defaults apply.
"A few questions before I start:
Content
- Key message -- single sentence the audience must remember after leaving
- Slide count -- Short (5-10) / Medium (10-20) / Long (20+)?
- Content source -- All content ready / Rough notes (I'll structure) / Topic only (I'll draft)?
- Existing assets -- Any images, screenshots, or logos to include? (yes + paths / no)
Design 5. Style -- midnight-editorial / matt-gray / clean-slate / brutalist / mint-pixel-corporate / product-minimal / magazine-red / soft-cloud / "show me options" 6. Aspect ratio -- 16:9 (1920×1080, default) / 1:1 (1080×1080, LinkedIn) 7. Inline editing -- should text be editable in-browser after export? (Yes / No)
Output 8. Output format -- HTML only / HTML + PDF / HTML + PDF + deploy to URL 9. Deck name -- slug for file/folder naming (e.g. "q2-investor-pitch"); I'll derive if skipped"
Defaults if skipped:
| Question | Default |
|---|---|
| Key message | derived from purpose + topic |
| Slide count | 12 |
| Content source | topic only |
| Existing assets | none |
| Style | clean-slate |
| Aspect ratio | 16:9 |
| Inline editing | No |
| Output format | HTML + PDF |
| Deck name | derived from topic slug |
If style = "show me options":
Generate 3 single-slide HTML previews (one for each of 3 different style presets that fit the deck's purpose). Save to .claude-design/previews/style-a.html, style-b.html, style-c.html. Open each: open .claude-design/previews/style-a.html etc. Ask user to pick before Step 3.
From Step 2 answers, determine before Step 3:
Visual character (derived from style, or inferred if not specified):
dark-editoriallight-minimalneutral-professionalbold-expressivefresh-corporateONE unmissable slide -- identify before Step 3:
Layout selection bias -- note the 2-3 most relevant layouts for this deck type to prioritize in Step 3.
Never ask the user for design direction -- derive it entirely from their answers.
Read references/layout-library.md before planning.
Plan the full slide sequence. Assign a layout type from the 13 in references/layout-library.md to each slide.
Deck type → typical structure:
Investor pitch (12 slides):
Sales deck (8-10 slides):
Conference talk (15-20 slides): title-hero → section-dividers → text-full slides → image-full → stat-highlight or quote-callout (unmissable) → timeline → closing-cta
Internal presentation (8-12 slides): title-hero → text-full (context) → stat-highlight (current state) → two-column-text (options) → comparison-table → text-full (recommendation) → closing-cta (the decision -- unmissable)
Output the proposed structure as a numbered list with [layout-type] in brackets. Example:
Proposed structure (12 slides, midnight-editorial style):
1. [title-hero] DataPulse -- Revenue decisions in 5 minutes
2. [section-divider] The Problem
...
12. [closing-cta] The ask + team@datapulse.io
Does this structure work, or should I adjust any slides?
Wait for confirmation before Step 4.
Write per-slide copy in sequence. Plain text only -- no HTML yet.
Copy rules per layout:
title-hero: headline (6 words max) + subtitle (1 sentence) + optional pill badge textsection-divider: 2-4 word section label onlytext-full: heading (5 words max) + 4-6 bullets OR 2 paragraphs (never both on same slide)text-left-image-right / image-left-text-right: heading + 3-4 bullets + [IMAGE: description]two-column-text: 2 column headings + max 3 bullets eachimage-full: [IMAGE: description] + optional caption (10 words max)image-grid: up to 6 [IMAGE: description] placeholders with short captionsstat-highlight: 2-4 metrics written as NUMBER | label (e.g. 3× | faster close). ZERO body copy.quote-callout: quote (30 words max) + attribution (name, title)comparison-table: column headers (3 max) + 4-6 row labels + cell content (1-3 words each)timeline: 3-6 milestones (label + date + 1-line description)closing-cta: headline (5 words max) + CTA action text + contact info (email + URL -- both required)Forbidden words (in all copy, no exceptions): "powerful", "seamless", "game-changing", "leverage", "innovative", "revolutionary", "transform", "cutting-edge", "robust", "unlock", "scalable" (as filler adjective).
Copy philosophy: Fragments are fine. Numbers beat adjectives. Every word earns its place.
Read ALL before generating any HTML:
This skill's references:
references/design-system.mdreferences/layout-library.mdreferences/style-presets.mdreferences/animation-guide.mdfrontend-slides cross-references (read these exact files):
/Users/ksd/Desktop/Varnan_skills/frontend-slides/viewport-base.css -- include FULL contents verbatim inside <style> block/Users/ksd/Desktop/Varnan_skills/frontend-slides/html-template.md -- SlidePresentation class, keyboard nav, inline editing system/Users/ksd/Desktop/Varnan_skills/frontend-slides/animation-patterns.md -- entrance animations, background effects, interactive effectsGeneration rules:
<link> is the only external reference.viewport-base.css inside the <style> block -- do not paraphrase or shorten it.references/style-presets.md.html-template.md. Implement full keyboard navigation (arrows, space, page up/down), touch/swipe, progress bar, and nav dots. navDotsContainer.innerHTML = "" before building nav dots -- never skip this.html-template.md including exportFile(). The exportFile() function MUST strip contenteditable, body.edit-active, and .active/.show classes before capturing outerHTML.width: 100vw; height: 100vh--slide-height: min(100vh, 100vw) CSS custom property and use it on .slideclass="slide" -- required for export-pdf.sh's slide detection./* === SLIDE N: LAYOUT-TYPE === */animation-patterns.md). This is a first-class path, not a fallback.Typography discipline:
clamp(3.5rem, 12vw, 9rem) -- a metric that fills a third of the slide reads authoritativeclamp(2.5rem, 8vw, 6rem) at minimum. Never size down for safety.CSS gotcha from viewport-base.css: Never write -clamp(), -min(), -max() directly in CSS. Wrap in calc(-1 * clamp(...)).
Check every item. Fix every failure -- do not skip.
Viewport and rendering:
.slide has height:100vh; height:100dvh; overflow:hiddenclamp() -- no fixed px on scaling elementslayout-library.md)max-height: min(50vh, 400px)prefers-reduced-motion media query present-clamp(), -min(), -max() in CSS -- wrapped in calc(-1 * ...) if negative neededStructure:
class="slide"references/layout-library.mdnavDotsContainer.innerHTML = "" before building nav dotsexportFile() strips edit-state before capturing outerHTMLDesign quality:
references/style-presets.md)references/style-presets.md)Content:
If any check fails: fix inline, then re-run the checklist mentally before proceeding.
Save the main HTML first:
mkdir -p deck/[name]-slides
Write to: deck/[name]-slides/index.html
Open it: open deck/[name]-slides/index.html
Per-slide HTML files (always generate these):
Extract each <section class="slide"> from the main HTML. For each one, create a standalone file with:
<style> block from the main HTML (copied verbatim)<section class="slide"> wrapped in a minimal HTML shellWrite to: deck/[name]-slides/slide-001.html, slide-002.html, etc. (zero-padded to 3 digits).
If PDF requested:
bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/export-pdf.sh \
deck/[name]-slides/index.html \
deck/[name].pdf
Note: first run installs Playwright automatically (~30-60 seconds). Inform the user.
If deploy requested:
bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/deploy.sh \
deck/[name]-slides/
Cleanup: Delete .claude-design/previews/ if style preview files were generated in Step 2.
Present in chat:
## Slide Deck: [deck name]
Date: [today] | Style: [style] | Slides: [N] | Aspect: [16:9 or 1:1]
Purpose: [purpose] | Audience: [audience]
---
### Files
Main: deck/[name]-slides/index.html
Per-slide: deck/[name]-slides/slide-001.html → slide-0NN.html
PDF: deck/[name].pdf [if generated]
Live URL: [url] [if deployed]
---
### Navigation
Arrow keys / Space / Page Up/Down -- advance slides
Click nav dots -- jump to any slide
Touch / swipe -- works on mobile
---
### Customize
Edit :root CSS variables at the top of the file to change colors
Swap the @import font URL to change typography
Remove .reveal class from elements to disable entrance animations
---
### Deck Checklist
- [ ] Replace [IMAGE: description] placeholders with real images
- [ ] Verify the metric/quote on slide [N] is accurate (the unmissable slide)
- [ ] Test on your target display size ([1920×1080 or 1080×1080])
- [ ] If presenting live: test keyboard nav in fullscreen mode (F11 / Cmd+Ctrl+F)
- [ ] Replace [QR: url] on closing slide with an actual QR code image
Do not print the HTML in the chat.
| Layout | Use case |
|---|---|
| title-hero | Opening slide -- large headline + subtext |
| section-divider | Section break -- bold label, minimal |
| text-full | Headers + bullets or paragraphs |
| text-left-image-right | Side-by-side: text + image |
| image-left-text-right | Side-by-side: image first |
| two-column-text | Comparisons, pros/cons, before/after |
| image-full | Full-bleed image + optional caption |
| image-grid | 2×2 or 3×2 image gallery |
| stat-highlight | 2-4 large KPI metrics |
| quote-callout | Pull quote with attribution |
| comparison-table | Feature/option comparison grid |
| timeline | Horizontal or vertical milestones |
| closing-cta | Final slide -- CTA + contact info |