html-coder
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.
git clone --depth 1 https://github.com/opensquilla/opensquilla /tmp/html-coder && cp -r /tmp/html-coder/src/opensquilla/skills/bundled/html-coder ~/.claude/skills/html-coderSKILL.md
# 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 `publish_artifact` exactly once
with the entry file and the complete dedicated root:
```json
{
"path": "webpage-<topic-slug>/index.html",
"mime": "text/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—as AwesomeWebpageMetaSkill does—follow that narrower caller contract
instead. When file authoring or `publish_artifact` is unavailable, return only
the requested guidance or source and do not claim that a runnable project was
published.
## 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:
- [`references/add-css-style.md`](references/add-css-style.md) - Add CSS via `link` tag, inline, or embedded in html
- [`references/add-javascript.md`](references/add-javascript.md) - Add JavaScript via `script src="link.js"` tag, inline `script`, or embedded in html
- [`references/attributes.md`](references/attributes.md) - HTML attribute essentials
- [`references/essentials.md`](references/essentials.md) - Semantic markup, validation, responsive techniques
- [`references/global-attributes.md`](references/global-attributes.md) - Complete global attribute information
- [`references/glossary.md`](references/glossary.md) - Complete HTML element and attribute reference
- [`references/standards.md`](references/standards.md) - HTML5 specifications and standards
## Best Practices
**Semantic HTML** - Use elements that convey meaning: `<article>`, `<nav>`, `<header>`, `<section>`, `<footer>`, not div soup.
**Accessibility First** - Proper heading hierarchy, alt text, labels with inputs, keyboard navigation, ARIA when needed.
**HTML5 Validation** - Leverage built-in validation (`required`, `pattern`, `type="email"`) before JavaScript.
**Responsive Images** - Use `<picture>`, srcset, and `loading="lazy"` for performance.
**Performance** - Minimize DOM depth, optimize images, defer non-critical scripts, use semantic elements.
## Quick Patterns
### Semantic Page Structure
```html
<!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>
```
### Accessible Form
```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>
```
### Responsive Image
```html
<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>
```
## Troubleshooting
- **Validation**: W3C Validator (validator.w3.org), check unclosed tags, verify nesting
- **Accessibility**: Lighthouse audit, screen reader testing, keyboard nav, color contrast
- **Compatibility**: Can I Use (caniuse.com), feature detection, provide fallbacks
## Key Standards
- **WHATWG HTML Living Standard**: https://html.spec.whatwg.org/
- **WCAG Accessibility**: https://www.w3.org/WAI/WCAG21/quickref/
- **MDN Web Docs**: https://developer.mozilla.org/en-US/docs/Web/HTML
---Submit audio or video for multilingual dubbing, poll status, and download dubbed audio. Use when the user asks for dubbing, 多语言配音, 视频翻译配音, 译制片, or wants a source clip dubbed into another language.
Generate a structured short-video shooting script from a topic. Emits a strict, machine-parseable shot list (3 shots by default) with image prompt + video prompt + voiceover + on-screen text per shot. Trigger when the user asks for a video script, 分镜, 短视频文案, AI视频, 短剧脚本, or wants visual prompts ready for image/video generation.
Use when the user asks to schedule recurring tasks, one-off reminders, timers, or cron-style jobs through the OpenSquilla cron tool.
Multi-round research with explicit methodology, evidence tracking, and citation-tagged synthesis. Trigger on 'deep dive', 'research report', 'literature review', 'investigate X across sources', 'multi-round investigation'. Distinct from the `summarize` skill, which is a single-pass condensation; this skill maintains a state file across iterations, tracks coverage, and produces a long-form report with per-claim citations. Three execution stages: plan (scope into sub-questions), iterate (record evidence per round), compile (synthesize report). The skill itself does not fetch the web — it tells the host agent which fetches to perform via OpenSquilla's existing web tools, and records what comes back.
Read, edit, or create Microsoft Word `.docx` files. Trigger this skill whenever the user mentions a Word document, .docx file, contract, report, brief, memo, or asks to extract text, modify an existing doc, generate one from a brief, or audit tracked changes. Three execution paths: text-and-structure extraction, in-place edit-by-run (preserves styles), and create-from-scratch with python-docx. Falls back to OOXML unzip-and-patch for layout work python-docx cannot reach.
Capture the current git diff (staged, working-tree, or staged file list) as text. Direct shell call for workflows that need repository diffs without an LLM agent loop.
GitHub operations via `gh` CLI: issues, PRs, CI runs, code review, API queries. Use when: (1) checking PR status or CI, (2) creating/commenting on issues, (3) listing/filtering PRs or issues, (4) viewing run logs. NOT for: complex web UI interactions requiring manual browser flows (use browser tooling when available), bulk operations across many repos (script with gh api), or when gh auth is not configured.
Query the per-turn DecisionEntry log for skill co-occurrence patterns, meta-skill usage stats, and the router fixture corpus. Returns a JSON summary suitable for downstream LLM consumption. Used by meta-skill-creator's harvest step but also useful standalone for 'which skills did I use most this week?'