skills.rest
danieliudi
danieliudiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

slides

Generates HTML presentation decks 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/danieliudi/trackforge-os --skill slides-danieliudi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: slides
Source: https://github.com/danieliudi/trackforge-os/tree/main/.cursor/skills/slides
Command: npx skills add https://github.com/danieliudi/trackforge-os --skill slides-danieliudi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating persuasive, well-structured presentations requires combining layout design, data visualization, and copywriting expertise, which is time-consuming when done manually from scratch. ## Core Features & Use Cases - HTML Slide Generation: Produces complete 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 with styled axes and responsive containers for metrics and traction slides. - Strategic Content Guidance: Provides 15 deck structures (YC Seed, Sales Pitch, Product Demo), 25 copywriting formulas (PAS, AIDA, FAB), and layout patterns mapped to slide goals and emotion arcs. - Use Case: Ask for a 10-slide investor pitch on your startup, and receive a ready-to-open HTML file with a title slide, problem/solution narrative, Chart.js traction chart, and a CTA closing slide. ## Quick Start Ask the assistant to create a 10-slide HTML pitch deck about your product using the slides skill.

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

Invoke the slides skill with a topic and slide count, and it generates a self-contained HTML file with Chart.js integrated via CDN. Charts are configured with responsive containers, styled axes, and support line, bar, doughnut, and radar types.

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

The skill includes the YC Seed Deck structure with 10 slides covering title, problem, solution, traction, market, product, business model, team, financials, and the ask. Guy Kawasaki and Series A structures are also available for different fundraising contexts.

Do the generated slides work on mobile devices?▼

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

Which copywriting formula works best for a call-to-action slide?▼

AIDA (Attention-Interest-Desire-Action) is the recommended formula for CTA and closing slides, paired with urgency-driven emotion. The formula-to-slide mapping table in the references matches each slide type to its primary formula.

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 are best suited for self-contained, design-controlled decks rather than collaborative editing workflows in office suites.

Related Skills

Explore More Design & Creative Skills→
resendresend
39

resend-brand

Enforce Resend brand standards across marketing materials and visual content.

Official
Basic
lettucebolettucebo

publish-to-pages

Convert PPTX, PDF, and HTML files into live GitHub Pages sites.

Community
Intermediate
anthropicsanthropics
23.4k

brand-review

Review content against brand voice, style guides, and messaging pillars.

Official
Advanced
joaoguirunasjoaoguirunas
3

presentation-design

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

Community
Intermediate