zarazhangrui/frontend-slides

Frontend Slides is a skill for coding agents that produces HTML presentation decks: either new decks written from a description, or conversions of existing PowerPoint files. It targets people who want a designed deck without writing CSS or JavaScript themselves, and who already have an agent with filesystem and shell access.

What changes in the workflow

Instead of describing an aesthetic in words, the skill generates three visual previews, and you pick one. It then builds the full deck in that style and opens it in the browser. For PowerPoint input, it first extracts text, images, and notes with python-pptx, shows you the extracted content for confirmation, then generates the styled deck with the original assets.

The output itself is deliberately plain: single HTML files with inline CSS and JS, no npm, no build step, no framework. The author argues this keeps a deck working years later. Wide-screen layout is fixed at 16:9, and the skill ships a mandatory base stylesheet plus HTML and animation references it reads at generation time.

How the skill files are organized

The main SKILL.md is a workflow map; supporting files load only when a phase needs them. The 12 curated presets in STYLE_PRESETS.md load for style selection, and the optional bold pack of 34 design systems loads progressively: a compact index first, short preview cards for shortlisted candidates, and one full design spec only after you choose it. Safe presets remain the default fallback if the bold pack is unavailable.

Requirements per path

Every path needs a local coding agent with filesystem access and shell command execution. Claude Code grants a specific install flow — adding the repository as a plugin marketplace source over HTTPS, then installing the plugin, which exposes a namespaced /frontend-slides:frontend-slides command; a manual copy into the skills directory yields an unnamespaced /frontend-slides command instead. Other agents such as Codex, Kimi Code, OpenCode, or Gemini CLI are pointed at SKILL.md and load the referenced files themselves; they do not get the plugin command setup instructions.

Optional features carry their own needs: PPT conversion requires Python with python-pptx; deploying to a live URL requires Node.js and a (free) Vercel account; PDF export requires Node.js and installs Playwright automatically. PDF export screenshots each slide at 1920×1080, so animations are lost — it is a static snapshot.

Customization and licence

The generated code is meant to be edited and is documented as commented and accessible. The 34 bold templates come from a separate template repository and are linked through a gallery view preview template gallery. The project is MIT licensed, so use, modification, and sharing are permitted repository.