slides
0Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
129,15813,7640Updated 2w ago
General
Quick InstallView Source
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.gitOverview
About This 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 1. Parse subcommand from `$ARGUMENTS` (first word) 2. Load corresponding `references/{subcommand}.md` 3. Execute with remaining arguments
How to Use
[{"step":"Gather your content and data","action":"Collect the topic ([TOPIC]), audience ([AUDIENCE]), data ([DATA]), and brand guidelines ([BRAND_GUIDELINES]) for the presentation. Ensure your data is clean and formatted for Chart.js (e.g., JSON or CSV).","tip":"Use tools like Google Sheets or Excel to organize your data before inputting it into the prompt. Label columns clearly for easy chart generation."},{"step":"Choose a copywriting formula and slide strategy","action":"Select a copywriting formula (e.g., Problem-Agitate-Solve, Feature-Agitate-Benefit, or Hero's Journey) and a contextual slide strategy (e.g., problem-solution-benefit, hero's journey, or feature-benefit-benefit). Tailor these to your audience and topic.","tip":"For executive audiences, use Problem-Agitate-Solve or Feature-Agitate-Benefit. For creative teams, Hero's Journey or Storytelling may resonate better."},{"step":"Generate the HTML presentation","action":"Paste the prompt into an AI tool (e.g., Claude or ChatGPT) and replace the placeholders with your specific content. Request the output as a single HTML file with embedded CSS and JavaScript.","tip":"Ask the AI to include speaker notes for each slide to guide your delivery. Specify if you need additional slides (e.g., appendix, Q&A) or custom styling."},{"step":"Customize and test the presentation","action":"Review the generated HTML file for accuracy. Adjust the design tokens (colors, fonts) to match your brand guidelines. Test the presentation on different devices (desktop, tablet, mobile) to ensure responsiveness.","tip":"Use browser developer tools to simulate mobile views. Check that charts render correctly and text is legible on all screen sizes."},{"step":"Deliver and iterate","action":"Use the HTML presentation in your meetings or share it digitally. Gather feedback from your audience and iterate on the design or content as needed.","tip":"Track which slides resonate most with your audience and refine your approach for future presentations. Consider adding interactive elements (e.g., clickable charts) for digital delivery."}]
Setup & Installation
Quick Install
No install command available. Check the GitHub repository for manual installation instructions.
Alternative Install (Git Clone)
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/.claude/skills/slidesRequirements
- Claude Code or compatible AI agent
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
Customize
Adapt the skill to your specific use case and workflow.
Usage Examples
Prompt Template
Create a strategic HTML presentation using Chart.js for data visualization, design tokens for consistent styling, and responsive layouts. Structure the slides with a copywriting formula (e.g., PAS, BAB, or FAB) and apply contextual slide strategies (e.g., problem-agitate-solve, hero's journey, or feature-benefit-benefit). Include [TOPIC] and [AUDIENCE] as placeholders. Use [DATA] for charts and [BRAND_GUIDELINES] for design tokens. Ensure the presentation is mobile-friendly and includes speaker notes for each slide.
Example Output
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Q3 2024 Growth Strategy</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
:root {
--primary-color: #2a5aa8;
--secondary-color: #f5f7fa;
--accent-color: #ff6b6b;
--text-color: #333;
--font-family: 'Inter', sans-serif;
}
body {
font-family: var(--font-family);
color: var(--text-color);
line-height: 1.6;
margin: 0;
padding: 0;
background-color: var(--secondary-color);
}
.slide {
max-width: 800px;
margin: 2rem auto;
padding: 2rem;
background: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.chart-container {
height: 300px;
margin: 2rem 0;
}
h1, h2 {
color: var(--primary-color);
}
</style>
</head>
<body>
<div class="slide">
<h1>Q3 2024 Growth Strategy</h1>
<p><strong>Presented to:</strong> Executive Leadership Team</p>
<p><strong>Date:</strong> October 15, 2024</p>
<p class="speaker-notes">Introduction: Thank the team for their time. Briefly outline the agenda and key takeaways.</p>
</div>
<div class="slide">
<h2>The Problem: Market Share Erosion</h2>
<p>Our market share in the SaaS productivity tools segment declined by 8% YoY, primarily due to increased competition from AI-driven solutions.</p>
<div class="chart-container">
<canvas id="marketShareChart"></canvas>
</div>
<p class="speaker-notes">Agitate: Emphasize the urgency—highlight how this erosion impacts revenue and customer retention. Use the chart to show the decline visually.</p>
</div>
<div class="slide">
<h2>The Solution: AI-Powered Productivity Suite</h2>
<p>Our new AI-driven features will redefine user productivity by automating 60% of repetitive tasks and improving workflow efficiency by 40%.</p>
<div class="chart-container">
<canvas id="aiImpactChart"></canvas>
</div>
<p class="speaker-notes">Feature-Agitate-Benefit: Explain the features, agitate by showing how competitors are falling short, then highlight the benefits (e.g., time savings, cost reduction).</p>
</div>
<div class="slide">
<h2>Implementation Roadmap</h2>
<ul>
<li><strong>Q4 2024:</strong> Beta launch with 50 enterprise clients</li>
<li><strong>Q1 2025:</strong> Full rollout to existing customer base</li>
<li><strong>Q2 2025:</strong> Aggressive marketing campaign targeting SMBs</li>
</ul>
<div class="chart-container">
<canvas id="roadmapChart"></canvas>
</div>
<p class="speaker-notes">Hero's Journey: Frame this as a transformation story—from struggle to success. Use the roadmap to show the path forward.</p>
</div>
<div class="slide">
<h2>Expected Outcomes</h2>
<p>By leveraging our AI suite, we project:</p>
<ul>
<li>15% increase in customer retention</li>
<li>25% reduction in customer acquisition cost</li>
<li>$12M in additional annual revenue by 2026</li>
</ul>
<p class="speaker-notes">Call to Action: End with a clear ask—e.g., "We need your approval to proceed with the beta launch in Q4."</p>
</div>
<script>
// Market Share Chart
const marketShareData = {
labels: ['2022', '2023', '2024 (Projected)'],
datasets: [{
label: 'Market Share (%)',
data: [28, 22, 18],
backgroundColor: 'rgba(42, 90, 168, 0.7)',
borderColor: 'rgba(42, 90, 168, 1)',
borderWidth: 2
}]
};
new Chart(document.getElementById('marketShareChart'), {
type: 'bar',
data: marketShareData,
options: { responsive: true, maintainAspectRatio: false }
});
// AI Impact Chart
const aiImpactData = {
labels: ['Time Saved (hrs/week)', 'Cost Reduction ($)', 'User Satisfaction (%)'],
datasets: [{
label: 'Impact Metrics',
data: [60, 45000, 85],
backgroundColor: ['#2a5aa8', '#ff6b6b', '#4ecdc4'],
borderWidth: 1
}]
};
new Chart(document.getElementById('aiImpactChart'), {
type: 'radar',
data: aiImpactData,
options: { responsive: true, maintainAspectRatio: false }
});
// Roadmap Chart
const roadmapData = {
labels: ['Q4 2024', 'Q1 2025', 'Q2 2025'],
datasets: [{
label: 'Revenue Impact ($M)',
data: [2, 8, 12],
backgroundColor: 'rgba(78, 205, 196, 0.7)',
borderColor: 'rgba(78, 205, 196, 1)',
borderWidth: 2
}]
};
new Chart(document.getElementById('roadmapChart'), {
type: 'line',
data: roadmapData,
options: { responsive: true, maintainAspectRatio: false }
});
</script>
</body>
</html>
```Source repo
nextlevelbuilder/ui-ux-pro-max-skill
skills-collection
Find the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan