[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-74853":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":9,"rankLanguage":9,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":9,"pushedAt":9,"updatedAt":36,"readmeContent":37,"aiSummary":38,"trendingCount":15,"starSnapshotCount":15,"syncStatus":39,"lastSyncTime":40,"discoverSource":41},74853,"frontend-slides","zarazhangrui\u002Ffrontend-slides","zarazhangrui","Create beautiful slides on the web using a coding agent's frontend skills",null,"JavaScript",21262,1734,93,15,0,155,931,2608,791,44.72,"MIT License",false,"main",true,[26,27,28,29,30,31,32,33,34,35],"ai-slides","anthropic","claude","claude-code","claude-skill","generative-ui","html","presentation","slides","vibe-coding","2026-06-12 02:03:29","# Frontend Slides\n\nA Claude Code skill for creating stunning, animation-rich HTML presentations — from scratch or by converting PowerPoint files.\n\n## What This Does\n\n**Frontend Slides** helps non-designers create beautiful web presentations without knowing CSS or JavaScript. It 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.\n\nHere is a deck about the skill, made through the skill:\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fef57333e-f879-432a-afb9-180388982478\n\n### Key Features\n\n- **Zero Dependencies** — Single HTML files with inline CSS\u002FJS. 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- **Production Quality** — Accessible, responsive, well-commented code you can customize.\n\n## Installation\n\n### Via Plugin Marketplace (Recommended)\n\nInstall directly from Claude Code in two commands:\n\n```bash\n\u002Fplugin marketplace add zarazhangrui\u002Ffrontend-slides\n\u002Fplugin install frontend-slides@frontend-slides\n```\n\nThen use it by typing `\u002Ffrontend-slides` in Claude Code.\n\n### Manual Installation\n\nCopy the skill files to your Claude Code skills directory:\n\n```bash\n# Create the skill directory\nmkdir -p ~\u002F.claude\u002Fskills\u002Ffrontend-slides\u002Fscripts\n\n# Copy all files (or clone this repo directly)\ncp SKILL.md STYLE_PRESETS.md viewport-base.css html-template.md animation-patterns.md ~\u002F.claude\u002Fskills\u002Ffrontend-slides\u002F\ncp scripts\u002Fextract-pptx.py ~\u002F.claude\u002Fskills\u002Ffrontend-slides\u002Fscripts\u002F\n```\n\nOr clone directly:\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fzarazhangrui\u002Ffrontend-slides.git ~\u002F.claude\u002Fskills\u002Ffrontend-slides\n```\n\nThen use it by typing `\u002Ffrontend-slides` in Claude Code.\n\n## Usage\n\n### Create a New Presentation\n\n```\n\u002Ffrontend-slides\n\n> \"I want to create a pitch deck for my AI startup\"\n```\n\nThe skill will:\n\n1. Ask about your content (slides, messages, images)\n2. Ask about the feeling you want (impressed? excited? calm?)\n3. Generate 3 visual style previews for you to compare\n4. Create the full presentation in your chosen style\n5. Open it in your browser\n\n### Convert a PowerPoint\n\n```\n\u002Ffrontend-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## Included Styles\n\n### Dark Themes\n\n- **Bold Signal** — Confident, high-impact, vibrant card on dark\n- **Electric Studio** — Clean, professional, split-panel\n- **Creative Voltage** — Energetic, retro-modern, electric blue + neon\n- **Dark Botanical** — Elegant, sophisticated, warm accents\n\n### Light Themes\n\n- **Notebook Tabs** — Editorial, organized, paper with colorful tabs\n- **Pastel Geometry** — Friendly, approachable, vertical pills\n- **Split Pastel** — Playful, modern, two-color vertical split\n- **Vintage Editorial** — Witty, personality-driven, geometric shapes\n\n### Specialty\n\n- **Neon Cyber** — Futuristic, particle backgrounds, neon glow\n- **Terminal Green** — Developer-focused, hacker aesthetic\n- **Swiss Modern** — Minimal, Bauhaus-inspired, geometric\n- **Paper & Ink** — Literary, drop caps, pull quotes\n\n## Architecture\n\nThis skill uses **progressive disclosure** — the main `SKILL.md` is a concise map (~180 lines), with supporting files loaded on-demand only when needed:\n\n| File                      | Purpose                        | Loaded When               |\n| ------------------------- | ------------------------------ | ------------------------- |\n| `SKILL.md`                | Core workflow and rules        | Always (skill invocation) |\n| `STYLE_PRESETS.md`        | 12 curated visual presets      | Phase 2 (style selection) |\n| `viewport-base.css`       | Mandatory responsive CSS       | Phase 3 (generation)      |\n| `html-template.md`        | HTML structure and JS features | Phase 3 (generation)      |\n| `animation-patterns.md`   | CSS\u002FJS animation reference     | Phase 3 (generation)      |\n| `scripts\u002Fextract-pptx.py` | PPT content extraction         | Phase 4 (conversion)      |\n| `scripts\u002Fdeploy.sh`       | Deploy to Vercel               | Phase 6 (sharing)         |\n| `scripts\u002Fexport-pdf.sh`   | Export slides to PDF           | Phase 6 (sharing)         |\n\nThis design follows [OpenAI's harness engineering](https:\u002F\u002Fopenai.com\u002Findex\u002Fharness-engineering\u002F) principle: \"give the agent a map, not a 1,000-page instruction manual.\"\n\n## Philosophy\n\nThis skill was born from the belief that:\n\n1. **You don't need to be a designer to make beautiful things.** You just need to react to what you see.\n\n2. **Dependencies are debt.** A single HTML file will work in 10 years. A React project from 2019? Good luck.\n\n3. **Generic is forgettable.** Every presentation should feel custom-crafted, not template-generated.\n\n4. **Comments are kindness.** Code should explain itself to future-you (or anyone else who opens it).\n\n## Sharing Your Presentations\n\nAfter creating a presentation, the skill offers two 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\n```bash\nbash scripts\u002Fdeploy.sh .\u002Fmy-deck\u002F\n# or\nbash scripts\u002Fdeploy.sh .\u002Fpresentation.html\n```\n\nUses [Vercel](https:\u002F\u002Fvercel.com) (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\n```bash\nbash scripts\u002Fexport-pdf.sh .\u002Fmy-deck\u002Findex.html\nbash scripts\u002Fexport-pdf.sh .\u002Fpresentation.html .\u002Foutput.pdf\n```\n\nUses [Playwright](https:\u002F\u002Fplaywright.dev) 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## Requirements\n\n- [Claude Code](https:\u002F\u002Fclaude.ai\u002Fclaude-code) CLI\n- For PPT conversion: Python with `python-pptx` library\n- For URL deployment: Node.js + Vercel account (free)\n- For PDF export: Node.js (Playwright installs automatically)\n\n## Credits\n\nCreated by [@zarazhangrui](https:\u002F\u002Fgithub.com\u002Fzarazhangrui) with Claude Code.\n\nInspired by the \"Vibe Coding\" philosophy — building beautiful things without being a traditional software engineer.\n\n## License\n\nMIT — Use it, modify it, share it.\n","Frontend Slides 是一个用于创建精美网页演示文稿的 Claude 代码技能。它允许非设计人员无需掌握 CSS 或 JavaScript 即可制作动画丰富的 HTML 演示文稿，支持从零开始创建或转换 PowerPoint 文件。其核心功能包括无依赖性（单个 HTML 文件包含内联 CSS\u002FJS）、视觉风格发现（通过生成预览图选择喜欢的设计）、PPT 转换（保留所有图片和内容）以及避免常见的 AI 设计风格。该项目适合需要快速生成高质量网页演示文稿的场景，如企业展示、教育培训等。",2,"2026-06-11 03:51:06","high_star"]