slides-design

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

1|Updated Mar 9, 2026

Search Tags:#html #design tokens #presentation #slides #pitch deck #chart.js

Ready to run

npx skills add https://github.com/docaohieu2808/claude-skills --skill slides-design

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: slides-design
Source: https://github.com/docaohieu2808/claude-skills/tree/main/slides-design
Command: npx skills add https://github.com/docaohieu2808/claude-skills --skill slides-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the creation of professional, engaging HTML slide decks, streamlining the process of building presentations for various professional needs.

Core Features & Use Cases

Strategic Slide Generation: Creates presentations tailored for investor pitches, sales decks, product demos, QBRs, and conference talks.
Design Token Integration: Ensures brand consistency by embedding design tokens and using CSS variables.
Data Visualization: Utilizes Chart.js for dynamic and professional data visualizations.
Use Case: Generate a 10-slide investor pitch deck for a new SaaS product, incorporating data charts and adhering to a specific brand's visual identity.

Quick Start

Create a 10-slide seed funding pitch for ClaudeKit.

Frequently Asked Questions about slides-design

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

FAQPage Schema

How do I generate an HTML pitch deck with data visualizations?▼

You can generate an HTML pitch deck by using a tool that integrates Chart.js for dynamic data visualizations and design tokens for brand consistency. This approach supports investor pitches and sales decks directly in the browser.

Can I use design tokens to maintain brand consistency in HTML presentations?▼

Yes, design tokens can be embedded into HTML presentations using CSS variables. This ensures brand consistency across all slides, from product demos to conference talks, by maintaining a unified visual identity.

What is the best way to create dynamic charts for a QBR presentation?▼

The best way to create dynamic charts for a QBR presentation is by utilizing Chart.js within HTML slides. This allows for professional data visualization and strategic slide generation directly in the browser.

Do I need any specific design system setup before building HTML slide decks?▼

Yes, building strategic HTML slide decks requires activating dependent skills like design-system and frontend-design. These prerequisites ensure the presentations have proper design principles and contextual decision systems.

How does a contextual decision system work for presentation generation?▼

A contextual decision system works by applying design principles and data visualization logic to generate strategic HTML presentations. It tailors the slide content and structure for specific professional needs like investor pitches or conference talks.