graphic-slide-deck
Generates a professionally designed HTML slide deck from a brief or content. Outputs a single-file presentation + optional PDF. Supports 13 layout types and 8 style presets. Trigger when user says "create a slide deck", "make a presentation", "build a pitch deck", "make slides", "convert my notes to slides".
npx skills add Varnan-Tech/opendirectory --skill graphic-slide-deck --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Graphic Slide Deck 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:** 1. Every slide MUST fit within 100vh. No scrolling inside slides. Content overflows → split into two slides. 2. ALL font sizes and spacing MUST use `clamp()`. Never fixed px/rem on anything that scales. 3. Single self-contained HTML: all CSS/JS inline. Zero external dependencies except font CDN link. 4. Never dump HTML in chat. Save to file, show summary only. 5. No generic AI slop aesthetics -- check against the DO NOT USE list in `references/style-presets.md`. --- ## Step 1: Brief Intake 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: > 1. **Purpose** -- what is this deck for? (investor pitch / sales call / conference talk / internal presentation / onboarding / other) > 2. **Audience** -- who will see it? (VCs, prospects, your team, executives, conference room, LinkedIn) > 3. **Topic or content** -- paste notes, a URL, a brief descript
- Step 1: Brief Intake
- Step 2: Complete Intake
- Step 2.5: Internal Design Direction (not shown to user)
- Step 3: Structure Design
- Step 4: Content Draft
- Step 5: HTML Generation
- Step 6: Self-QA
- Step 7: Output
- Step 8: Summary (no HTML in chat)
- Section Reference
mkdir -p deck/[name]-slides bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/export-pdf.sh \ bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/deploy.sh \
What does the graphic-slide-deck skill do?
Generates a professionally designed HTML slide deck from a brief or content. Outputs a single-file presentation + optional PDF. Supports 13 layout types and 8 style presets. Trigger when user says "create a slide deck", "make a presentation", "build a pitch deck", "make slides", "convert my notes to slides".
How do I install it?
Run `npx skills add Varnan-Tech/opendirectory --skill graphic-slide-deck --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From Varnan-Tech/opendirectory, a repository with 571 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.