skills.rest
kaitoartz
kaitoartzCOMMUNITY
Explore all skills by this author →
Website𝕏@kaitoartzzGitHub

ckm:slides

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building persuasive, well-designed presentations from scratch requires combining layout design, copywriting, and data visualization skills, which slows down deck creation for pitches, demos, and reports. ## Core Features & Use Cases - Strategic Deck Structures: Choose from 15 proven deck strategies (YC Seed Deck, Sales Pitch, Product Demo) with defined emotion arcs. - HTML Slide Generation: Produce self-contained HTML slide decks with 16:9 aspect ratio, keyboard navigation, progress bars, and responsive breakpoints for tablet and mobile. - Data Visualization & Copywriting: Integrate Chart.js line, bar, doughnut, and radar charts, and apply 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 closing CTA in 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.

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 with Chart.js?▼

Use the create subcommand with a topic and slide count to generate a self-contained HTML deck. The template embeds Chart.js 4.4.1 via CDN and supports line, bar, doughnut, and radar charts inside responsive chart containers.

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

The skill provides 15 deck strategies including YC Seed Deck (10 slides), Guy Kawasaki (10 slides), and Series A (12-15 slides). Each strategy defines slide order and an emotion arc, such as curiosity to urgency for fundraising.

Do the generated HTML slides work on mobile devices?▼

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

How do I navigate slides in the generated presentation?▼

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

What copywriting formulas are available for slide content?▼

The skill includes 25 formulas such as PAS, AIDA, FAB, Cost of Inaction, and Before-After-Bridge. A mapping table links each slide type, like problem or CTA slides, to the appropriate formula and target emotion.

Related Skills

Explore More Marketing & Sales Skills→
fivebucksventuresfivebucksventures

campaign-presenter

Generate campaign slide decks from briefs and research notes.

Official
Advanced
shekerkammashekerkamma

presentation-exporter

Export HTML presentations to PDF, PNG, and markdown speaker notes.

Community
Intermediate
coldtercoldter

brandkit

Generate brand-kit concept boards with logo systems and presentation-ready assets.

Community
Advanced
window-ookwindow-ook

make-pptx

Convert HTML slide decks into editable PPTX files using PptxGenJS.

Community
Intermediate