1.7 KiB
1.7 KiB
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