Slides Reference
Strategic HTML presentation design with Chart.js data visualization, design tokens, responsive layouts, and copywriting formulas.
Usage
Activate the design skill and specify slides task, e.g. "create a pitch deck".
Knowledge Base
| Topic | File | Purpose |
|---|---|---|
| Creation Guide | references/slides-create.md | Step-by-step slide creation workflow |
| Layout Patterns | references/slides-layout-patterns.md | Slide layout templates and grid systems |
| HTML Template | references/slides-html-template.md | Base HTML structure for presentations |
| Copywriting | references/slides-copywriting-formulas.md | AIDA, PAS, FAB for slide content |
| Strategies | references/slides-strategies.md | Contextual strategies by presentation type |
When to Use
- Marketing presentations and pitch decks
- Data-driven slides with Chart.js visualizations
- Strategic slide design with layout patterns
- Copywriting-optimized presentation content
- Investor decks, sales presentations, team updates
Key Features
- Chart.js Integration: Bar, line, pie, doughnut, radar charts
- Design Tokens: Consistent spacing, colors, typography
- Responsive: Works on desktop and mobile
- Copywriting: Built-in AIDA, PAS, FAB formulas
- Layout Patterns: Hero, split, grid, comparison, timeline
Workflow
- Parse presentation type from user request
- Load
references/slides-create.mdfor creation guide - Select layout patterns from
references/slides-layout-patterns.md - Apply copywriting formulas from
references/slides-copywriting-formulas.md - Use HTML template from
references/slides-html-template.md - Apply strategy from
references/slides-strategies.md