skills.rest
docaohieu2808
docaohieu2808COMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/docaohieu2808/claude-skills --skill slides-design
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
ArnavPuriArnavPuri
3

design-context

Establish and manage design context with brand identity, color palettes, and typography.

Community
Intermediate
ceoimperiumprojectsceoimperiumprojects
5

slides

Generate self-contained HTML slide decks with inline CSS and JavaScript.

Community
Intermediate
HarshodaiHarshodai

design-system

Manage design token architecture and generate brand-compliant HTML slide decks with Chart.js.

Community
Advanced
MuhammadUAMuhammadUA

presentations

Create, validate, and export 1920x1080 HTML slide decks to PDF and PPTX.

Community
Intermediate