slides
nextlevelbuilder/ui-ux-pro-max-skill
Create strategic HTML presentations with Chart.js, design tokens, and data visualization.
What is slides?
A skill for building professional HTML-based presentations with integrated data visualization, responsive design, and copywriting optimization. Use it when you need to create marketing decks, pitch presentations, or data-driven slides with consistent branding and layout patterns.
- Generate strategic HTML presentations with Chart.js data visualization
- Apply design tokens and responsive layout patterns
- Optimize slide content using copywriting formulas
- Implement contextual slide strategies for different presentation types
- Create marketing presentations and pitch decks
- Build data-driven slides with visual hierarchy
How to install slides
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill slidesHow to use slides
- 1.Run the skill with a topic and desired slide count: `slides create [topic] [slide-count]`
- 2.Review the generated HTML presentation file in your project
- 3.Customize the design tokens in `assets/design-tokens.json` if needed
- 4.Update brand guidelines in `docs/brand-guidelines.md` to influence slide styling
- 5.Open the HTML file in a browser to preview and iterate
Use cases
- Creating a pitch deck with financial charts and investor-focused messaging
- Building a marketing presentation with brand-consistent design tokens and responsive layouts
- Generating a data analysis presentation with Chart.js visualizations and strategic slide ordering
- Designing a product launch deck with copywriting-optimized content and layout patterns
- Producing quarterly business review slides with data visualization and narrative flow
- Product managers creating pitch decks
- Marketing professionals building presentations
- Data analysts presenting findings
- Business development teams preparing investor materials
- UX/UI designers creating design system presentations
slides FAQ
The skill uses Chart.js for creating interactive charts and graphs. You can include bar charts, line graphs, pie charts, and other standard visualizations within your slides.
Yes. The skill uses design tokens and references your brand guidelines. Modify `assets/design-tokens.json` and `docs/brand-guidelines.md` to control colors, fonts, spacing, and overall presentation style.
The skill generates standalone HTML files that can be opened in any web browser. They are responsive and work on desktop and mobile devices.
The skill applies proven copywriting formulas to structure slide content for maximum impact, including headline optimization, benefit-driven messaging, and call-to-action placement.
Yes. The skill includes contextual slide strategies for marketing presentations, pitch decks, data reports, and other presentation types. Specify your topic and the skill adapts the strategy accordingly.
Full instructions (SKILL.md)
Source of truth, from nextlevelbuilder/ui-ux-pro-max-skill.
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
- 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
Related skills
More from nextlevelbuilder/ui-ux-pro-max-skill and the wider catalog.
ui-styling
Build accessible, beautiful UIs with shadcn/ui components, Tailwind CSS utilities, and canvas-based visual design.
ui-ux-pro-max
Searchable UI/UX design intelligence: 79 styles, 192 palettes, 74 font pairings, 119 guidelines, and stack-specific implementation.
brand
Manage brand voice, visual identity, messaging, and asset consistency across projects.
banner-design
Design multi-format banners for social, ads, web, and print with multiple art direction styles.
8-bit-orbit-video-template
Retro pixel-art video template with Hyperframes for multi-scene motion design and interactive preview.
ad-creative
Generate and iterate ad creative for paid social and search campaigns.