Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
Strategic HTML presentation design with data visualization.
<args>$ARGUMENTS</args>
| Subcommand | Description | Reference |
|---|---|---|
create | Create strategic presentation slides | references/create.md |
| Topic | File |
|---|---|
| Layout Patterns | references/layout-patterns.md |
| HTML Template | references/html-template.md |
| Copywriting Formulas | references/copywriting-formulas.md |
| Slide Strategies | references/slide-strategies.md |
ALL slides MUST:
assets/design-tokens.css - single source of truthvar(--color-primary), var(--slide-bg), etc.<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
<canvas id="revenueChart"></canvas>
<script>
new Chart(document.getElementById('revenueChart'), {
type: 'line',
data: {
labels: ['Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
data: [5, 12, 28, 45],
borderColor: '#FF6B6B',
backgroundColor: 'rgba(255, 107, 107, 0.1)',
fill: true,
tension: 0.4
}]
}
});
</script>
/* CORRECT - uses token */