ckm:slides

Generate strategic HTML presentations with Chart.js templates and design tokens.

Updated Apr 17, 2026

Search Tags:#design #copywriting #presentation #slides #responsive #tokens #chartjs

Ready to run

npx skills add https://github.com/Lutimi/claude2figma --skill ckm-slides-lutimi

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ckm:slides
Source: https://github.com/Lutimi/claude2figma/tree/main/ui-ux-pro-max-skill/.claude/skills/slides
Command: npx skills add https://github.com/Lutimi/claude2figma --skill ckm-slides-lutimi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Strategic slide design is painful without a guided approach that combines data visualization, tokens, and responsive layouts for consistent, high-quality decks.

Core Features & Use Cases

Strategic HTML slide design with Chart.js integration and token-driven styling for consistent branding.
Responsive layouts and design-system guidance to accelerate deck production for marketing, product, and executive briefs.
Use Case: When you need data-driven slides (e.g., charts, KPIs) that look polished across devices and stakeholders.

Quick Start

Provide the desired slide topic and count to the slides skill to generate a ready-to-customize deck.

Frequently Asked Questions about ckm:slides

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

FAQPage Schema

How do I generate data-driven HTML slides with Chart.js visualizations?▼

Generate strategic HTML slides with Chart.js templates by providing your desired slide topic and count. You receive a ready-to-customize deck featuring responsive layouts, data visualization assets, and design tokens for consistent branding.

What are design tokens and how do they apply to HTML presentation layouts?▼

Design tokens are predefined styling variables that drive consistent branding across HTML presentation slides. They ensure your responsive layouts maintain uniform typography, color, and spacing across all data visualization assets and stakeholders.

Can I use this approach for marketing and product storytelling presentations?▼

Yes, this approach specifically supports marketing and product storytelling presentations. It accelerates deck production for executive briefs by combining strategic copywriting references with responsive layouts and Chart.js data visualization.

Does this slide generation method work without external dependencies?▼

Yes, this slide generation method works without external dependencies. It validates dependencies internally and classifies complexity as intermediate, relying solely on built-in components like copywriting references to guide content creation.

What is the best way to create responsive slide decks for multiple devices?▼

The best way to create responsive slide decks is using token-driven styling combined with responsive layouts. This ensures your HTML presentations and data visualizations look polished across all devices and stakeholder viewing environments.

When should I not use token-driven HTML slides for presentations?▼

You should avoid token-driven HTML slides when you need native PowerPoint compatibility or offline editing without a browser environment. This approach is optimized for web-based viewing rather than traditional desktop presentation software workflows.