Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

slides · nextlevelbuilder — Claude Code skill: what it does, how to install

Builds strategic HTML presentations using Chart.js and design tokens. Useful for generating pitch decks and marketing slides directly from the agent.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill slides -a claude-code
Open on GitHub

What slides does

The skill builds HTML presentations with data visualizations powered by Chart.js. It structures content with responsive layouts, copywriting formulas, and slide strategies from its reference base.

Under the hood, routing uses the create subcommand. The skill consults reference documents for layout patterns and template structure. Scripts read project configuration files like docs/brand-guidelines.md and assets/design-tokens.json relative to your workspace root.

Install this skill if you prefer presentation decks as web pages styled with code. If your workflow requires standard PPTX files without browser charts, you can skip it.

What it helps with

  • Build interactive pitch decks as HTML slides
  • Render Chart.js data visualizations inside presentations
  • Apply copywriting formulas to marketing deck structures
  • Inject styles from assets/design-tokens.json into slide layouts

Example prompts for the agent

  • create pitch deck for investor meeting
  • Build a marketing presentation with Chart.js charts
  • Generate HTML slides using design tokens

How to install slides

1Skills CLI (Vercel)

npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill slides -a claude-code

2Manually: put the files in place

~/.claude/skills/slides/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/slides/

From the same set7

The whole set →
ui-ux-pro-max nextlevelbuilder Equips coding agents with a local catalog of 119 UX guidelines, 74 font pairings, and 192 product palettes. Useful when designing components or tuning accessibility. Claude Code CX Codex Cursor +1 413,800installs design-system claudekit This skill builds design tokens, component specs, and presentation slides. Use it when an interface and its slides need to follow one visual system. Claude Code CX Codex Cursor +1 42,200installs design claudekit Generates logos, brand identity assets, design tokens, Chart.js HTML slides, and multi-platform banners using Python scripts and AI providers. Claude Code CX Codex Cursor +1 40,800installs ui-styling claudekit A skill that helps your agent build accessible interfaces with shadcn/ui and Tailwind CSS: components, themes, dark mode, responsive layouts and canvas design. Claude Code CX Codex Cursor +1 40,200installs brand claudekit Keeps brand voice, visual rules and design tokens in one markdown file, then feeds them to your agent's prompts and to your CSS variables. Claude Code CX Codex Cursor +1 39,500installs banner-design claudekit Generates banners for social media, ads, and web hero sections using HTML/CSS. Useful when you need fast visual creative assets directly in your coding agent. Claude Code CX Codex Cursor +1 39,000installs

Other versions of slides

slides nexu-io A skill for creating and editing .pptx presentations with PptxGenJS. Ideal for sales decks, kickoff briefs, and design-system showcases. Claude Code CX Codex Cursor +1 2,800installs

Similar

frontend-ui-engineering addyosmani Enforces production standards for component architecture, WCAG 2.1 AA accessibility, and design systems. Stops AI models from defaulting to purple buttons, heavy shadows, and arbitrary spacing. Claude Code CX Codex Cursor +1 66,600installs api-and-interface-design addyosmani Guides API and module-boundary design with explicit contracts, validation, and consistent errors. Use it for REST, GraphQL, or public interfaces. Claude Code CX Codex Cursor +1 61,900installs mobile-native emilkowalski Strips the tells that give a web app away on a phone: sticky hover, tap highlight flash, the 100vh bug. Claude Code CX Codex Cursor +1 84,500installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. Claude Code 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. Claude Code 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. Claude Code 979,543installs

Questions about slides

How to install slides in Claude Code?

Run npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill slides -a claude-code in your terminal.

What does the slides skill do?

It generates responsive HTML presentations with Chart.js charts and design tokens. The output follows strategic slide patterns and copywriting formulas.

Which project files does slides depend on?

The skill scripts read configuration from docs/brand-guidelines.md and assets/design-tokens.json at your project root.

Source text

SKILL.md · MIT 
---
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

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

© claudekit · MIT · nextlevelbuilder/ui-ux-pro-max-skill

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor