The html skill owns creating and revising durable, standalone HTML artifacts: a complete self-contained index.html saved in a requested or generated artifact directory, with inline dependencies, accessible structure, loopback serving, and exact-file verification. It triggers when a user asks to create, build, turn content or data into, save, revise, or update a “durable HTML artifact,” “one-file dashboard,” “single-page local artifact,” or named HTML artifact, or explicitly says “use /html” or “activate the HTML skill.” It does not trigger for integrating HTML into React or Next.js routing, reviewing or explaining HTML or accessibility, browser-based QA of an existing page, converting Figma designs into reusable components, or merely serving an existing dist directory.
Resolve ARTIFACT_DIR inside the provided HTML state root, or expanded ~/.html otherwise: revise a named artifact in place, or create a three-random-word lowercase slug for new work.
Write only ARTIFACT_DIR/index.html as a complete self-contained, source-faithful, responsive interface with semantic structure and accessible controls unless the user names another entry file.
Start a long-lived static server for ARTIFACT_DIR on 127.0.0.1 using a free non-common port.
Verify the exact http://127.0.0.1:<PORT>/index.html with files inside the task run, retrying from step 3 on another port if binding or fetching fails, and keep the verified server alive through handoff.
Reply with exactly HTML file: <absolute entry-file path> then HTML: [Open locally](<verified /index.html URL>); if serving cannot be verified, omit the link and give the path plus one concise reason.
Details
Run python3 -m http.server "$PORT" --bind 127.0.0.1 --directory "$ARTIFACT_DIR" as the foreground command of a long-running tool session; do not background or detach it from a shell that will exit.
1---2name: html3description: The html skill owns creating and revising durable, standalone HTML artifacts: a complete self-contained index.html saved in a requested or generated artifact directory, with inline dependencies, accessible structure, loopback serving, and exact-file verification. It triggers when a user asks to create, build, turn content or data into, save, revise, or update a “durable HTML artifact,” “one-file dashboard,” “single-page local artifact,” or named HTML artifact, or explicitly says “use /html” or “activate the HTML skill.” It does not trigger for integrating HTML into React or Next.js routing, reviewing or explaining HTML or accessibility, browser-based QA of an existing page, converting Figma designs into reusable components, or merely serving an existing dist directory.4---56# HTML78## Recipe9101. Resolve `ARTIFACT_DIR` inside the provided HTML state root, or expanded `~/.html` otherwise: revise a named artifact in place, or create a three-random-word lowercase slug for new work.112. Write only `ARTIFACT_DIR/index.html` as a complete self-contained, source-faithful, responsive interface with semantic structure and accessible controls unless the user names another entry file.123. Start a long-lived static server for `ARTIFACT_DIR` on `127.0.0.1` using a free non-common port.134. Verify the exact `http://127.0.0.1:<PORT>/index.html` with files inside the task run, retrying from step 3 on another port if binding or fetching fails, and keep the verified server alive through handoff.145. Reply with exactly `HTML file: <absolute entry-file path>` then `HTML: [Open locally](<verified /index.html URL>)`; if serving cannot be verified, omit the link and give the path plus one concise reason.1516## Details1718- Run `python3 -m http.server "$PORT" --bind 127.0.0.1 --directory "$ARTIFACT_DIR"` as the foreground command of a long-running tool session; do not background or detach it from a shell that will exit.
Run npx skillmds@latest add eliasstravik/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.
The html skill owns creating and revising durable, standalone HTML artifacts: a complete self-contained index.html saved in a requested or generated artifact directory, with inline dependencies, accessible structure, loopback serving, and exact-file verification. It triggers when a user asks to create, build, turn content or data into, save, revise, or update a “durable HTML artifact,” “one-file dashboard,” “single-page local artifact,” or named HTML artifact, or explicitly says “use /html” or “activate the HTML skill.” It does not trigger for integrating HTML into React or Next.js routing, reviewing or explaining HTML or accessibility, browser-based QA of an existing page, converting Figma designs into reusable components, or merely serving an existing dist directory. It is listed under Design & Media on SkillMD.
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.
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.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
eliasstravik (@eliasstravik) published this skill. Their other Agent Skills are listed on their SkillMD profile.
eliasstravik