# 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

1. Parse presentation type from user request
2. Load `references/slides-create.md` for creation guide
3. Select layout patterns from `references/slides-layout-patterns.md`
4. Apply copywriting formulas from `references/slides-copywriting-formulas.md`
5. Use HTML template from `references/slides-html-template.md`
6. Apply strategy from `references/slides-strategies.md`