skills.rest
mr-creative-hmh
mr-creative-hmhCOMMUNITY
Explore all skills by this author →
GitHub

slides

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

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

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 time-consuming and often produces inconsistent results. ## Core Features & Use Cases - Strategic 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 directly into slides for metrics and traction data. - Copywriting & Strategy Knowledge Base: 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: Ask for a 10-slide investor pitch deck on 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 via CDN for line, bar, doughnut, and radar charts, with responsive containers and navigation controls included.

What slide deck structure works best for investor pitches?▼

The YC Seed Deck structure uses 10 slides: title, problem, solution, traction, market, product, business model, team, financials, and the ask. Its emotion arc moves from curiosity through frustration and hope to urgency.

Which copywriting formula should I use for problem slides?▼

PAS (Problem-Agitate-Solution) is the primary formula for problem slides, targeting frustration. For urgency-driven slides like pricing or CTAs, use Cost of Inaction or AIDA instead.

Do the generated HTML slides work on mobile devices?▼

Yes, the template includes responsive breakpoints for tablets and phones with adjusted padding, font sizes via clamp(), and stacked grid layouts. On desktop it locks to a 16:9 aspect ratio with letterboxing.

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 live demos, but exporting to PPTX format is not supported by this skill.

Related Skills

Explore More Marketing & Sales Skills→
NimbalystNimbalyst
25

slide-deck-creator

Generate HTML slide decks with design tokens and multiple templates.

Official
Advanced
decocmsdecocms
396

slides

Generate editable HTML slide decks from JSON data with live preview.

Official
Advanced
openyakopenyak
704

brand-review

Compare marketing content against brand guidelines and output a deviation report.

Official
Advanced
stellaronestellarone

pptx

Read, modify, and generate PowerPoint .pptx slide decks.

Official
Advanced