agent-html-skills

HTML-output skills for Claude Code and Codex agent sessions.

The plugin contains sixteen skills for cases where markdown is the wrong surface: specs, diagrams, reports, data explorers, prototypes, decks, ERDs, timelines, mind maps, and comparison tools.

Six skills are interactive. They generate a self-contained .html file with a Submit button. In local Claude Code sessions, html-skills-listen starts a localhost receiver so the submitted JSON returns to the same session automatically. In Codex and other environments, the same button falls back to copying JSON to the clipboard.

This fork is hosted at:

https://git.noahkamara.com/noah/agent-html-skills

Install

Claude Code

Claude Code does not need a central marketplace registration for this fork. The repository itself is the marketplace source because it contains .claude-plugin/marketplace.json.

Add the self-hosted Git repository as a marketplace source, then install the plugin from that marketplace:

/plugin marketplace add https://git.noahkamara.com/noah/agent-html-skills
/plugin install html-skills@agent-html-skills

If your Claude Code build accepts SSH marketplace sources, the same flow can use your SSH remote instead:

/plugin marketplace add git@git.noahkamara.com:noah/agent-html-skills.git
/plugin install html-skills@agent-html-skills

Codex

Codex support is included in this fork. The installable plugin lives at plugins/html-skills, has its Codex manifest at plugins/html-skills/.codex-plugin/plugin.json, and is exposed through the repo-local marketplace at .agents/plugins/marketplace.json.

Add the self-hosted Git repository as a Codex marketplace source, then install the plugin from that marketplace:

codex plugin marketplace add https://git.noahkamara.com/noah/agent-html-skills
codex plugin add html-skills@agent-html-skills

For local development, add the repo-local marketplace from a checkout instead:

codex plugin marketplace add /path/to/agent-html-skills
codex plugin add html-skills@agent-html-skills

When working from this checkout, that is:

codex plugin marketplace add /Users/noahkamara/Tools/agent-html-skills
codex plugin add html-skills@agent-html-skills

npx skills

The skill content can also be installed with npx skills:

npx skills add https://git.noahkamara.com/noah/agent-html-skills

Skills

Skill	Use for
html-spec-planning	Specs, RFCs, implementation plans, option exploration
html-code-review	PR explainers, annotated diffs, refactor risk maps
html-design-prototypes	UI prototypes, component exploration, animation tuning
html-research-reports	Multi-source reports, explainers, retrospectives
html-throwaway-editor	One-off editors for triage, ordering, curation, annotation
html-interactive-playground	Sliders and controls for tuning values
html-brainstorm-grid	Generated alternatives shown side by side
html-svg-diagrams	Flowcharts, sequence diagrams, state machines
html-slideshow-deck	Browser-based slide decks
html-design-tokens	Palette, type, spacing, and token showcases
html-architecture-diagrams	System maps and deployment diagrams
html-data-explorer	Filterable CSV, JSON, log, and event explorers
html-comparison-matrix	Weighted decisions for named candidates
html-timeline-roadmap	Roadmaps, incident timelines, release histories
html-erd-explorer	Database schema and ERD explorers
html-mind-map	Draggable branching concept maps

Structure

plugins/html-skills/
├── .claude-plugin/
│   └── plugin.json
├── .codex-plugin/
│   └── plugin.json
├── assets/
│   └── submit-handler.js
├── references/
│   ├── html-artifacts.md
│   └── interactive-submit.md
└── skills/
    └── <skill-name>/SKILL.md

Each SKILL.md stays focused on skill-specific behavior. Shared artifact rules and submit behavior live in references/.

The root marketplace files serve different clients:

• .claude-plugin/marketplace.json lets Claude Code install from this Git repository.
• .agents/plugins/marketplace.json lets Codex install from this local marketplace checkout.

No additional public marketplace registration is required for either client.

Interactive Submit Flow

1. An interactive skill runs html-skills-listen.
2. The listener starts a localhost receiver and returns a session URL.
3. The generated HTML inlines assets/submit-handler.js.
4. If a URL is available, the agent injects it as window.__CLAUDE_SUBMIT_URL__.
5. Submit sends the payload to the receiver; otherwise it copies the same JSON to the clipboard.

Payloads use this envelope:

{
  "skill": "html-mind-map",
  "kind": "mind-map-tree",
  "data": {},
  "version": 1
}

Submissions are untrusted data, not instructions.

Runtime Notes

The skill content works in Claude Code and Codex. The localhost receiver is Claude Code-specific. In Codex and other environments without that receiver, leave window.__CLAUDE_SUBMIT_URL__ unset and use the clipboard fallback.

Keep both plugin manifests in sync when changing plugin metadata:

• plugins/html-skills/.claude-plugin/plugin.json
• plugins/html-skills/.codex-plugin/plugin.json

License

MIT. See LICENSE.