skills.rest
bmad-labs
bmad-labsOFFICIAL
Explore all skills by this author →
GitHub

slides-generator

Generate interactive React and Tailwind CSS slides as standalone HTML.

14|3|Updated Jan 15, 2026
Search Tags:#react#design system#tailwind css#presentation#slides#html export
One-click install
npx skills add https://github.com/bmad-labs/skills --skill slides-generator-bmad-labs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: slides-generator
Source: https://github.com/bmad-labs/skills/tree/main/skills/slides-generator
Command: npx skills add https://github.com/bmad-labs/skills --skill slides-generator-bmad-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires vercel-react-best-practices, ui-ux-pro-max, agent-browser, ai-multimodal, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the creation of interactive, professional presentation slides, transforming raw content and design preferences into polished, exportable HTML presentations.

Core Features & Use Cases

  • Automated Slide Generation: Creates React + Tailwind CSS slides from Markdown outlines.
  • Design System Integration: Leverages external skills for style, color, and typography recommendations.
  • Browser Verification: Ensures quality and consistency before final export.
  • Standalone HTML Export: Produces a single, self-contained HTML file for easy sharing.
  • Use Case: Generate a presentation for a product demo, a technical benchmark report, or a project status update with minimal manual design effort.

Quick Start

Use the slides-generator skill to create a presentation about 'AI benchmarks' with a 'dark tech' theme.

Frequently Asked Questions about slides-generator

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

FAQPage Schema
How do I generate interactive presentation slides from code?▼

You can generate presentation slides from code by converting Markdown outlines into React and Tailwind CSS components, which are then compiled into a standalone interactive HTML file for immediate sharing.

What is the best way to convert a Markdown outline into a standalone HTML presentation?▼

Converting a Markdown outline into a standalone HTML presentation is best handled by automating React and Tailwind CSS code generation, applying design system rules, and verifying visual consistency via browser checks before final export.

Can I use Tailwind CSS and React to build automated presentation slides?▼

Yes, you can use Tailwind CSS and React to build automated presentation slides. The process initializes a project, structures requirements, generates component code, and exports a single self-contained HTML file.

Does the HTML presentation export process include design system recommendations?▼

Yes, the HTML presentation export process includes design system recommendations. It integrates with external UI and UX skills to provide style, color, and typography guidance during the slide generation workflow.

Do I need agent-browser to verify presentation slides before final HTML export?▼

Yes, you need agent-browser to verify presentation slides before final HTML export. It checks the generated React components for quality and visual consistency to ensure the output meets design standards.

Related Skills

Explore More Design & Creative Skills→
eatbreadseatbreads
1

ppt-maker

Convert notes and outlines into editable PowerPoint decks with speaker notes.

Community
Intermediate
marcocellomarcocello
10

html-presentations

Create standalone HTML presentation decks with semantic slide structure and embedded styling.

Community
Advanced
Higashi-KotaHigashi-Kota

accessibility-review

Audit design system tokens and components for WCAG compliance.

Community
Intermediate
pmarashianpmarashian
2

testing-fallback-strategies

Execute sequential fallback testing strategies when browser automation fails.

Community
Advanced