skills.rest
billiampalad
billiampaladCOMMUNITY
Explore all skills by this author →
GitHub

slides

Creates strategic HTML presentations with Chart.js, design tokens, and copywriting formulas.

1|Updated Mar 9, 2026
Search Tags:#html#data visualization#copywriting#presentation#slides#pitch deck#chart.js
One-click install
npx skills add https://github.com/billiampalad/wd4 --skill slides-billiampalad
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: slides
Source: https://github.com/billiampalad/wd4/tree/main/.agents/skills/design/ui-ux-pro-max-skill-main/.claude/skills/slides
Command: npx skills add https://github.com/billiampalad/wd4 --skill slides-billiampalad

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building persuasive, well-designed presentation decks from scratch requires juggling layout design, data visualization, and persuasive copywriting, which is time-consuming and often produces inconsistent results. ## Core Features & Use Cases - HTML Slide Generation: Produces complete responsive HTML slide decks with 16:9 aspect ratio, keyboard navigation, progress bars, and animation classes. - Chart.js Data Visualization: Integrates line, bar, doughnut, and radar charts with styled axes and responsive containers. - Strategic Content Guidance: Provides 15 deck structures (YC Seed, Sales Pitch, Product Demo), 25 copywriting formulas (PAS, AIDA, FAB), and 25 layout patterns matched to slide goals and emotion arcs. - Use Case: A founder preparing a seed round pitch can generate a 10-slide YC-style deck with traction charts, problem-solution narrative, and a closing CTA in a single self-contained HTML file. ## Quick Start Use the slides skill to create a 10-slide investor pitch deck about my SaaS product with a revenue growth chart.

Frequently Asked Questions about slides

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an HTML presentation with Chart.js?▼

Use the slides skill with a topic and slide count to generate a self-contained HTML deck. It embeds Chart.js from CDN, applies design tokens as CSS variables, and includes keyboard navigation, a progress bar, and responsive 16:9 layout.

What slide deck structure should I use for an investor pitch?▼

The skill recommends the YC Seed Deck structure of 10 slides: title, problem, solution, traction, market, product, business model, team, financials, and the ask. It follows an emotion arc from curiosity through frustration and hope to urgency.

Does the slides skill work on mobile devices?▼

Yes, the generated HTML template includes responsive breakpoints for tablets and phones. Font sizes use clamp functions, grids collapse to single columns, and navigation controls resize for small screens.

Which copywriting formula should I use for a problem slide?▼

Use the PAS formula (Problem-Agitate-Solution) for problem slides, following the template of stating the pain point, quantifying its consequence, then introducing the fix. Cost of Inaction works for urgency-driven risk slides.

Can I add background images to individual slides?▼

Yes, the template supports background images via inline styles with a gradient overlay div for readability. Content sits in a positioned layer above the overlay to maintain text contrast.

Related Skills

Explore More Design & Creative Skills→
fivebucksventuresfivebucksventures

campaign-presenter

Generate campaign slide decks from briefs and research notes.

Official
Advanced
githubgithub
38.5k

publish-to-pages

Convert PPTX, PDF, HTML, or Google Slides content and publish it to GitHub Pages.

Official
Intermediate
NimbalystNimbalyst
25

slide-deck-creator

Generate HTML slide decks with design tokens and multiple templates.

Official
Advanced
joaoguirunasjoaoguirunas
3

presentation-design

Designs and evaluates presentation slides using audience-centered frameworks and cognitive load principles.

Community
Intermediate