skills.rest
jc180105
jc180105COMMUNITY
Explore all skills by this author →
GitHub

ckm:slides

Create data-driven HTML slide decks with Chart.js visuals and token-based styling.

Updated Apr 16, 2026
Search Tags:#presentations#html#copywriting#slides#responsive-design#design-tokens#chartjs
One-click install
npx skills add https://github.com/jc180105/.opencode --skill ckm-slides-jc180105
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:slides
Source: https://github.com/jc180105/.opencode/tree/main/.opencode/skills/design-slides
Command: npx skills add https://github.com/jc180105/.opencode --skill ckm-slides-jc180105

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Eliminates the manual, error-prone process of producing data-driven HTML slide decks by automating layout, visuals, and branding.

Core Features & Use Cases

  • Chart.js integrations for live data visuals across slides
  • Design token-driven styling to ensure consistent branding
  • Contextual slide strategies and copywriting formulas for persuasive decks
  • Use cases include marketing pitches, data storytelling, and executive briefings

Quick Start

Create a 5–10 slide HTML deck on a topic using Chart.js visuals and token-based styling.

Frequently Asked Questions about ckm:slides

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

FAQPage Schema
How do I create a responsive HTML slide deck with Chart.js data visuals?▼

To create responsive HTML slide decks with Chart.js visuals, you apply design token-based styling and 16:9 layout constraints to generate data-driven slides. This approach automates branding consistency and embeds live charts directly into your presentation.

What are design tokens and how do they ensure consistent branding in HTML presentations?▼

Design tokens are centralized styling variables applied to HTML presentations to ensure consistent branding across all slides. They automate visual formatting by defining colors, fonts, and spacing, eliminating manual styling errors during deck creation.

Can I use copywriting formulas and contextual strategies for marketing pitch slides?▼

Yes, you can use copywriting formulas and contextual slide strategies for marketing pitch slides. This approach integrates persuasive narrative structures into your data storytelling, enhancing clarity and impact for executive briefings and marketing reports.

Does this approach to building data narratives support executive briefings and marketing reports?▼

Yes, building data narratives with HTML presentations supports executive briefings and marketing reports. It streamlines the creation of data-driven decks by automating responsive 16:9 layouts and integrating live data visuals for clear communication.

What is the best way to automate layout and visuals for data-driven HTML slide decks?▼

The best way to automate layout and visuals for data-driven HTML slide decks is by using design token-driven styling alongside Chart.js integration. This eliminates manual formatting errors and ensures responsive 16:9 layouts for your presentations.

Related Skills

Explore More Design & Creative Skills→
luicabref97luicabref97

ckm:design-system

Generate and validate design tokens, component specs, and slide HTML.

Community
Advanced
nirajrathod19nirajrathod19

slides

Generate slide decks with React and Tailwind CSS within a 16:9 frame.

Community
Advanced
STAR03-byteSTAR03-byte
1

ckm:slides

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

Community
Intermediate
edisonabeledisonabel

ckm:slides

Generate strategic HTML presentations with Chart.js, design tokens, and responsive layouts.

Community
Intermediate