slides-design

Generates HTML slide decks with design tokens and Chart.js data visualizations.

Updated Feb 12, 2026
One-click install
npx skills add https://github.com/duc01226/SoftwareDevCareers --skill slides-design-duc01226
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: slides-design
Source: https://github.com/duc01226/SoftwareDevCareers/tree/main/.claude/skills/slides-design
Command: npx skills add https://github.com/duc01226/SoftwareDevCareers --skill slides-design-duc01226

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill helps teams quickly create persuasive, data-driven HTML slide decks by combining design tokens, Chart.js visuals, and a contextual decision framework.

Core Features & Use Cases

  • Embeds design tokens inline for file:// compatibility and consistent visuals.
  • Leverages Chart.js for dynamic data visualizations and 25+ layout options.
  • Supports multiple deck strategies for investor pitches, product demos, and conference talks.

Quick Start

Provide a goal and audience, and the system will generate an HTML slide deck with embedded tokens and Chart.js visuals.

Frequently Asked Questions about slides-design

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

FAQPage Schema
How do I generate HTML presentation slides from data?

To generate HTML presentation slides, provide your goal and audience to create a deck with embedded design tokens and Chart.js visuals. The system applies a contextual decision framework to structure persuasive, data-driven slide layouts.

Can I use Chart.js for data visualizations in an HTML slide deck?

Yes, Chart.js is used for dynamic data visualizations in the HTML slide deck. The system relies on it to render interactive charts directly within the presentation file.

Why do my HTML slides not render correctly when opening from a local file path?

HTML slides may not render correctly from a local file path if external resources are blocked. This system embeds design tokens inline for file:// compatibility, ensuring consistent visuals without requiring a web server.

What is the best way to create an investor pitch deck using HTML?

The best way to create an investor pitch deck in HTML is to use a system that combines design tokens with data visualizations. This approach supports multiple deck strategies tailored for investor pitches, sales demos, and conference talks.

Does this HTML slide generator support responsive layouts and navigation?

Yes, the HTML slide generator includes responsive layouts and navigation. It uses CSS variables and offers over 25 layout options to ensure presentations adapt to different screen sizes.

Can I apply design tokens to maintain consistent visual styling across HTML presentations?

Yes, you can apply design tokens to maintain consistent visual styling across HTML presentations. The system uses CSS variables and embeds these tokens inline to ensure styling remains uniform across all generated slides.