ckm:slides

Generates HTML presentation slides with Chart.js charts, layout patterns, and copywriting formulas.

Updated Apr 7, 2026
One-click install
npx skills add https://github.com/hontauadrian/sfx-app-empty-test --skill ckm-slides-hontauadrian
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:slides
Source: https://github.com/hontauadrian/sfx-app-empty-test/tree/main/.overstory/claude-profiles/reviewer/skills/slides
Command: npx skills add https://github.com/hontauadrian/sfx-app-empty-test --skill ckm-slides-hontauadrian

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating persuasive, well-designed HTML presentations requires combining layout design, data visualization, and persuasive copywriting, which is time-consuming to do from scratch. This Skill provides ready-made slide structures, design tokens, and copywriting formulas to produce complete pitch decks and data-driven slides. ## Core Features & Use Cases - HTML Slide Generation: Produces a complete single-file HTML deck with 16:9 aspect ratio, keyboard/click navigation, progress bar, and responsive breakpoints for tablet and mobile. - Chart.js Data Visualization: Integrates line, bar, doughnut, and radar charts with preconfigured dark-theme styling for metrics and traction slides. - Layout & Copywriting Knowledge Base: Ships 25 layout patterns (feature grids, metrics dashboards, pricing cards), 25 copywriting formulas (PAS, AIDA, FAB), and 15 deck strategies (YC Seed, Sales Pitch, Product Demo) with emotion arcs. - Use Case: Ask for a 10-slide investor pitch deck on your startup, and receive a navigable HTML file with a title slide, problem/solution narrative, Chart.js traction chart, and a CTA closing slide. ## Quick Start Use the slides skill to create a 10-slide HTML pitch deck about my SaaS product with a revenue chart and pricing tiers.

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

Invoke the slides skill with a topic and slide count, and it generates a single HTML file containing styled slides, navigation controls, and Chart.js charts. The template includes a 16:9 slide container, keyboard navigation, and preconfigured chart styling.

What slide layouts are available for presentations?▼

The skill provides 25 layout patterns including title slides, feature grids, metrics dashboards, comparison tables, pricing cards, timelines, and big-number hero slides. Each layout includes responsive CSS grid structures and matching animation classes.

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

Use the PAS (Problem-Agitate-Solution) formula for problem slides, following the template of stating the pain point, agitating with consequences, then presenting the solution. The formula-to-slide mapping table pairs each slide type with its primary formula and target emotion.

Does the HTML slide template work on mobile devices?▼

Yes, the template includes responsive breakpoints at 768px and 480px that adjust padding, font sizes with clamp(), and grid columns. Feature grids collapse from three columns to one on mobile, and navigation buttons shrink accordingly.

What deck structure should I use for investor fundraising?▼

For seed fundraising, use the YC Seed Deck structure with 10 slides covering problem, solution, traction, market, and the ask. For later rounds, the Series A strategy uses 12-15 slides targeting growth-stage VCs.