frontend-slides

Generate zero-dependency HTML slide decks with inline CSS and JS.

72|15|Updated Oct 5, 2025

Search Tags:#design #html #css #presentation #slides #conversion

Ready to run

npx skills add https://github.com/tan-yong-sheng/ai-vision-mcp --skill frontend-slides-tan-yong-sheng

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-slides
Source: https://github.com/tan-yong-sheng/ai-vision-mcp/tree/main/.claude/skills/frontend-slides
Command: npx skills add https://github.com/tan-yong-sheng/ai-vision-mcp --skill frontend-slides-tan-yong-sheng

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps you create self-contained, browser-ready slide decks without external dependencies, enabling smooth distribution and offline viewing.

Core Features & Use Cases

Zero-dependency output: produces a single self-contained HTML file with inline CSS and JS by default.
Viewport-safe presentation: ensures every slide fits within a single viewport using clamp-based typography and responsive spacing.
PPTX conversion & design exploration: converts PowerPoint content to web slides or builds new decks from topic notes for talks, workshops, and pitches.
Accessible and performant: keyboard navigation, reduced motion support, and responsive layouts for various devices.
Styling presets & brand-ready outputs: leverages STYLE_PRESETS.md to map moods to visual presets and ensure consistency across decks.

Quick Start

Read STYLE_PRESETS.md to understand the viewport-safe CSS base, density limits, preset catalog, and CSS gotchas before generating a deck.

Frequently Asked Questions about frontend-slides

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

FAQPage Schema

How do I convert PPTX to HTML for web presentation?▼

Convert PPTX to HTML by mapping PowerPoint content into a self-contained, browser-ready slide deck. This approach produces a single HTML file with inline CSS and JS, allowing smooth distribution and offline viewing without external dependencies.

What is the best way to build HTML slides from scratch?▼

Build HTML slides from scratch by generating a zero-dependency presentation with inline CSS and JS. The output uses responsive typography and viewport-fit base layouts to ensure the slides are ready to present in any browser environment.

Do I need external libraries to run HTML presentation slides in the browser?▼

No, you do not need external libraries to run HTML presentation slides. The generated output is a single self-contained HTML file with inline CSS and JS, ensuring smooth distribution and offline viewing without relying on external dependencies.

How do I ensure HTML slides fit different screen sizes during a pitch?▼

Ensure HTML slides fit different screen sizes by applying a viewport-safe presentation base. The system uses clamp-based typography and responsive spacing, guaranteeing every slide fits within a single viewport across various devices.

Can I use keyboard navigation and animations in web slide decks?▼

Yes, you can use keyboard navigation and animations in web slide decks. The generated HTML supports keyboard controls, reduced motion accessibility options, and animation-rich layouts to deliver engaging, accessible presentations.

How do I apply consistent visual styles when creating a workshop slide deck?▼

Apply consistent visual styles by leveraging style presets to map moods to visual designs. This ensures brand-ready outputs and maintains visual consistency across the entire workshop slide deck without manual CSS adjustments.

Related Skills

Explore More Design & Creative Skills→

Superagentsys

650

ppt-generator

Generates editable PPTX files with slide outlines, speaker notes, and formatted content from user-provided topics, audiences, languages, and slide counts.

Community

Advanced