frontend-slides

Generate zero-dependency HTML presentations with viewport-fitted slides and preset visual styles.

1|Updated Oct 11, 2025
One-click install
npx skills add https://github.com/ibytechaos/claude --skill frontend-slides-ibytechaos
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-slides
Source: https://github.com/ibytechaos/claude/tree/main/plugins/everything-claude-code/skills/frontend-slides
Command: npx skills add https://github.com/ibytechaos/claude --skill frontend-slides-ibytechaos

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires python-pptx, and includes references (resource) components.

What problem does it solve? Creating visually distinctive presentations usually requires design expertise or heavyweight tools like PowerPoint, and converting existing PPT files to web-friendly formats is tedious. This Skill produces self-contained, animation-rich HTML slide decks that run entirely in the browser, with a guided style-discovery workflow for users who don't know their design preferences. ## Core Features & Use Cases - HTML Presentation Generation: Builds single-file decks with inline CSS/JS, keyboard, wheel, and touch navigation, reveal animations, and reduced-motion support. - PPT/PPTX Conversion: Extracts text, images, and speaker notes from PowerPoint files using python-pptx, then restyles them as web presentations. - Visual Style Exploration: Generates three single-slide previews from 12 curated presets (e.g., Bold Signal, Neon Cyber, Swiss Modern) so users pick a look by seeing it, not describing it. - Viewport Fit Enforcement: Every slide is locked to one viewport with clamp()-based scaling and density limits, validated across desktop, tablet, and mobile sizes. - Use Case: A developer needs a conference talk deck from rough notes. The Skill asks about mood, shows three styled preview slides, then delivers a finished presentation.html that fits any screen without scrolling. ## Quick Start Ask the assistant to create an HTML presentation from your topic or notes, or to convert an existing PPTX file into a web 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 convert a PowerPoint file to an HTML presentation?

Use python-pptx with Python 3 to extract text, images, and speaker notes from the .ppt or .pptx file, preserving slide order. After extraction, run the standard style-selection workflow to rebuild the content as a self-contained HTML deck.

How do I create HTML slides without design experience?

Describe the mood you want (impressed, energized, focused, inspired) and the Skill generates three single-slide previews in different visual presets. Pick one preview or mix elements, and the full deck is built in that style.

Do the generated HTML presentations require external libraries or frameworks?

No. The default output is one self-contained HTML file with inline CSS and JavaScript. Only web fonts from Google Fonts or Fontshare are loaded externally; everything else runs offline in the browser.

Why does my slide content overflow the screen?

Overflow happens when content exceeds the density limits, such as more than 4-6 bullets or 8-10 lines of code per slide. The fix is splitting content into multiple slides, never shrinking text below readable sizes or allowing internal scrolling.

Do HTML slide decks work on mobile and small screens?

Yes. Slides use clamp() for all typography and spacing, with breakpoints at 700px, 600px, and 500px viewport heights. Decks are validated at sizes from 1920x1080 down to 375x667 and landscape phone orientations.

What are the limitations of browser-based HTML presentations?

HTML decks lack built-in presenter tools like timers and slide notes views found in PowerPoint or Keynote. They also require manual validation across screen sizes, and complex PPT animations do not survive conversion and must be rebuilt in CSS.