graphic-slide-deck

Name: graphic-slide-deck
Author: Varnan-Tech

24installs59forks

How to install graphic-slide-deck?

varnan-tech/opendirectory/graphic-slide-deck

$npx -y skills add Varnan-Tech/opendirectory --skill graphic-slide-deck

Installs into the current project.

Summary

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",

Files · 1

View on GitHub

SKILL.md

1	# Graphic Slide Deck
2
3	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.
4
5	---
6
7	Critical rules -- non-negotiable:
8
9	1. Every slide MUST fit within 100vh. No scrolling inside slides. Content overflows → split into two slides.
10	2. ALL font sizes and spacing MUST use `clamp()`. Never fixed px/rem on anything that scales.
11	3. Single self-contained HTML: all CSS/JS inline. Zero external dependencies except font CDN link.
12	4. Never dump HTML in chat. Save to file, show summary only.
13	5. No generic AI slop aesthetics -- check against the DO NOT USE list in `references/style-presets.md`.
14
15	---
16
17	## Step 1: Brief Intake
18
19	Need three things to start. If all three present in the message: skip to Step 2.
20
21	If any missing, ask exactly:
22
23	> "To get started, I need three things:
24	> 1. Purpose -- what is this deck for? (investor pitch / sales call / conference talk / internal presentation / onboarding / other)
25	> 2. Audience -- who will see it? (VCs, prospects, your team, executives, conference room, LinkedIn)
26	> 3. Topic or content -- paste notes, a URL, a brief description, or upload a file"
27
28	Wait for all three before continuing.
29
30	---
31
32	## Step 2: Complete Intake
33
34	Ask all questions in one message, grouped by category. User can skip any -- defaults apply.
35
36	> "A few questions before I start:
37	>
38	> Content
39	> 1. Key message -- single sentence the audience must remember after leaving
40	> 2. Slide count -- Short (5-10) / Medium (10-20) / Long (20+)?
41	> 3. Content source -- All content ready / Rough notes (I'll structure) / Topic only (I'll draft)?
42	> 4. Existing assets -- Any images, screenshots, or logos to include? (yes + paths / no)
43	>
44	> Design
45	> 5. Style -- midnight-editorial / matt-gray / clean-slate / brutalist / mint-pixel-corporate / product-minimal / magazine-red / soft-cloud / "show me options"
46	> 6. Aspect ratio -- 16:9 (1920×1080, default) / 1:1 (1080×1080, LinkedIn)
47	> 7. Inline editing -- should text be editable in-browser after export? (Yes / No)
48	>
49	> Output
50	> 8. Output format -- HTML only / HTML + PDF / HTML + PDF + deploy to URL
51	> 9. Deck name -- slug for file/folder naming (e.g. "q2-investor-pitch"); I'll derive if skipped"
52
53	Defaults if skipped:
54
55	\| Question \| Default \|
56	\|---\|---\|
57	\| Key message \| derived from purpose + topic \|
58	\| Slide count \| 12 \|
59	\| Content source \| topic only \|
60	\| Existing assets \| none \|
61	\| Style \| clean-slate \|
62	\| Aspect ratio \| 16:9 \|
63	\| Inline editing \| No \|
64	\| Output format \| HTML + PDF \|
65	\| Deck name \| derived from topic slug \|
66
67	If style = "show me options":
68	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.
69
70	---
71
72	## Step 2.5: Internal Design Direction (not shown to user)
73
74	From Step 2 answers, determine before Step 3:
75
76	Visual character (derived from style, or inferred if not specified):
77	- midnight-editorial or magazine-red → `dark-editorial`
78	- clean-slate or product-minimal → `light-minimal`
79	- matt-gray → `neutral-professional`
80	- brutalist → `bold-expressive`
81	- mint-pixel-corporate or soft-cloud → `fresh-corporate`
82	- Style not specified: investor pitch → midnight-editorial; sales → clean-slate; conference → brutalist or midnight-editorial; internal → matt-gray
83
84	ONE unmissable slide -- identify before Step 3:
85	- Investor pitch → stat-highlight (traction/metrics slide)
86	- Sales deck → stat-highlight (ROI/results slide)
87	- Conference talk → quote-callout or stat-highlight (key insight)
88	- Internal presentation → closing-cta (decision/recommendation slide)
89
90	Layout selection bias -- note the 2-3 most relevant layouts for this deck type to prioritize in Step 3.
91
92	Never ask the user for design direction -- derive it entirely from their answers.
93
94	---
95
96	## Step 3: Structure Design
97
98	Read `references/layout-library.md` before planning.
99
100	Plan the full slide sequence. Assign a layout type from the 13 in `references/layout-library.md` to each slide.
101
102	Deck type → typical structure:
103
104	Investor pitch (12 slides):
105	1. [title-hero] Company + tagline
106	2. [section-divider] The Problem
107	3. [text-full] Problem detail
108	4. [text-left-image-right] Solution overview
109	5. [image-full] Product screenshot
110	6. [stat-highlight] Traction -- unmissable slide
111	7. [compar

People who liked this also viewed

6 picks

Type

graphic-slide-deck

24installs59forks

View on GitHub

How to install graphic-slide-deck?

varnan-tech/opendirectory/graphic-slide-deck

$npx -y skills add Varnan-Tech/opendirectory --skill graphic-slide-deck

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Graphic Slide Deck
2
3	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.
4
5	---
6
7	Critical rules -- non-negotiable:
8
9	1. Every slide MUST fit within 100vh. No scrolling inside slides. Content overflows → split into two slides.
10	2. ALL font sizes and spacing MUST use `clamp()`. Never fixed px/rem on anything that scales.
11	3. Single self-contained HTML: all CSS/JS inline. Zero external dependencies except font CDN link.
12	4. Never dump HTML in chat. Save to file, show summary only.
13	5. No generic AI slop aesthetics -- check against the DO NOT USE list in `references/style-presets.md`.
14
15	---
16
17	## Step 1: Brief Intake
18
19	Need three things to start. If all three present in the message: skip to Step 2.
20
21	If any missing, ask exactly:
22
23	> "To get started, I need three things:
24	> 1. Purpose -- what is this deck for? (investor pitch / sales call / conference talk / internal presentation / onboarding / other)
25	> 2. Audience -- who will see it? (VCs, prospects, your team, executives, conference room, LinkedIn)
26	> 3. Topic or content -- paste notes, a URL, a brief description, or upload a file"
27
28	Wait for all three before continuing.
29
30	---
31
32	## Step 2: Complete Intake
33
34	Ask all questions in one message, grouped by category. User can skip any -- defaults apply.
35
36	> "A few questions before I start:
37	>
38	> Content
39	> 1. Key message -- single sentence the audience must remember after leaving
40	> 2. Slide count -- Short (5-10) / Medium (10-20) / Long (20+)?
41	> 3. Content source -- All content ready / Rough notes (I'll structure) / Topic only (I'll draft)?
42	> 4. Existing assets -- Any images, screenshots, or logos to include? (yes + paths / no)
43	>
44	> Design
45	> 5. Style -- midnight-editorial / matt-gray / clean-slate / brutalist / mint-pixel-corporate / product-minimal / magazine-red / soft-cloud / "show me options"
46	> 6. Aspect ratio -- 16:9 (1920×1080, default) / 1:1 (1080×1080, LinkedIn)
47	> 7. Inline editing -- should text be editable in-browser after export? (Yes / No)
48	>
49	> Output
50	> 8. Output format -- HTML only / HTML + PDF / HTML + PDF + deploy to URL
51	> 9. Deck name -- slug for file/folder naming (e.g. "q2-investor-pitch"); I'll derive if skipped"
52
53	Defaults if skipped:
54
55	\| Question \| Default \|
56	\|---\|---\|
57	\| Key message \| derived from purpose + topic \|
58	\| Slide count \| 12 \|
59	\| Content source \| topic only \|
60	\| Existing assets \| none \|
61	\| Style \| clean-slate \|
62	\| Aspect ratio \| 16:9 \|
63	\| Inline editing \| No \|
64	\| Output format \| HTML + PDF \|
65	\| Deck name \| derived from topic slug \|
66
67	If style = "show me options":
68	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.
69
70	---
71
72	## Step 2.5: Internal Design Direction (not shown to user)
73
74	From Step 2 answers, determine before Step 3:
75
76	Visual character (derived from style, or inferred if not specified):
77	- midnight-editorial or magazine-red → `dark-editorial`
78	- clean-slate or product-minimal → `light-minimal`
79	- matt-gray → `neutral-professional`
80	- brutalist → `bold-expressive`
81	- mint-pixel-corporate or soft-cloud → `fresh-corporate`
82	- Style not specified: investor pitch → midnight-editorial; sales → clean-slate; conference → brutalist or midnight-editorial; internal → matt-gray
83
84	ONE unmissable slide -- identify before Step 3:
85	- Investor pitch → stat-highlight (traction/metrics slide)
86	- Sales deck → stat-highlight (ROI/results slide)
87	- Conference talk → quote-callout or stat-highlight (key insight)
88	- Internal presentation → closing-cta (decision/recommendation slide)
89
90	Layout selection bias -- note the 2-3 most relevant layouts for this deck type to prioritize in Step 3.
91
92	Never ask the user for design direction -- derive it entirely from their answers.
93
94	---
95
96	## Step 3: Structure Design
97
98	Read `references/layout-library.md` before planning.
99
100	Plan the full slide sequence. Assign a layout type from the 13 in `references/layout-library.md` to each slide.
101
102	Deck type → typical structure:
103
104	Investor pitch (12 slides):
105	1. [title-hero] Company + tagline
106	2. [section-divider] The Problem
107	3. [text-full] Problem detail
108	4. [text-left-image-right] Solution overview
109	5. [image-full] Product screenshot
110	6. [stat-highlight] Traction -- unmissable slide
111	7. [compar

People who liked this also viewed

6 picks

Type