Built natively for OpenCode — the open-source AI coding agent. Create stunning, zero-dependency HTML presentations from scratch or by converting PowerPoint files.
Note: This is the OpenCode adaptation of the original frontend-slides Claude Code skill. This version was created by @TMFNK and is designed for community contributions and improvements.
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.
Here is a deck about the skill, made with the skill:
Frontend.slides.demo.-.compressed.mp4
- Zero Dependencies — 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).
- Production Quality — Accessible, responsive, well-commented code you can customize.
- 🟢 OpenCode Native — Specifically designed for OpenCode's skill architecture, agent configuration format, and tool conventions.
This skill is built from the ground up for OpenCode. Here's what that means in practice:
The SKILL.md uses OpenCode's YAML frontmatter format with the compatibility: opencode field, which tells OpenCode how to load and invoke the skill:
---
name: frontend-slides
description: Create stunning, animation-rich HTML presentations from scratch or by
converting PowerPoint files. Helps non-designers discover their aesthetic through
visual exploration rather than abstract choices.
license: MIT
compatibility: opencode
---The skill uses OpenCode's native tools throughout the workflow:
| Phase | OpenCode Tool Used |
|---|---|
| Style preview generation | bash with open/xdg-open/start to auto-open HTML previews |
| Image evaluation | view tool for rendering images inline |
| Preview storage | .opencode/slide-previews/ working directory |
| PPT extraction | bash to run python scripts/extract-pptx.py |
| Presentation delivery | bash opener + cleanup of .opencode/slide-previews/ |
frontend-slides/
├── SKILL.md # Main skill definition (required) — OpenCode format
├── README.md # This file
├── STYLE_PRESETS.md # Visual style references
├── viewport-base.css # Mandatory responsive CSS
├── html-template.md # HTML structure reference
├── animation-patterns.md # Animation reference
├── LICENSE # MIT License
├── CONTRIBUTING.md # Contribution guidelines
├── CODE_OF_CONDUCT.md # Community code of conduct
└── scripts/
└── extract-pptx.py # PPTX extraction script
| Aspect | Claude Code Version | This OpenCode Version |
|---|---|---|
| Skill Location | ~/.claude/skills/ |
~/.config/opencode/skills/ |
| Compatibility Field | claude |
opencode |
| Preview Directory | .claude/slide-previews/ |
.opencode/slide-previews/ |
| File Structure | Single-level | Supports nested directories |
# 1. Clone this repository
git clone https://github.com/TMFNK/frontend-slides-OpenCode.git
# 2. Copy files to OpenCode skills folder
mkdir -p ~/.config/opencode/skills/frontend-slides
cp -r frontend-slides-OpenCode/* ~/.config/opencode/skills/frontend-slides/That's it. The skill will be available in OpenCode.
In OpenCode, invoke the skill and describe what you want:
> "I want to create a pitch deck for my AI startup"
The skill will:
- Ask about your content (slides, messages, images)
- Ask about the feeling you want (impressed? excited? calm?)
- Generate 3 visual style previews for you to compare
- Create the full presentation in your chosen style
- Open it in your browser
> "Convert my presentation.pptx to a web slideshow"
The skill will:
- Extract all text, images, and notes from your PPT
- Show you the extracted content for confirmation
- Let you pick a visual style
- Generate an HTML presentation with all your original assets
- Bold Signal — Confident, high-impact, vibrant card on dark
- Electric Studio — Clean, professional, split-panel
- Creative Voltage — Energetic, retro-modern, electric blue + neon
- Dark Botanical — Elegant, sophisticated, warm accents
- Notebook Tabs — Editorial, organized, paper with colorful tabs
- Pastel Geometry — Friendly, approachable, vertical pills
- Split Pastel — Playful, modern, two-color vertical split
- Vintage Editorial — Witty, personality-driven, geometric shapes
- Neon Cyber — Futuristic, particle backgrounds, neon glow
- Terminal Green — Developer-focused, hacker aesthetic
- Swiss Modern — Minimal, Bauhaus-inspired, geometric
- Paper & Ink — Literary, drop caps, pull quotes
This skill uses progressive disclosure — the main SKILL.md is a concise map (~180 lines), with supporting files loaded on-demand only when needed:
| File | Purpose | Loaded When |
|---|---|---|
SKILL.md |
Core workflow and rules | Always (skill invocation) |
STYLE_PRESETS.md |
12 curated visual presets | Phase 2 (style selection) |
viewport-base.css |
Mandatory responsive CSS | Phase 3 (generation) |
html-template.md |
HTML structure and JS features | Phase 3 (generation) |
animation-patterns.md |
CSS/JS animation reference | Phase 3 (generation) |
scripts/extract-pptx.py |
PPT content extraction | Phase 4 (conversion) |
This design follows the harness engineering principle: "give the agent a map, not a 1,000-page instruction manual."
- OpenCode CLI
- For PPT conversion: Python with
python-pptxlibrary (pip install python-pptx)
This skill was born from the belief that:
- You don't need to be a designer to make beautiful things. You just need to react to what you see.
- Dependencies are debt. A single HTML file will work in 10 years. A React project from 2019? Good luck.
- Generic is forgettable. Every presentation should feel custom-crafted, not template-generated.
- Comments are kindness. Code should explain itself to future-you (or anyone else who opens it).
- Community drives excellence. Open source adaptation enables broader contribution and improvement.
If you're coming from the original Claude Code skill:
- Move files from
~/.claude/skills/frontend-slides/to~/.config/opencode/skills/frontend-slides/ - Update the
compatibilityfield inSKILL.mdfromclaudetoopencode
We welcome contributions from the community! Please see our Contributing Guide for details on how to set up a development environment, code style conventions, submitting pull requests, and reporting bugs.
# Fork this repository
# Clone your fork
git clone https://github.com/YOUR_USERNAME/frontend-slides-OpenCode.git
# Create a feature branch
git checkout -b feature/your-feature-name
# Make your changes and test by symlinking to your OpenCode skills directory
ln -s $(pwd) ~/.config/opencode/skills/frontend-slides
# Commit and push
git add .
git commit -m "Add your feature description"
git push origin feature/your-feature-name
# Open a pull request- OpenCode Version: Created by @TMFNK
- Original Claude Code Skill: Created by @zarazhangrui with Claude Code
Inspired by the "Vibe Coding" philosophy — building beautiful things without being a traditional software engineer.
MIT — Use it, modify it, share it. See the LICENSE file for details.
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Contributing: See CONTRIBUTING.md