deck-design-pdf

Name: deck-design-pdf
Author: appautomaton

8installs3forks

How to install deck-design-pdf?

appautomaton/presentation/deck-design-pdf

$npx -y skills add appautomaton/presentation --skill deck-design-pdf

Installs into the current project.

Summary

Create presentation decks as high-fidelity PDF files using web technology (HTML, CSS, Tailwind, Font Awesome). Use when the user wants a polished, pixel-perfect deck with responsive layouts, rich typography, icons, and modern design. For editable PPTX output, use deck-design-ppt

Files · 1

View on GitHub

SKILL.md

1	# Deck Design PDF: Operational Playbook
2
3	## What This Skill Does
4
5	- Input: a deck brief + any structured data the user provides.
6	- Output: a PDF file: pixel-perfect slides rendered from HTML/CSS via Playwright. Not editable in PowerPoint. This is the high-fidelity, print-ready format.
7
8	### When to use this vs deck-design-ppt
9
10	\| Need \| Skill \|
11	\|---\|---\|
12	\| Editable slides (PowerPoint/Keynote/Slides) \| `deck-design-ppt` \|
13	\| Pixel-perfect PDF: web typography, icons, gradients, CSS layouts \| `deck-design-pdf` (this) \|
14
15	### What the web stack unlocks (beyond pptx)
16
17	- CSS Grid and Flexbox: responsive layouts instead of coordinate math
18	- Google Fonts with optical sizing and variable weights
19	- Font Awesome 6 icons inline with text
20	- Gradient backgrounds, box shadows, rounded corners, opacity
21	- ECharts 6 (SVG renderer): 21 chart types, including bar, line, pie, scatter, waterfall, gauge, sankey, treemap, radar, funnel, and heatmap
22	- Tailwind utility classes: rapid, consistent styling
23
24	## Phase 1: Understand and Route
25
26	### 1. Read the room
27
28	Before asking the user anything, scan the working directory for artifacts that establish context: briefs, consultant storyboards (`-ghost.md`, `-outline.md`), data files, brand specs, existing build scripts. Read what's there and form a working hypothesis about what this deck needs: objective, audience, tone, density, and data.
29
30	Then ask only for what's genuinely ambiguous and would change the deck's argument or audience calibration. Frame questions as choices, not open fields: "The data suggests a Bain decision-first structure. Does that fit, or is this more of an internal working session?" One sharp question beats five vague ones. Maximum 1–3 questions, and zero is fine if the artifacts are clear.
31
32	### 2. Classify the deck
33
34	This determines how deep the planning phase goes. Two paths:
35
36	\| Signal \| Path \| What happens next \|
37	\|---\|---\|---\|
38	\| MBB engagement, strategy consulting, due diligence, cost transformation, M&A, pricing, org restructuring \| Consulting \| Load the full consulting reference library (ghost-deck.md, engagement-archetypes.md, skeletons/, firm-dna.md, evidence-recipes.md, density-adaptation.md). Build a rigorous ghost deck with archetype classification, pillar architecture, transitions, and firm overlay. \|
39	\| Startup pitch, board update, product narrative, conference talk, investor roadshow, internal update \| General \| Stay in this playbook. Build a ghost deck using the universal quality gates below: governing thought, action titles, helicopter test, exhibit assignment. No archetype classification or skeleton required. \|
40
41	Consultant handoff: if a storyboard from the `consultant` skill already exists (governing thought, pillars, action titles, content descriptions), the argument layer is done. Skip ghost deck construction entirely. Validate the argument (run the helicopter test on the titles), then proceed to the production outline.
42
43	### 3. Pick style and density
44
45	Style:
46
47	\| If the deck is… \| Palette \| Surface \| Font \|
48	\|---\|---\|---\|---\|
49	\| Consulting / board / engagement deliverable \| `consulting-mckinsey` \| Light \| Inter \|
50	\| Framework evaluation, process-transparent \| `consulting-bcg` \| Light \| DM Sans \|
51	\| Diagnostic, decision support, facts-vs-perspectives \| `consulting-bain` \| Light \| Source Sans 3 \|
52	\| Startup pitch / product narrative / growth story \| `founder` \| Light \| Plus Jakarta Sans \|
53	\| Crisis / urgency / downturn memo / high-stakes \| `sequoia` \| Dark \| Georgia + Inter \|
54	\| Warm, rigorous-but-human strategy work (Anthropic-adjacent ivory + clay) \| `anthropic-consulting` \| Light \| Manrope (not vendored, load via `headExtra`) \|
55	\| Google-ecosystem client engagement (muted Google Blue) \| `meridian-google` \| Light \| Inter \|
56
57	The vendored font families are Inter, DM Sans, Plus Jakarta Sans, and Source Sans 3. The agent is not limited to these. Any Google Font can be loaded via a `<link>` tag in `headExtra` when the brief calls for a different typeface.
58
59	Brand identity intake (from brand-system skill): if an `identity.js` produced by the `brand-system` skill exists in the working directory, the style decision is already made. Do not route through the table above:
60
61	1. Palette: `identity.js` emits engine-compatible palette CSS. Write it into this skill's palette directory, then pass its name to `createDeck`:
62
63	```javascript
64	const fs = require('fs');
65	const brand = require('./identity');
66	fs.writeFileSync('<this-skill>/palettes/' + brand.palette.name + '.css', brand.toCSS());
67	// then: createDeck({ palette: brand.palette.name, ... })
68	```
69
70	2. Fonts: if `brand.fonts` names a family

