mcpField
H
html-slide-plan

html-slide-plan

github.com/humantonyleeDocuments151105 installsUpdated 21w ago
Repository

About html-slide-plan

html-slide-plan is a skill for designing the story, order, and content mapping of an HTML slide deck before implementation. It uses design constraints and source material to produce a structured slide plan, not HTML.

Key features

  1. 01Defines deck metadata and content inventory
  2. 02Sets the story arc and slide order
  3. 03Maps each slide's role and core message
  4. 04Recommends HTML layout and page regions

Use cases

  1. 01Planning slide order before implementation
  2. 02Mapping source material into a web slide deck

Install

Copy the command and run it in a terminal.

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

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

Details

From the project README

HTML Slide Plan

Use this skill for commands like:

  • $html-slide-plan
  • "plan the HTML slide deck"
  • "create slide_plan.json for web slides"
  • "decide slide order before implementation"

Goal

Create slide_plan.json: the deck story, slide order, content mapping, and HTML-friendly layout direction for each page.

Inputs

  • DESIGN.md
  • user files or source material
  • user deck goal, audience, language, and constraints

Required Output

Return valid JSON only. Include:

  • deck metadata
  • design dependency
  • content inventory
  • story arc
  • ordered slides
  • per-slide role, page family, core message, evidence, recommended HTML layout, and header/body/footer plan

Hard Rules

  • Do not write HTML yet.
  • Do not create image-generation prompts.
  • Use DESIGN.md as visual constraints.
  • Prefer layouts that can be built cleanly with semantic HTML and CSS.
  • Stop after slide_plan.json unless the user explicitly asks to continue.

Comments

Markdown supported