slides
nextlevelbuilder/ui-ux-pro-max-skill
Create strategic HTML presentations with Chart.js, design tokens, and copywriting formulas.
What is slides?
A skill for generating data-driven HTML presentations with built-in support for Chart.js visualizations, responsive layouts, and strategic slide design patterns. Use it when you need to quickly build marketing decks, pitch presentations, or data-heavy slides with professional copywriting.
- Generate HTML presentations with Chart.js data visualization
- Apply design tokens and responsive layout patterns
- Optimize slide content using copywriting formulas
- Structure presentations with strategic slide strategies
- Create marketing and pitch deck templates
How to install slides
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ckm:slidesHow to use slides
- 1.Run the skill with a topic and desired slide count (e.g., 'slides create marketing-pitch 10')
- 2.Review the generated HTML presentation file
- 3.Customize the Chart.js data and copywriting as needed
- 4.Adjust design tokens and layout patterns via the HTML template
- 5.Export or deploy the presentation to your hosting platform
Use cases
- Building a pitch deck with financial charts and metrics
- Creating a marketing presentation with data visualizations
- Designing a product launch slide deck with strategic messaging
- Generating a quarterly business review presentation
- Building investor presentations with Chart.js graphs
- Product managers
- Marketing professionals
- Business development teams
- Founders and entrepreneurs
- Data analysts presenting insights
slides FAQ
Chart.js supports line, bar, pie, doughnut, radar, polar area, and scatter charts. Refer to the Chart.js documentation for full customization options.
Yes, the HTML template includes design token variables that you can modify to match your brand colors, fonts, and spacing.
Yes, the skill generates responsive HTML layouts that adapt to different screen sizes and devices.
Yes, the generated HTML is fully editable. You can add custom sections, modify copywriting, and integrate additional assets.
The skill includes formulas for headlines, value propositions, call-to-action statements, and narrative structures optimized for presentations.
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 |
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, and canvas-based visual design.
design
Unified design skill for brand identity, logos, UI systems, presentations, banners, and social media assets.
design-system
Three-layer token architecture, component specs, and brand-compliant slide generation for design systems.
slides
Create strategic HTML presentations with Chart.js, design tokens, and data visualization.
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.