frontend-slides

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

72|15|Updated Oct 5, 2025
One-click install
npx skills add https://github.com/tan-yong-sheng/ai-vision-mcp --skill frontend-slides-tan-yong-sheng
Or copy as Structured Prompt for Agent
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.