skills.rest
notque
notqueCOMMUNITY
Explore all skills by this author →
GitHub

frontend-slides

Generate single-file HTML slide decks from notes, PPTX, or existing decks.

415|44|Updated Mar 18, 2026
Search Tags:#html#presentation#slides#css theming#pptx to html#deterministic generation#viewport validation
One-click install
npx skills add https://github.com/notque/vexjoy-agent --skill frontend-slides-notque
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-slides
Source: https://github.com/notque/vexjoy-agent/tree/main/skills/frontend/frontend-slides
Command: npx skills add https://github.com/notque/vexjoy-agent --skill frontend-slides-notque

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Producing slide decks often leads to broken layouts, unreadable typography, and inconsistent behavior across screen sizes. This skill ensures your deck is built as a single self-contained HTML file with strict viewport-fit rules and a deterministic validation gate.

Core Features & Use Cases

  • Browser-based HTML presentations: Creates a single .html deck that runs offline (inline CSS + JS, no CDN dependencies).
  • Three build paths: Start from topic/notes, convert a provided .pptx, or enhance an existing HTML deck.
  • Preset-driven visual consistency: Applies one of 12 named CSS style presets selected via mood mapping and slide previews.
  • Robust slide navigation: Includes a full SlideController with keyboard, touch swipe, debounced wheel navigation, slide index indicator, and IntersectionObserver reveal behavior.
  • Deterministic validation: Runs validate-slides.py across required breakpoints and blocks completion if any slide overflows.

Quick Start

Ask the AI to create an HTML slide deck in a specific mood and tell it you want to convert a deck from a PPTX file path like "convert slides from /path/to/deck.pptx into an HTML browser deck with an energized mood."

Frequently Asked Questions about frontend-slides

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

FAQPage Schema
How do I convert a PPTX file to an HTML presentation?▼

To convert a PPTX file to an HTML presentation, this tool processes your input file and generates a single, self-contained HTML slide deck with inline CSS and JS that runs offline without external dependencies.

What is the best way to create browser-based slides from plain notes?▼

Creating browser-based slides from notes is best handled by generating a single-file HTML deck with viewport-fit rules, preset-driven visual consistency, and robust slide navigation with keyboard and touch swipe support.

Can I use HTML presentations offline without relying on a CDN?▼

Yes, HTML presentations generated by this tool run completely offline because all CSS and JavaScript are inlined directly into the single HTML file, requiring no CDN dependencies or external network access.

How do you validate HTML slides for responsive typography across screen sizes?▼

Validating HTML slides for responsive typography is done using deterministic overflow validation across required breakpoints, which blocks completion if any slide exceeds strict viewport-fit and readability constraints.

Does the generated HTML slide deck support keyboard and touch navigation?▼

Yes, the generated HTML slide deck supports full navigation including keyboard controls, touch swipe gestures, debounced wheel scrolling, slide index indicators, and IntersectionObserver reveal animations.

Why does my HTML slide layout break on different screen sizes?▼

HTML slide layouts break on different screen sizes due to inconsistent viewport-fit rules, but this tool enforces strict viewport validation and responsive typography across multiple breakpoints to prevent overflow.

Related Skills

Explore More Design & Creative Skills→
RedWoodOGRedWoodOG
174

powerpoint

Create, edit, and extract content from PPTX presentations.

Community
Advanced
openyakopenyak
704

build-dashboard

Generate self-contained HTML dashboards with embedded data and Chart.js visualizations.

Official
Advanced
het8802het8802
3

hyperframes

Automate HTML-based video composition with GSAP animations and synchronized text and audio.

Community
Advanced
MuhammadUAMuhammadUA

presentations

Create, validate, and export 1920x1080 HTML slide decks to PDF and PPTX.

Community
Intermediate