Frontend Slides — Web Slide Generation Skill
Create beautiful HTML presentations with a coding agent, no design or coding skills required.
- Source repo
- zarazhangrui/frontend-slides
- Stars
- ★ 31k
- Last updated
- 3mo ago
- License
- MIT
- Primary language
- JavaScript
- FA score
- 46/100 · Major gaps
At a glance
- How it runs
- Works with
- Portable with changesClaude Code
- Cost
- Free, no paid service needed
- Setup effort
- Low · running in minutes
- You'll need
- Typical use
- Non-designers who want to quickly create a polished pitch deck by describing content and picking from visual previews.
- Not a fit if
- Teams using coding agents other than Claude Code; plugin install and the /frontend-slides command are Claude Code-only
- Pure cloud or restricted environments without local shell and filesystem access
- Decks that must keep animations: PDF export is a static snapshot
- Source review
- 46/100 · Major gaps 1 safety controls not found
What does this agent do, and when should you use it?
Frontend Slides is a coding-agent skill for creating stunning HTML presentations, from scratch or by converting PowerPoint files. It is packaged as a Claude Code plugin, and the core SKILL.md can also be read by other coding agents with filesystem and shell access. The skill uses a 'show, don't tell' approach: instead of asking you to describe your aesthetic preferences in words, it generates visual previews and lets you pick what you like. Key features include zero dependencies (single HTML files with inline CSS/JS), visual style discovery, PPT conversion, curated anti-AI-slop styles, a bold template pack of 34 design systems, and one-command deployment and PDF export. Installation is available via the Claude Code custom marketplace or manually, and other agents can use the skill by pointing them to the repository.
The skill guides the user through a complete workflow from content gathering to final sharing. First, the agent asks about your content (slides, messages, images), then generates 3 visual style previews for you to compare, inferring the vibe from your brief unless you already named one. You pick the visual direction, and the agent creates the full presentation in that style and opens it in your browser. For PowerPoint conversion, the skill extracts all text, images, and notes from the PPT, shows you the extracted content for confirmation, lets you pick a visual style, and generates an HTML presentation with all your original assets. It supports one-command deployment to a live URL via scripts/deploy.sh (using Vercel) and PDF export via scripts/export-pdf.sh (using Playwright). Core files include SKILL.md, STYLE_PRESETS.md, bold-template-pack/, viewport-base.css, html-template.md, animation-patterns.md, and scripts/.
- Non-designers who want to quickly create a polished pitch deck by describing content and picking from visual previews.
- Business professionals who need to convert an existing PowerPoint into a modern web slideshow, preserving all images and content.
- Developers who want to generate dependency-free single-file HTML presentations that run in any browser and are easy to customize.
- Designers looking for unique, non-generic presentation styles that avoid common AI aesthetics.
- Users who need to publish the presentation to a shareable URL or export to PDF for email or Slack distribution after creation.
How do you install or deploy this agent?
As a Claude Code plugin: in Claude Code, run /plugin marketplace add https://github.com/zarazhangrui/frontend-slides then /plugin install frontend-slides@frontend-slides. Use the HTTPS URL to avoid SSH issues. For manual installation, copy the files to ~/.claude/skills/frontend-slides/ directory. For other agents, simply send the repo link https://github.com/zarazhangrui/frontend-slides and ask them to use the skill. Requires a local coding agent with filesystem and shell access.
How do you use this agent?
In Claude Code, use the command /frontend-slides:frontend-slides (or /frontend-slides if manually installed as a standalone skill). Example: /frontend-slides:frontend-slides then enter 'I want to create a pitch deck for my AI startup' or 'Convert my presentation.pptx to a web slideshow'. For other agents, prompt 'Use the Frontend Slides skill' with the repo link. After generation, deploy to Vercel with bash scripts/deploy.sh ./my-deck/ or export to PDF with bash scripts/export-pdf.sh ./my-deck/index.html.
What are this agent's strengths and limitations?
- Zero dependencies: single HTML files, no build tools or frameworks, ensuring longevity and portability.
- Visual style discovery via previews lowers the design barrier.
- Extensive style library: 12 curated presets and 34 bold templates, avoiding AI-slop aesthetics.
- Supports PPT conversion and deployment/export features, providing a complete workflow.
- Well-commented code that is easy to customize and extend.
- Plugin installation is primarily for Claude Code; other agents need to manually use the skill files, and some features (like the /frontend-slides command) are Claude Code-only.
- Requires local shell and filesystem access; not usable in pure cloud or restricted environments.
- PPT conversion depends on Python and python-pptx; deployment and PDF export require Node.js and a (free) Vercel account.
- PDF export uses Playwright and does not preserve animations; it is a static snapshot.
- No formal multi-agent support documentation; using with other agents requires prompting with the repo link and relying on the agent to read SKILL.md.
How does this agent compare with similar options?
No specific alternatives are mentioned in the source.
Key facts side by side with the most closely related agents.
| Agent | Source review | Form / cost | Stars | Updated | Language | Full support on |
|---|---|---|---|---|---|---|
| Frontend Slides — Web Slide Generation Skill This agent | 46 · Major gaps | Agent plugin / skillFree | ★ 31k | 3mo ago | JavaScript | Claude Code |
| Open Design | 45 · Major gaps | Desktop appFree + model costs | ★ 102k | today | TypeScript | Codex · Claude Code · OpenAI API · Claude API |
| Image-to-Editable-PPT Skill | 53 · Major gaps | Agent plugin / skillFree + model costs | ★ 3k | 1mo ago | Python | Codex |
| anything2explainer | 47 · Major gaps | Agent plugin / skillFree + model costs | ★ 2.6k | 1mo ago | TypeScript | Codex · Claude Code |
How does FollowAgents rate this agent?
Why each dimension lost points
Evidence: README describes the skill's workflow including generating previews, user selection, and creating presentations, but does not explicitly state permission boundaries or data flow. Scripts (e.g., extract-pptx.py) may read user files, but least privilege is not mentioned. User confirmation steps exist (e.g., confirmation after extraction), but not all external actions are clearly confirmed. Data flow transparency is insufficient; no explanation of what data is processed, stored, or transmitted. Sensitive data handling is not mentioned. Dependency security: claims zero dependencies but provides no dependency list or security audit. External effects: creates files and opens browser, but not clearly communicated to user. Rollback: no rollback mechanism mentioned. Source attribution: MIT license and copyright notice exist, but publisher is unverified. Deductions: lack of explicit permission declarations, data flow explanations, sensitive data handling policies, dependency security audits, external effect notifications, and rollback mechanisms.
Evidence: README and SKILL.md descriptions are consistent, functionality is clearly described, but no tests or verification results are provided. Dependency availability: claims zero dependencies but relies on external template library (beautiful-html-templates), whose availability is unverified. Failure messages: no error handling or failure notification descriptions. Deductions: lack of test evidence, unverified external dependency availability, and no failure handling descriptions.
Evidence: README clearly identifies target audience (non-designers) and use cases (creating presentations, converting PPT), and provides multiple style options. Capability boundaries: describes supported features (creation, conversion, style selection) but does not specify limitations (e.g., unsupported formats). Trigger precision: provides clear commands and installation methods, but does not specify trigger conditions. Environment fit: supports Claude Code and other agents, but does not specify system requirements. Deductions: capability boundaries and trigger conditions are not detailed enough.
Evidence: README is well-structured with sections for installation, usage, style list, etc. Installation instructions are detailed, providing multiple methods. Naming stability: skill name and commands are clear, but version compatibility is not mentioned. Examples and FAQ: provides usage examples but no FAQ. Known limitations: not explicitly listed. License: MIT license present. Versioning and changelog: not provided. Maintenance responsibility: no maintainer or update policy mentioned. Deductions: missing known limitations, version changelog, and maintenance responsibility.
Evidence: Output is a single HTML file, directly usable, and claims production quality. Marginal value: provides multiple styles and templates, adding value. Cost-benefit: zero dependencies, simple installation, but no performance or resource consumption data. Deductions: lack of actual usage effectiveness evidence.
Evidence: Claims in README (e.g., zero dependencies, production quality) are not supported by verification evidence. Cross-source verification: no other sources provided. Fact-inference separation: no clear distinction between facts and inferences. Deductions: lack of verifiable evidence.
- Not found in source: rollback or recovery pathBack up first, or work on a git branch or snapshot, so its changes can be undone.
- Publisher identity is unverified; proceed with caution.
- Relies on external template library; its availability and security are unverified.
- No tests or verification evidence provided; reliability is questionable.
- Permission boundaries and data flow are not clearly defined; may involve sensitive data handling.
Recent releases
Latest entries from the project's GitHub Releases. Notes are quoted from upstream as written, not rewritten or tested by FollowAgents.
-
v2.1.0 v2.1.0 — Bold Templates and Agent-Neutral Packaging
Release notes excerpt
What's New This release packages the template-library integration, safer slide-generation workflow, and more robust agent/plugin support that landed after v2.0.0. Bold Template Pack - Adds the bold-template-pack from beautiful-html-templates with progressive disclosure. - Uses lightweight selection indexes and preview cards first, then loads the selected template's design.md only when needed. - Keeps bold templates fixed-stage at 1920x1080 / 16:9, including on phone viewports. …View on GitHub ↗ -
v2.0.0 v2.0.0 — Progressive Disclosure Restructure
Release notes excerpt
What's New This release completely restructures the skill to reduce context bloat by ~89%, following best practices from [Claude Code's skill docs](https://code.claude.com/docs/en/skills) and [OpenAI's harness engineering](https://openai.com/index/harness-engineering/) approach. The Problem The previous version loaded 1,625 lines of instructions into Claude's context on every invocation — including CSS code blocks, Python scripts, and HTML templates that were only needed during specific phases. This crowded out the actual presentation content and reduced output quality. …View on GitHub ↗