> ## Documentation Index
> Fetch the complete documentation index at: https://kindling.birklid.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Frontend Slides

> Claude Code skill that generates animated, dependency-free HTML presentations from a text description or uploaded PPTX.

<div style={{display: "flex", gap: "8px", marginBottom: "1.5rem", flexWrap: "wrap"}}>
  <Badge>Open Source</Badge>
  <Badge color="#F97316">Applications Layer</Badge>
</div>

# Frontend Slides

**Turn a talk outline or PPTX into a polished, self-contained HTML slideshow — no design tools required.**

<Frame>
  <img src="https://mintcdn.com/tumbleweedlabs/QT0SlrwbzlJBSMcS/images/og-frontend-slides.png?fit=max&auto=format&n=QT0SlrwbzlJBSMcS&q=85&s=d91ffbb88e147aa0d0df3cbc578ed546" alt="Frontend Slides GitHub" width="1200" height="600" data-path="images/og-frontend-slides.png" />
</Frame>

<CardGroup cols={4}>
  <Card title="Type" icon="code-branch">Open Source (MIT)</Card>
  <Card title="Stack Layer" icon="browsers">Applications</Card>
  <Card title="Language" icon="code">Shell</Card>
  <Card title="Stars" icon="star">16.8k+</Card>
</CardGroup>

## What it is

Frontend Slides is a Claude Code skill that generates animated, dependency-free HTML presentations from a text description or an uploaded PowerPoint file. It ships with 12 curated visual presets — dark, light, and specialty themes — specifically chosen to avoid the generic aesthetic that AI-generated slides typically produce. The architecture uses progressive disclosure, loading only the style files each presentation needs.

Unlike tools that export to a slide format, everything Frontend Slides produces is plain HTML: portable, version-controllable, and renderable in any browser without plugins. It handles transitions, layout, and typography automatically, with the option to refine individual slides through follow-up prompts.

<Tip>
  **Use this when** you need to convert a talk outline or a deck into a self-contained HTML presentation fast — especially for technical talks where code blocks and diagrams need to render cleanly.
</Tip>

## Get started

<CardGroup cols={2}>
  <Card title="GitHub ↗" icon="github" href="https://github.com/zarazhangrui/frontend-slides">
    Source, presets, and installation.
  </Card>
</CardGroup>

## Related tools

<CardGroup cols={2}>
  <Card title="Huashu Design" icon="github" href="/library/skills/huashu-design">
    Design skill covering prototypes, slides, animations, and MP4 export.
  </Card>

  <Card title="gstack" icon="github" href="/library/skills/gstack">
    Garry Tan's full Claude Code engineering team in 23 skills.
  </Card>
</CardGroup>