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