Frontend Slides
- Updated May 31, 2026
- Dot8Pixels/html-presenter
frontend-slides is a zero-dependency HTML presentation generator with safe presets, a bold template library, PowerPoint conversion, and an anti-AI-slop design philosophy. Developers use it to produce polished, distinctive slide decks as standalone HTML (or exported PPT) without pulling in a heavy presentation framework.
Key points
- Zero-dependency HTML slides
- Safe presets
- Bold template library
- PPT conversion
- Anti-AI-slop design
Frontend Slides by the numbers
- Data as of Jul 7, 2026 (Skillselion catalog sync)
/plugin marketplace add Dot8Pixels/html-presenter/plugin install frontend-slides@frontend-slidesAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Last updated | May 31, 2026 |
|---|---|
| Repository | Dot8Pixels/html-presenter ↗ |
What it does
Generate zero-dependency HTML presentations with safe presets and bold template styles, convert to PPT, and follow an anti-AI-slop design philosophy.
README.md
html_presenter — Frontend Slides Skill
This workspace is a local installation of frontend-slides v2.1.0 by @zarazhangrui — a coding-agent skill for creating stunning, zero-dependency HTML presentations.
What's Here
| File | Purpose |
|---|---|
SKILL.md |
Core workflow — the entry point for any AI agent. Read this first. |
STYLE_PRESETS.md |
12 curated visual presets (dark, light, specialty themes) |
viewport-base.css |
Mandatory fixed 16:9 stage CSS — include in every presentation |
html-template.md |
HTML architecture, JS features, inline editing implementation |
animation-patterns.md |
CSS/JS animation reference by feeling |
bold-template-pack/ |
34 bold design systems (Vellum, Studio, Signal, etc.) |
scripts/ |
PPT extraction, Vercel deploy, PDF export utilities |
How to Use (for AI Agents)
- Read
SKILL.md— it's the full workflow map - Follow the phases:
- Phase 0 — Detect mode: new presentation, PPT conversion, or enhancement
- Phase 1 — Content discovery (ask user about purpose, length, content, density)
- Phase 2 — Style discovery (generate 3 visual previews, let user pick)
- Phase 3 — Generate full HTML presentation
- Phase 4-6 — PPT conversion, delivery, share/export
- Key rules:
- Every deck uses a fixed 1920×1080 stage scaled uniformly — never reflow content
- Include the full
viewport-base.cssin every presentation - Use distinctive fonts (Fontshare / Google Fonts) — never system fonts
- No generic "AI slop" aesthetics (no Inter/Roboto, no purple gradients on white)
Scripts
# Extract content from a PowerPoint file
pip install python-pptx
python scripts/extract-pptx.py input.pptx output_dir/
# Deploy to a live URL (Vercel)
bash scripts/deploy.sh ./my-deck/
# Export to PDF
bash scripts/export-pdf.sh ./presentation.html
Philosophy
- Zero dependencies — Single HTML files with inline CSS/JS, no build tools
- Show, don't tell — Visual previews instead of abstract design choices
- Distinctive design — Every presentation should feel custom-crafted
- Progressive disclosure — Read lightweight indexes first, full details only when needed
Installed from zarazhangrui/frontend-slides — MIT License
Related skills
Lark DocGenerate, update, and maintain structured documentation directly inside Lark/Feishu using natural language and agentic workflows.494kLark DriveLet their coding agents read, create, update and search documents stored in Lark (Feishu) Drive directly from prompts.493kLark SheetsConnect Claude, Cursor or other agents directly to Feishu/Lark spreadsheets for live data reads, writes, and structured automation.493kLark WikiGenerate, update, and sync structured knowledge bases inside Lark (Feishu) directly from code, specs, or agent output.493kLark WhiteboardGenerate, edit, and collaborate on visual diagrams and flowcharts directly inside Claude, Cursor or other agents.493kLark SlidesInstantly generate polished, professional slide decks from specs, roadmaps, or meeting notes using Lark/Feishu.493k