Frontend Slides: A Coding-Agent Skill for HTML Presentations Without CSS Knowledge

What Problem This Solves and Who It Targets

Frontend Slides addresses a specific gap: people who need a polished presentation but do not know CSS or JavaScript, and who already work with a coding agent. The README frames it as a skill for non-designers, using a show, don't tell approach. Instead of describing aesthetic preferences in words, the agent generates visual previews and the user picks one. This removes the burden of naming a style, which is a common failure point for non-designers. The intended audience includes users of Claude Code, Codex, Kimi Code, OpenCode, Gemini CLI, and similar local coding assistants. It also covers people who have existing PowerPoint decks and want them converted to web format without losing images or content. The project is not aimed at developers who want fine-grained control over HTML output, because the skill is designed to produce a finished deck with minimal user intervention.

The Mechanism: Preview-Driven Style Discovery and Progressive Loading

The core mechanism is a staged style discovery process, detailed in the README. When you create a new presentation, the agent generates three visual style previews: one safe preset from STYLE_PRESETS.md, at least one bold template from bold-template-pack/selection-index.json, and one wildcard option that is either another bold template or a self-generated custom design. The agent reads a compact index first, then loads small preview.md cards for shortlisted candidates to render title-slide previews. It only loads the full design.md for a single bold template after you pick it for the final deck. This progressive loading is a deliberate cost control measure, because loading all 34 bold design systems at once would be heavy. The wildcard option allows the agent to create a custom design by expanding a preview's CSS and layout system into the full deck. This mechanism means the user never sees a wall of text describing styles; they see visual options and choose.

Installation Paths: Marketplace, Manual, and Agent-Agnostic

Installation differs by environment. For Claude Code, the recommended path is a custom marketplace source. You run two separate messages: first /plugin marketplace add https://github.com/zarazhangrui/frontend-slides, then /plugin install frontend-slides@frontend-slides. The README warns to use the HTTPS URL, because the shorter form may make Claude Code attempt SSH, which can fail if GitHub is not in known_hosts. After install, you invoke the skill with /frontend-slides:frontend-slides, because Claude Code namespaces plugin-installed skills. Manual installation for Claude Code involves copying SKILL.md, STYLE_PRESETS.md, viewport-base.css, html-template.md, animation-patterns.md, the bold-template-pack directory, and three scripts (extract-pptx.py, deploy.sh, export-pdf.sh) into ~/.claude/skills/frontend-slides/. A git clone command is also provided. For other agents, the README says you can simply send the agent the GitHub repo link and ask it to use the skill. The agent should start from SKILL.md and load only the referenced support files it needs. This agent-agnostic design is a key differentiator, but it also means the quality of the experience depends on how well your agent follows instructions.

The Output: Zero-Dependency Single-File HTML

The output format is a deliberate constraint. The README lists zero dependencies as a key feature: single HTML files with inline CSS and JS, no npm, no build tools, no frameworks. This is a strong advantage for portability and long-term maintenance, because the deck is self-contained and can be opened in any browser. The fixed 16:9 aspect ratio and accessible, well-commented code are also cited as production-quality traits. The trade-off is that you cannot easily reuse components across slides or integrate with a build pipeline. If you need a deck that fits into an existing React or Vue project, this output format will not help you. The single-file output also means the file can grow large if you embed many images, but the README does not mention any size limits. For a typical pitch deck, this is unlikely to be a problem.

Style Catalog: Curated Presets and the Bold Template Pack

The skill ships with a catalog of styles. The README lists 12 named styles across three categories: dark themes (Bold Signal, Electric Studio, Creative Voltage, Dark Botanical), light themes (Notebook Tabs, Pastel Geometry, Split Pastel, Vintage Editorial), and specialty themes (Neon Cyber, Terminal Green, Swiss Modern, Paper & Ink). These are described with adjectives like confident, editorial, or futuristic, which gives the agent and the user a shared vocabulary. Beyond these presets, the bold template pack adds 34 optional design systems from beautiful-html-templates, including Neo-Grid Bold, Editorial Tri-Tone, Creative Mode, Broadside, Signal, and Vellum. The README explicitly frames these as anti-AI-slop, meaning they avoid generic AI aesthetics like purple gradients on white. The selection mechanism ensures that at least one bold template appears in every preview set, so users are exposed to design-forward options even if they do not know they exist.

