# HTML Coder

Expert HTML development skill for building web pages, forms, and interactive content.

- Repository: https://github.com/TokenRhythm/opensquilla (7104 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add TokenRhythm/opensquilla --skill html-coder -g -a claude-code -y`
Codex: `npx skills add TokenRhythm/opensquilla --skill html-coder -g -a codex -y`
Cursor: `npx skills add TokenRhythm/opensquilla --skill html-coder -g -a cursor -y`
Gemini CLI: `npx skills add TokenRhythm/opensquilla --skill html-coder -g -a gemini-cli -y`

## 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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# HTML Coder Skill

Expert skill for professional HTML development with focus on semantic markup, accessibility, HTML5 features, and standards-compliant web content.

## When to Use This Skill

- Creating HTML documents with semantic structure
- Building accessible forms with HTML5 validation
- Implementing responsive markup and multimedia
- Using HTML5 APIs (Canvas, SVG, Storage, Geolocation)
- Troubleshooting validation or accessibility issues

## OpenSquilla Webpage Delivery

For a new runnable webpage when workspace file-authoring tools are available:

1. Create a filesystem-safe, dedicated project subdirectory such as
   `webpage-<topic-slug>/`; never place a generated site directly in the
   workspace root.
2. Keep `index.html`, local CSS/JavaScript, and every local asset inside that
   project root, using browser-relative references.
3. Validate the finished project, then call `open_workspace_preview` with the
   entry file and the complete dedicated root:

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

Do not bundle the entire workspace. When a caller explicitly requests
source-only output, forbids tool calls, or supplies its own deterministic
writer, follow that narrower caller contract
instead. When file authoring or `open_workspace_preview` is unavailable, return
only the requested guidance or source and do not claim that a runnable project
was opened.

## Core Capabilities

- **Semantic HTML**: Document structure, content sections, accessibility-first markup
- **Forms**: All input types, validation attributes, fieldsets, labels
- **Media**: Responsive images, audio/video, Canvas, SVG
- **HTML5 APIs**: Web Storage, Geolocation, Drag & Drop, Web Workers
- **Accessibility**: ARIA, screen reader support, WCAG compliance

## Essential References

Core documentation for HTML experts:

The rest: https://github.com/TokenRhythm/opensquilla/blob/HEAD/src/opensquilla/skills/bundled/html-coder/SKILL.md