HTML Coder

What it does

When your agent uses it

• Building a new web page with semantic HTML
• Creating accessible forms with HTML5 validation
• Adding responsive images, audio, video, Canvas or SVG to a page
• Fixing HTML validation or accessibility problems

Example prompts

• “Build a landing page for a bakery as a standalone HTML project and open a preview.”
• “Add an accessible signup form with built-in HTML5 validation.”
• “Fix the accessibility issues in this page's markup.”

Requirements

• OpenSquilla file tools and open_workspace_preview for the webpage delivery steps

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

1. 1Create a filesystem-safe, dedicated project subdirectory such as
2. 2Keep index.html, local CSS/JavaScript, and every local asset inside that
3. 3Validate the finished project, then call open_workspace_preview with the

What it can do on your machine

Read from SKILL.md and the folder at commit 4494195. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  No scripts in the folder and no shell commands in SKILL.md (its code samples are html and json).

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  Links to these hosts (documentation or services it may open):

  • html.spec.whatwg.org
  • w3.org
  • developer.mozilla.org

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

HTML Coder loads about 1.4k tokens when it runs, and up to ~36k if it reads all its reference files. Until then it costs about 92 tokens; SKILL.md has 387 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~92

When it runs · the whole SKILL.md, loaded when a task matches

~1.4k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~36k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from TokenRhythm/opensquilla at commit 4494195, republished under its Apache-2.0 licence (© TokenRhythm). 387 words, ~1,390 tokens.

name

html-coder

description

Expert HTML development skill for building web pages, forms, and interactive content. Use when creating HTML documents, structuring web content, implementing semantic markup, adding forms and media, working with HTML5 APIs, or needing HTML templates, best practices, and accessibility guidance. Supports modern HTML5 standards and responsive design patterns.

visibility

public

invocation

direct

description_zh

用于构建网页、表单和交互内容的专业HTML开发技能。当创建HTML文档、组织网页内容、实现语义化标记、添加表单和媒体、使用HTML5 API，或需要HTML模板、最佳实践和无障碍指引时使用。支持现代HTML5标准和响应式设计模式。

homepage

https://clawhub.ai/jhauga/html-coder

collaborators

make-skill-template, finalize-agent-prompt

provenance.origin

clawhub-mit0

provenance.license

MIT-0

provenance.upstream_url

https://clawhub.ai/jhauga/html-coder

provenance.maintained_by

OpenSquilla

{
  "path": "webpage-<topic-slug>/index.html",
  "bundle": "directory",
  "bundle_root": "webpage-<topic-slug>"
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>
<body>
  <header><nav><!-- Navigation --></nav></header>
  <main><article><!-- Content --></article></main>
  <aside><!-- Sidebar --></aside>
  <footer><!-- Footer --></footer>
</body>
</html>

<form method="post" action="/submit">
  <fieldset>
    <legend>Contact</legend>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required
           pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
    <button type="submit">Send</button>
  </fieldset>
</form>

<picture>
  <source media="(min-width: 1200px)" srcset="large.webp">
  <source media="(min-width: 768px)" srcset="medium.webp">
  <img src="small.jpg" alt="Description" loading="lazy">
</picture>

© TokenRhythm, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 9 other files (references) in src/opensquilla/skills/bundled/html-coder of TokenRhythm/opensquilla.

• SKILL.md
• _meta.json
• references/add-css-style.md
• references/add-javascript.md
• references/attributes.md
• references/essentials.md
• references/global-attributes.md
• references/glossary.md
• references/standards.md
• skill-card.md

Open the folder on GitHubat commit 4494195