mcpField
H
html-slide-prompt

html-slide-prompt

github.com/humantonyleeDocuments151106 installsUpdated 21w ago
Repository

About html-slide-prompt

html-slide-prompt is a skill for turning a slide plan and design notes into build-ready instructions for each HTML slide. It is intended for workflows that need structured implementation guidance without generating the HTML in this step.

Key features

  1. 01Produces one instruction object per slide
  2. 02Specifies semantic structure and CSS layout
  3. 03Covers responsive behavior and accessibility
  4. 04Lists assets and anti-patterns

Use cases

  1. 01Preparing slide-by-slide implementation instructions
  2. 02Converting a slide plan into HTML build guidance

Install

Copy the command and run it in a terminal.

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

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

Details

From the project README

HTML Slide Prompt

Use this skill for commands like:

  • $html-slide-prompt
  • "create html_slide_prompts.json"
  • "write implementation prompts for each HTML slide"
  • "convert the slide plan into build instructions"

Goal

Create html_slide_prompts.json: one implementation-ready instruction object per slide.

Inputs

  • DESIGN.md
  • slide_plan.json
  • source files if facts need verification

Required Output

Return valid JSON only. For every slide include:

  • slide number
  • page family
  • slide title
  • HTML layout family
  • content blocks
  • semantic structure
  • CSS layout instructions
  • responsive behavior
  • chart/table/icon instructions
  • assets required
  • accessibility notes
  • anti-patterns to avoid

Hard Rules

  • Do not render final HTML in this step.
  • Do not use GPT image-generation language unless an image asset is explicitly needed.
  • Keep instructions buildable with normal HTML/CSS/JS.
  • Stop after html_slide_prompts.json unless the user explicitly asks to continue.

Comments

Markdown supported