# 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`