make-deck

Name: make-deck
Author: bluzir

47installs10forks

How to install make-deck?

bluzir/claude-code-design/make-deck

$npx -y skills add bluzir/claude-code-design --skill make-deck

Installs into the current project.

Summary

Build an HTML slide deck (1920×1080, keyboard nav, exportable) when user asks for a presentation, pitch deck, slides, or keynote. Uses deck_stage.js starter and Claude Design taste rules.

Files · 1

View on GitHub

SKILL.md

1	# Make a Deck
2
3	Build an HTML slide deck that looks designed, not AI-generated. Uses `starters/deck_stage.js` for keyboard nav, scaling, speaker notes, and print-to-PDF.
4
5	## Phase 0 — Context pre-flight (auto-detect, ONE question max)
6
7	Before asking design questions, detect context silently via auto-checks. Only ask the user if nothing is found.
8
9	### Auto-detect (no user input)
10	1. `Read .claude/design-tokens.json` — project tokens, if exist → load
11	2. `Bash(ls ~/.claude/design-systems/ 2>/dev/null)` — org-level registry. If the brief mentions a brand name matching a folder → auto-apply it (e.g. brief "Acme deck" + `~/.claude/design-systems/acme/` → use Acme)
12	3. `Glob */tailwind.config. /theme.{ts,js,json} /tokens.{css,scss} */_variables.` at project root — if found, note "codebase detected" and `Read` them
13	4. Scan user message/attachments for:
14	- GitHub URL → invoke `Skill: ingest-github` first
15	- Figma URL → invoke `Skill: ingest-figma` first
16	- Image attachment → invoke `Skill: ingest-screenshot` first
17	- `.md` / `.txt` / `.pdf` file attached → `Read` it (may contain brand refs or content)
18
19	### One-question fallback (only if nothing detected)
20	If no context found after auto-detect, use `AskUserQuestion` with a single question, text-options:
21	- Use existing design system — list names from `~/.claude/design-systems/` (if any)
22	- From codebase — "paste a local path or github URL"
23	- From screenshot — "attach an image"
24	- From Figma — "paste a figma URL (needs FIGMA_TOKEN)"
25	- No context — invoke `Skill: frontend-design` for aesthetic-from-scratch
26	- Decide for me — Claude picks frontend-design
27
28	Report what was found/chosen in one line: "Using <context>. Proceeding…"
29
30	## Phase 1 — Ambiguity gate
31
32	Check the user's brief (`$ARGUMENTS`) for these signals:
33	- Audience — "for X", "for investors", "team", "stakeholders", etc.
34	- Style — named aesthetic ("New Yorker", "WSJ", "minimal", "bold", "Apple-like") or brand reference
35	- Length — "N slides", "short", "quick"
36
37	If ≥2 of 3 present → skip long questionnaire, proceed with max 1-2 clarifying questions.
38
39	If <2 present → invoke `AskUserQuestion` with:
40	- Audience (who's watching, emotional state, technical level)
41	- Tone (formal/casual, funny/serious)
42	- Length (slide count)
43	- Visuals (minimal/rich, photos/illustrations/charts)
44	- Variations (do they want 2-3 deck options or just one)
45
46	Ask at least 4 relevant questions even in gate-passed mode if anything is still unclear. Do not ask about brand context — Phase 0 already handled it.
47
48	## Phase 1.5 — Speaker-notes heuristic (agent decides, no toggle)
49
50	Instead of asking user "use speaker notes?", decide from signals:
51
52	\| Signal in brief \| → speaker notes \|
53	\|---\|---\|
54	\| "quick", "standup", "lightning", "recap", <100 chars \| off — self-sufficient slides, no notes \|
55	\| "for investors", "Board meeting", "keynote", "All Hands" \| on — sparse slides, notes carry narrative \|
56	\| Attached PRD / long doc (>500 words) \| on — slides distill, notes script \|
57	\| Only 1-3 slides requested \| off \|
58	\| 10+ slides requested \| on (probably a story arc) \|
59	\| Ambiguous / none of above \| ask a single yes/no question \|
60
61	If on: generate `<script type="application/json" id="speaker-notes">[...]</script>` at the end of `<body>` with one string per slide — full conversational narrative, not bullet-point summary. Keep slides visual-heavy.
62
63	If off: skip notes entirely; slides must stand alone.
64
65	## Phase 2 — Visual system
66
67	Using context gathered in Phase 0, commit to a visual system up front:
68	- Section-header layout, title layout, image layout
69	- Max 1-2 background colors across the deck
70	- Font hierarchy (display / H1 / body / caption)
71	- Palette (pull from loaded tokens, or generated via `Skill: frontend-design`)
72
73	Vocalize the system in one paragraph before writing slides.
74
75	## Phase 3 — Build
76
77	1. Create `artifacts/<slug>.html` with shell:
78	```html
79	<!doctype html>
80	<html lang="en">
81	<head>
82	<meta charset="utf-8"/>
83	<title>{{deck title}}</title>
84	<script src="./deck_stage.js"></script>
85	<style>/* your tokens + slide styles */</style>
86	</head>
87	<body>
88	<deck-stage width="1920" height="1080">
89	<section><!-- slide 1 --></section>
90	...
91	</deck-stage>
92	</body>
93	</html>
94	```
95	2. `Bash(cp starters/deck_stage.js "$(dirname <html>)/")` — copy starter into the same dir as the HTML (important for nested paths like `artifacts/foo/deck.html`)
96	3. Write all slides in one pass. Rules:
97	- NO title-only slide as slide 1 (jump into content)
98	- Text ≥ 24px on 1920×1080
99	-

People who liked this also viewed

6 picks

Type

web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".SkillsJul 2026483k29k
lark-slides飞书幻灯片：创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面（创建、删除、读取、局部替换）。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时，也应直接使用本 skill，不要因为域名不是飞书而回退到 WebFetch；路由依据是 URL 路径模式和 token，而不是域名。不负责：云文档内容编辑（走 SkillsJul 2026332k16k
design-taste-frontendTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop SkillsJul 2026280k66k
ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presSkillsJul 2026280k109k
caveman-helpQuick-reference card for all caveman modes, skills, and commands. One-shot display, not a persistent mode. Trigger: /caveman-help, "caveman help", "what caveman commands", "how do I use caveman".SkillsJul 2026249k92k
codebase-designShared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-nSkillsJul 2026225k182k

make-deck

47installs10forks

View on GitHub

How to install make-deck?

bluzir/claude-code-design/make-deck

$npx -y skills add bluzir/claude-code-design --skill make-deck

Installs into the current project.

Summary

Build an HTML slide deck (1920×1080, keyboard nav, exportable) when user asks for a presentation, pitch deck, slides, or keynote. Uses deck_stage.js starter and Claude Design taste rules.

Files · 1

View on GitHub

SKILL.md

1	# Make a Deck
2
3	Build an HTML slide deck that looks designed, not AI-generated. Uses `starters/deck_stage.js` for keyboard nav, scaling, speaker notes, and print-to-PDF.
4
5	## Phase 0 — Context pre-flight (auto-detect, ONE question max)
6
7	Before asking design questions, detect context silently via auto-checks. Only ask the user if nothing is found.
8
9	### Auto-detect (no user input)
10	1. `Read .claude/design-tokens.json` — project tokens, if exist → load
11	2. `Bash(ls ~/.claude/design-systems/ 2>/dev/null)` — org-level registry. If the brief mentions a brand name matching a folder → auto-apply it (e.g. brief "Acme deck" + `~/.claude/design-systems/acme/` → use Acme)
12	3. `Glob */tailwind.config. /theme.{ts,js,json} /tokens.{css,scss} */_variables.` at project root — if found, note "codebase detected" and `Read` them
13	4. Scan user message/attachments for:
14	- GitHub URL → invoke `Skill: ingest-github` first
15	- Figma URL → invoke `Skill: ingest-figma` first
16	- Image attachment → invoke `Skill: ingest-screenshot` first
17	- `.md` / `.txt` / `.pdf` file attached → `Read` it (may contain brand refs or content)
18
19	### One-question fallback (only if nothing detected)
20	If no context found after auto-detect, use `AskUserQuestion` with a single question, text-options:
21	- Use existing design system — list names from `~/.claude/design-systems/` (if any)
22	- From codebase — "paste a local path or github URL"
23	- From screenshot — "attach an image"
24	- From Figma — "paste a figma URL (needs FIGMA_TOKEN)"
25	- No context — invoke `Skill: frontend-design` for aesthetic-from-scratch
26	- Decide for me — Claude picks frontend-design
27
28	Report what was found/chosen in one line: "Using <context>. Proceeding…"
29
30	## Phase 1 — Ambiguity gate
31
32	Check the user's brief (`$ARGUMENTS`) for these signals:
33	- Audience — "for X", "for investors", "team", "stakeholders", etc.
34	- Style — named aesthetic ("New Yorker", "WSJ", "minimal", "bold", "Apple-like") or brand reference
35	- Length — "N slides", "short", "quick"
36
37	If ≥2 of 3 present → skip long questionnaire, proceed with max 1-2 clarifying questions.
38
39	If <2 present → invoke `AskUserQuestion` with:
40	- Audience (who's watching, emotional state, technical level)
41	- Tone (formal/casual, funny/serious)
42	- Length (slide count)
43	- Visuals (minimal/rich, photos/illustrations/charts)
44	- Variations (do they want 2-3 deck options or just one)
45
46	Ask at least 4 relevant questions even in gate-passed mode if anything is still unclear. Do not ask about brand context — Phase 0 already handled it.
47
48	## Phase 1.5 — Speaker-notes heuristic (agent decides, no toggle)
49
50	Instead of asking user "use speaker notes?", decide from signals:
51
52	\| Signal in brief \| → speaker notes \|
53	\|---\|---\|
54	\| "quick", "standup", "lightning", "recap", <100 chars \| off — self-sufficient slides, no notes \|
55	\| "for investors", "Board meeting", "keynote", "All Hands" \| on — sparse slides, notes carry narrative \|
56	\| Attached PRD / long doc (>500 words) \| on — slides distill, notes script \|
57	\| Only 1-3 slides requested \| off \|
58	\| 10+ slides requested \| on (probably a story arc) \|
59	\| Ambiguous / none of above \| ask a single yes/no question \|
60
61	If on: generate `<script type="application/json" id="speaker-notes">[...]</script>` at the end of `<body>` with one string per slide — full conversational narrative, not bullet-point summary. Keep slides visual-heavy.
62
63	If off: skip notes entirely; slides must stand alone.
64
65	## Phase 2 — Visual system
66
67	Using context gathered in Phase 0, commit to a visual system up front:
68	- Section-header layout, title layout, image layout
69	- Max 1-2 background colors across the deck
70	- Font hierarchy (display / H1 / body / caption)
71	- Palette (pull from loaded tokens, or generated via `Skill: frontend-design`)
72
73	Vocalize the system in one paragraph before writing slides.
74
75	## Phase 3 — Build
76
77	1. Create `artifacts/<slug>.html` with shell:
78	```html
79	<!doctype html>
80	<html lang="en">
81	<head>
82	<meta charset="utf-8"/>
83	<title>{{deck title}}</title>
84	<script src="./deck_stage.js"></script>
85	<style>/* your tokens + slide styles */</style>
86	</head>
87	<body>
88	<deck-stage width="1920" height="1080">
89	<section><!-- slide 1 --></section>
90	...
91	</deck-stage>
92	</body>
93	</html>
94	```
95	2. `Bash(cp starters/deck_stage.js "$(dirname <html>)/")` — copy starter into the same dir as the HTML (important for nested paths like `artifacts/foo/deck.html`)
96	3. Write all slides in one pass. Rules:
97	- NO title-only slide as slide 1 (jump into content)
98	- Text ≥ 24px on 1920×1080
99	-

People who liked this also viewed

6 picks

Type