People who liked this also viewed

6 picks

Type

deck-design-pdf

8installs3forks

View on GitHub

How to install deck-design-pdf?

appautomaton/presentation/deck-design-pdf

$npx -y skills add appautomaton/presentation --skill deck-design-pdf

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Deck Design PDF: Operational Playbook
2
3	## What This Skill Does
4
5	- Input: a deck brief + any structured data the user provides.
6	- Output: a PDF file: pixel-perfect slides rendered from HTML/CSS via Playwright. Not editable in PowerPoint. This is the high-fidelity, print-ready format.
7
8	### When to use this vs deck-design-ppt
9
10	\| Need \| Skill \|
11	\|---\|---\|
12	\| Editable slides (PowerPoint/Keynote/Slides) \| `deck-design-ppt` \|
13	\| Pixel-perfect PDF: web typography, icons, gradients, CSS layouts \| `deck-design-pdf` (this) \|
14
15	### What the web stack unlocks (beyond pptx)
16
17	- CSS Grid and Flexbox: responsive layouts instead of coordinate math
18	- Google Fonts with optical sizing and variable weights
19	- Font Awesome 6 icons inline with text
20	- Gradient backgrounds, box shadows, rounded corners, opacity
21	- ECharts 6 (SVG renderer): 21 chart types, including bar, line, pie, scatter, waterfall, gauge, sankey, treemap, radar, funnel, and heatmap
22	- Tailwind utility classes: rapid, consistent styling
23
24	## Phase 1: Understand and Route
25
26	### 1. Read the room
27
28	Before asking the user anything, scan the working directory for artifacts that establish context: briefs, consultant storyboards (`-ghost.md`, `-outline.md`), data files, brand specs, existing build scripts. Read what's there and form a working hypothesis about what this deck needs: objective, audience, tone, density, and data.
29
30	Then ask only for what's genuinely ambiguous and would change the deck's argument or audience calibration. Frame questions as choices, not open fields: "The data suggests a Bain decision-first structure. Does that fit, or is this more of an internal working session?" One sharp question beats five vague ones. Maximum 1–3 questions, and zero is fine if the artifacts are clear.
31
32	### 2. Classify the deck
33
34	This determines how deep the planning phase goes. Two paths:
35
36	\| Signal \| Path \| What happens next \|
37	\|---\|---\|---\|
38	\| MBB engagement, strategy consulting, due diligence, cost transformation, M&A, pricing, org restructuring \| Consulting \| Load the full consulting reference library (ghost-deck.md, engagement-archetypes.md, skeletons/, firm-dna.md, evidence-recipes.md, density-adaptation.md). Build a rigorous ghost deck with archetype classification, pillar architecture, transitions, and firm overlay. \|
39	\| Startup pitch, board update, product narrative, conference talk, investor roadshow, internal update \| General \| Stay in this playbook. Build a ghost deck using the universal quality gates below: governing thought, action titles, helicopter test, exhibit assignment. No archetype classification or skeleton required. \|
40
41	Consultant handoff: if a storyboard from the `consultant` skill already exists (governing thought, pillars, action titles, content descriptions), the argument layer is done. Skip ghost deck construction entirely. Validate the argument (run the helicopter test on the titles), then proceed to the production outline.
42
43	### 3. Pick style and density
44
45	Style:
46
47	\| If the deck is… \| Palette \| Surface \| Font \|
48	\|---\|---\|---\|---\|
49	\| Consulting / board / engagement deliverable \| `consulting-mckinsey` \| Light \| Inter \|
50	\| Framework evaluation, process-transparent \| `consulting-bcg` \| Light \| DM Sans \|
51	\| Diagnostic, decision support, facts-vs-perspectives \| `consulting-bain` \| Light \| Source Sans 3 \|
52	\| Startup pitch / product narrative / growth story \| `founder` \| Light \| Plus Jakarta Sans \|
53	\| Crisis / urgency / downturn memo / high-stakes \| `sequoia` \| Dark \| Georgia + Inter \|
54	\| Warm, rigorous-but-human strategy work (Anthropic-adjacent ivory + clay) \| `anthropic-consulting` \| Light \| Manrope (not vendored, load via `headExtra`) \|
55	\| Google-ecosystem client engagement (muted Google Blue) \| `meridian-google` \| Light \| Inter \|
56
57	The vendored font families are Inter, DM Sans, Plus Jakarta Sans, and Source Sans 3. The agent is not limited to these. Any Google Font can be loaded via a `<link>` tag in `headExtra` when the brief calls for a different typeface.
58
59	Brand identity intake (from brand-system skill): if an `identity.js` produced by the `brand-system` skill exists in the working directory, the style decision is already made. Do not route through the table above:
60
61	1. Palette: `identity.js` emits engine-compatible palette CSS. Write it into this skill's palette directory, then pass its name to `createDeck`:
62
63	```javascript
64	const fs = require('fs');
65	const brand = require('./identity');
66	fs.writeFileSync('<this-skill>/palettes/' + brand.palette.name + '.css', brand.toCSS());
67	// then: createDeck({ palette: brand.palette.name, ... })
68	```
69
70	2. Fonts: if `brand.fonts` names a family

People who liked this also viewed

6 picks

Type