PPT Conversion: What It Preserves and What It Does Not

The PowerPoint conversion flow is described in the README. When you invoke the skill with a request to convert a PPT, the agent extracts all text, images, and notes from the file, shows you the extracted content for confirmation, lets you pick a visual style, and then generates an HTML presentation with all your original assets. The extraction is handled by a Python script, scripts/extract-pptx.py, which suggests that the conversion relies on the python-pptx library or similar, but the README does not specify the exact dependencies. The README claims that all images and content are preserved, but it does not mention how transitions, animations, or complex slide layouts are handled. This is a genuine limitation: if your PowerPoint relies heavily on animations, custom shapes, or embedded video, the conversion may not preserve those features. The README's promise is limited to text, images, and notes. You should verify the conversion output with a representative file before committing to this workflow for a critical presentation.

Limitations and Failure Modes

The most obvious limitation is that this skill only works inside a coding agent that can read files and run shell commands. If you do not use Claude Code or a similar tool, you cannot install this as a plugin, though you can still point an agent at the repo. Another limitation is the dependency on the agent's interpretation of SKILL.md. The README says other agents can follow SKILL.md directly, but there is no guarantee that a given agent will load the support files in the right order or generate the previews correctly. The progressive loading mechanism is a cost-saving measure, but it also means the agent must make decisions about which bold templates to shortlist; if the agent picks poorly, the preview set may not reflect the user's intent. The README also notes that the short form of the GitHub URL can cause SSH failures, which is a concrete installation failure mode. Finally, the output is fixed at 16:9, so if you need a 4:3 deck or a custom aspect ratio, this skill is not the right tool.

Alternatives and How They Differ

The obvious alternative is to use a traditional presentation tool like PowerPoint, Google Slides, or Keynote, which offer a GUI and do not require a coding agent. The difference is fundamental: those tools give you direct manipulation of slide elements, but they also require you to make design decisions yourself. Frontend Slides outsources the design to the agent and the preview selection process. Another alternative is to use a framework like reveal.js or impress.js, which produce HTML presentations but require you to write or generate HTML/CSS/JS. Those tools offer more control and are suitable for developers, but they have a steeper learning curve and do not provide the visual style discovery mechanism. A third alternative is to use a dedicated PPT-to-HTML converter tool, but those typically produce static output without the ability to restyle the deck. Frontend Slides' differentiator is the combination of conversion and restyling through a coding agent's interactive workflow.

Maintenance and Upgrade Cost

The project is under active development, with recent releases v2.0.0 and v2.1.0 in 2026. The v2.0.0 release is described as a Progressive Disclosure Restructure, which likely changed how the skill loads support files to reduce token usage. The v2.1.0 release is titled Bold Templates and Agent-Neutral Packaging, indicating that the bold template pack was added and the packaging was made more portable across agents. This suggests the project is responsive to user feedback and evolving quickly. The maintenance cost for a user is low: the skill is a set of markdown files and scripts, so upgrading involves pulling the latest changes from the repo. However, if you installed manually, you must remember to update the files in ~/.claude/skills/frontend-slides. The license is MIT, which means you can modify and redistribute the skill, but the README does not provide a changelog or migration guide, so upgrading from v1 to v2 might require re-reading the SKILL.md to understand new workflows.

Editorial conclusion

Adopt Frontend Slides if you are a non-designer who works inside a coding agent like Claude Code, Codex, or Gemini CLI and need a presentation without touching CSS or JavaScript. Skip it if you require a GUI editor, need multi-file output, or cannot rely on a coding agent with filesystem and shell access. Before adopting, verify that your agent can read SKILL.md and the referenced support files, and test the PPT conversion with a file that contains complex layouts or embedded media, since the extraction script's fidelity limits are not documented in the README.

Official sources

1. Official README
2. Project repository
3. Release notes