skills.rest
Rasslonely
RasslonelyCOMMUNITY
Explore all skills by this author →
GitHub

slides

Generates HTML presentation slides with Chart.js charts, design tokens, and copywriting formulas.

Updated Jul 31, 2026
Search Tags:#html#data visualization#copywriting#presentation#slides#pitch deck#chart.js
One-click install
npx skills add https://github.com/Rasslonely/NexusXRP --skill slides-rasslonely
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: slides
Source: https://github.com/Rasslonely/NexusXRP/tree/main/.agents/skills/slides
Command: npx skills add https://github.com/Rasslonely/NexusXRP --skill slides-rasslonely

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating persuasive, well-designed presentations requires combining layout design, data visualization, and copywriting skills that most people lack, resulting in bland or ineffective slide decks. ## Core Features & Use Cases - HTML Slide Generation: Produces self-contained HTML presentations with responsive layouts, keyboard navigation, progress bars, and 16:9 aspect ratio handling. - Chart.js Data Visualization: Integrates line, bar, doughnut, and radar charts with styled axes and gradients for metrics and traction slides. - Strategic Content Frameworks: Applies 25 copywriting formulas (PAS, AIDA, FAB) and 15 deck structures (YC Seed, Sales Pitch, Product Demo) matched to slide goals and emotion arcs. - Use Case: A founder preparing for investor meetings can generate a complete 10-slide YC-style seed deck with traction charts, problem-solution narrative, and a closing CTA in a single HTML file. ## Quick Start Use the slides skill to create a 10-slide investor pitch deck about my SaaS product with a revenue chart on the traction slide.

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 charts?▼

Use the slides skill with a topic and slide count to generate a self-contained HTML file. It embeds Chart.js for line, bar, doughnut, and radar charts, plus navigation controls, progress bars, and responsive breakpoints for mobile and tablet.

What slide deck structure should I use for investor pitches?▼

The YC Seed Deck structure uses 10 slides covering 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.

Which copywriting formula works best for problem slides?▼

PAS (Problem-Agitate-Solution) is the primary formula for problem slides, structured as pain point, consequence over time, then the fix. Cost of Inaction works better when you need to create urgency around losses.

Do the generated slides work on mobile devices?▼

Yes, the HTML template includes responsive breakpoints at 768px and 480px that adjust padding, font sizes with clamp(), and grid layouts. Feature grids collapse from three columns to one on phones.

What are the limitations of HTML slides versus PowerPoint?▼

HTML slides require a browser to present and cannot be edited in PowerPoint or Google Slides. They excel at web sharing and interactive charts but lack native presenter notes, slide masters, and offline office-suite compatibility.

Related Skills

Explore More Design & Creative Skills→
fivebucksventuresfivebucksventures

campaign-presenter

Generate campaign slide decks from briefs and research notes.

Official
Advanced
shekerkammashekerkamma

presentation-exporter

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

Community
Intermediate
stromy-orgstromy-org

pptx

Convert HTML slides into branded PPTX decks with charter-driven styling.

Official
Advanced
zocomputerzocomputer
45

create-slidedeck

Generate complete slide decks with cover and body slides from reference material.

Official
Advanced