skills.rest
MohamadJoumaa
MohamadJoumaaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

slides

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

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

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 - Strategic Deck Structures: Choose from 15 proven deck strategies (YC Seed, Sales Pitch, Product Demo, QBR) with defined emotion arcs. - HTML Slide Generation: Produce responsive 16:9 HTML slide decks with keyboard navigation, progress bars, animations, and Chart.js data visualizations. - Copywriting Formulas: Apply 25 persuasion formulas (PAS, AIDA, FAB, Cost of Inaction) mapped to specific slide types. - Use Case: Ask for a 10-slide investor pitch on your startup, and receive a complete HTML deck with a traction chart, problem-solution narrative, and a closing CTA slide. ## Quick Start Use the slides skill to create a 10-slide investor pitch deck about my SaaS product with a revenue 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 for line, bar, doughnut, and radar charts, plus navigation controls and a progress bar.

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

The skill includes the YC Seed Deck structure with 10 slides covering problem, solution, traction, market, and the ask. It follows an emotion arc from curiosity through frustration to urgency.

Are the generated slides responsive on mobile devices?▼

Yes, the HTML template includes breakpoints for tablet and mobile with adjusted padding, font sizes, and grid layouts. On desktop the deck locks to a 16:9 aspect ratio with letterboxing.

What copywriting formulas does the slides skill support?▼

It supports 25 formulas including PAS, AIDA, FAB, Cost of Inaction, and Before-After-Bridge. Each formula maps to specific slide types such as problem slides, CTAs, and pricing pages.

Can I customize colors and fonts in the generated slides?▼

Yes, the template uses CSS custom properties such as --color-primary, --color-background, and typography font variables. Replace the token values in the style block to rebrand the entire deck.

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
andrey-belenandrey-belen

frontend-image-generation

Source UI images from DiceBear, Unsplash, and unDraw with optional AI generation.

Community
Basic
KanishKumar11KanishKumar11

pptx

Create and edit PowerPoint slide decks using pptxgenjs and LibreOffice.

Community
Advanced