Slides
- 11.5k installs
- 111k repo stars
- Updated July 27, 2026
- nextlevelbuilder/ui-ux-pro-max-skill
slides is an agent skill that creates strategic HTML presentations with Chart.js, design tokens, responsive layouts, and copywriting-optimized slide content.
About
The slides skill creates strategic HTML presentations with Chart.js data visualization, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies. Agents parse the first subcommand word from arguments, load the matching references file, and execute with remaining parameters. The create subcommand builds presentation slides using knowledge-base references for layout patterns, HTML templates, copywriting formulas, and slide strategies. Documented use cases include marketing presentations and pitch decks, data-driven slides with Chart.js, strategic slide design with layout patterns, and copywriting-optimized presentation content. The reference index lists layout-patterns.md, html-template.md, copywriting-formulas.md, and slide-strategies.md as authoritative guides. Argument hint accepts topic and slide-count inputs. Version 1.0.0 metadata from claudekit. Strategic HTML presentation design pairs responsive structure with chart-driven metrics rather than binary deck exports. Routing workflow loads references/{subcommand}.md after parsing the subcommand token, keeping slide generation aligned with documented layout and copy patterns.
- Creates strategic HTML presentations with Chart.js and design tokens.
- Supports marketing presentations, pitch decks, and data-driven Chart.js slides.
- Routes create subcommand through layout-patterns, html-template, and copywriting references.
- Applies strategic slide design with layout patterns and copywriting formulas.
- Parses subcommand from arguments then loads references/{subcommand}.md.
Slides by the numbers
- 11,451 all-time installs (skills.sh)
- +2,713 installs in the week ending Jul 28, 2026 (Skillselion tracking)
- Ranked #57 of 1,896 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: MEDIUM risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
slides capabilities & compatibility
- Capabilities
- html presentation generation with chart.js chart · layout pattern and design token application · copywriting formula guided slide content · subcommand routing to reference knowledge base · responsive slide layout strategies
- Use cases
- presentations · copywriting · ui design
- Runs
- Runs locally
- Pricing
- Free
What slides says it does
Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
Strategic HTML presentation design with data visualization.
Data-driven slides with Chart.js
Parse subcommand from `$ARGUMENTS` (first word)
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill slidesAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 11.5k |
|---|---|
| repo stars | ★ 111k |
| Security audit | 1 / 3 scanners passed |
| Last updated | July 27, 2026 |
| Repository | nextlevelbuilder/ui-ux-pro-max-skill ↗ |
How do I build data-driven HTML pitch decks with consistent layout patterns and copywriting structure?
Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
Who is it for?
Developers and agents producing marketing decks, pitch slides, or metrics presentations as responsive HTML.
Skip if: Skip when the task needs native PowerPoint PPTX files or non-HTML slide tooling.
When should I use this skill?
User needs HTML presentations, pitch decks, Chart.js slide charts, or copywriting-optimized deck content.
What you get
Strategic HTML slide decks with Chart.js charts, responsive layouts, and reference-backed copywriting formulas.
- HTML presentation slides
- Chart.js data visualizations
- Copywriting-optimized slide content
By the numbers
- Version 1.0.0
- Four reference files in knowledge base
- One create subcommand documented
Files
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
1. Parse subcommand from $ARGUMENTS (first word) 2. Load corresponding references/{subcommand}.md 3. Execute with remaining arguments
Copywriting Formulas
25 formulas for persuasive slide copy.
Core Formulas
PAS (Problem-Agitate-Solution)
Use: Problem slides, pain points Components: Problem → Agitate → Solution Template: "[Pain point]? Every [time frame], [consequence]. [Solution] fixes this."
AIDA (Attention-Interest-Desire-Action)
Use: CTAs, closing slides Components: Attention → Interest → Desire → Action Template: "[Bold statement]. [Benefit detail]. [Social proof]. [CTA]."
FAB (Features-Advantages-Benefits)
Use: Feature slides, product showcases Components: Feature → Advantage → Benefit Template: "[Feature] lets you [advantage], so you can [benefit]."
Cost of Inaction
Use: Agitation slides, urgency Components: Status Quo → Loss → Time Decay Template: "Without [solution], you're losing [amount] every [timeframe]."
Before-After-Bridge
Use: Transformation slides, case studies Components: Before → After → Bridge Template: "[Pain point before]. [Desired state after]. [Your solution] is the bridge."
Formula-to-Slide Mapping
| Slide Type | Primary Formula | Emotion |
|---|---|---|
| Title/Hook | AIDA, Hook | curiosity |
| Problem | PAS, Agitate | frustration |
| Cost/Risk | Cost of Inaction | fear |
| Solution | FAB, BAB | hope |
| Features | FAB | confidence |
| Traction | Proof Stack | trust |
| Social Proof | Testimonial | trust |
| Pricing | Value Stack | confidence |
| CTA | AIDA, Urgency | urgency |
Headline Patterns
Power Words
- "Stop [bad thing]"
- "Get [desired result] in [timeframe]"
- "The [adjective] way to [action]"
- "Why [audience] choose [product]"
- "[Number] ways to [achieve goal]"
Contrast Patterns
- "[Old way] is dead. Meet [new way]."
- "Don't [bad action]. Instead, [good action]."
- "From [pain point] to [benefit]."
Social Proof Patterns
- "[Number]+ [users/companies] trust [product]"
- "Join [notable company] and [notable company]"
- "As seen in [publication]"
Search Commands
# Find formula for slide type
python .claude/skills/design-system/scripts/search-slides.py "problem agitation" -d copy
# Get emotion-appropriate formula
python .claude/skills/design-system/scripts/search-slides.py "urgency cta" -d copyQuick Reference
| Need | Use Formula |
|---|---|
| Create urgency | Cost of Inaction, Scarcity |
| Build trust | Social Proof, Testimonial |
| Show value | FAB, Value Stack |
| Drive action | AIDA, CTA |
| Tell story | BAB, Story Arc |
| Present data | Proof Stack |
Invoke slides skill to create persuasive HTML slides using design tokens, Chart.js, and the slide knowledge database.
Task
<task>$ARGUMENTS</task>
HTML Slide Template
Complete HTML structure with navigation, tokens, and Chart.js integration.
Base Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Presentation Title</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<style>
/* Paste embed-tokens.cjs output here */
:root {
--color-primary: #FF6B6B;
--color-background: #0D0D0D;
/* ... more tokens */
}
/* Base slide styles */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--color-background);
color: #fff;
font-family: var(--typography-font-body, 'Inter', sans-serif);
overflow: hidden;
}
/* 16:9 Aspect Ratio Container (desktop) */
.slide-deck {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
@media (min-width: 769px) {
.slide-deck {
/* Lock to 16:9 — letterbox if viewport ratio differs */
max-width: calc(100vh * 16 / 9);
max-height: calc(100vw * 9 / 16);
margin: auto;
position: absolute;
inset: 0;
}
}
.slide {
position: absolute;
width: 100%; height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 60px;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s;
background: var(--color-background);
overflow: hidden; /* Prevent content overflow */
}
.slide.active { opacity: 1; visibility: visible; }
/* Slide inner wrapper — constrains content within safe area */
.slide-content {
width: 100%;
max-width: 100%;
max-height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
}
/* Typography */
h1, h2 { font-family: var(--typography-font-heading, 'Space Grotesk', sans-serif); }
.slide-title {
font-size: clamp(32px, 6vw, 80px);
background: var(--primitive-gradient-primary, linear-gradient(135deg, #FF6B6B, #FF8E53));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1.1;
}
/* ===== RESPONSIVE BREAKPOINTS ===== */
/* Tablet (portrait) */
@media (max-width: 768px) {
.slide { padding: 32px 24px; }
.slide-title { font-size: clamp(28px, 5vw, 48px); }
h2 { font-size: clamp(20px, 4vw, 32px); }
p, li { font-size: clamp(14px, 2.5vw, 18px); }
}
/* Mobile */
@media (max-width: 480px) {
.slide { padding: 24px 16px; }
.slide-title { font-size: clamp(22px, 6vw, 36px); }
h2 { font-size: clamp(18px, 4.5vw, 28px); }
p, li { font-size: clamp(12px, 3vw, 16px); }
.nav-controls { bottom: 16px; gap: 12px; }
.nav-btn { width: 32px; height: 32px; font-size: 14px; }
}
/* Navigation */
.progress-bar {
position: fixed;
top: 0; left: 0;
height: 3px;
background: var(--color-primary);
transition: width 0.3s;
z-index: 1000;
}
.nav-controls {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 20px;
z-index: 1000;
}
.nav-btn {
background: rgba(255,255,255,0.1);
border: none;
color: #fff;
width: 40px; height: 40px;
border-radius: 50%;
cursor: pointer;
font-size: 18px;
}
.nav-btn:hover { background: rgba(255,255,255,0.2); }
.slide-counter { color: rgba(255,255,255,0.6); font-size: 14px; }
</style>
</head>
<body>
<!-- Progress Bar -->
<div class="progress-bar" id="progressBar"></div>
<!-- Slide Deck Container (16:9 on desktop) -->
<div class="slide-deck">
<!-- Slides -->
<div class="slide active">
<div class="slide-content">
<h1 class="slide-title">Title Slide</h1>
<p>Subtitle or tagline</p>
</div>
</div>
<!-- More slides... (always wrap content in .slide-content) -->
</div><!-- /.slide-deck -->
<!-- Navigation -->
<div class="nav-controls">
<button class="nav-btn" onclick="prevSlide()">←</button>
<span class="slide-counter"><span id="current">1</span> / <span id="total">9</span></span>
<button class="nav-btn" onclick="nextSlide()">→</button>
</div>
<script>
let current = 1;
const total = document.querySelectorAll('.slide').length;
document.getElementById('total').textContent = total;
function showSlide(n) {
if (n < 1) n = 1;
if (n > total) n = total;
current = n;
document.querySelectorAll('.slide').forEach((s, i) => {
s.classList.toggle('active', i === n - 1);
});
document.getElementById('current').textContent = n;
document.getElementById('progressBar').style.width = (n / total * 100) + '%';
}
function nextSlide() { showSlide(current + 1); }
function prevSlide() { showSlide(current - 1); }
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight' || e.key === ' ') { e.preventDefault(); nextSlide(); }
if (e.key === 'ArrowLeft') { e.preventDefault(); prevSlide(); }
});
document.addEventListener('click', (e) => {
if (!e.target.closest('.nav-controls')) nextSlide();
});
showSlide(1);
</script>
</body>
</html>Chart.js Integration
<div class="chart-container" style="width: min(80%, 600px); height: clamp(200px, 40vh, 350px);">
<canvas id="revenueChart"></canvas>
</div>
<script>
new Chart(document.getElementById('revenueChart'), {
type: 'line', // or 'bar', 'doughnut', 'radar'
data: {
labels: ['Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: 'MRR ($K)',
data: [5, 12, 28, 45],
borderColor: '#FF6B6B',
backgroundColor: 'rgba(255, 107, 107, 0.1)',
borderWidth: 3,
fill: true,
tension: 0.4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: { legend: { display: false } },
scales: {
x: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#B8B8D0' } },
y: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#B8B8D0' } }
}
}
});
</script>Animation Classes
/* Fade Up */
.animate-fade-up {
animation: fadeUp 0.6s ease-out forwards;
opacity: 0;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
/* Count Animation */
.animate-count { animation: countUp 1s ease-out forwards; }
/* Scale */
.animate-scale {
animation: scaleIn 0.5s ease-out forwards;
}
@keyframes scaleIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
/* Stagger Children */
.animate-stagger > * {
opacity: 0;
animation: fadeUp 0.5s ease-out forwards;
}
.animate-stagger > *:nth-child(1) { animation-delay: 0.1s; }
.animate-stagger > *:nth-child(2) { animation-delay: 0.2s; }
.animate-stagger > *:nth-child(3) { animation-delay: 0.3s; }
.animate-stagger > *:nth-child(4) { animation-delay: 0.4s; }Background Images
<div class="slide slide-with-bg" style="background-image: url('https://images.pexels.com/...')">
<div class="overlay" style="background: linear-gradient(135deg, rgba(13,13,13,0.9), rgba(13,13,13,0.7))"></div>
<div class="content" style="position: relative; z-index: 1;">
<!-- Slide content -->
</div>
</div>CSS Variables Reference
| Variable | Usage |
|---|---|
--color-primary | Brand primary (CTA, highlights) |
--color-background | Slide background |
--color-secondary | Secondary elements |
--primitive-gradient-primary | Title gradients |
--typography-font-heading | Headlines |
--typography-font-body | Body text |
Layout Patterns
25 slide layouts with CSS structures and animation classes.
Layout Selection by Use Case
| Layout | Use Case | Animation |
|---|---|---|
| Title Slide | Opening/first impression | animate-fade-up |
| Problem Statement | Establish pain point | animate-stagger |
| Solution Overview | Introduce solution | animate-scale |
| Feature Grid | Show capabilities (3-6 cards) | animate-stagger |
| Metrics Dashboard | Display KPIs (3-4 metrics) | animate-stagger-scale |
| Comparison Table | Compare options | animate-fade-up |
| Timeline Flow | Show progression | animate-stagger |
| Team Grid | Introduce people | animate-stagger |
| Quote Testimonial | Customer endorsement | animate-fade-up |
| Two Column Split | Compare/contrast | animate-fade-up |
| Big Number Hero | Single powerful metric | animate-count |
| Product Screenshot | Show product UI | animate-scale |
| Pricing Cards | Present tiers | animate-stagger |
| CTA Closing | Drive action | animate-pulse |
CSS Structures
Title Slide
.slide-title {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}Two Column Split
.slide-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
@media (max-width: 768px) {
.slide-split { grid-template-columns: 1fr; gap: 24px; }
}Feature Grid (3 columns)
.slide-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 768px) {
.slide-features { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 480px) {
.slide-features { grid-template-columns: 1fr; }
}Metrics Dashboard (4 columns)
.slide-metrics {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 768px) {
.slide-metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.slide-metrics { grid-template-columns: 1fr; }
}Component Variants
Card Styles
| Style | CSS Class | Use For |
|---|---|---|
| Icon Left | .card-icon-left | Features with icons |
| Accent Bar | .card-accent-bar | Highlighted features |
| Metric Card | .card-metric | Numbers/stats |
| Avatar Card | .card-avatar | Team members |
| Pricing Card | .card-pricing | Price tiers |
Metric Styles
| Style | Effect |
|---|---|
gradient-number | Gradient text on numbers |
oversized | Extra large (120px+) |
sparkline | Small inline chart |
funnel-numbers | Conversion stages |
Visual Treatments
| Treatment | When to Use |
|---|---|
gradient-glow | Title slides, CTAs |
subtle-border | Problem statements |
icon-top | Feature grids |
screenshot-shadow | Product screenshots |
popular-highlight | Pricing (scale 1.05) |
bg-overlay | Background images |
contrast-pair | Before/after |
logo-grayscale | Client logos |
Search Commands
# Find layout for specific use
python .claude/skills/design-system/scripts/search-slides.py "metrics dashboard" -d layout
# Contextual recommendation
python .claude/skills/design-system/scripts/search-slides.py "traction slide" \
--context --position 4 --total 10Layout Decision Flow
1. What's the slide goal?
└─> Search layout-logic.csv
2. What emotion should it trigger?
└─> Search color-logic.csv
3. What's the content type?
└─> Search typography.csv
4. Should it break pattern?
└─> Check position (1/3, 2/3) → Use full-bleedSlide Strategies
15 proven deck structures with emotion arcs.
Strategy Selection
| Strategy | Slides | Goal | Audience |
|---|---|---|---|
| YC Seed Deck | 10-12 | Raise seed funding | VCs |
| Guy Kawasaki | 10 | Pitch in 20 min | Investors |
| Series A | 12-15 | Raise Series A | Growth VCs |
| Product Demo | 5-8 | Demonstrate value | Prospects |
| Sales Pitch | 7-10 | Close deal | Qualified leads |
| Nancy Duarte Sparkline | Varies | Transform perspective | Any |
| Problem-Solution-Benefit | 3-5 | Quick persuasion | Time-pressed |
| QBR | 10-15 | Update stakeholders | Leadership |
| Team All-Hands | 8-12 | Align team | Employees |
| Conference Talk | 15-25 | Thought leadership | Attendees |
| Workshop | 20-40 | Teach skills | Learners |
| Case Study | 8-12 | Prove value | Prospects |
| Competitive Analysis | 6-10 | Strategic decisions | Internal |
| Board Meeting | 15-20 | Update board | Directors |
| Webinar | 20-30 | Generate leads | Registrants |
Common Structures
YC Seed Deck (10 slides)
1. Title/Hook 2. Problem 3. Solution 4. Traction 5. Market 6. Product 7. Business Model 8. Team 9. Financials 10. The Ask
Emotion arc: curiosity→frustration→hope→confidence→trust→urgency
Sales Pitch (9 slides)
1. Personalized Hook 2. Their Problem 3. Cost of Inaction 4. Your Solution 5. Proof/Case Studies 6. Differentiators 7. Pricing/ROI 8. Objection Handling 9. CTA + Next Steps
Emotion arc: connection→frustration→fear→hope→trust→confidence→urgency
Product Demo (6 slides)
1. Hook/Problem 2. Solution Overview 3. Live Demo/Screenshots 4. Key Features 5. Benefits/Pricing 6. CTA
Emotion arc: curiosity→frustration→hope→confidence→urgency
Duarte Sparkline Pattern
Alternate between "What Is" (current pain) and "What Could Be" (better future):
What Is → What Could Be → What Is → What Could Be → New Bliss
(pain) (hope) (pain) (hope) (resolution)Pattern breaks at 1/3 and 2/3 positions create engagement peaks.
Search Commands
# Find strategy by goal
python .claude/skills/design-system/scripts/search-slides.py "investor pitch" -d strategy
# Get emotion arc
python .claude/skills/design-system/scripts/search-slides.py "series a funding" -d strategy --jsonMatching Strategy to Context
| Context | Recommended Strategy |
|---|---|
| Raising money | YC Seed, Series A, Guy Kawasaki |
| Selling product | Sales Pitch, Product Demo |
| Internal update | QBR, All-Hands, Board Meeting |
| Public speaking | Conference Talk, Workshop |
| Proving value | Case Study, Competitive Analysis |
| Lead generation | Webinar |
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9kUi Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kHow it compares
Pick slides for narrative HTML deck assembly; use design-system when the primary need is token architecture and BM25 slide library search.
FAQ
What does the slides skill produce?
Strategic HTML presentations with Chart.js data visualization, design tokens, responsive layouts, and copywriting-optimized content.
When should I invoke slides?
For marketing presentations, pitch decks, data-driven Chart.js slides, or strategic slide design with layout patterns.
How does routing work?
Parse the first subcommand from arguments, load references/{subcommand}.md, then execute with remaining arguments.
Is Slides safe to install?
skills.sh reports 1 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.