skills.rest
kileroppo
kileroppoCOMMUNITY
Explore all skills by this author →
GitHub

ckm:slides

Create strategic HTML presentation decks with design tokens and Chart.js patterns.

Updated Aug 27, 2026
Search Tags:#html#copywriting#design tokens#slides#chartjs#presentation strategy
One-click install
npx skills add https://github.com/kileroppo/AI-Coding-Guidance-Skills --skill ckm-slides-kileroppo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:slides
Source: https://github.com/kileroppo/AI-Coding-Guidance-Skills/tree/main/skills/slides
Command: npx skills add https://github.com/kileroppo/AI-Coding-Guidance-Skills --skill ckm-slides-kileroppo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves the problem of creating compelling, consistent HTML presentation decks without manually figuring out layout, styling tokens, data-visualization integration, or slide-by-slide persuasive messaging.

Core Features & Use Cases

  • Strategic deck composition: Builds slide structure using a phase-appropriate approach (layout + emotional arc + slide strategy) so each slide supports the overall narrative.
  • Design-token-driven responsive HTML: Produces a responsive HTML template with consistent typography, spacing, navigation/progress UI, and theming via tokens.
  • Chart.js-ready data visualization: Integrates Chart.js patterns for data-driven slides (e.g., revenue trends, KPIs) within the same deck layout system.
  • Copywriting formula support: Generates persuasive slide text using reference formulas such as PAS, AIDA, FAB, and urgency-based structures.

Quick Start

Invoke the slides skill with the arguments "market update 8" to generate an 8-slide strategic HTML deck tailored to a market update story.

Frequently Asked Questions about ckm:slides

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

FAQPage Schema
How do I generate an HTML presentation slide deck with persuasive copywriting?▼

To generate an HTML presentation slide deck, this Skill builds a responsive template applying persuasive copywriting formulas like PAS and AIDA alongside consistent design tokens for typography and spacing.

Can I create data-driven slides with Chart.js visualizations in my presentation?▼

Yes, you can create data-driven slides because this Skill integrates Chart.js-ready visualization patterns directly within the HTML deck layout system to display revenue trends and KPIs.

What is the best way to structure a marketing pitch deck narrative across multiple slides?▼

The best way to structure a marketing pitch deck is by applying a phase-appropriate approach that aligns layout, emotional arc, and slide strategy to support the overall storytelling narrative.

How do I ensure consistent design tokens and responsive layouts across my slide deck?▼

You ensure consistent design tokens by using this Skill to produce a responsive HTML template that standardizes typography, spacing, navigation UI, and theming across all generated slides.

Does this slide generation approach work without external dependencies?▼

Yes, this slide generation approach works entirely without external dependencies, relying only on internal reference documents to execute the selected HTML slide creation flow.

Related Skills

Explore More Design & Creative Skills→
klarbauklarbau
7

ckm:slides

Create strategic HTML presentation decks with Chart.js visualizations and responsive layouts.

Community
Intermediate
lisposterlisposter
1

baoyu-slide-deck

Generate image-based slide decks from content with PPTX/PDF export.

Community
Advanced
STAR03-byteSTAR03-byte
1

ckm:slides

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

Community
Intermediate
k2worksk2works

generating-slides

Generate a 12-slide PowerPoint presentation from inception deck Markdown using pptxgenjs.

Community
Intermediate