mcpField
H
html-slide

html-slide

github.com/humantonyleeDocuments151113 installsUpdated 21w ago
Repository

About html-slide

html-slide is an orchestration skill for producing editable, browser-rendered HTML slide decks. It guides users through design extraction, slide planning, per-slide prompts, implementation, and browser verification.

Key features

  1. 01Reference visual extraction
  2. 02Slide plan generation
  3. 03Per-slide prompt creation
  4. 04HTML deck implementation
  5. 05Browser verification

Use cases

  1. 01Turning a visual reference into an HTML deck
  2. 02Planning an editable slide presentation
  3. 03Creating and checking browser-rendered slides

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/humantonylee/future-slide --skill html-slide

After installing, type/html-slidein Claude Code to confirm it loaded.

Details

From the project README

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.

Comments

Markdown supported