html-master

HTML Master

html-master is an Agent Skill for creating editable, polished HTML presentations.

It supports two workflows:

• PPTX redesign: extract text/images from a PowerPoint file, then rebuild it as a redesigned HTML deck. It intentionally avoids pixel-perfect conversion.
• Template-first creation: when no PPTX is provided, use beautiful-html-templates to choose a visual system, preview options, and build the deck.

Every final HTML deck should include built-in editing mode. Before final generation, the skill now requires deck planning, template/class preflight, asset handling, animation choice, edit-mode checks, and static validation. If the user requests Guizang, magazine, Swiss, or horizontal swipe deck style, html-master routes to guizang-ppt-skill instead of duplicating its visual rules.

Install

Codex

npx skills add https://github.com/Calvingen3/html-master -g -y

Manual install:

mkdir -p "${CODEX_HOME:-$HOME/.codex}/skills"
git clone https://github.com/Calvingen3/html-master "${CODEX_HOME:-$HOME/.codex}/skills/html-master"

Restart Codex after installation.

Install supporting skills and PPTX extraction dependencies:

"${CODEX_HOME:-$HOME/.codex}/skills/html-master/scripts/install-deps.sh" "${CODEX_HOME:-$HOME/.codex}/skills"

Claude Code

If your Claude Code setup supports the Skills CLI:

npx skills add https://github.com/Calvingen3/html-master -g -y

Manual install:

mkdir -p "$HOME/.claude/skills"
git clone https://github.com/Calvingen3/html-master "$HOME/.claude/skills/html-master"

Restart Claude Code after installation.

Install supporting skills and PPTX extraction dependencies:

"$HOME/.claude/skills/html-master/scripts/install-deps.sh" "$HOME/.claude/skills"

Hermes / OpenClaw / Other Agents

This skill is portable if the agent can load Agent Skills-style folders containing SKILL.md.

Install by cloning this repository into that agent's configured skills directory:

mkdir -p <agent-skill-root>
git clone https://github.com/Calvingen3/html-master <agent-skill-root>/html-master

Then install supporting skills into the same root:

<agent-skill-root>/html-master/scripts/install-deps.sh <agent-skill-root>

If the agent does not support Agent Skills directly, use SKILL.md as an instruction file or system prompt attachment.

Offline Install

If GitHub is unavailable on the target machine, use the offline bundle zip instead of cloning. Unzip it locally, then copy or install the bundled skills/ folders into the target agent's skill root.

unzip html-master-offline-bundle-*.zip
cd html-master-offline-bundle-*
./offline-install.sh <agent-skill-root>

The offline bundle should include:

• html-master
• frontend-slides
• beautiful-html-templates
• GSAP skills from greensock/gsap-skills

After offline install, run the dependency script once to verify paths and create frontend-slides/.venv when Python is available:

<agent-skill-root>/html-master/scripts/install-deps.sh <agent-skill-root>

Runtime Dependencies

html-master checks and installs supporting skills through scripts/install-deps.sh:

• greensock/gsap-skills
• zarazhangrui/frontend-slides
• zarazhangrui/beautiful-html-templates

frontend-slides may need python-pptx for PPTX extraction. The skill prefers a local virtual environment and avoids forcing packages into a system-managed Python.

Usage Examples

Turn a source PPTX into a redesigned editable HTML deck:

Use $html-master to redesign this PPTX into an editable HTML presentation.

Create a new deck from a brief:

Use $html-master to make a polished HTML presentation about our product launch.

Ask for advanced motion:

Use $html-master and add cinematic GSAP animation.

Behavior Notes

• PPTX input uses redesign, not faithful conversion.
• Large PPTX files may be tested on the first 10 slides before rebuilding the full deck.
• If no PPTX is provided, the skill follows the beautiful-html-templates preview workflow.
• Guizang, magazine, Swiss, launch-event, or horizontal swipe deck requests should use guizang-ppt-skill as the style backend.
• Final HTML must include edit mode unless the user explicitly opts out.
• Final HTML should be checked with the bundled validator before delivery.
• PDF export or deployment should happen after local browser verification.

Validation

Run the static deck validator against generated HTML:

node <agent-skill-root>/html-master/scripts/validate-html-deck.mjs path/to/index.html

Use --allow-no-edit or --allow-no-export only when the user explicitly opted out or the delivery context makes that feature impossible.

Repository Layout

html-master/
  SKILL.md
  README.md
  LICENSE
  agents/
    openai.yaml
  references/
    workflow-gates.md
    deck-planning.md
    asset-handling.md
    edit-mode.md
    verification.md
  scripts/
    install-deps.sh
    validate-html-deck.mjs