nextlevelbuilder/ui-ux-pro-max-skill已通过检查
SKILL DETAIL
slides
nextlevelbuilder/ui-ux-pro-max-skill/slides
该技能专注于创建战略性的 HTML 演示文稿，特别适用于营销演示、推销平台以及数据驱动的幻灯片。它集成了 Chart.js 进行数据可视化，利用设计令牌确保视觉一致性，并采用响应式布局以适应不同屏幕尺寸。此外，该技能还包含文案公式和情境化幻灯片策略，以优化内容呈现和观众参与度。 通过其子命令 `create`，用户可以生成完整的演示文稿，并参考布局模式、HTML 模板、文案公式和幻灯片策略等知识库资源，确保每一张幻灯片都具有战略性和视觉吸引力。
安装量 · 279查看来源
Installation
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill slides
技能文件
SKILL.md
最近同步 · 2026年8月29日
references/copywriting-formulas.md›
# 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
```bash
# 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 copy
```
## Quick 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 |
references/create.md›
Invoke `slides` skill to create persuasive HTML slides using design tokens, Chart.js, and the slide knowledge database.
## Task
<task>$ARGUMENTS</task>
references/html-template.md›
# HTML Slide Template
Complete HTML structure with navigation, tokens, and Chart.js integration.
## Base Structure
```html
<!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/[email protected]/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
```html
<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
```css
/* 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
```html
<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 |
references/layout-patterns.md›
# 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
```css
.slide-title {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
```
### Two Column Split
```css
.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)
```css
.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)
```css
.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
```bash
# 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 10
```
## Layout 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-bleed
```
references/slide-strategies.md›
# Slide 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
```bash
# 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 --json
```
## Matching 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 |
SKILL.md›
---
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
1. Parse subcommand from `$ARGUMENTS` (first word)
2. Load corresponding `references/{subcommand}.md`
3. Execute with remaining arguments