1# Slides Reference
2 
3Strategic HTML presentation design with Chart.js data visualization, design tokens, responsive layouts, and copywriting formulas.
4 
5## Usage
6 
7Activate the `design` skill and specify slides task, e.g. "create a pitch deck".
8 
9## Knowledge Base
10 
11| Topic | File | Purpose |
12|-------|------|---------|
13| Creation Guide | `references/slides-create.md` | Step-by-step slide creation workflow |
14| Layout Patterns | `references/slides-layout-patterns.md` | Slide layout templates and grid systems |
15| HTML Template | `references/slides-html-template.md` | Base HTML structure for presentations |
16| Copywriting | `references/slides-copywriting-formulas.md` | AIDA, PAS, FAB for slide content |
17| Strategies | `references/slides-strategies.md` | Contextual strategies by presentation type |
18 
19## When to Use
20 
21- Marketing presentations and pitch decks
22- Data-driven slides with Chart.js visualizations
23- Strategic slide design with layout patterns
24- Copywriting-optimized presentation content
25- Investor decks, sales presentations, team updates
26 
27## Key Features
28 
29- **Chart.js Integration**: Bar, line, pie, doughnut, radar charts
30- **Design Tokens**: Consistent spacing, colors, typography
31- **Responsive**: Works on desktop and mobile
32- **Copywriting**: Built-in AIDA, PAS, FAB formulas
33- **Layout Patterns**: Hero, split, grid, comparison, timeline
34 
35## Workflow
36 
371. Parse presentation type from user request
382. Load `references/slides-create.md` for creation guide
393. Select layout patterns from `references/slides-layout-patterns.md`
404. Apply copywriting formulas from `references/slides-copywriting-formulas.md`
415. Use HTML template from `references/slides-html-template.md`
426. Apply strategy from `references/slides-strategies.md`
43