skills.rest
LGJ-Jonathan
LGJ-JonathanOFFICIAL
Explore all skills by this author →
GitHub

ckm:slides

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

Updated Mar 26, 2026
Search Tags:#html#data visualization#copywriting#presentation#slides#pitch deck#chart.js
One-click install
npx skills add https://github.com/LGJ-Jonathan/Jonathan_Global_Claude_Skills --skill ckm-slides-lgj-jonathan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:slides
Source: https://github.com/LGJ-Jonathan/Jonathan_Global_Claude_Skills/tree/main/ui-ux-pro-max/.claude/skills/slides
Command: npx skills add https://github.com/LGJ-Jonathan/Jonathan_Global_Claude_Skills --skill ckm-slides-lgj-jonathan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building persuasive, well-designed presentation decks from scratch requires juggling layout design, data visualization, responsive CSS, and persuasive copywriting, which is slow and inconsistent without a structured system. ## Core Features & Use Cases - HTML Slide Generation: Produces self-contained HTML slide decks 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 styled with design tokens for traction, metrics, and financial slides. - Strategic Content Frameworks: Provides 15 deck structures (YC Seed, Sales Pitch, Product Demo), 25 layout patterns, and copywriting formulas (PAS, AIDA, FAB) mapped to slide types and emotion arcs. - Use Case: Ask for a 10-slide investor pitch on your SaaS product and receive a complete HTML deck with a problem slide using PAS copy, a traction slide with a Chart.js MRR graph, and a CTA closing slide. ## Quick Start Use the slides skill to create a 10-slide investor pitch deck about my SaaS product with a revenue chart and a closing call to action.

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 charts?▼

Invoke the slides skill with a topic and slide count, and it generates a self-contained HTML file with navigation, responsive layouts, and Chart.js charts. The template supports line, bar, doughnut, and radar chart types styled with CSS design tokens.

What slide 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, product, business model, team, financials, and the ask. It follows an emotion arc 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 adjust padding, font sizes with clamp(), and grid layouts. On desktop it locks to a 16:9 aspect ratio with letterboxing.

Which copywriting formula works best for a call-to-action slide?▼

The skill maps CTA slides to the AIDA formula (Attention, Interest, Desire, Action) combined with urgency patterns. Headline patterns like power words and social proof statements are also provided for closing slides.

Can I customize the colors and fonts in the generated slides?▼

Yes, the template uses CSS custom properties such as --color-primary, --color-background, and --typography-font-heading. You replace the token values in the :root block to rebrand the entire deck consistently.

Related Skills

Explore More Design & Creative Skills→
aaltaayaaltaay

ckm:design-system

Converts a three-layer token system into CSS variables for brand-consistent design.

Community
Advanced
xpert-aixpert-ai
8

report-to-google-slides

Convert HTML analytics reports into editable Google Slides decks.

Official
Advanced
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced
joaoguirunasjoaoguirunas
3

presentation-design

Designs and evaluates presentation slides using audience-centered frameworks and cognitive load principles.

Community
Intermediate