skills.rest
po4yka
po4ykaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

slides

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

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

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 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 with emotion arcs. - Use Case: Ask for a 10-slide investor pitch on your startup, and receive a complete HTML deck following the YC Seed structure with Chart.js traction charts and PAS-formulated problem slides. ## Quick Start Use the slides skill to create a 10-slide investor pitch deck about my SaaS product with a traction 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 deck with charts?▼

Use the slides skill with a topic and slide count to generate a self-contained HTML file. It embeds Chart.js for data visualizations, includes navigation controls and a progress bar, and applies responsive layouts that work on desktop and mobile.

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

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

Does the slides skill support Chart.js visualizations?▼

Yes, the HTML template integrates Chart.js 4.4.1 via CDN and supports line, bar, doughnut, and radar chart types. Charts are configured with responsive sizing and theme-matched grid and tick colors.

Are the generated slides responsive on mobile devices?▼

Yes, the template locks to 16:9 aspect ratio on desktop and includes breakpoints at 768px and 480px. Font sizes use clamp() for fluid scaling, and grids collapse to single columns on small screens.

What copywriting formulas work best for problem slides?▼

PAS (Problem-Agitate-Solution) is the primary formula for problem slides, targeting frustration. For urgency-driven slides, use Cost of Inaction, which frames the status quo, the loss, and time decay.

Related Skills

Explore More Design & Creative 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
joaoguirunasjoaoguirunas
3

presentation-design

Designs and evaluates presentation slides using audience-centered frameworks and cognitive load principles.

Community
Intermediate