How do I install the Agent HTML skill?

Run npx skillmds@latest add sayhi-bzb/agent-html in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Agent HTML safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Agent HTML?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Agent HTML free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Agent HTML?

sayhi-bzb (@sayhi-bzb) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Agent HTML by sayhi-bzb — Agent Skill

Name: Agent HTML
Author: sayhi-bzb

Agent HTML

Use when editing AgentHTML artifacts, agent-html files, Gallery Preview DSL, blocks, components, sections, prompt schema, or runtime-rendered artifact content. Before editing AgentHTML content, read `.agents/skills/agent-html/references/prompt-schema.md` for the current DSL contract and enabled component grammar.

sayhi-bzb 5c51926 7 files · 35.8 KB Updated Sep 17, 2026

File contents

agent-html

Write agent-html DSL, not JSX or HTML.

Workflow

Read .agents/skills/agent-html/references/prompt-schema.md for the supported tags, attrs, defaults, and forbidden constructs.
Reuse the closest valid fixture pattern from .agents/skills/agent-html/references/examples.md before inventing new structure.
Stay within the currently supported runtime tags unless the user explicitly wants a future-target draft.
When an icon is needed, run .agents/skills/agent-html/scripts/search_icons.py "<query>" instead of guessing names.
In an AgentHTML workspace, edit user-facing artifacts at projects/{project-id}/{section-id}/artifact.agent-html.

Rules

Output only agent-html DSL.
Use PascalCase tags.
Root must be <Cell>.
Use quoted scalar attrs like columns="2" or value="82".
Do not use class, className, style, imports, hooks, JS expressions, or raw HTML tags.
Do not invent tags or attrs not present in the grammar reference.
Do not put bare text directly under Cell, Block, Stack, Cluster, or Grid.
Do not put UI directly under Cell or layout nodes; wrap UI in Block, then arrange blocks with layout.

References

Runtime contract and prompt schema: .agents/skills/agent-html/references/prompt-schema.md
Valid and invalid fixture patterns: .agents/skills/agent-html/references/examples.md
Icon lookup notes: .agents/skills/agent-html/references/icons.md

.agents/skills/agent-html/references/prompt-schema.md is the runtime contract surface. In an AgentHTML workspace, the app rewrites it from the current enabled component set.

Scripts

Search Lucide icon names: .agents/skills/agent-html/scripts/search_icons.py "<query>"

---name: agent-htmldescription: Use when editing AgentHTML artifacts, agent-html files, Gallery Preview DSL, blocks, components, sections, prompt schema, or runtime-rendered artifact content. Before editing AgentHTML content, read `.agents/skills/agent-html/references/prompt-schema.md` for the current DSL contract and enabled component grammar.---# agent-htmlWrite `agent-html` DSL, not JSX or HTML.## Workflow1. Read `.agents/skills/agent-html/references/prompt-schema.md` for the supported tags, attrs, defaults, and forbidden constructs.2. Reuse the closest valid fixture pattern from `.agents/skills/agent-html/references/examples.md` before inventing new structure.3. Stay within the currently supported runtime tags unless the user explicitly wants a future-target draft.4. When an icon is needed, run `.agents/skills/agent-html/scripts/search_icons.py "<query>"` instead of guessing names.5. In an AgentHTML workspace, edit user-facing artifacts at `projects/{project-id}/{section-id}/artifact.agent-html`.## Rules- Output only `agent-html` DSL.- Use `PascalCase` tags.- Root must be `<Cell>`.- Use quoted scalar attrs like `columns="2"` or `value="82"`.- Do not use `class`, `className`, `style`, imports, hooks, JS expressions, or raw HTML tags.- Do not invent tags or attrs not present in the grammar reference.- Do not put bare text directly under `Cell`, `Block`, `Stack`, `Cluster`, or `Grid`.- Do not put UI directly under `Cell` or layout nodes; wrap UI in `Block`, then arrange blocks with layout.## References- Runtime contract and prompt schema: `.agents/skills/agent-html/references/prompt-schema.md`- Valid and invalid fixture patterns: `.agents/skills/agent-html/references/examples.md`- Icon lookup notes: `.agents/skills/agent-html/references/icons.md``.agents/skills/agent-html/references/prompt-schema.md` is the runtime contractsurface. In an AgentHTML workspace, the app rewrites it from the current enabledcomponent set.## Scripts- Search Lucide icon names: `.agents/skills/agent-html/scripts/search_icons.py "<query>"`

Frequently asked questions