skills.rest
timikalo7
timikalo7COMMUNITY
Explore all skills by this author →
GitHub

ckm:slides

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

Updated Jun 9, 2026
Search Tags:#html#data visualization#copywriting#presentation#slides#pitch deck#chart.js
One-click install
npx skills add https://github.com/timikalo7/Execute --skill ckm-slides-timikalo7
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:slides
Source: https://github.com/timikalo7/Execute/tree/main/.claude/skill-library/slides
Command: npx skills add https://github.com/timikalo7/Execute --skill ckm-slides-timikalo7

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/click navigation, progress bars, and animation classes. - Chart.js Data Visualization: Integrates line, bar, doughnut, and radar charts styled with design tokens for metrics and traction slides. - Strategic Content System: Ships 25 copywriting formulas (PAS, AIDA, FAB), 25 layout patterns, and 15 deck strategies (YC Seed, Sales Pitch, Product Demo) 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 gradient titles, metric cards, and a Chart.js revenue chart. ## 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 ckm:slides

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an HTML presentation deck with Chart.js?▼

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 sizing, custom colors from design tokens, 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 problem, solution, traction, market, and the ask. It also offers Guy Kawasaki and Series A variants, each with a defined emotion arc from curiosity to urgency.

Do the HTML slides work on mobile devices?▼

Yes, the 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.

What copywriting formulas are included for slide content?▼

The skill provides 25 formulas including PAS, AIDA, FAB, Cost of Inaction, and Before-After-Bridge. Each formula maps to specific slide types and target emotions, such as using Cost of Inaction for urgency slides.

Can I add background images to individual slides?▼

Yes, the template supports background images via inline styles with a gradient overlay div to maintain text readability. Content sits in a positioned layer above the overlay for proper contrast.

Related Skills

Explore More Marketing & Sales Skills→
NimbalystNimbalyst
25

slide-deck-creator

Generate HTML slide decks with design tokens and multiple templates.

Official
Advanced
TeamWiseFlowTeamWiseFlow
8.4k

pitch-deck

Generates zero-dependency HTML pitch decks for browser presentation with interactive navigation and style presets.

Official
Advanced
kostja94kostja94
872

branding

Develops brand purpose, values, positioning, storytelling, voice, and visual identity strategies.

Community
Advanced
KanishKumar11KanishKumar11

pptx

Create and edit PowerPoint slide decks using pptxgenjs and LibreOffice.

Community
Advanced