agent-html-skills

Two-way HTML artifacts for Claude Code — Claude generates the page, you interact with it in your browser, and the result comes back to Claude automatically. No copy-paste.

Thariq's article "Using Claude Code: The Unreasonable Effectiveness of HTML" made the case for HTML as a better output surface than long-form markdown — color, layout, type, interactivity, all the things markdown gives up. This plugin runs with that idea and closes the loop: seven of the seventeen content skills produce interactive HTML (mind maps, kanban editors, brainstorm grids, comparison matrices, parameter playgrounds, design prototype tuners, testing checklists), and when you click Submit, your structured result is delivered back to Claude as a notification in the same session. You move on without copying anything.

The mechanism is a per-session local listener that the html-skills-listen skill arms automatically — every content skill invokes it from its pre-flight block before writing the artifact. If you skip it, or you're on Claude Code on the web, the same Submit button gracefully falls back to copying JSON to your clipboard for paste-back — so the artifacts always work, you just lose the "automatic" part of the round-trip. The other ten skills are non-interactive artifacts (specs, diagrams, dashboards, decks, design tokens, etc.) where there's no result to send back; they just produce the file, with a small "Publish to Claude.ai" button that rides the same channel.

Seventeen content skills, plus two session primitives (html-skills-listen, html-skills-stop) that the content skills call — 19 skills in the plugin. Each is a single SKILL.md with the aesthetic rules and structural guidance baked in, so the output looks deliberate rather than generic-AI.

Install

As a Claude Code plugin:

/plugin marketplace add f-labs-io/agent-html-skills
/plugin install html-skills@agent-html-skills

Or via npx skills (works on Claude Code, Cursor, Codex, Gemini, and 14+ other agents):

npx skills add f-labs-io/agent-html-skills

What you get

#	Skill	Use when
01	html-spec-planning	Specs, RFCs, implementation plans, exploration
02	html-code-review	PR explainers, refactor risk maps, codebase tours
03	html-design-prototypes	Component design, animation tuning, design systems
04	html-research-reports	Multi-source research synthesis, status reports, incidents
05	html-throwaway-editor	One-off editors that send results back to Claude
06	html-interactive-playground	Sliders/knobs for tuning parameters
07	html-brainstorm-grid	N-variant comparison grids when exploring options
08	html-svg-diagrams	Flowcharts, sequence diagrams, state machines
09	html-slideshow-deck	Keyboard-navigable presentation decks
10	html-design-tokens	Color/type/spacing token showcases
11	html-architecture-diagrams	System maps, deployment topologies
12	html-data-explorer	Filterable tables, faceted search, log viewers
13	html-comparison-matrix	Weighted decision matrices for named candidates
14	html-timeline-roadmap	Gantt / roadmap / timeline views
15	html-erd-explorer	Database schema visualizations
16	html-mind-map	Branching concept maps that send the tree back
17	html-testing-checklist	Flow-organized test plans that send pass/fail results back

You don't invoke these directly — Claude will reach for the right one when the task fits. Each artifact is written to a .html file you open in your browser.

Enabling the auto round-trip

Claude invokes the bundled html-skills-listen skill automatically before producing any artifact in a local Claude Code session — you don't have to do anything. It arms a per-session local listener on an ephemeral port and a Monitor on its log; every Submit click then lands directly in Claude as a notification, no manual copy-paste. When you're done, Claude can invoke html-skills-stop to tear it down (or just end the session — the receiver dies with the shell).

On Claude Code on the web, or in a sandbox that can't reach your browser, you stay on the clipboard fallback; the artifacts still work, you just paste the JSON back yourself.

Publishing to Claude.ai

Local HTML with the immediate two-way round-trip is the hard default. On top of that, when the session's harness exposes Claude Code's Artifact tool, every artifact carries a small "Publish to Claude.ai" button: clicking it sends a publish-request through the same round-trip channel (with the same clipboard fallback), and Claude publishes the page as a hosted artifact and drops the shareable link in chat. The published copy is a read-out — its submit wiring and the button itself are stripped — so the local file remains where you interact.

Using these skills in Claude.ai chat (not Claude Code)

The content of each skill — aesthetic guidance, structure rules, foundation, anti-patterns — is platform-agnostic. Only the submit pipeline and the pre-flight are Claude-Code-specific (they rely on a local server, Monitor, and plugin skills). With those stripped out, every skill works as a regular Claude.ai skill at Settings → Capabilities → Skills, with HTML written to a file you save and open in your browser, and interactive results copied to your clipboard for paste-back.

