skills.rest
Ramadan-Elgamal
Ramadan-ElgamalCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

slides

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

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

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, data visualization, and persuasive copywriting, which is slow and inconsistent without a structured system. ## Core Features & Use Cases - HTML Slide Generation: Produces self-contained HTML slide decks with 16:9 responsive layouts, keyboard navigation, progress bars, and animation classes. - Chart.js Data Visualization: Integrates line, bar, doughnut, and radar charts for metrics, traction, and financial slides. - 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: Ask for a 10-slide investor pitch deck for your startup, and receive a complete HTML presentation with a problem slide using PAS copy, a traction slide with a Chart.js revenue chart, and a CTA closing slide. ## Quick Start Use the slides skill to create a 10-slide HTML pitch deck about my SaaS product with a revenue chart and a closing call to action.

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

Use the slides skill with a topic and slide count to generate a self-contained HTML deck. It embeds Chart.js from CDN for line, bar, doughnut, and radar charts, with responsive containers and navigation controls included.

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

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

Which copywriting formula works best for problem slides?▼

PAS (Problem-Agitate-Solution) is the primary formula for problem slides, targeting frustration. The template states the pain point, quantifies the recurring consequence, then introduces the solution.

Do the generated HTML slides work on mobile devices?▼

Yes, the template includes responsive breakpoints for tablets and phones with adjusted padding, font sizes using clamp(), and stacked grid layouts. Desktop view locks to a 16:9 letterboxed aspect ratio.

What are the limitations of HTML slides compared to PowerPoint?▼

HTML slides require a browser to present and cannot be edited in PowerPoint or Keynote. They suit web-based sharing and custom styling but lack native presenter tools like speaker notes and slide sorter views.

Related Skills

Explore More Marketing & Sales Skills→
Dante-danDante-dan

baoyu-slide-deck

Generate structured PPTX and PDF presentation decks from source content.

Community
Advanced
KeimoshiKeimoshi

html-ppt-pitch-deck

Generates a 10-slide HTML investor pitch deck with gradient styling, traction charts, and speaker notes.

Community
Intermediate
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced
KanishKumar11KanishKumar11

pptx

Create and edit PowerPoint slide decks using pptxgenjs and LibreOffice.

Community
Advanced