frontend-slides

Generate viewport-fitted HTML slide decks from textual content and images.

1|Updated Feb 28, 2026
One-click install
npx skills add https://github.com/ichwanhs96/bel-ai-jar --skill frontend-slides-ichwanhs96
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-slides
Source: https://github.com/ichwanhs96/bel-ai-jar/tree/main/.vibe/skills/frontend-slides
Command: npx skills add https://github.com/ichwanhs96/bel-ai-jar --skill frontend-slides-ichwanhs96

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend Slides solves the tedious process of creating polished HTML slide decks by offering a zero-dependency, in-browser presentation builder that requires no npm or build steps.

Core Features & Use Cases

  • Zero dependencies — Single HTML files with inline CSS/JS, no external tooling.
  • Show, don't tell — Generate visual previews to help decide aesthetics before finalizing slides.
  • Viewport-fitting by default — Each slide fills the viewport with strict no-scroll rules (100vh/100dvh).
  • Phase-driven workflow — Content discovery, style previews, and final HTML generation, with optional image support.

Quick Start

Provide your content and style preferences, and I will generate a polished HTML slide deck.

Frequently Asked Questions about frontend-slides

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

FAQPage Schema
How do I create HTML slides without npm or build steps?

You can create HTML slides without npm by generating a zero-dependency, single HTML file with inline CSS and JS. This approach requires no external tooling, allowing presenters to build polished decks directly in the browser.

Can I make viewport-fitted slide decks that do not scroll?

Yes, you can make viewport-fitted slide decks that enforce strict no-scroll rules using 100vh or 100dvh. Each generated slide automatically fills the viewport, ensuring your presentation displays cleanly without scrolling.

What is the workflow for generating an HTML presentation from text?

The workflow for generating an HTML presentation involves a phased process: content discovery, style previews to decide aesthetics, and final HTML generation. You provide text and optional images to produce the final deck.

Does this HTML slide generator support adding images to presentations?

Yes, this HTML slide generator supports adding images to presentations. When you provide optional images alongside your textual content, the tool incorporates them during the final HTML generation phase to create visual slides.

What is the best way to build animation-rich slides for a tech pitch?

The best way to build animation-rich slides for a tech pitch is using a zero-dependency HTML generator that outputs single files with inline CSS. You can preview styles beforehand to ensure the animations fit your presentation.