frontend-slides

Frontend Slides

Create animation-rich HTML presentations that run entirely in the browser with zero dependencies.

Inspired by the visual exploration approach demonstrated in zarazhangrui's work (credit: @zarazhangrui).

When to Activate

Create a talk deck, pitch deck, workshop deck, or internal presentation
Convert .ppt or .pptx slides to an HTML presentation
Improve the layout, motion, or typography of an existing HTML presentation
Explore presentation styles together with a user who doesn't yet know their design preferences

Non-Negotiables

Zero dependencies: By default, generate a self-contained HTML file with inline CSS and JS.
Must fit the viewport (Viewport fit): Each slide must fit within a single viewport with no internal scrolling.
Show, don't tell: Use visual previews instead of abstract style questionnaires.
Distinctive design: Avoid generic purple gradients, white-background Inter typography, and decks that look like templates.
Production quality: Keep code commented, accessible, responsive, and performant.

Before generating, read STYLE_PRESETS.md to learn the viewport-safe CSS foundations, density limits, preset catalog, and CSS considerations.

Workflow

1. Detect Mode

Choose a path:

New presentation: The user has a topic, notes, or a complete draft
PPT conversion: The user has .ppt or .pptx
Enhancement: The user already has HTML slides and wants to improve them

2. Discover Content

Ask only for the minimum necessary information:

Purpose: pitch, teaching, conference talk, internal update
Length: short (5-10 slides), medium (10-20 slides), long (20+ slides)
Content status: finished copy, rough notes, topic only

If the user has content, ask them to paste it before starting on the design style.

3. Discover Style

Default to the visual exploration approach.

If the user already knows the preset they want, skip the preview and use it directly.

Otherwise:

Ask what feeling the deck should evoke: striking, energetic, focused, inspired.
In .ecc-design/slide-previews/ , generate 3 single-slide preview files。
Each preview must be self-contained, clearly showcase typography/color/motion, and keep the slide content to about 100 lines or fewer.
Ask the user which preview to keep or which elements to mix.

When mapping atmosphere to style, refer to STYLE_PRESETS.md preset guidelines in .

4. Build the Presentation

Output:

presentation.html
[presentation-name].html

Use the assets/ folder only when the slide deck contains extracted or user-provided images.

Required structure:

Semantic slide sections
Viewport-safe CSS foundation from STYLE_PRESETS.md viewport-safe CSS foundations
CSS custom properties for theme values
Presentation controller class for keyboard, wheel, and touch navigation
Intersection Observer for reveal animations
Reduced-motion support

5. Enforce Viewport Fit

Treat this as a hard gate.

Rules:

Each .slide must use height: 100vh; height: 100dvh; overflow: hidden;
All fonts and spacing must use clamp() scaling
When content does not fit, split into multiple slides
Never solve overflow by shrinking text below readable size
Never allow scrollbars inside a slide

Use the density limits and mandatory CSS blocks in STYLE_PRESETS.md .

6. Validate

Check the finished slide deck at the following sizes:

1920x1080
1280x720
768x1024
375x667
667x375

If browser automation tools are available, use them to verify that no slides overflow and keyboard navigation works properly.

7. Deliver

When delivering:

Delete temporary preview files unless the user wants to keep them
When useful, open the slide deck using the platform-appropriate command
Summarize the file path, presets used, slide count, and easy-to-customize theme points

Use the correct open method for the current operating system:

macOS: open file.html
Linux: xdg-open file.html
Windows: start "" file.html

PPT / PPTX Conversion

For PowerPoint conversion:

Prefer python-pptx with python3 to extract text, images, and notes.
If python-pptx is unavailable, ask whether to install it, or fall back to a manual/export-based workflow.
Preserve slide order, speaker notes, and extracted assets.
After extraction, run the same style selection workflow as for a new presentation.

Keep conversion cross-platform. When Python can handle it, do not rely on macOS-only tools.

Implementation Requirements

HTML / CSS

Use inline CSS and JS unless the user explicitly requests a multi-file project.
Fonts can come from Google Fonts or Fontshare.
Prefer atmospheric backgrounds, strong typographic hierarchy, and clear visual direction.
Use abstract shapes, gradients, grids, noise, and geometric forms instead of illustrations.

JavaScript

Include:

Keyboard navigation
Touch / swipe navigation
Mouse wheel navigation
Progress indicator or slide index
Reveal-on-enter animation triggers

Accessibility

Use semantic structure (main, section, nav）
Keep contrast readable
Support keyboard-only navigation
Respect prefers-reduced-motion

Content Density Limits

Unless the user explicitly requests denser slides while still maintaining readability, use the following maximum limits:

Slide type	Limit
Title	1 main title + 1 subtitle + optional tagline
Content	1 heading + 4-6 bullet points or 2 short paragraphs
Feature grid	Up to 6 cards
Code	Up to 8-10 lines
Quote	1 quote + attribution
Image	1 viewport-constrained image

Anti-Patterns

Generic startup-style gradients with no visual identity
Using system fonts (unless it is a deliberate editorial style)
Walls of long bullet points
Code blocks that require scrolling
Fixed-height content boxes that break on short screens
Invalid negative CSS functions, such as -clamp(...)

Related ECC Skills

frontend-patterns: for component and interaction patterns around slide decks
liquid-glass-design: use when the presentation intentionally borrows the Apple glassmorphism aesthetic
e2e-testing: if automated browser validation of the final slide deck is needed

Deliverable Checklist

The presentation can run in a browser via a local file
Every slide fits the viewport without scrolling
The style is distinctive and has design intent
Animations are meaningful, not noisy
Respects reduced motion settings
File paths and customization points are explained at delivery