skills.rest
longqt321
longqt321COMMUNITY
Explore all skills by this author →
GitHub

slides

Create HTML presentations with Chart.js charts, design tokens, and responsive slide layouts.

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

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, copywriting, data visualization, and responsive styling, 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, Board Meeting) with defined emotion arcs. - HTML Slide Generation: Produce self-contained HTML presentations with 16:9 aspect ratio, keyboard/click navigation, progress bar, and responsive breakpoints for tablet and mobile. - Data Visualization & Copywriting: Integrate Chart.js line, bar, doughnut, and radar charts, plus 25 copywriting formulas (PAS, AIDA, FAB) mapped to slide types. - Use Case: A founder preparing a seed round can generate a 10-slide YC-style pitch deck with traction charts, gradient title slides, and a CTA closing slide as a single HTML file. ## Quick Start Use the slides skill to create a 10-slide investor pitch deck about my SaaS product with a revenue chart and pricing slide.

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 dark-theme styling.

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 Ask. It follows an emotion arc from curiosity through frustration and hope to urgency.

Do the generated HTML slides work on mobile devices?▼

Yes, the template includes responsive breakpoints at 768px and 480px that adjust padding, font sizes with clamp(), and grid layouts. On desktop the deck locks to a 16:9 aspect ratio with letterboxing.

How do I navigate between slides in the HTML deck?▼

Slides support arrow key navigation, spacebar for advancing, click-to-advance anywhere on the slide, and on-screen previous/next buttons. A progress bar and slide counter track the current position.

What copywriting formulas are available for slide content?▼

The skill includes 25 formulas including PAS, AIDA, FAB, Cost of Inaction, and Before-After-Bridge. Each formula maps to specific slide types, such as PAS for problem slides and AIDA for calls to action.

Related Skills

Explore More Design & Creative Skills→
resendresend
39

resend-brand

Enforce Resend brand standards across marketing materials and visual content.

Official
Basic
decocmsdecocms
396

slides

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

Official
Advanced
paulasilvatechpaulasilvatech

pptx-creator

Generates Microsoft-branded 10-slide PowerPoint presentations using python-pptx.

Official
Intermediate
triforktrifork

trifork-presentations

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

Official
Advanced