# Frontend Slides: Create Stunning Web Presentations with AI Coding Agents This repository profile is provided by osrepos.com, an open source repository discovery platform. Source: osrepos.com Repository profile: https://osrepos.com/repo/zarazhangrui-frontend-slides Generated for open source discovery and AI-assisted research. Frontend Slides is an innovative GitHub repository that empowers users to create beautiful web presentations using AI coding agents. It simplifies the design process by offering visual style discovery and can even convert existing PowerPoint files into elegant HTML slides. This project is ideal for non-designers seeking professional, dependency-free presentations. GitHub: https://github.com/zarazhangrui/frontend-slides OSRepos URL: https://osrepos.com/repo/zarazhangrui-frontend-slides ## Summary Frontend Slides is an innovative GitHub repository that empowers users to create beautiful web presentations using AI coding agents. It simplifies the design process by offering visual style discovery and can even convert existing PowerPoint files into elegant HTML slides. This project is ideal for non-designers seeking professional, dependency-free presentations. ## Topics - AI Slides - Claude Code - Generative UI - HTML Presentations - Web Development - JavaScript - Presentation Tool - AI Agent Skill ## Repository Information Last analyzed by OSRepos: Sun Jun 28 2026 12:16:59 GMT+0100 (Western European Summer Time) Detail views: 1 GitHub clicks: 0 ## Safety Notice OSRepos shares public repositories for knowledge and discovery only. Review source code, dependencies, licenses, and security implications before running or installing anything. ## Content ## Introduction Frontend Slides, by zarazhangrui, is a powerful skill for coding agents designed to create stunning HTML presentations directly on the web. It allows users, even those without design or coding expertise, to generate beautiful, dependency-free slideshows from scratch or by converting PowerPoint files. This project stands out by offering a 'show, don't tell' approach to design, letting you choose from visual previews rather than describing aesthetics. It's packaged as a Claude Code plugin, but its core skill can be utilized by various other coding agents. Watch the official walkthrough and tutorial video for a comprehensive guide: [Watch on YouTube](https://www.youtube.com/watch?v=372Iksaz8b0){:target='_blank'} ## Installation Frontend Slides offers flexible installation methods to integrate with your preferred coding agent. ### Via Claude Code Custom Marketplace Source Install directly from this public GitHub repo. Run these as two separate Claude Code messages; do not paste both lines into the prompt at once. text /plugin marketplace add https://github.com/zarazhangrui/frontend-slides After that finishes, run: text /plugin install frontend-slides@frontend-slides Use the HTTPS URL. The shorter `zarazhangrui/frontend-slides` form may make Claude Code try SSH, which can fail if GitHub is not already in your `known_hosts` file. Then use it by typing `/frontend-slides:frontend-slides` in Claude Code. Claude Code namespaces plugin-installed skills as `/plugin-name:skill-name`. ### Claude Code Manual Installation Copy the skill files to your Claude Code skills directory: bash # Create the skill directory mkdir -p ~/.claude/skills/frontend-slides/scripts # Copy the user-facing skill files cp SKILL.md STYLE_PRESETS.md viewport-base.css html-template.md animation-patterns.md ~/.claude/skills/frontend-slides/ cp -R bold-template-pack ~/.claude/skills/frontend-slides/ cp scripts/extract-pptx.py scripts/deploy.sh scripts/export-pdf.sh ~/.claude/skills/frontend-slides/scripts/ Or clone directly: bash git clone https://github.com/zarazhangrui/frontend-slides.git ~/.claude/skills/frontend-slides Then use it by typing `/frontend-slides` in Claude Code. Standalone skills are not namespaced. ### Other Coding Agents Agents such as Codex, Kimi Code, OpenCode, Gemini CLI, or other local coding assistants can use the same core skill. The simplest path is to send the agent this GitHub repo link and ask it to use the Frontend Slides skill: text https://github.com/zarazhangrui/frontend-slides If the agent can read GitHub repos or browse files, it should start from `SKILL.md` and load only the referenced support files it needs. ## Usage Examples Here's how to get started creating and converting presentations with Frontend Slides. ### Create a New Presentation text /frontend-slides:frontend-slides > "I want to create a pitch deck for my AI startup" If installed manually as a standalone Claude Code skill, use `/frontend-slides` instead. In non-Claude agents, ask the agent to use the Frontend Slides skill and point it at this repo or `SKILL.md`. The skill will: 1. Ask about your content (slides, messages, images) 2. Generate 3 visual style previews for you to compare, inferring the vibe from your brief unless you already named one 3. Let you pick the visual direction 4. Create the full presentation in your chosen style 5. Open it in your browser ### Convert a PowerPoint text /frontend-slides:frontend-slides > "Convert my presentation.pptx to a web slideshow" The skill will: 1. Extract all text, images, and notes from your PPT 2. Show you the extracted content for confirmation 3. Let you pick a visual style 4. Generate an HTML presentation with all your original assets ## Why Use Frontend Slides? Frontend Slides is built on a strong philosophy focused on accessibility, longevity, and unique design, offering several compelling features. ### Philosophy 1. **You don't need to be a designer to make beautiful things.** You just need to react to what you see. 2. **Dependencies are debt.** A single HTML file will work in 10 years. A React project from 2019? Good luck. 3. **Generic is forgettable.** Every presentation should feel custom-crafted, not template-generated. 4. **Comments are kindness.** Code should explain itself to future-you (or anyone else who opens it). ### Key Features * **Zero Dependencies**: Generates single HTML files with inline CSS/JS. No npm, no build tools, no frameworks. * **Visual Style Discovery**: Can't articulate design preferences? No problem. Pick from generated visual previews. * **PPT Conversion**: Convert existing PowerPoint files to web, preserving all images and content. * **Anti-AI-Slop**: Curated distinctive styles that avoid generic AI aesthetics (bye-bye, purple gradients on white). * **Bold Template Pack**: Optional design-forward templates from `beautiful-html-templates`, loaded progressively so safe presets still work as the default fallback. * **Production Quality**: Accessible, fixed 16:9, well-commented code you can customize. ### Included Styles & Template Gallery The skill includes a wide array of pre-defined styles, categorized into Dark Themes, Light Themes, and Specialty themes, such as 'Bold Signal', 'Electric Studio', 'Notebook Tabs', and 'Neon Cyber'. Additionally, it integrates with the [beautiful-html-templates](https://github.com/zarazhangrui/beautiful-html-templates){:target='_blank'} library, offering 34 optional bold design systems like 'Neo-Grid Bold', 'Editorial Tri-Tone', and 'Vellum', ensuring a diverse and high-quality aesthetic selection. ## Sharing Your Presentations After creating a presentation, the skill offers two convenient ways to share it: ### Deploy to a Live URL One command deploys your slides to a permanent, shareable URL that works on any device, phones, tablets, laptops: bash bash scripts/deploy.sh ./my-deck/ # or bash scripts/deploy.sh ./presentation.html Uses [Vercel](https://vercel.com){:target='_blank'} (free tier). The skill walks you through signup and login if it's your first time. ### Export to PDF Convert your slides to a PDF for email, Slack, Notion, or printing: bash bash scripts/export-pdf.sh ./my-deck/index.html bash scripts/export-pdf.sh ./presentation.html ./output.pdf Uses [Playwright](https://playwright.dev){:target='_blank'} to screenshot each slide at 1920×1080 and combine into a PDF. Installs automatically if needed. Animations are not preserved (it's a static snapshot). ## Links * **GitHub Repository**: [zarazhangrui/frontend-slides](https://github.com/zarazhangrui/frontend-slides){:target='_blank'} * **Related Project**: [beautiful-html-templates](https://github.com/zarazhangrui/beautiful-html-templates){:target='_blank'} * **YouTube Walkthrough**: [Watch the Tutorial](https://www.youtube.com/watch?v=372Iksaz8b0){:target='_blank'}