skills.rest
samymity
samymityCOMMUNITY
Explore all skills by this author →
GitHub

frontend-slides

Generate zero-dependency HTML slide decks with viewport-fit animations and navigation.

1|Updated Mar 3, 2026
Search Tags:#html#accessibility#presentation#slide deck#powerpoint conversion#ui animation#viewport fit
One-click install
npx skills add https://github.com/samymity/bridge-ventures-backend --skill frontend-slides-samymity
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-slides
Source: https://github.com/samymity/bridge-ventures-backend/tree/main/.claude/skills/frontend-slides
Command: npx skills add https://github.com/samymity/bridge-ventures-backend --skill frontend-slides-samymity

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill turns raw ideas or PowerPoint content into polished, animation-rich HTML presentations that reliably fit the viewport and work smoothly across devices.

Core Features & Use Cases

  • Create browser-ready HTML presentations with a zero-dependency single-file default and inline CSS/JS.
  • Convert .ppt/.pptx to web slides by extracting slide order, notes, and assets, then styling via the same workflow.
  • Discover visually distinct styling presets using generated single-slide previews (in .ecc-design/slide-previews/) to reduce abstract style decision-making.
  • Enforce viewport fit and accessibility with mandatory viewport-safe CSS, clamp() typography/spacing, reveal animations, keyboard/touch/wheel navigation, and prefers-reduced-motion support.

Quick Start

Ask the assistant to generate an HTML presentation named "product-launch" from your topic and rough notes, using a distinctive preset you select from three generated slide previews, and ensure each slide fits the viewport with no internal scrolling.

Frequently Asked Questions about frontend-slides

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

FAQPage Schema
How do I convert PowerPoint .pptx files to HTML web slides?▼

Converting PowerPoint to HTML web slides involves extracting slide order, notes, and assets from .ppt or .pptx files, then restyling them into a single-file HTML deck with inline CSS, JS, and viewport-fit rules.

Can I create HTML slide decks that fit a single viewport without scrolling?▼

HTML slide decks can fit a single viewport by enforcing mandatory CSS viewport-safe rules, using responsive clamp()-based typography and spacing, and applying semantic structure to prevent internal scrolling across devices.

How do you add UI animation to HTML presentations with reduced-motion support?▼

Adding UI animation to HTML presentations requires implementing reveal animations with intersection observation, while respecting the prefers-reduced-motion media query to disable motion for users who request it.

Do I need external libraries to build a browser-ready presentation deck?▼

No external libraries are needed to build a browser-ready presentation deck. The output is a zero-dependency, single-file HTML document containing inline CSS and JS for styling, navigation, and animation.

What keyboard and touch navigation controls work for HTML slide decks?▼

HTML slide decks support navigation via keyboard, mouse wheel, and touch inputs, ensuring users can advance slides reliably across desktop and mobile devices within a single viewport layout.

What's the best way to choose a visual style for a new HTML slide deck?▼

Choosing a visual style for an HTML slide deck is streamlined by generating visually distinct single-slide previews, reducing abstract style decision-making by letting you select from concrete layout options before generating the full presentation.

Related Skills

Explore More Design & Creative Skills→
RedWoodOGRedWoodOG
174

powerpoint

Create, edit, and extract content from PPTX presentations.

Community
Advanced
rbah31rbah31
5

frontend-slides

Convert PowerPoint decks into self-contained HTML slides with inlined CSS and JS.

Community
Intermediate
BenavidesMichaelBenavidesMichael

css-svg-properties

Style and animate inline SVG graphics using CSS properties.

Community
Advanced
ChrisTowlesChrisTowles
4

slidev

Create and edit Slidev presentation slides with Markdown and YAML frontmatter.

Community
Intermediate