HTML Presentation Builder

Slides

by nextlevelbuilder · MIT license · ★ 129,643 on GitHub · updated Sep 21

Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.

---
name: slides
description: Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
argument-hint: "[topic] [slide-count]"
metadata:
  author: claudekit
  version: "1.0.0"
---

# Slides

Strategic HTML presentation design with data visualization.

## When to Use

- Marketing presentations and pitch decks
- Data-driven slides with Chart.js
- Strategic slide design with layout patterns

Overview

Script paths in this skill and its references/ are relative to the directory that contains this SKILL.md, not to the project: scripts/<file> is this skill's own scripts/ folder, and ../<skill>/scripts/<file> is a sibling sub-skill installed alongside it. Build the full path from that directory (Claude Code reports it as the skill's base directory when the skill loads) and keep the working directory at the project root — the scripts read and write project files such as docs/brand-guidelines.md, assets/design-tokens.json or src/ relative to it.

Manual install (npx, ZIP)

Claude Codenpx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill slides -g -a claude-code

Claude Code (degit)npx degit nextlevelbuilder/ui-ux-pro-max-skill/cli/assets/skills/slides#main ~/.claude/skills/slides

Claude.ai / desktopZip the folder and upload it under Settings → Capabilities → Skills.

Codex, Cursor, other agentsPoint them at SKILL.md. The other files are plain text.

Connects with Agent Alley MCP · agentalley.io/mcp

Files included

SKILL.md1.7 KB

Read SKILL.md here

nextlevelbuilder/main1 file shown

SKILL.md1.7 KB

Browse every file on GitHub↗

SKILL.md

Show the full text45 lines

slides/SKILL.md45 lines · 1.7 KB

PreviewCode

Outline

RawView on GitHub

Slides

Strategic HTML presentation design with data visualization.

When to Use

Marketing presentations and pitch decks
Data-driven slides with Chart.js
Strategic slide design with layout patterns
Copywriting-optimized presentation content

Subcommands

Subcommand	Description	Reference
`create`	Create strategic presentation slides	`references/create.md`

Script Paths

Script paths in this skill and its references/ are relative to the directory that contains this SKILL.md, not to the project: scripts/<file> is this skill's own scripts/ folder, and ../<skill>/scripts/<file> is a sibling sub-skill installed alongside it. Build the full path from that directory (Claude Code reports it as the skill's base directory when the skill loads) and keep the working directory at the project root — the scripts read and write project files such as docs/brand-guidelines.md, assets/design-tokens.json or src/ relative to it.

References (Knowledge Base)

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`

Routing

Parse subcommand from $ARGUMENTS (first word)
Load corresponding references/{subcommand}.md
Execute with remaining arguments

1	---
2	name: slides
3	description: Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
4	argument-hint: "[topic] [slide-count]"
5	metadata:
6	author: claudekit
7	version: "1.0.0"
8	---
9
10	# Slides
11
12	Strategic HTML presentation design with data visualization.
13
14	## When to Use
15
16	- Marketing presentations and pitch decks
17	- Data-driven slides with Chart.js
18	- Strategic slide design with layout patterns
19	- Copywriting-optimized presentation content
20
21	## Subcommands
22
23	\| Subcommand \| Description \| Reference \|
24	\|------------\|-------------\|-----------\|
25	\| `create` \| Create strategic presentation slides \| `references/create.md` \|
26
27	## Script Paths
28
29	Script paths in this skill and its `references/` are relative to the directory that contains this SKILL.md, not to the project: `scripts/<file>` is this skill's own `scripts/` folder, and `../<skill>/scripts/<file>` is a sibling sub-skill installed alongside it. Build the full path from that directory (Claude Code reports it as the skill's base directory when the skill loads) and keep the working directory at the project root — the scripts read and write project files such as `docs/brand-guidelines.md`, `assets/design-tokens.json` or `src/` relative to it.
30
31	## References (Knowledge Base)
32
33	\| Topic \| File \|
34	\|-------\|------\|
35	\| Layout Patterns \| `references/layout-patterns.md` \|
36	\| HTML Template \| `references/html-template.md` \|
37	\| Copywriting Formulas \| `references/copywriting-formulas.md` \|
38	\| Slide Strategies \| `references/slide-strategies.md` \|
39
40	## Routing
41
42	1. Parse subcommand from `$ARGUMENTS` (first word)
43	2. Load corresponding `references/{subcommand}.md`
44	3. Execute with remaining arguments
45