agent-html-skills plugin
19 skills: Claude Code builds an HTML page, you work with it in the browser and the answer returns to the agent with no copying
- 70 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The skill opens a local listener on an ephemeral port and watches its log to accept the answer from the browser
- The agent writes HTML files to disk and the publish button can send a page to Claude.ai
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add plugins/agent-html-skillsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The skill opens a local listener on an ephemeral port and watches its log to accept the answer from the browser
- The agent writes HTML files to disk and the publish button can send a page to Claude.ai
This is third-party code. Review the repository files before installing.
What it does
The plugin builds on the idea that HTML beats long Markdown as an agent output surface: color, layout, type and interactivity. It holds 17 content skills and two session primitives, `html-skills-listen` and `html-skills-stop`. The content skills produce architecture diagrams, ER explorers, comparison matrices, code reviews, roadmaps, slide decks, research reports, design prototypes, testing checklists and interactive playgrounds. Each `SKILL.md` carries aesthetic rules so the output does not look generic. The key mechanism is a local listener on an ephemeral port. The `html-skills-listen` skill arms before the page is produced, and the Submit button on the page sends your answer straight into the Claude Code session with no JSON copying. In Claude Code on the web and in a sandbox that cannot reach a browser a clipboard fallback remains. When the `Artifact` tool is available the page gets a Publish to Claude.ai button.
Who it is for. Claude Code users who find it easier to pick and edit a result on an interactive page than to read long text in the terminal.
Good fit when
- A comparison of options is wanted as a matrix where you can mark a choice and send it back to the agent
- A code review is easier to browse on a page with markup and replies
- A research report or a roadmap is assembled into a styled HTML page
- A database schema should be explored in an interactive ER explorer
- A testing checklist is filled in the browser and the result reaches the agent automatically
Not a fit when
- You need a plain text answer in the terminal: a browser page adds steps
- You work in Claude Code on the web where only the clipboard fallback remains
- A local port and listener are forbidden in your environment
Example request
Make an HTML comparison matrix of three databases so I can mark my choice in the browser and have the answer come back on its ownLimitations
Automatic result return works in a local Claude Code session where a listener can open on an ephemeral port and a `Monitor` can watch its log. In Claude Code on the web and in an isolated environment JSON copying through the clipboard remains. The Publish to Claude.ai button appears only when the `Artifact` tool is available. The format targets Claude Code, and for an ordinary Claude.ai chat the skills must be repackaged through skill-creator following the spec in the README. The skill descriptions are pushy by design and fire on their own when a task fits. The last commit dates from October 2026.
How to disable. Run `/plugin uninstall html-skills@agent-html-skills`. The listener is closed by the `html-skills-stop` skill or together with the session.
FAQ
How do I install the plugin in Claude Code?
Run `/plugin marketplace add f-labs-io/agent-html-skills` and `/plugin install html-skills@agent-html-skills`. Alternatively use `npx skills add f-labs-io/agent-html-skills`.
How does the result get back to the agent?
The `html-skills-listen` skill opens a local listener and the Submit button on the page sends the answer straight into the session. Without a listener the result is copied to the clipboard as JSON.
Do I need to call the skills by hand?
No, Claude picks the right skill when the task fits. Each page is written to an `.html` file that opens in the browser.
What pages can it build?
Architecture and ER diagrams, comparison matrices, code reviews, roadmaps, slide decks, reports, design prototypes, testing checklists and interactive playgrounds.
Does it work in Claude Code on the web?
Yes, but the return goes through the clipboard because the local port listener is unavailable there.
Discussion
No questions or reviews yet.
Related
PluginsSeven skills for research, HTML explainers and source citation, installable all at once or one at a time through npx.
A marketplace of 18 Claude Code plugins: reply translation, a web scraper, design systems, a session log and more.
cafe3310's personal skill collection: spec-driven project work, reviews, reports, browser, 3D and video in one repository
Turns any folder of HTML pages into a commenting surface: highlight text, leave a note, and the agent edits the page.
Claude Skills (Alireza Rezvani)
Claude Code Skills & Plugins
A large library of skills, agents and commands by domain: engineering, marketing, product, compliance, C-level advisors and research
Six focused skills for building self-contained HTML artifacts: wireframes, prototypes, mockups, plans and diagrams
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| agent-html-skills (this card) | no | 70 | |
| Reviewable HTML Workbench | no | 302 | a plugin for reviewing HTML output, while this one has 17 content skills and an automatic listener-based return |
| html-explainer | no | 297 | a skill for explanatory HTML pages, while this is a set of 19 skills with a two-way exchange |
README in short
The README cites an article on HTML as an agent output format and explains the two-way exchange through a local listener. Install by plugin and through `npx skills` follows, then the skill list, a section on enabling the auto round-trip, publishing to Claude.ai and moving skills to a regular chat.