{"name":"Frontend Slides: Create Stunning Web Presentations with AI Coding Agents","description":"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","url":"https://osrepos.com/repo/zarazhangrui-frontend-slides","source":"osrepos.com","sourceDescription":"This repository profile is provided by osrepos.com, an open source repository discovery platform.","repositoryProfile":"https://osrepos.com/repo/zarazhangrui-frontend-slides","generatedFor":"open source discovery and AI-assisted research","markdown":"https://osrepos.com/repo/zarazhangrui-frontend-slides.md","json":"https://osrepos.com/repo/zarazhangrui-frontend-slides.json","topics":["AI Slides","Claude Code","Generative UI","HTML Presentations","Web Development","JavaScript","Presentation Tool","AI Agent Skill"],"keywords":["AI Slides","Claude Code","Generative UI","HTML Presentations","Web Development","JavaScript","Presentation Tool","AI Agent Skill"],"stars":null,"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.","content":"## Introduction\n\nFrontend 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.\n\nThis 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.\n\nWatch the official walkthrough and tutorial video for a comprehensive guide: [Watch on YouTube](https://www.youtube.com/watch?v=372Iksaz8b0){:target='_blank'}\n\n## Installation\n\nFrontend Slides offers flexible installation methods to integrate with your preferred coding agent.\n\n### Via Claude Code Custom Marketplace Source\n\nInstall directly from this public GitHub repo. Run these as two separate Claude Code messages; do not paste both lines into the prompt at once.\n\ntext\n/plugin marketplace add https://github.com/zarazhangrui/frontend-slides\n\n\nAfter that finishes, run:\n\ntext\n/plugin install frontend-slides@frontend-slides\n\n\nUse 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.\n\nThen use it by typing `/frontend-slides:frontend-slides` in Claude Code. Claude Code namespaces plugin-installed skills as `/plugin-name:skill-name`.\n\n### Claude Code Manual Installation\n\nCopy the skill files to your Claude Code skills directory:\n\nbash\n# Create the skill directory\nmkdir -p ~/.claude/skills/frontend-slides/scripts\n\n# Copy the user-facing skill files\ncp SKILL.md STYLE_PRESETS.md viewport-base.css html-template.md animation-patterns.md ~/.claude/skills/frontend-slides/\ncp -R bold-template-pack ~/.claude/skills/frontend-slides/\ncp scripts/extract-pptx.py scripts/deploy.sh scripts/export-pdf.sh ~/.claude/skills/frontend-slides/scripts/\n\n\nOr clone directly:\n\nbash\ngit clone https://github.com/zarazhangrui/frontend-slides.git ~/.claude/skills/frontend-slides\n\n\nThen use it by typing `/frontend-slides` in Claude Code. Standalone skills are not namespaced.\n\n### Other Coding Agents\n\nAgents 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:\n\ntext\nhttps://github.com/zarazhangrui/frontend-slides\n\n\nIf the agent can read GitHub repos or browse files, it should start from `SKILL.md` and load only the referenced support files it needs.\n\n## Usage Examples\n\nHere's how to get started creating and converting presentations with Frontend Slides.\n\n### Create a New Presentation\n\ntext\n/frontend-slides:frontend-slides\n\n> \"I want to create a pitch deck for my AI startup\"\n\n\nIf installed manually as a standalone Claude Code skill, use `/frontend-slides` instead.\n\nIn non-Claude agents, ask the agent to use the Frontend Slides skill and point it at this repo or `SKILL.md`.\n\nThe skill will:\n\n1. Ask about your content (slides, messages, images)\n2. Generate 3 visual style previews for you to compare, inferring the vibe from your brief unless you already named one\n3. Let you pick the visual direction\n4. Create the full presentation in your chosen style\n5. Open it in your browser\n\n### Convert a PowerPoint\n\ntext\n/frontend-slides:frontend-slides\n\n> \"Convert my presentation.pptx to a web slideshow\"\n\n\nThe skill will:\n\n1. Extract all text, images, and notes from your PPT\n2. Show you the extracted content for confirmation\n3. Let you pick a visual style\n4. Generate an HTML presentation with all your original assets\n\n## Why Use Frontend Slides?\n\nFrontend Slides is built on a strong philosophy focused on accessibility, longevity, and unique design, offering several compelling features.\n\n### Philosophy\n\n1.  **You don't need to be a designer to make beautiful things.** You just need to react to what you see.\n2.  **Dependencies are debt.** A single HTML file will work in 10 years. A React project from 2019? Good luck.\n3.  **Generic is forgettable.** Every presentation should feel custom-crafted, not template-generated.\n4.  **Comments are kindness.** Code should explain itself to future-you (or anyone else who opens it).\n\n### Key Features\n\n*   **Zero Dependencies**: Generates single HTML files with inline CSS/JS. No npm, no build tools, no frameworks.\n*   **Visual Style Discovery**: Can't articulate design preferences? No problem. Pick from generated visual previews.\n*   **PPT Conversion**: Convert existing PowerPoint files to web, preserving all images and content.\n*   **Anti-AI-Slop**: Curated distinctive styles that avoid generic AI aesthetics (bye-bye, purple gradients on white).\n*   **Bold Template Pack**: Optional design-forward templates from `beautiful-html-templates`, loaded progressively so safe presets still work as the default fallback.\n*   **Production Quality**: Accessible, fixed 16:9, well-commented code you can customize.\n\n### Included Styles & Template Gallery\n\nThe 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.\n\n## Sharing Your Presentations\n\nAfter creating a presentation, the skill offers two convenient ways to share it:\n\n### Deploy to a Live URL\n\nOne command deploys your slides to a permanent, shareable URL that works on any device, phones, tablets, laptops:\n\nbash\nbash scripts/deploy.sh ./my-deck/\n# or\nbash scripts/deploy.sh ./presentation.html\n\n\nUses [Vercel](https://vercel.com){:target='_blank'} (free tier). The skill walks you through signup and login if it's your first time.\n\n### Export to PDF\n\nConvert your slides to a PDF for email, Slack, Notion, or printing:\n\nbash\nbash scripts/export-pdf.sh ./my-deck/index.html\nbash scripts/export-pdf.sh ./presentation.html ./output.pdf\n\n\nUses [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).\n\n## Links\n\n*   **GitHub Repository**: [zarazhangrui/frontend-slides](https://github.com/zarazhangrui/frontend-slides){:target='_blank'}\n*   **Related Project**: [beautiful-html-templates](https://github.com/zarazhangrui/beautiful-html-templates){:target='_blank'}\n*   **YouTube Walkthrough**: [Watch the Tutorial](https://www.youtube.com/watch?v=372Iksaz8b0){:target='_blank'}","metrics":{"detailViews":1,"githubClicks":0},"dates":{"published":null,"modified":"2026-06-28T11:16:59.000Z"}}