claude-presentation-master 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +1 -1
- package/README.md +226 -627
- package/assets/presentation-engine.css +16 -0
- package/dist/index.d.mts +7 -0
- package/dist/index.d.ts +7 -0
- package/dist/index.js +288 -51
- package/dist/index.mjs +288 -51
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -2,762 +2,361 @@
|
|
|
2
2
|
|
|
3
3
|
<div align="center">
|
|
4
4
|
|
|
5
|
-

|
|
6
|
+

|
|
7
7
|

|
|
8
|
-

|
|
9
8
|
|
|
10
|
-
|
|
9
|
+
### Turn your Claude projects into polished presentations — instantly.
|
|
11
10
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
[Documentation](#documentation) •
|
|
15
|
-
[Examples](#examples) •
|
|
16
|
-
[API Reference](#api-reference)
|
|
11
|
+
You've been working in Claude on a business project. Strategy docs, research, analysis, plans.
|
|
12
|
+
Now someone asks for a presentation. **This is usually where things get painful.**
|
|
17
13
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
---
|
|
21
|
-
|
|
22
|
-
## What is Claude Presentation Master?
|
|
23
|
-
|
|
24
|
-
Claude Presentation Master is a TypeScript/Node.js library that transforms your content into professionally designed presentations. Unlike simple slide generators, it applies proven methodologies from world-renowned presentation experts:
|
|
14
|
+
Not anymore.
|
|
25
15
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
- **Chris Anderson** (TED Talks) - One powerful idea per presentation
|
|
30
|
-
- **Barbara Minto** (McKinsey) - Pyramid Principle, SCQA structure
|
|
16
|
+
[Install Now](#installation) •
|
|
17
|
+
[See It Work](#quick-start) •
|
|
18
|
+
[What's Inside](#the-knowledge-base)
|
|
31
19
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
### Key Differentiators
|
|
35
|
-
|
|
36
|
-
| Feature | Other Tools | Claude Presentation Master |
|
|
37
|
-
|---------|-------------|---------------------------|
|
|
38
|
-
| Quality Control | None or basic linting | Real visual QA with Playwright screenshots |
|
|
39
|
-
| Expert Methods | Generic templates | 40+ expert methodologies encoded |
|
|
40
|
-
| Word Limits | User must count | Automatically enforced per mode |
|
|
41
|
-
| Layout Validation | None | Whitespace %, balance, contrast measured |
|
|
42
|
-
| Accessibility | Often ignored | WCAG AA compliance built-in |
|
|
43
|
-
| API Dependency | Usually required | **Works 100% offline** |
|
|
20
|
+
</div>
|
|
44
21
|
|
|
45
22
|
---
|
|
46
23
|
|
|
47
|
-
##
|
|
24
|
+
## The Scenario
|
|
48
25
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
26
|
+
You're deep in a Claude Code session. You've built something real:
|
|
27
|
+
- A product strategy
|
|
28
|
+
- A quarterly business review
|
|
29
|
+
- An investor pitch
|
|
30
|
+
- A project plan
|
|
31
|
+
- A competitive analysis
|
|
52
32
|
|
|
53
|
-
|
|
54
|
-
yarn add claude-presentation-master
|
|
33
|
+
Now you need slides.
|
|
55
34
|
|
|
56
|
-
|
|
57
|
-
pnpm add claude-presentation-master
|
|
58
|
-
```
|
|
35
|
+
**What usually happens:**
|
|
59
36
|
|
|
60
|
-
|
|
37
|
+
You ask Claude to make a presentation. You get walls of text, generic bullet points, and amateur formatting. You spend the next two hours manually fixing everything in PowerPoint. Or you give up and just build it from scratch.
|
|
61
38
|
|
|
62
|
-
|
|
39
|
+
**What happens with this library:**
|
|
63
40
|
|
|
64
|
-
```
|
|
65
|
-
|
|
41
|
+
```
|
|
42
|
+
Your Claude project context
|
|
43
|
+
↓
|
|
44
|
+
One command
|
|
45
|
+
↓
|
|
46
|
+
Professional presentation (HTML or PowerPoint)
|
|
47
|
+
Ready to present. Ready to send to clients.
|
|
66
48
|
```
|
|
67
49
|
|
|
68
50
|
---
|
|
69
51
|
|
|
70
|
-
##
|
|
71
|
-
|
|
72
|
-
### Option 1: CLI (Command Line)
|
|
52
|
+
## Why This Works
|
|
73
53
|
|
|
74
|
-
|
|
75
|
-
# Generate a keynote-style presentation
|
|
76
|
-
cpm generate my-content.md --mode keynote --format html,pptx
|
|
54
|
+
Claude is brilliant at research, analysis, and strategy. But presentations? Not so much.
|
|
77
55
|
|
|
78
|
-
|
|
79
|
-
|
|
56
|
+
That's because Claude wasn't trained on what actually makes presentations work:
|
|
57
|
+
- McKinsey consultants don't use bullet points — they use action titles
|
|
58
|
+
- TED speakers don't dump information — they follow the Sparkline narrative arc
|
|
59
|
+
- Steve Jobs averaged 10 words per slide — not 100
|
|
60
|
+
- Investment bankers structure decks with the Pyramid Principle — answer first, support second
|
|
80
61
|
|
|
81
|
-
|
|
82
|
-
cpm --help
|
|
83
|
-
```
|
|
62
|
+
**We spent months building a knowledge base that knows all of this.**
|
|
84
63
|
|
|
85
|
-
|
|
64
|
+
We scoured the internet for everything ever written about making great presentations:
|
|
86
65
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
66
|
+
| Source | What We Extracted |
|
|
67
|
+
|--------|-------------------|
|
|
68
|
+
| **600+ consulting decks** | McKinsey, BCG, Bain slide structures and standards |
|
|
69
|
+
| **Nancy Duarte** | Sparkline narrative, STAR moments, Glance Test |
|
|
70
|
+
| **Garr Reynolds** | Presentation Zen, signal-to-noise ratio |
|
|
71
|
+
| **Carmine Gallo** | TED talk patterns, Rule of Three, 18-minute rule |
|
|
72
|
+
| **Barbara Minto** | Pyramid Principle, SCQA framework, MECE logic |
|
|
73
|
+
| **Edward Tufte** | Data-ink ratio, chartjunk elimination |
|
|
74
|
+
| **Cole Nussbaumer Knaflic** | Storytelling with Data principles |
|
|
75
|
+
| **10M+ views of YouTube content** | Analyst Academy, PowerPoint School, and more |
|
|
90
76
|
|
|
91
|
-
|
|
92
|
-
content: `
|
|
93
|
-
# Revolutionizing Customer Experience
|
|
94
|
-
|
|
95
|
-
## The Problem
|
|
96
|
-
Today's customers expect instant, personalized service.
|
|
97
|
-
Yet 73% report frustration with current support systems.
|
|
77
|
+
All of it — **6,300+ lines of expert knowledge** — encoded into an agentic vector database.
|
|
98
78
|
|
|
99
|
-
|
|
100
|
-
AI-powered support that understands context and delivers
|
|
101
|
-
human-quality responses in seconds, not hours.
|
|
102
|
-
|
|
103
|
-
## The Results
|
|
104
|
-
- 90% faster resolution times
|
|
105
|
-
- 4.8/5 customer satisfaction
|
|
106
|
-
- 60% cost reduction
|
|
107
|
-
|
|
108
|
-
## Next Steps
|
|
109
|
-
Join our pilot program and transform your customer experience.
|
|
110
|
-
`,
|
|
111
|
-
contentType: 'markdown',
|
|
112
|
-
mode: 'keynote',
|
|
113
|
-
format: ['html', 'pptx'],
|
|
114
|
-
title: 'Customer Experience Revolution',
|
|
115
|
-
author: 'Your Name',
|
|
116
|
-
qaThreshold: 95
|
|
117
|
-
});
|
|
118
|
-
|
|
119
|
-
// Check the quality score
|
|
120
|
-
console.log(`Quality Score: ${result.score}/100`);
|
|
121
|
-
console.log(`Slide Count: ${result.metadata.slideCount}`);
|
|
122
|
-
console.log(`Frameworks Applied: ${result.metadata.frameworks.join(', ')}`);
|
|
123
|
-
|
|
124
|
-
// Save the outputs
|
|
125
|
-
if (result.outputs.html) {
|
|
126
|
-
writeFileSync('presentation.html', result.outputs.html);
|
|
127
|
-
}
|
|
128
|
-
if (result.outputs.pptx) {
|
|
129
|
-
writeFileSync('presentation.pptx', result.outputs.pptx);
|
|
130
|
-
}
|
|
131
|
-
```
|
|
79
|
+
**Now Claude doesn't have to figure out presentations. The knowledge base already knows.**
|
|
132
80
|
|
|
133
81
|
---
|
|
134
82
|
|
|
135
|
-
##
|
|
136
|
-
|
|
137
|
-
### The Pipeline
|
|
138
|
-
|
|
139
|
-
```
|
|
140
|
-
┌─────────────────────────────────────────────────────────────────┐
|
|
141
|
-
│ YOUR CONTENT (Markdown/JSON/YAML) │
|
|
142
|
-
└─────────────────────────────────────────────────────────────────┘
|
|
143
|
-
│
|
|
144
|
-
▼
|
|
145
|
-
┌─────────────────────────────────────────────────────────────────┐
|
|
146
|
-
│ 1. CONTENT ANALYSIS │
|
|
147
|
-
│ • Extract SCQA structure (Situation, Complication, Question, │
|
|
148
|
-
│ Answer) using Barbara Minto's Pyramid Principle │
|
|
149
|
-
│ • Identify Sparkline narrative arc (What Is vs What Could Be) │
|
|
150
|
-
│ • Find STAR moments (Something They'll Always Remember) │
|
|
151
|
-
│ • Extract key messages (max 3 - Rule of Three) │
|
|
152
|
-
│ • Generate action titles (McKinsey style) │
|
|
153
|
-
└─────────────────────────────────────────────────────────────────┘
|
|
154
|
-
│
|
|
155
|
-
▼
|
|
156
|
-
┌─────────────────────────────────────────────────────────────────┐
|
|
157
|
-
│ 2. SLIDE GENERATION │
|
|
158
|
-
│ • Select appropriate slide types based on content │
|
|
159
|
-
│ • Apply mode constraints (keynote: 6-25 words, business: 40-80)│
|
|
160
|
-
│ • Structure narrative flow with proper pacing │
|
|
161
|
-
│ • Add section dividers, transitions, and closing │
|
|
162
|
-
└─────────────────────────────────────────────────────────────────┘
|
|
163
|
-
│
|
|
164
|
-
▼
|
|
165
|
-
┌─────────────────────────────────────────────────────────────────┐
|
|
166
|
-
│ 3. OUTPUT GENERATION │
|
|
167
|
-
│ • HTML: Reveal.js with animations, Chart.js, Mermaid │
|
|
168
|
-
│ • PPTX: PptxGenJS with proper positioning and styling │
|
|
169
|
-
│ • Apply theme colors, typography, and visual hierarchy │
|
|
170
|
-
└─────────────────────────────────────────────────────────────────┘
|
|
171
|
-
│
|
|
172
|
-
▼
|
|
173
|
-
┌─────────────────────────────────────────────────────────────────┐
|
|
174
|
-
│ 4. QA VALIDATION │
|
|
175
|
-
│ • Screenshot each slide with Playwright │
|
|
176
|
-
│ • Calculate whitespace percentage (target: 35%+ keynote) │
|
|
177
|
-
│ • Measure layout balance (center of mass analysis) │
|
|
178
|
-
│ • Check contrast ratios (WCAG 4.5:1 minimum) │
|
|
179
|
-
│ • Validate expert principle compliance │
|
|
180
|
-
│ • Generate 0-100 score with detailed breakdown │
|
|
181
|
-
└─────────────────────────────────────────────────────────────────┘
|
|
182
|
-
│
|
|
183
|
-
▼
|
|
184
|
-
┌─────────────────────────────────────────────────────────────────┐
|
|
185
|
-
│ 5. THRESHOLD ENFORCEMENT │
|
|
186
|
-
│ • Score >= 95: ✅ Return presentation │
|
|
187
|
-
│ • Score < 95: ❌ Throw QAFailureError with improvement list │
|
|
188
|
-
└─────────────────────────────────────────────────────────────────┘
|
|
189
|
-
```
|
|
83
|
+
## What You Actually Get
|
|
190
84
|
|
|
191
|
-
###
|
|
85
|
+
### Two Output Formats
|
|
192
86
|
|
|
193
|
-
|
|
87
|
+
**HTML Presentations (Reveal.js)**
|
|
194
88
|
|
|
195
|
-
-
|
|
196
|
-
- **Framework Selector**: Automatically chooses the best framework for your audience
|
|
197
|
-
- **Slide Type Definitions**: 20+ slide types with constraints and templates
|
|
198
|
-
- **QA Scoring Rubric**: Detailed validation rules with point values
|
|
199
|
-
- **Mode Configurations**: Keynote vs Business rules and limits
|
|
89
|
+
Modern, web-native slides that run in any browser:
|
|
200
90
|
|
|
201
|
-
|
|
91
|
+
- Share via URL — just send a link
|
|
92
|
+
- Works on any device — desktop, tablet, phone
|
|
93
|
+
- Animations and transitions built-in
|
|
94
|
+
- Speaker notes with `S` key
|
|
95
|
+
- Fullscreen with `F` key
|
|
96
|
+
- Looks like a polished online version of PowerPoint
|
|
202
97
|
|
|
203
|
-
|
|
98
|
+
*Best for: Tech audiences, conferences, product demos, anything you want to share online*
|
|
204
99
|
|
|
205
|
-
|
|
100
|
+
**PowerPoint (PPTX)**
|
|
206
101
|
|
|
207
|
-
|
|
102
|
+
Traditional format that opens in Microsoft PowerPoint:
|
|
208
103
|
|
|
209
|
-
|
|
104
|
+
- Edit further if needed
|
|
105
|
+
- Send to clients who expect PPTX
|
|
106
|
+
- Print to PDF for handouts
|
|
107
|
+
- Works offline
|
|
210
108
|
|
|
211
|
-
|
|
212
|
-
|------------|-------|
|
|
213
|
-
| Words per slide | 6-25 maximum |
|
|
214
|
-
| Whitespace | 35%+ of slide area |
|
|
215
|
-
| Ideas per slide | Exactly 1 |
|
|
216
|
-
| Bullet points | Avoided (use single statements) |
|
|
217
|
-
| Reading time | < 3 seconds per slide |
|
|
109
|
+
*Best for: Board decks, client deliverables, corporate environments*
|
|
218
110
|
|
|
219
|
-
|
|
111
|
+
### Two Presentation Modes
|
|
220
112
|
|
|
221
|
-
|
|
113
|
+
**Keynote Mode** — For inspiring and persuading
|
|
222
114
|
|
|
223
|
-
|
|
115
|
+
- 6-15 words per slide (like Steve Jobs)
|
|
116
|
+
- 40%+ whitespace
|
|
117
|
+
- One idea per slide
|
|
118
|
+
- Emotional narrative structure
|
|
119
|
+
- Big visuals, minimal text
|
|
224
120
|
|
|
225
|
-
|
|
226
|
-
|------------|-------|
|
|
227
|
-
| Words per slide | 40-80 |
|
|
228
|
-
| Whitespace | 25%+ of slide area |
|
|
229
|
-
| Ideas per slide | 1-2 maximum |
|
|
230
|
-
| Bullet points | Up to 5 per slide |
|
|
231
|
-
| Data density | Medium to high |
|
|
121
|
+
*Use for: Product launches, investor pitches, conference talks, TED-style presentations*
|
|
232
122
|
|
|
233
|
-
**
|
|
123
|
+
**Business Mode** — For informing and documenting
|
|
234
124
|
|
|
235
|
-
|
|
125
|
+
- 40-80 words per slide
|
|
126
|
+
- Action titles (full sentences that state conclusions)
|
|
127
|
+
- Data with callouts
|
|
128
|
+
- Structured with Pyramid Principle
|
|
129
|
+
- Charts, tables, metrics grids
|
|
236
130
|
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
### Universal Slides (Both Modes)
|
|
240
|
-
|
|
241
|
-
| Type | Description | Use Case |
|
|
242
|
-
|------|-------------|----------|
|
|
243
|
-
| `title` | Opening slide with title and subtitle | Always first |
|
|
244
|
-
| `section-divider` | Section break with dark background | Between major sections |
|
|
245
|
-
| `quote` | Blockquote with attribution | Expert quotes, testimonials |
|
|
246
|
-
| `big-number` | Large statistic with context | Dramatic data points |
|
|
247
|
-
| `cta` | Call to action | Near the end |
|
|
248
|
-
| `thank-you` | Closing slide | Always last |
|
|
249
|
-
|
|
250
|
-
### Keynote-Specific Slides
|
|
251
|
-
|
|
252
|
-
| Type | Description | Use Case |
|
|
253
|
-
|------|-------------|----------|
|
|
254
|
-
| `big-idea` | Single powerful statement, large text | Core message delivery |
|
|
255
|
-
| `single-statement` | One sentence, centered | Key points |
|
|
256
|
-
| `full-image` | Full-bleed image with text overlay | Emotional impact |
|
|
257
|
-
|
|
258
|
-
### Business-Specific Slides
|
|
259
|
-
|
|
260
|
-
| Type | Description | Use Case |
|
|
261
|
-
|------|-------------|----------|
|
|
262
|
-
| `agenda` | Numbered list of topics | After title slide |
|
|
263
|
-
| `bullet-points` | Title with bullet list | Detailed information |
|
|
264
|
-
| `two-column` | Split layout (text + image/data) | Comparison, illustration |
|
|
265
|
-
| `three-column` | Three equal columns | Feature comparison |
|
|
266
|
-
| `comparison` | Side-by-side with divider | Before/after, pros/cons |
|
|
267
|
-
| `timeline` | Chronological events | History, roadmap |
|
|
268
|
-
| `process` | Step-by-step flow with arrows | Workflows, procedures |
|
|
269
|
-
| `metrics-grid` | KPI dashboard layout | Performance data |
|
|
270
|
-
| `screenshot` | Product screenshot with caption | Demo, walkthrough |
|
|
271
|
-
| `screenshot-left` | Screenshot on left, text on right | Feature explanation |
|
|
272
|
-
| `screenshot-right` | Text on left, screenshot on right | Feature explanation |
|
|
273
|
-
| `social-proof` | Customer testimonials | Trust building |
|
|
274
|
-
| `case-study` | Challenge/Solution/Results | Customer success |
|
|
275
|
-
| `pricing` | Pricing table | Sales presentations |
|
|
276
|
-
| `team` | Team member grid | About us |
|
|
277
|
-
| `features` | Feature list with icons | Product overview |
|
|
131
|
+
*Use for: Board meetings, strategy reviews, consulting deliverables, quarterly reports*
|
|
278
132
|
|
|
279
133
|
---
|
|
280
134
|
|
|
281
|
-
##
|
|
135
|
+
## Installation
|
|
282
136
|
|
|
283
|
-
```
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
| 'light-corporate' // Traditional business
|
|
287
|
-
| 'modern-tech' // Contemporary tech look
|
|
288
|
-
| 'minimal' // Maximum whitespace, B&W
|
|
289
|
-
| 'warm' // Earthy, approachable
|
|
290
|
-
| 'creative'; // Bold, artistic
|
|
137
|
+
```bash
|
|
138
|
+
npm install claude-presentation-master
|
|
139
|
+
npx playwright install chromium
|
|
291
140
|
```
|
|
292
141
|
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
| Theme | Primary | Accent | Best For |
|
|
296
|
-
|-------|---------|--------|----------|
|
|
297
|
-
| `default` | Dark navy | Coral red | General use |
|
|
298
|
-
| `light-corporate` | Slate blue | Ocean blue | Enterprise, finance |
|
|
299
|
-
| `modern-tech` | Deep navy | Electric pink | Startups, tech |
|
|
300
|
-
| `minimal` | Pure black | Black | Design, luxury |
|
|
301
|
-
| `warm` | Brown | Orange | Food, hospitality |
|
|
302
|
-
| `creative` | Purple | Pink | Marketing, design |
|
|
142
|
+
That's it. You're ready.
|
|
303
143
|
|
|
304
144
|
---
|
|
305
145
|
|
|
306
|
-
##
|
|
307
|
-
|
|
308
|
-
Every presentation is validated against a 100-point rubric:
|
|
309
|
-
|
|
310
|
-
### Score Breakdown
|
|
311
|
-
|
|
312
|
-
| Category | Weight | What's Checked |
|
|
313
|
-
|----------|--------|----------------|
|
|
314
|
-
| **Visual Quality** | 35% | Whitespace %, layout balance, contrast ratio, font count, color count |
|
|
315
|
-
| **Content Quality** | 30% | Word limits, action titles, glance test, signal-to-noise, one idea rule |
|
|
316
|
-
| **Expert Compliance** | 25% | Duarte, Reynolds, Gallo, Anderson principles |
|
|
317
|
-
| **Accessibility** | 10% | WCAG level, contrast issues, font sizes, color-blind safety |
|
|
318
|
-
|
|
319
|
-
### Grading Scale
|
|
146
|
+
## Quick Start
|
|
320
147
|
|
|
321
|
-
|
|
322
|
-
|-------|-------|--------|
|
|
323
|
-
| 95-100 | A+ | ✅ Excellent - Ready to present |
|
|
324
|
-
| 90-94 | A | ⚠️ Good - Minor improvements suggested |
|
|
325
|
-
| 85-89 | A- | ⚠️ Acceptable - Several issues to address |
|
|
326
|
-
| 80-84 | B+ | ❌ Below standard - Significant issues |
|
|
327
|
-
| < 80 | B or lower | ❌ Fails - Major redesign needed |
|
|
148
|
+
### From the Command Line
|
|
328
149
|
|
|
329
|
-
|
|
150
|
+
```bash
|
|
151
|
+
# Turn your markdown notes into a keynote-style HTML presentation
|
|
152
|
+
cpm generate project-notes.md --mode keynote --format html
|
|
330
153
|
|
|
331
|
-
|
|
154
|
+
# Create a consulting-style PowerPoint deck
|
|
155
|
+
cpm generate strategy.md --mode business --format pptx
|
|
332
156
|
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
const result = await generate(config);
|
|
336
|
-
} catch (error) {
|
|
337
|
-
if (error instanceof QAFailureError) {
|
|
338
|
-
console.log(`Score: ${error.score}/100`);
|
|
339
|
-
console.log(`Threshold: ${error.threshold}`);
|
|
340
|
-
console.log('Issues to fix:');
|
|
341
|
-
error.getIssues().forEach(issue => console.log(` - ${issue}`));
|
|
342
|
-
}
|
|
343
|
-
}
|
|
157
|
+
# Generate both formats at once
|
|
158
|
+
cpm generate quarterly-review.md --mode business --format html,pptx
|
|
344
159
|
```
|
|
345
160
|
|
|
346
|
-
|
|
161
|
+
### From Your Code
|
|
347
162
|
|
|
348
163
|
```typescript
|
|
349
|
-
|
|
350
|
-
...config,
|
|
351
|
-
qaThreshold: 80 // Accept lower quality (NOT RECOMMENDED)
|
|
352
|
-
});
|
|
353
|
-
```
|
|
354
|
-
|
|
355
|
-
---
|
|
356
|
-
|
|
357
|
-
## Media Providers
|
|
358
|
-
|
|
359
|
-
All media features work **without API keys**.
|
|
360
|
-
|
|
361
|
-
### Images
|
|
164
|
+
import { generate } from 'claude-presentation-master';
|
|
362
165
|
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
// Default: Uses placeholder images (picsum.photos)
|
|
367
|
-
const provider = createDefaultImageProvider();
|
|
368
|
-
|
|
369
|
-
// With local images
|
|
370
|
-
const provider = createDefaultImageProvider({
|
|
371
|
-
localImages: {
|
|
372
|
-
'team-photo': './images/team.jpg',
|
|
373
|
-
'product-screenshot': './images/product.png',
|
|
374
|
-
'logo': './images/logo.svg'
|
|
375
|
-
}
|
|
376
|
-
});
|
|
166
|
+
const result = await generate({
|
|
167
|
+
content: `
|
|
168
|
+
# Q4 Strategy Update
|
|
377
169
|
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
unsplashKey: process.env.UNSPLASH_ACCESS_KEY // Optional
|
|
381
|
-
});
|
|
382
|
-
```
|
|
170
|
+
## Where We Are
|
|
171
|
+
Revenue up 23% YoY. Market share down 2 points.
|
|
383
172
|
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
3. Unsplash Source (no key needed)
|
|
388
|
-
4. Placeholder (always works)
|
|
173
|
+
## The Challenge
|
|
174
|
+
Three new competitors launched in Q3.
|
|
175
|
+
Customer acquisition costs up 40%.
|
|
389
176
|
|
|
390
|
-
|
|
177
|
+
## What We're Doing
|
|
178
|
+
1. Launch enterprise tier in Q2
|
|
179
|
+
2. Expand into adjacent markets
|
|
180
|
+
3. Shift to product-led growth
|
|
391
181
|
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
type: 'bar',
|
|
400
|
-
data: {
|
|
401
|
-
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
|
|
402
|
-
datasets: [{
|
|
403
|
-
label: 'Revenue ($M)',
|
|
404
|
-
data: [10, 15, 22, 31]
|
|
405
|
-
}]
|
|
406
|
-
},
|
|
407
|
-
title: 'Quarterly Revenue Growth',
|
|
408
|
-
palette: 'professional' // 'default' | 'professional' | 'vibrant' | 'monochrome'
|
|
182
|
+
## Expected Result
|
|
183
|
+
Market share leadership within 18 months.
|
|
184
|
+
`,
|
|
185
|
+
contentType: 'markdown',
|
|
186
|
+
mode: 'business',
|
|
187
|
+
format: ['html', 'pptx'],
|
|
188
|
+
title: 'Q4 Strategy Update'
|
|
409
189
|
});
|
|
410
190
|
|
|
411
|
-
//
|
|
412
|
-
//
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
**Supported Chart Types:**
|
|
416
|
-
- `bar` - Bar chart
|
|
417
|
-
- `line` - Line chart
|
|
418
|
-
- `pie` - Pie chart
|
|
419
|
-
- `doughnut` - Doughnut chart
|
|
420
|
-
- `radar` - Radar chart
|
|
421
|
-
- `polarArea` - Polar area chart
|
|
422
|
-
- `scatter` - Scatter plot
|
|
423
|
-
- `bubble` - Bubble chart
|
|
424
|
-
|
|
425
|
-
### Diagrams (Mermaid)
|
|
426
|
-
|
|
427
|
-
```typescript
|
|
428
|
-
const chartProvider = createDefaultChartProvider();
|
|
429
|
-
|
|
430
|
-
// Generate flowchart
|
|
431
|
-
const flowchart = chartProvider.generateFlowchart([
|
|
432
|
-
{ id: 'A', label: 'Start', next: ['B'] },
|
|
433
|
-
{ id: 'B', label: 'Process', next: ['C', 'D'] },
|
|
434
|
-
{ id: 'C', label: 'Option 1', next: ['E'] },
|
|
435
|
-
{ id: 'D', label: 'Option 2', next: ['E'] },
|
|
436
|
-
{ id: 'E', label: 'End' }
|
|
437
|
-
]);
|
|
438
|
-
|
|
439
|
-
// Generate timeline
|
|
440
|
-
const timeline = chartProvider.generateTimeline([
|
|
441
|
-
{ date: '2020', title: 'Company Founded' },
|
|
442
|
-
{ date: '2021', title: 'Series A' },
|
|
443
|
-
{ date: '2022', title: 'Product Launch' },
|
|
444
|
-
{ date: '2023', title: '1M Users' }
|
|
445
|
-
]);
|
|
191
|
+
// result.outputs.html — Complete HTML presentation
|
|
192
|
+
// result.outputs.pptx — PowerPoint file buffer
|
|
193
|
+
// result.score — Quality score (must be 95+ to pass)
|
|
446
194
|
```
|
|
447
195
|
|
|
448
196
|
---
|
|
449
197
|
|
|
450
|
-
##
|
|
198
|
+
## The Knowledge Base
|
|
451
199
|
|
|
452
|
-
|
|
200
|
+
This isn't a template library. It's a **complete expert system** for presentations.
|
|
453
201
|
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
```typescript
|
|
457
|
-
async function generate(config: PresentationConfig): Promise<PresentationResult>
|
|
458
|
-
```
|
|
202
|
+
### What's Encoded
|
|
459
203
|
|
|
460
|
-
**
|
|
204
|
+
**From McKinsey, BCG, Bain:**
|
|
205
|
+
- Pyramid Principle — Lead with the answer
|
|
206
|
+
- SCQA Framework — Situation → Complication → Question → Answer
|
|
207
|
+
- Action Titles — "Revenue grew 23%" not "Revenue Analysis"
|
|
208
|
+
- One Message Per Slide — Every slide has exactly one job
|
|
209
|
+
- Chart Callouts — Always tell the audience what to see
|
|
461
210
|
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
mode: 'keynote' | 'business';
|
|
468
|
-
format: ('html' | 'pptx')[];
|
|
469
|
-
title: string;
|
|
470
|
-
|
|
471
|
-
// Optional
|
|
472
|
-
theme?: ThemeName; // Default: 'default'
|
|
473
|
-
author?: string;
|
|
474
|
-
subject?: string;
|
|
475
|
-
qaThreshold?: number; // Default: 95
|
|
476
|
-
skipQA?: boolean; // Default: false (NOT RECOMMENDED)
|
|
477
|
-
minify?: boolean; // Minify HTML output
|
|
478
|
-
customCSS?: string; // Additional CSS
|
|
479
|
-
customTemplates?: Record<string, string>; // Handlebars overrides
|
|
480
|
-
}
|
|
481
|
-
```
|
|
211
|
+
**From Nancy Duarte (Slide:ology, Resonate):**
|
|
212
|
+
- Sparkline Structure — Alternate between "what is" and "what could be"
|
|
213
|
+
- STAR Moments — Something They'll Always Remember
|
|
214
|
+
- Glance Test — Understand it in 3 seconds or less
|
|
215
|
+
- Signal-to-Noise — Maximize meaning, eliminate clutter
|
|
482
216
|
|
|
483
|
-
**
|
|
217
|
+
**From Garr Reynolds (Presentation Zen):**
|
|
218
|
+
- Simplicity — When in doubt, leave it out
|
|
219
|
+
- Restraint — Resist the urge to add
|
|
220
|
+
- Visual over Verbal — Show, don't tell
|
|
484
221
|
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
pptx?: Buffer; // PowerPoint file
|
|
490
|
-
};
|
|
491
|
-
qaResults: QAResults; // Detailed QA breakdown
|
|
492
|
-
score: number; // 0-100 quality score
|
|
493
|
-
metadata: {
|
|
494
|
-
title: string;
|
|
495
|
-
author: string;
|
|
496
|
-
generatedAt: string;
|
|
497
|
-
mode: 'keynote' | 'business';
|
|
498
|
-
slideCount: number;
|
|
499
|
-
wordCount: number;
|
|
500
|
-
avgWordsPerSlide: number;
|
|
501
|
-
estimatedDuration: number; // Minutes
|
|
502
|
-
frameworks: string[]; // Applied expert frameworks
|
|
503
|
-
};
|
|
504
|
-
}
|
|
505
|
-
```
|
|
222
|
+
**From Carmine Gallo (Talk Like TED):**
|
|
223
|
+
- Rule of Three — Human memory works in threes
|
|
224
|
+
- 18-Minute Rule — Optimal presentation length
|
|
225
|
+
- Emotional Connection — Touch hearts before minds
|
|
506
226
|
|
|
507
|
-
|
|
227
|
+
**From Edward Tufte:**
|
|
228
|
+
- Data-Ink Ratio — Every drop of ink should represent data
|
|
229
|
+
- Chartjunk Elimination — No 3D effects, no decorative gridlines
|
|
230
|
+
- Graphical Integrity — Never distort data for visual effect
|
|
508
231
|
|
|
509
|
-
|
|
232
|
+
**From Barbara Minto (The Pyramid Principle):**
|
|
233
|
+
- Top-Down Communication — Conclusion first, support second
|
|
234
|
+
- MECE Grouping — Mutually Exclusive, Collectively Exhaustive
|
|
235
|
+
- Vertical Logic — Each level supports the one above
|
|
510
236
|
|
|
511
|
-
|
|
512
|
-
async function validate(
|
|
513
|
-
presentation: string | Buffer,
|
|
514
|
-
options?: {
|
|
515
|
-
mode?: 'keynote' | 'business';
|
|
516
|
-
threshold?: number;
|
|
517
|
-
strictMode?: boolean;
|
|
518
|
-
}
|
|
519
|
-
): Promise<QAResults & { score: number }>
|
|
520
|
-
```
|
|
237
|
+
### Design System
|
|
521
238
|
|
|
522
|
-
|
|
239
|
+
Complete color palettes tested for accessibility:
|
|
240
|
+
- **Consulting Classic** — Cream background, navy text (McKinsey/BCG look)
|
|
241
|
+
- **Executive Professional** — Warm gray, sophisticated
|
|
242
|
+
- **Modern Tech** — Light with teal accents
|
|
243
|
+
- **Dark Executive** — Dark mode for screens
|
|
523
244
|
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
}
|
|
529
|
-
|
|
530
|
-
// Thrown when QA score is below threshold
|
|
531
|
-
class QAFailureError extends Error {
|
|
532
|
-
score: number;
|
|
533
|
-
threshold: number;
|
|
534
|
-
qaResults: QAResults;
|
|
535
|
-
|
|
536
|
-
getIssues(): string[]; // List of issues to fix
|
|
537
|
-
}
|
|
538
|
-
```
|
|
245
|
+
Typography rules:
|
|
246
|
+
- Keynote: 54-72px titles, max 2 fonts
|
|
247
|
+
- Business: 18-22px action titles, 11-14px body
|
|
248
|
+
- Accessibility: 18pt minimum, 30pt+ for projection
|
|
539
249
|
|
|
540
250
|
---
|
|
541
251
|
|
|
542
|
-
##
|
|
252
|
+
## Quality Validation
|
|
543
253
|
|
|
544
|
-
|
|
545
|
-
Claude Presentation Master v1.0.0
|
|
546
|
-
|
|
547
|
-
USAGE:
|
|
548
|
-
cpm <command> [options]
|
|
549
|
-
|
|
550
|
-
COMMANDS:
|
|
551
|
-
generate <input> Generate presentation from input file
|
|
552
|
-
validate <file> Validate an existing HTML presentation
|
|
553
|
-
info Show package information
|
|
554
|
-
|
|
555
|
-
OPTIONS:
|
|
556
|
-
-o, --output <dir> Output directory (default: ./output)
|
|
557
|
-
-m, --mode <mode> keynote or business (default: keynote)
|
|
558
|
-
-f, --format <fmt> html, pptx, or html,pptx (default: html)
|
|
559
|
-
-t, --theme <name> Theme name
|
|
560
|
-
--title <title> Presentation title
|
|
561
|
-
--author <name> Author name
|
|
562
|
-
--threshold <num> QA threshold 0-100 (default: 95)
|
|
563
|
-
--skip-qa Skip QA (NOT recommended)
|
|
564
|
-
-h, --help Show help
|
|
565
|
-
-v, --version Show version
|
|
566
|
-
|
|
567
|
-
EXAMPLES:
|
|
568
|
-
cpm generate deck.md -m keynote -f html,pptx
|
|
569
|
-
cpm generate report.yaml -m business -o ./slides
|
|
570
|
-
cpm validate presentation.html --threshold 90
|
|
571
|
-
```
|
|
572
|
-
|
|
573
|
-
---
|
|
254
|
+
Every presentation passes through real visual QA using Playwright:
|
|
574
255
|
|
|
575
|
-
|
|
256
|
+
| Check | What's Measured |
|
|
257
|
+
|-------|-----------------|
|
|
258
|
+
| **Whitespace** | Percentage of empty space (40%+ for keynote, 25%+ for business) |
|
|
259
|
+
| **Balance** | Center of mass — is the layout visually balanced? |
|
|
260
|
+
| **Contrast** | WCAG 4.5:1 minimum for text readability |
|
|
261
|
+
| **Word Count** | Enforced limits per slide type |
|
|
262
|
+
| **Font Count** | Maximum 2 font families |
|
|
263
|
+
| **Color Count** | Maximum 5 colors |
|
|
576
264
|
|
|
577
|
-
|
|
265
|
+
**Presentations must score 95/100 or higher.** If they don't, you get a specific list of what to fix.
|
|
578
266
|
|
|
579
|
-
|
|
580
|
-
const result = await generate({
|
|
581
|
-
content: `
|
|
582
|
-
# Acme AI - Revolutionizing Customer Support
|
|
267
|
+
---
|
|
583
268
|
|
|
584
|
-
## The
|
|
585
|
-
Companies spend $400 billion annually on customer support.
|
|
586
|
-
Yet 67% of customers prefer self-service over speaking to a representative.
|
|
269
|
+
## The Difference
|
|
587
270
|
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
271
|
+
| Without This Library | With This Library |
|
|
272
|
+
|---------------------|-------------------|
|
|
273
|
+
| Ask Claude for slides, get bullet point soup | Structured presentation following expert frameworks |
|
|
274
|
+
| Manually fix formatting for hours | Production-ready output in seconds |
|
|
275
|
+
| Hope it looks professional | 95/100 quality bar enforced |
|
|
276
|
+
| Generic templates | 6,300+ lines of encoded expertise |
|
|
277
|
+
| Text only | HTML or PowerPoint output |
|
|
278
|
+
| No validation | Real visual QA with screenshots |
|
|
591
279
|
|
|
592
|
-
|
|
593
|
-
- 50+ enterprise customers
|
|
594
|
-
- $5M ARR (300% YoY growth)
|
|
595
|
-
- 95% customer retention
|
|
280
|
+
---
|
|
596
281
|
|
|
597
|
-
##
|
|
598
|
-
Former leaders from Google, Amazon, and Salesforce
|
|
599
|
-
with 50+ years combined experience in AI and customer success.
|
|
282
|
+
## Use Cases
|
|
600
283
|
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
and launch our enterprise platform.
|
|
604
|
-
`,
|
|
605
|
-
contentType: 'markdown',
|
|
606
|
-
mode: 'keynote',
|
|
607
|
-
format: ['html', 'pptx'],
|
|
608
|
-
title: 'Acme AI - Series B',
|
|
609
|
-
theme: 'modern-tech'
|
|
610
|
-
});
|
|
611
|
-
```
|
|
284
|
+
**You're building a product strategy in Claude**
|
|
285
|
+
→ Generate an investor pitch deck in keynote mode
|
|
612
286
|
|
|
613
|
-
|
|
287
|
+
**You've analyzed Q4 performance**
|
|
288
|
+
→ Create a board presentation in business mode
|
|
614
289
|
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
content: `
|
|
618
|
-
# Q4 2024 Business Review
|
|
619
|
-
|
|
620
|
-
## Executive Summary
|
|
621
|
-
Q4 exceeded targets across all key metrics.
|
|
622
|
-
Revenue grew 25% QoQ while maintaining profitability.
|
|
623
|
-
|
|
624
|
-
## Financial Performance
|
|
625
|
-
- Revenue: $12.5M (+25% QoQ)
|
|
626
|
-
- Gross Margin: 72% (+3pp)
|
|
627
|
-
- Operating Expenses: $8.2M (-5%)
|
|
628
|
-
- Net Income: $1.8M (first profitable quarter)
|
|
629
|
-
|
|
630
|
-
## Customer Metrics
|
|
631
|
-
- New Customers: 127 (+40%)
|
|
632
|
-
- Churn Rate: 2.1% (-0.5pp)
|
|
633
|
-
- NPS Score: 72 (+8 points)
|
|
634
|
-
- Average Contract Value: $45,000 (+15%)
|
|
635
|
-
|
|
636
|
-
## Product Updates
|
|
637
|
-
1. Launched AI Assistant v2.0
|
|
638
|
-
2. Released mobile app for iOS and Android
|
|
639
|
-
3. Added 15 new integrations
|
|
640
|
-
4. Improved API response time by 40%
|
|
641
|
-
|
|
642
|
-
## Challenges
|
|
643
|
-
- Hiring senior engineers remains difficult
|
|
644
|
-
- Supply chain issues delayed hardware launch
|
|
645
|
-
- Competitor launched similar feature
|
|
646
|
-
|
|
647
|
-
## Q1 2025 Priorities
|
|
648
|
-
1. Launch enterprise tier
|
|
649
|
-
2. Expand sales team by 5 reps
|
|
650
|
-
3. Open European data center
|
|
651
|
-
4. Achieve SOC 2 Type II certification
|
|
652
|
-
`,
|
|
653
|
-
contentType: 'markdown',
|
|
654
|
-
mode: 'business',
|
|
655
|
-
format: ['html', 'pptx'],
|
|
656
|
-
title: 'Q4 2024 Business Review',
|
|
657
|
-
theme: 'light-corporate'
|
|
658
|
-
});
|
|
659
|
-
```
|
|
290
|
+
**You're planning a product launch**
|
|
291
|
+
→ Build a TED-style keynote for the all-hands
|
|
660
292
|
|
|
661
|
-
|
|
293
|
+
**You've done competitive research**
|
|
294
|
+
→ Turn it into a consulting-style strategy deck
|
|
662
295
|
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
content: myContent,
|
|
666
|
-
contentType: 'markdown',
|
|
667
|
-
mode: 'keynote',
|
|
668
|
-
format: ['html'],
|
|
669
|
-
title: 'Custom Presentation',
|
|
670
|
-
customTemplates: {
|
|
671
|
-
'title': `
|
|
672
|
-
<section class="slide slide-title custom-title">
|
|
673
|
-
<div class="slide-content">
|
|
674
|
-
<div class="logo">YOUR LOGO</div>
|
|
675
|
-
<h1>{{title}}</h1>
|
|
676
|
-
<p class="subtitle">{{subtitle}}</p>
|
|
677
|
-
<p class="date">{{date}}</p>
|
|
678
|
-
</div>
|
|
679
|
-
</section>
|
|
680
|
-
`
|
|
681
|
-
},
|
|
682
|
-
customCSS: `
|
|
683
|
-
.custom-title {
|
|
684
|
-
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
685
|
-
}
|
|
686
|
-
.custom-title h1 {
|
|
687
|
-
color: white;
|
|
688
|
-
}
|
|
689
|
-
`
|
|
690
|
-
});
|
|
691
|
-
```
|
|
296
|
+
**You have meeting notes that need to become a presentation**
|
|
297
|
+
→ One command, done
|
|
692
298
|
|
|
693
299
|
---
|
|
694
300
|
|
|
695
|
-
##
|
|
696
|
-
|
|
697
|
-
### "QA score below threshold"
|
|
301
|
+
## Themes
|
|
698
302
|
|
|
699
|
-
|
|
303
|
+
| Theme | Look | Best For |
|
|
304
|
+
|-------|------|----------|
|
|
305
|
+
| `default` | Clean, professional | General use |
|
|
306
|
+
| `consulting-classic` | Cream, navy | McKinsey/BCG style |
|
|
307
|
+
| `modern-tech` | Light, teal accents | Startups, tech |
|
|
308
|
+
| `minimal` | Maximum whitespace | Design-focused |
|
|
309
|
+
| `dark-executive` | Dark mode | Screen presentations |
|
|
700
310
|
|
|
701
|
-
|
|
702
|
-
catch (error) {
|
|
703
|
-
if (error instanceof QAFailureError) {
|
|
704
|
-
console.log('Issues to fix:');
|
|
705
|
-
error.getIssues().forEach(issue => {
|
|
706
|
-
console.log(` - ${issue}`);
|
|
707
|
-
});
|
|
708
|
-
}
|
|
709
|
-
}
|
|
710
|
-
```
|
|
711
|
-
|
|
712
|
-
Common fixes:
|
|
713
|
-
- Reduce word count per slide (keynote: max 25, business: max 80)
|
|
714
|
-
- Increase whitespace (remove clutter)
|
|
715
|
-
- Ensure proper contrast (4.5:1 minimum)
|
|
716
|
-
- Use only 1-2 font families
|
|
717
|
-
- Limit colors to 5 or fewer
|
|
311
|
+
---
|
|
718
312
|
|
|
719
|
-
|
|
313
|
+
## Slide Types
|
|
720
314
|
|
|
721
|
-
|
|
315
|
+
**Keynote Mode:**
|
|
316
|
+
Big Idea • Single Statement • Full Image • Big Number • Quote
|
|
722
317
|
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
```
|
|
318
|
+
**Business Mode:**
|
|
319
|
+
Agenda • Bullet Points • Two Column • Three Column • Metrics Grid • Timeline • Process Flow • Comparison • Case Study • Pricing Table
|
|
726
320
|
|
|
727
|
-
|
|
321
|
+
---
|
|
728
322
|
|
|
729
|
-
|
|
323
|
+
## FAQ
|
|
730
324
|
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
```
|
|
325
|
+
**Does this require an API key?**
|
|
326
|
+
No. The knowledge base is bundled with the package. Works 100% offline.
|
|
734
327
|
|
|
735
|
-
|
|
328
|
+
**Can I edit the output?**
|
|
329
|
+
Yes. HTML is just HTML. PPTX opens in PowerPoint for further editing.
|
|
736
330
|
|
|
737
|
-
|
|
331
|
+
**What if I don't like the result?**
|
|
332
|
+
Adjust your input content or lower the quality threshold (not recommended).
|
|
738
333
|
|
|
739
|
-
|
|
334
|
+
**Does it work with Claude Code?**
|
|
335
|
+
Yes — that's exactly what it's designed for. Generate presentations from your project context.
|
|
740
336
|
|
|
741
337
|
---
|
|
742
338
|
|
|
743
339
|
## License
|
|
744
340
|
|
|
745
|
-
MIT
|
|
341
|
+
MIT — free to use, modify, and distribute.
|
|
746
342
|
|
|
747
343
|
---
|
|
748
344
|
|
|
749
345
|
## Author
|
|
750
346
|
|
|
751
|
-
**Stuart Kerr**
|
|
752
|
-
<stuart@isovision.ai>
|
|
753
|
-
[Isovision.ai](https://isovision.ai)
|
|
347
|
+
**Stuart Kerr** — [Isovision.ai](https://isovision.ai)
|
|
754
348
|
|
|
755
349
|
---
|
|
756
350
|
|
|
757
351
|
<div align="center">
|
|
758
352
|
|
|
759
|
-
**
|
|
353
|
+
**Stop fighting with slides. Start presenting.**
|
|
354
|
+
|
|
355
|
+
```bash
|
|
356
|
+
npm install claude-presentation-master
|
|
357
|
+
```
|
|
760
358
|
|
|
761
|
-
|
|
359
|
+
Built on methodologies from McKinsey • BCG • Bain • Nancy Duarte • Garr Reynolds
|
|
360
|
+
Carmine Gallo • Chris Anderson • Barbara Minto • Edward Tufte
|
|
762
361
|
|
|
763
362
|
</div>
|