# HTML Slide Render

> Final HTML slide stage. Trigger when the user wants to implement or render an editable HTML slide deck from DESIGN.md, slide_plan.json, and html_slide_prompts.json.

- Skill: `bytonylee/html-slide-render` (Agent Skill)
- Install (CLI): `npx skillmds@latest add bytonylee/html-slide-render`
- Raw SKILL.md: https://api.skillmd.com/api/skills/bytonylee/html-slide-render/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-render

---


# HTML Slide Render

Use this skill for commands like:

- `$html-slide-render`
- "build the HTML deck"
- "render the slides as HTML"
- "implement html_slide_prompts.json"

## Goal

Build an editable browser-rendered slide deck from the planned design and prompts.

## Inputs

- `DESIGN.md`
- `slide_plan.json`
- `html_slide_prompts.json`

## Default Output

Create a project-local folder such as:

```text
slides-html/
├── index.html
├── styles.css
├── slides.js
└── assets/
```

Use a simpler single-file `index.html` only when the user asks for a portable standalone artifact.

## Implementation Rules

- Build actual slides as the first screen, not a landing page.
- Preserve the extracted design system.
- Use stable 16:9 slide dimensions unless the user specifies another format.
- Use semantic HTML for slide content.
- Keep CSS tokens readable and centralized.
- Use SVG, CSS, or chart libraries only when they improve the slide content.
- Keep text legible and prevent overflow.
- Verify in a browser when possible.

## Hard Rules

- Do not use Codex native image generation as the primary renderer.
- Do not collapse dense analytical slides into generic card grids.
- Do not leave generated assets outside the workspace.
- Report the final HTML entry path and any verification performed.