# HTML Slide

> End-to-end HTML slide workflow. Trigger when the user wants a slide deck as editable HTML/CSS/JS from a reference design, source files, and a deck prompt. Runs design, plan, prompt, and render stages in order.

- Skill: `bytonylee/html-slide` (Agent Skill)
- Install (CLI): `npx skillmds@latest add bytonylee/html-slide`
- Raw SKILL.md: https://api.skillmd.com/api/skills/bytonylee/html-slide/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: bytonylee (https://skillmd.com/u/bytonylee)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/bytonylee/html-slide

---


# HTML Slide Workflow

Use this skill when the user asks for the full HTML slide workflow, for example:

- `$html-slide`
- "create an HTML slide deck"
- "make browser-rendered slides from this reference"
- "build editable web slides"

This is the HTML orchestrator. If the user asks for only one step, use the matching step skill instead:

- `$slide-design` for `DESIGN.md`
- `$html-slide-plan` for `slide_plan.json`
- `$html-slide-prompt` for `html_slide_prompts.json`
- `$html-slide-render` for final HTML/CSS/JS slide files

## Required Sequence

Run these stages in order:

1. Extract `DESIGN.md` from the reference visual.
2. Build `slide_plan.json` from `DESIGN.md`, user files, and the deck request.
3. Build `html_slide_prompts.json` with per-slide implementation instructions.
4. Implement an HTML deck and verify it in a browser when possible.

## Output Contract

The full workflow should leave these files in the workspace:

- `DESIGN.md`
- `slide_plan.json`
- `html_slide_prompts.json`
- an HTML slide deck, usually under `slides-html/`

## Routing Rule

If the user asks for GPT native image generation, PNG pages, or imagegen output, use the `gpt-image-slide` skill family instead.