skills.rest
Aeonxuu
AeonxuuCOMMUNITY
Explore all skills by this author →
GitHub

slides

Create HTML presentations with Chart.js charts, design tokens, and responsive slide layouts.

Updated May 9, 2026
Search Tags:#html#data visualization#copywriting#presentation#slides#pitch deck#Chart.js
One-click install
npx skills add https://github.com/Aeonxuu/southtownslandservice_v2 --skill slides-aeonxuu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: slides
Source: https://github.com/Aeonxuu/southtownslandservice_v2/tree/main/.claude/skills/slides
Command: npx skills add https://github.com/Aeonxuu/southtownslandservice_v2 --skill slides-aeonxuu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building persuasive, well-designed presentations from scratch requires juggling layout design, copywriting, data visualization, and responsive styling, which is slow 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) with defined emotion arcs. - Layout & Copywriting Knowledge Base: Apply 25 slide layout patterns with CSS structures and 25 copywriting formulas (PAS, AIDA, FAB) mapped to slide types. - HTML Output with Chart.js: Generate self-contained HTML slide decks with navigation, keyboard controls, responsive breakpoints, and embedded data charts. - Use Case: Ask for a 10-slide investor pitch on your startup, and receive a complete HTML deck with a title hook, problem slide using PAS copy, a Chart.js traction chart, and a closing CTA. ## Quick Start Use the slides skill to create a 10-slide pitch deck about my SaaS product with a revenue chart and pricing tiers.

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, such as "create a 10-slide pitch deck about my product." It generates a self-contained HTML file with Chart.js integration, navigation controls, and responsive slide layouts.

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

The skill includes 15 deck strategies; for fundraising it recommends the YC Seed Deck (10 slides), Guy Kawasaki (10 slides), or Series A (12-15 slides). Each strategy defines slide order and an emotion arc from curiosity to urgency.

Does the HTML slide template work on mobile devices?▼

Yes, the template includes responsive breakpoints at 768px and 480px that adjust padding, font sizes with clamp(), and grid layouts. On desktop it locks the deck to a 16:9 aspect ratio with letterboxing.

Which copywriting formula fits a problem slide?▼

Problem slides use the PAS formula (Problem-Agitate-Solution) to trigger frustration before presenting hope. The skill maps formulas to slide types, such as AIDA for CTAs and FAB for feature slides.

What are the limitations of HTML slides versus PowerPoint?▼

HTML slides require a browser to present and cannot be edited in PowerPoint or exported natively to .pptx. They suit web-based sharing and custom styling but lack built-in presenter tools like speaker notes.

Related Skills

Explore More Marketing & Sales Skills→
aaltaayaaltaay

ckm:design-system

Converts a three-layer token system into CSS variables for brand-consistent design.

Community
Advanced
githubgithub
38.5k

publish-to-pages

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

Official
Intermediate
anyreachaianyreachai
1

shadcn-deck

Generate client-branded presentation decks with shadcn-inspired themes and slide templates.

Official
Intermediate
hyperbolic-chyperbolic-c
5

pptx

Create and edit PowerPoint presentations programmatically with python-pptx.

Community
Intermediate