skills.rest
s0nbuildtech287
s0nbuildtech287COMMUNITY
Explore all skills by this author →
GitHub

slides

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building persuasive, well-designed HTML presentations from scratch requires juggling layout design, data visualization, responsive styling, and persuasive copywriting, which is time-consuming and inconsistent without a structured system. ## Core Features & Use Cases - Strategic Deck Structures: Choose from 15 proven deck strategies (YC Seed Deck, Sales Pitch, Product Demo, QBR) with defined emotion arcs for each audience type. - Layout & Copywriting Knowledge Base: Apply 25 slide layout patterns with responsive CSS and 25 copywriting formulas (PAS, AIDA, FAB) mapped to slide types and target emotions. - Chart.js Data Visualization: Generate slides with integrated Chart.js line, bar, doughnut, and radar charts styled with design tokens. - Use Case: A founder preparing a seed round pitch can invoke the skill to produce a 10-slide YC-style HTML deck with a traction chart, gradient title slides, and AIDA-driven closing CTA. ## 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 charts?▼

Invoke the slides skill with a topic and slide count, and it generates a self-contained HTML deck embedding Chart.js via CDN. Charts are configured with responsive containers, custom colors, and grid styling matching the deck's design tokens.

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 Ask. It follows an emotion arc from curiosity through frustration and hope to urgency.

Does the slides skill support mobile and tablet screens?▼

Yes, the HTML template includes responsive breakpoints at 768px and 480px with clamp-based typography scaling. On desktop the deck locks to a 16:9 aspect ratio with letterboxing, while grids collapse to fewer columns on smaller screens.

Which copywriting formula works best for a call-to-action slide?▼

The skill maps CTA slides to the AIDA formula (Attention, Interest, Desire, Action) combined with urgency patterns. For problem slides it recommends PAS, and for feature slides it uses FAB (Features, Advantages, Benefits).

What are the limitations of HTML slide decks compared to PowerPoint?▼

HTML decks require a browser to present and lack native presenter notes, slide editing UIs, and offline corporate template compliance. They suit web-native sharing and custom styling but are not ideal when stakeholders must edit content in PowerPoint.

Related Skills

Explore More Design & Creative Skills→
resendresend
39

resend-brand

Enforce Resend brand standards across marketing materials and visual content.

Official
Basic
decocmsdecocms
396

slides

Generate editable HTML slide decks from JSON data with live preview.

Official
Advanced
shekerkammashekerkamma

presentation-exporter

Export HTML presentations to PDF, PNG, and markdown speaker notes.

Community
Intermediate
KanishKumar11KanishKumar11

pptx

Create and edit PowerPoint slide decks using pptxgenjs and LibreOffice.

Community
Advanced