skills.rest
Adham7843
Adham7843COMMUNITY
Explore all skills by this author →
GitHub

ckm:slides

Generate HTML presentations with Chart.js data visualizations and design tokens.

Updated Aug 23, 2026
Search Tags:#data visualization#design tokens#presentation design#Chart.js#HTML slides
One-click install
npx skills add https://github.com/Adham7843/SaaS-Security-Auditor --skill ckm-slides-adham7843
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:slides
Source: https://github.com/Adham7843/SaaS-Security-Auditor/tree/main/agents/design-factory/.opencode/skills/01-Brand/ckm-slides
Command: npx skills add https://github.com/Adham7843/SaaS-Security-Auditor --skill ckm-slides-adham7843

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires chart.js, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating visually appealing and informative HTML presentations without the need for complex design or coding skills.

Core Features & Use Cases

  • Strategic Design: Offers a structured approach to designing presentations with a focus on data visualization and responsive layouts.
  • Chart.js Integration: Provides seamless integration with Chart.js for dynamic data representation.
  • Design Tokens: Utilizes design tokens for consistent branding and theming across slides.
  • Copywriting Formulas: Includes a knowledge base of copywriting formulas to enhance the persuasive power of slides.
  • Use Case: Ideal for marketing presentations, pitch decks, and any scenario requiring the presentation of data-driven information.

Quick Start

Use the ckm:slides skill to create a presentation on 'Market Trends' with 5 slides.

Frequently Asked Questions about ckm:slides

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

FAQPage Schema
How do I create HTML presentations with embedded data visualization?▼

To create HTML presentations with data visualization, you can generate slides that integrate Chart.js for dynamic charts and use design tokens for consistent branding. This approach embeds interactive data directly into your web-based pitch decks.

Can I use Chart.js to build dynamic charts for pitch decks?▼

Yes, you can use Chart.js to build dynamic charts for pitch decks by embedding the library directly into HTML presentation slides. This allows you to represent marketing data and trends interactively within the browser.

Do I need HTML, CSS, and JavaScript knowledge to generate these slides?▼

Yes, you need HTML, CSS, and JavaScript knowledge to execute and customize the generated slides. The Skill outputs web-based presentation code that requires front-end development understanding to run and modify.

What is the best way to maintain consistent branding across presentation slides?▼

The best way to maintain consistent branding across presentation slides is by using design tokens. These tokens define your theme variables centrally, ensuring visual consistency across all generated HTML slides.

How do copywriting formulas enhance marketing presentations?▼

Copywriting formulas enhance marketing presentations by providing structured persuasive frameworks for your slide content. This strategic text integration improves the narrative flow and audience impact of your data presentation.

Related Skills

Explore More Design & Creative Skills→
dmedina-devdmedina-dev
1

ckm:design-system

Generate brand-compliant token systems, Tailwind-ready CSS variables, component specs, and HTML slides from JSON/CSS inputs.

Community
Advanced
hiyeshuhiyeshu
205

codeck-export

Export HTML presentation decks to PDF and PPTX with automated quality checks.

Community
Advanced
carapace-shcarapace-sh
1.9k

jq

Filter and transform JSON data using jq queries.

Official
Advanced
Clos01Clos01
3

html-ppt-taste-editorial

Generate editorial-minimalist 16:9 HTML presentation decks with refined typography and structured slide layouts.

Community
Intermediate