# Html Slides

> Used when the user asks to "create HTML slides", "generate an HTML presentation", "make animated slides", "build interactive slides", "create web slides", "GSAP presentation", "browser-based slides", "convert PPTX to HTML", "animated deck", "reveal.js slides", or when the output format is HTML for any presentation task. Also triggers on "single-file presentation", "CSS animations in slides", "scr…

- **Type:** Skill
- **Install:** `agentstack add skill-proyecto26-slides-ai-plugin-html-slides`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [proyecto26](https://agentstack.voostack.com/s/proyecto26)
- **Installs:** 0
- **Category:** [Web & Browser](https://agentstack.voostack.com/c/web-and-browser)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [proyecto26](https://github.com/proyecto26)
- **Source:** https://github.com/proyecto26/slides-ai-plugin/tree/main/skills/html-slides
- **Website:** https://proyecto26.com/slides-ai-plugin/

## Install

```sh
agentstack add skill-proyecto26-slides-ai-plugin-html-slides
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# HTML Slides — Animated, Viewport-Fitted Presentations

Generate single-file, self-contained HTML presentations with professional animations, responsive viewport fitting, and curated style presets. Zero external dependencies at runtime — all CSS/JS inline.

## Architecture

Every HTML presentation follows this structure:

1. **Single file** — One `.html` file with inline CSS and JS (no build tools)
2. **Viewport fitted** — Each slide locks to `100vh`/`100dvh` with `overflow: hidden`
3. **CSS custom properties** — All theming via `:root` variables for easy restyling
4. **Semantic HTML** — `` per slide, `` for controls
5. **Progressive enhancement** — Works without JS, animations enhance with JS

## Mandatory Viewport Rules

Apply the viewport base CSS from `assets/viewport-base.css` to EVERY presentation. Key rules:

- Every slide: `height: 100vh; height: 100dvh; overflow: hidden`
- All typography uses `clamp(min, preferred, max)` for responsive scaling
- Images constrained to `min(50vh, 400px)` max height
- Responsive breakpoints at 700px, 600px, 500px heights
- `prefers-reduced-motion` support included
- Grid fallback: `grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr))`

Never allow scrolling within a slide. If content exceeds capacity, split across multiple slides.

**Edge Case: Negative Clamp Values**
Use `calc(-1 * clamp(...))` when you need negative viewport-edge spacing (e.g., negative margins, negative padding). This pattern preserves the clamp function's responsiveness while inverting the value.

**iOS Safari 100vh Bug**
The `100vh` unit in iOS Safari includes the address bar, causing content to overflow. Always pair `100vh` with `100dvh` (dynamic viewport height) in fallback chains. Modern viewports ignore `100vh` if `100dvh` is present.

## Animation System

### CSS-First Approach (Default)

Use CSS animations as the baseline. Apply `.reveal` class with staggered `transition-delay`:

```css
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
```

Trigger with Intersection Observer adding `.visible` class on viewport entry.

**Easing**: `--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1)` for all entrance animations.

### GSAP Enhancement (When Requested)

For sophisticated animations, load GSAP from CDN and use timeline-based choreography. Consult `references/animation-patterns.md` for detailed GSAP recipes and the [GSAP docs](https://gsap.com/docs/) for API reference. Key integration points:

- Load GSAP + ScrollTrigger from `https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js`
- Use `gsap.timeline()` for sequenced slide entrance animations
- Apply `gsap.matchMedia()` for responsive animation behavior
- Respect `prefers-reduced-motion` — disable animations when active

**Timeline Entrance with Position Parameter**
Stagger reveals without explicit delays using the position parameter in timeline. Example:
```javascript
const tl = gsap.timeline();
tl.to('.heading', { opacity: 1, duration: 0.6 })
  .to('.subtitle', { opacity: 1, duration: 0.4 }, '` blocks for diagrams
3. Support flowcharts, sequence diagrams, class diagrams, and ER diagrams
4. Style with theme variables matching the presentation palette

## PDF Export Support

Include an optional print stylesheet for PDF export via browser print:

```css
@media print {
  .slide { page-break-after: always; height: 100vh; }
  .nav, .progress { display: none; }
  .reveal { opacity: 1; transform: none; }
}
```

## Anti-Patterns

Avoid these common mistakes:
- Scrolling within slides (always `overflow: hidden`)
- System fonts for headings (always load web fonts)
- Generic "AI slop" aesthetics (purple gradients, Inter everywhere)
- Inline styles (use CSS custom properties)
- Missing `prefers-reduced-motion` support
- Images without size constraints
- More than 6 items in a feature grid

## Show Don't Tell

Embody the principle of visual communication. Enhance instructions with visual weight and intentionality:

- **"Make it bold"** — Pair font weight increase with size increase AND accent color. A truly bold element dominates the hierarchy.
- **"Make it stand out"** — Combine `z-index` layering, `scale` transformation, AND contrasting color simultaneously. Isolation requires all three.
- **"One idea per slide"** — When content exceeds capacity, split across slides. Never shrink fonts below the minimum size threshold. Cramping is a design failure.
- **Visual hierarchy rule**: The most important element should be **3x the size** of supporting elements. If a headline is 3rem, body text should be ~1rem. Apply this ratio consistently.

## Mixed-Background Decks

Many professional presentations alternate background colors across slide groups. To implement this:

- Define a `data-theme` attribute per `` (e.g., `data-theme="coral"`, `data-theme="dark"`, `data-theme="cream"`)
- Map each theme to CSS custom property overrides via `[data-theme="coral"] { --bg-primary: #E8845C; --text-primary: #fff; }`
- Maintain font and layout consistency even when backgrounds change
- Use contrasting backgrounds to signal section transitions (e.g., black for demo sections, cream for infographics)

## Inline Edit Mode

Generated HTML can include `contenteditable="true"` attributes on text elements, allowing users to edit slides directly in the browser before presenting.

To enable inline editing, add `contenteditable="true"` to text elements:
```html
Edit this headline
Edit this paragraph
```

Include this CSS for visual feedback:
```css
[contenteditable]:hover {
  outline: 2px dashed var(--accent);
  cursor: text;
}

[contenteditable]:focus {
  outline: 2px solid var(--accent);
}
```

Users can click any editable element, make changes live, and present without exporting. Disable with `contenteditable="false"` if read-only mode is preferred.

## Additional Resources

### Reference Files

- **`references/html-template.md`** — Complete HTML boilerplate with navigation, all slide type templates
- **`references/animation-patterns.md`** — CSS and GSAP animation recipes with timing and easing

### Asset Files

- **`assets/viewport-base.css`** — Mandatory viewport CSS (include in every presentation)

### Script Files

- **`scripts/extract-pptx.py`** — Extract text, images, and notes from PPTX files to JSON for HTML conversion

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [proyecto26](https://github.com/proyecto26)
- **Source:** [proyecto26/slides-ai-plugin](https://github.com/proyecto26/slides-ai-plugin)
- **License:** MIT
- **Homepage:** https://proyecto26.com/slides-ai-plugin/

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-proyecto26-slides-ai-plugin-html-slides
- Seller: https://agentstack.voostack.com/s/proyecto26
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.