What is the meaning of frontend?

Frontend refers to the client-side part of a web application, which includes everything users interact with directly in their browser, such as the design, layout, and animations of HTML slide decks.

Is PPT the same as slide?

PPT (PowerPoint) is a file format for presentations, while a slide refers to an individual page within a presentation. They are related but not the same.

Yes, HTML is a front-end technology used for structuring content on the web, including creating animation-rich slide decks that run in the browser.

Can Claude Code generate slides?

Yes, Claude Code can generate slides as it is a reusable skill that creates animation-rich HTML slide decks that run entirely in the browser.

Why do we use frontend?

Frontend is used to create interactive and visually appealing user interfaces, such as animation-rich HTML slide decks that run in the browser, ensuring a seamless user experience with strict viewport fitting.

Skill

Generate Animated HTML Presentations

Name: Frontend Slides
Availability: OnlineOnly
Author: Antigravity

Builds zero-dependency, animation-rich HTML slide decks that fit the viewport exactly, with guided style discovery and PPTX conversion.

Get skill

Antigravity

Own this? Claim it

Spark score

out of 100

Updated 5 months ago

Version 1.0.0

Add to Favorites

Why it matters

Create zero-dependency, animation-rich HTML presentations that run entirely in the browser. Convert existing PPT/PPTX files or generate new slide decks from scratch with a focus on distinctive design and viewport fitting.

Outcomes

What it gets done

Generate slide decks from scratch or convert PPTX files.

Create visually rich, animated HTML content.

Ensure all slides fit exactly within the viewport without scrolling.

Apply distinctive design aesthetics with custom typography, color, and motion.

Install

Add it to your toolbox

Run in your project directory:

curl -fsSL https://spark.entire.vc/get/ag-frontend-slides | bash

Overview

Frontend Slides

Generates zero-dependency, single-file HTML slide decks with inline CSS/JS, enforcing exact viewport fitting and per-slide content limits. It guides content discovery and a show-don't-tell style preview phase, and can convert existing PPTX files via a Python extraction script. Use when creating a presentation from scratch, converting a PPTX to HTML, or enhancing an existing HTML deck while keeping every slide within the viewport with no scrolling.

What it does

Creates zero-dependency, animation-rich HTML presentations that run entirely in the browser as a single self-contained file with inline CSS/JS - no npm, no build tools. It detects which of three modes applies (new presentation, PPTX conversion, or enhancing an existing HTML deck), then walks through content discovery, a "show, don't tell" style-preview phase, and generation, enforcing a non-negotiable rule that every slide fits exactly within the viewport with zero internal scrolling.

When to use - and when NOT to

Use when a user asks to create a presentation, slide deck, or pitch from scratch; wants to convert an existing PPT/PPTX into a web-based presentation; or needs visually rich, animated HTML content that must fit exactly within the viewport. It is not meant for generic component styling outside the slide-deck context - it deliberately avoids "AI slop" aesthetics like Inter/Roboto fonts and purple gradients on white.

Inputs and outputs

For new presentations, it asks purpose (pitch deck, teaching/tutorial, conference talk, internal), length (5-10, 10-20, or 20+ slides), content readiness, and whether inline browser editing is needed - all in a single question batch. If images are provided, each is viewed and evaluated (usable/not usable, concept, dominant colors) and co-designed into the outline rather than bolted on afterward. Style discovery generates 3 distinct single-slide HTML previews based on a chosen mood (Impressed/Confident, Excited/Energized, Calm/Focused, Inspired/Moved), saved to .claude-design/slide-previews/ for the user to open and pick from, or the user can jump straight to a preset list.

Generation output is a single HTML file with the full contents of viewport-base.css inlined, Fontshare/Google Fonts (never system fonts), and per-slide content density limits enforced (e.g. content slides capped at 1 heading + 4-6 bullets, feature grids at 6 cards max, code slides at 8-10 lines) - content that exceeds a slide's limit is split into additional slides rather than crammed or left scrollable. Viewport rules require height: 100vh/100dvh with overflow: hidden on every .slide, clamp()-based font sizes and spacing instead of fixed units, height breakpoints at 700/600/500px, and prefers-reduced-motion support.

For PPTX conversion:

pip install python-pptx
python scripts/extract-pptx.py <input.pptx> <output_dir>

extracted content is confirmed with the user before proceeding through the same style-selection and generation phases, preserving text, images, slide order, and speaker notes as HTML comments.

Delivery opens the final file in the browser and documents navigation (arrow keys, space, scroll/swipe, nav dots), customization via :root CSS variables, and - if enabled - inline edit mode (hover top-left or press E, click to edit, Ctrl+S to save).

Integrations

Reads companion reference files during generation: STYLE_PRESETS.md (12 curated visual presets), viewport-base.css (mandatory responsive CSS), html-template.md (HTML/JS architecture), animation-patterns.md (CSS/JS animation snippets by feeling), and scripts/extract-pptx.py (built on the python-pptx library) for PowerPoint conversion.

Who it's for

Anyone building a pitch deck, conference talk, or teaching presentation who wants a distinctive, animated, browser-native slide deck - including converting an existing PowerPoint file - without wrestling with slide-authoring software or a JS build pipeline.

FAQ

Common questions

Discussion