skills.rest
AbuBakar125-co
AbuBakar125-coCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

slides

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

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

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, responsive CSS, and persuasive copywriting, which is time-consuming and inconsistent without a structured system. ## Core Features & Use Cases - HTML Slide Generation: Produces self-contained HTML slide decks with 16:9 aspect ratio locking, keyboard/click navigation, progress bars, and responsive breakpoints for tablet and mobile. - Chart.js Data Visualization: Integrates line, bar, doughnut, and radar charts with styled axes and responsive containers for metrics and traction slides. - Strategic Content System: Provides 25 copywriting formulas (PAS, AIDA, FAB), 25 layout patterns, and 15 deck strategies (YC Seed, Sales Pitch, Product Demo) with emotion arcs. - Use Case: A founder preparing a seed round can generate a 10-slide YC-style pitch deck with a traction chart, gradient title slide, and AIDA-driven closing CTA in a single HTML file. ## Quick Start Use the slides skill to create a 10-slide investor pitch deck with a problem slide, a Chart.js traction chart, and a closing CTA.

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 provided HTML template with a canvas element inside a chart container, then initialize Chart.js with your dataset, chart type, and styled axis options. The template includes navigation, progress bar, and responsive sizing via clamp() and viewport units.

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.

Does the HTML slide template work on mobile devices?▼

Yes, the template includes responsive breakpoints at 768px and 480px that reduce padding, font sizes, and navigation controls. On desktop it locks to a 16:9 aspect ratio with letterboxing when the viewport ratio differs.

Which copywriting formula should I use for a problem slide?▼

Use PAS (Problem-Agitate-Solution) for problem slides, following the template of stating the pain point, quantifying the consequence, then introducing the fix. Cost of Inaction works when you need to create urgency around the status quo.

What are the limitations of HTML slides compared to PowerPoint?▼

HTML slides require a browser to present and lack native presenter notes, slide editing UIs, and PowerPoint file export. They are best suited for web-delivered or screen-shared presentations rather than editable corporate deck workflows.

Related Skills

Explore More Marketing & Sales Skills→
landim32landim32
1

ckm:brand

Extract brand data from guidelines and generate design tokens for consistent branding.

Community
Advanced
pedronauckpedronauck
567

pitch-deck-visuals

Generate pitch deck visuals with HTML-to-image conversion and matplotlib charts.

Community
Intermediate
ACHVMRACHVMR

smelteros-image-assets

Catalog SmelterOS image assets with naming conventions and generation guidelines.

Official
Intermediate
KanishKumar11KanishKumar11

pptx

Create and edit PowerPoint slide decks using pptxgenjs and LibreOffice.

Community
Advanced