Asking Claude.ai's skill-creator to repackage

Open a Claude.ai chat with skill-creator active and paste this prompt verbatim:

Repackage the skills in https://github.com/f-labs-io/agent-html-skills/tree/main/plugins/html-skills/skills as individual Claude.ai skills — one .skill file per SKILL.md. Follow the Conversion spec for skill-creator section of that repo's top-level README exactly. Strip every Claude-Code-only mechanism (the pre-flight block, the html-skills-listen / html-skills-stop primitives, Monitor, server mode, __CLAUDE_SUBMIT_URL__). Keep all content guidance, aesthetic rules, the ## HTML output foundation block, and the clipboard path of assets/submit-handler.js. Produce one .skill per skill so users can install only the ones they want.

Conversion spec for skill-creator

Source layout (read these files from the repo):

plugins/html-skills/
├── skills/<skill-name>/SKILL.md      ← 17 content skills + 2 session primitives (skip those)
├── assets/submit-handler.js          ← inlined by every content skill
└── assets/blocks/                    ← authoring templates, already expanded into each SKILL.md (skip)

For every content skill (all 17):

1. Keep the frontmatter name and description. The description field is "pushy" by design (per the skill-creator authoring guide) — don't soften it. when_to_use is a Claude Code field: fold its trigger phrases into the description if that stays under 1,024 characters, otherwise drop it. Drop metadata.
2. From the body, strip the TRIGGER: … prefix sentence in the descriptions of html-brainstorm-grid, html-design-prototypes, and html-comparison-matrix, and the two AskUserQuestion anti-pattern bullets in those skills' bodies. That gate is specific to Claude Code's AskUserQuestion tool — Claude.ai's chat surface doesn't have it as a competing comparison primitive, so the rule is noise there. Keep everything else in those skills' bodies.
3. Remove the ## Pre-flight — run BEFORE writing the artifact section entirely (it invokes a Claude-Code-only skill). Keep the ## HTML output foundation section unchanged except: drop the final "Publish to Claude.ai" button bullet — it drives Claude Code's Artifact tool, which doesn't exist in Claude.ai chat. Keep the clipboard-helper bullet; submit-handler.js ships with every skill.
4. Keep all other body content and anti-patterns unchanged. The <!-- block:… --> HTML comments are harmless; remove them if you like.

For the 7 interactive skills only (html-mind-map, html-throwaway-editor, html-brainstorm-grid, html-comparison-matrix, html-interactive-playground, html-design-prototypes, html-testing-checklist):

5. Replace the ## Submit pipeline (server or clipboard) section with a single shorter section titled ## Submit (clipboard). Body should be: "On submit, JSON copies to the user's clipboard for them to paste back into Claude. There is no server mode in Claude.ai chat — don't reference one. Inline the submit-handler.js from assets/ and call submitToClaude(payload) from the single Submit button. Do not set window.__CLAUDE_SUBMIT_URL__ — leaving it unset is what selects clipboard mode."
6. Keep these interactive-skill rules intact: one Submit button per artifact (no parallel "copy as prompt" buttons), never call navigator.clipboard.writeText directly (use submitToClaude / copyToClipboard for the hardened fallback chain), no inline-rendering inside Claude's chat surface (always write a real .html file), no innerHTML from variables (XSS / security-hook trip).
7. Drop any remaining sentence that names Claude-Code-only surfaces: html-skills-listen, html-skills-stop, Monitor, ephemeral ports.

For all 17:

8. Place submit-handler.js (the unmodified file from the repo's plugins/html-skills/assets/) into the packaged skill's assets/ folder. The handler already falls back to clipboard when __CLAUDE_SUBMIT_URL__ is unset, so no code change is needed — it Just Works in Claude.ai.

Drop entirely (don't include in any .skill package):

• skills/html-skills-listen/, skills/html-skills-stop/ — Claude Code session primitives (bash scripts, the Node receiver, Monitor)
• assets/blocks/ — authoring templates
• .claude-plugin/plugin.json, .claude-plugin/marketplace.json — Claude Code plugin manifests

Package each skill:

Use skill-creator's scripts/package_skill.py (or the equivalent zip-the-folder step) to produce one .skill file per skill, named html-<kind>.skill. The user installs each via Settings → Capabilities → Skills in Claude.ai.

Package contents per skill:

html-<kind>/
├── SKILL.md          ← converted per rules above
└── assets/
    └── submit-handler.js

License

MIT — see LICENSE.

Copyright

Copyright © 2026 Fiverr Labs.

Created with ♥ by Fiverr Labs.