skills.rest
umairshahid622
umairshahid622COMMUNITY
Explore all skills by this author →
GitHub

slides

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

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

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 Deck, Sales Pitch, Product Demo) with defined emotion arcs. - Responsive HTML Slides: Generate self-contained HTML decks with 16:9 layouts, keyboard navigation, progress bars, and mobile breakpoints. - Data Visualization & Copywriting: Integrate Chart.js charts and apply 25 copywriting formulas (PAS, AIDA, FAB) mapped to slide types. - Use Case: A founder needs a 10-slide investor pitch deck; the skill produces a complete HTML presentation with traction charts, problem-solution narrative, and a closing CTA. ## Quick Start Ask the AI to use the slides skill to create a 10-slide investor pitch deck about your 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, with responsive containers and navigation controls included.

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

The skill includes 15 deck strategies such as YC Seed Deck (10 slides), Guy Kawasaki, and Series A formats. Each strategy defines slide order and an emotion arc, for example curiosity to frustration to hope to urgency.

Do the generated slides work on mobile devices?▼

Yes, the HTML template includes responsive breakpoints for tablet and mobile with clamp-based typography and stacked grid layouts. On desktop the deck locks to a 16:9 aspect ratio with letterboxing.

Which copywriting formula works best for a problem slide?▼

PAS (Problem-Agitate-Solution) is the recommended formula for problem slides, paired with frustration as the target emotion. The skill maps formulas to slide types, such as AIDA for CTAs and FAB for feature slides.

Can I add background images to individual slides?▼

Yes, the template supports background images via inline styles with a gradient overlay div for readability. Content sits in a positioned layer above the overlay to maintain contrast.

Related Skills

Explore More Marketing & Sales Skills→
marketingLendariomarketingLendario
18

mockup-produto-funil

Generate product and bonus mockups from brand design tokens.

Community
Advanced
xpert-aixpert-ai
8

report-to-google-slides

Convert HTML analytics reports into editable Google Slides decks.

Official
Advanced
keremtoker468-dotcomkeremtoker468-dotcom

copywriting

Generate and refine marketing copy across headlines, emails, and landing pages.

Community
Advanced
triforktrifork

trifork-presentations

Generates Trifork-branded 1920x1080 slide decks from canonical HTML templates for PowerPoint and Google Slides.

Official
Advanced