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:
- Create a filesystem-safe, dedicated project subdirectory such as
webpage-<topic-slug>/; never place a generated site directly in the
workspace root.
- Keep
index.html, local CSS/JavaScript, and every local asset inside that
project root, using browser-relative references.
- Validate the finished project, then call
publish_artifact exactly once
with the entry file and the complete dedicated root:
{
"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 - Add CSS via link tag, inline, or embedded in htmlreferences/add-javascript.md - Add JavaScript via script src="link.js" tag, inline script, or embedded in htmlreferences/attributes.md - HTML attribute essentialsreferences/essentials.md - Semantic markup, validation, responsive techniquesreferences/global-attributes.md - Complete global attribute informationreferences/glossary.md - Complete HTML element and attribute referencereferences/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
<!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
<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
<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
1---2name: html-coder3description: 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.4---5
6# HTML Coder Skill
7
8Expert skill for professional HTML development with focus on semantic markup, accessibility, HTML5 features, and standards-compliant web content.
9
10## When to Use This Skill
11
12- Creating HTML documents with semantic structure
13- Building accessible forms with HTML5 validation
14- Implementing responsive markup and multimedia
15- Using HTML5 APIs (Canvas, SVG, Storage, Geolocation)
16- Troubleshooting validation or accessibility issues
17
18## OpenSquilla Webpage Delivery
19
20For a new runnable webpage when workspace file-authoring tools are available:
21
221. Create a filesystem-safe, dedicated project subdirectory such as
23 `webpage-<topic-slug>/`; never place a generated site directly in the
24 workspace root.
252. Keep `index.html`, local CSS/JavaScript, and every local asset inside that
26 project root, using browser-relative references.
273. Validate the finished project, then call `publish_artifact` exactly once
28 with the entry file and the complete dedicated root:
29
30```json
31{
32 "path": "webpage-<topic-slug>/index.html",
33 "mime": "text/html",
34 "bundle": "directory",
35 "bundle_root": "webpage-<topic-slug>"
36}
37```
38
39Do not bundle the entire workspace. When a caller explicitly requests
40source-only output, forbids tool calls, or supplies its own deterministic
41writer—as AwesomeWebpageMetaSkill does—follow that narrower caller contract
42instead. When file authoring or `publish_artifact` is unavailable, return only
43the requested guidance or source and do not claim that a runnable project was
44published.
45
46## Core Capabilities
47
48- **Semantic HTML**: Document structure, content sections, accessibility-first markup
49- **Forms**: All input types, validation attributes, fieldsets, labels
50- **Media**: Responsive images, audio/video, Canvas, SVG
51- **HTML5 APIs**: Web Storage, Geolocation, Drag & Drop, Web Workers
52- **Accessibility**: ARIA, screen reader support, WCAG compliance
53
54## Essential References
55
56Core documentation for HTML experts:
57
58- [`references/add-css-style.md`](references/add-css-style.md) - Add CSS via `link` tag, inline, or embedded in html
59- [`references/add-javascript.md`](references/add-javascript.md) - Add JavaScript via `script src="link.js"` tag, inline `script`, or embedded in html
60- [`references/attributes.md`](references/attributes.md) - HTML attribute essentials
61- [`references/essentials.md`](references/essentials.md) - Semantic markup, validation, responsive techniques
62- [`references/global-attributes.md`](references/global-attributes.md) - Complete global attribute information
63- [`references/glossary.md`](references/glossary.md) - Complete HTML element and attribute reference
64- [`references/standards.md`](references/standards.md) - HTML5 specifications and standards
65
66## Best Practices
67
68**Semantic HTML** - Use elements that convey meaning: `<article>`, `<nav>`, `<header>`, `<section>`, `<footer>`, not div soup.
69
70**Accessibility First** - Proper heading hierarchy, alt text, labels with inputs, keyboard navigation, ARIA when needed.
71
72**HTML5 Validation** - Leverage built-in validation (`required`, `pattern`, `type="email"`) before JavaScript.
73
74**Responsive Images** - Use `<picture>`, srcset, and `loading="lazy"` for performance.
75
76**Performance** - Minimize DOM depth, optimize images, defer non-critical scripts, use semantic elements.
77
78## Quick Patterns
79
80### Semantic Page Structure
81```html
82<!DOCTYPE html>
83<html lang="en">
84<head>
85 <meta charset="UTF-8">
86 <meta name="viewport" content="width=device-width, initial-scale=1.0">
87 <title>Page Title</title>
88</head>
89<body>
90 <header><nav><!-- Navigation --></nav></header>
91 <main><article><!-- Content --></article></main>
92 <aside><!-- Sidebar --></aside>
93 <footer><!-- Footer --></footer>
94</body>
95</html>
96```
97
98### Accessible Form
99```html
100<form method="post" action="/submit">
101 <fieldset>
102 <legend>Contact</legend>
103 <label for="email">Email:</label>
104 <input type="email" id="email" name="email" required
105 pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
106 <button type="submit">Send</button>
107 </fieldset>
108</form>
109```
110
111### Responsive Image
112```html
113<picture>
114 <source media="(min-width: 1200px)" srcset="large.webp">
115 <source media="(min-width: 768px)" srcset="medium.webp">
116 <img src="small.jpg" alt="Description" loading="lazy">
117</picture>
118```
119
120## Troubleshooting
121
122- **Validation**: W3C Validator (validator.w3.org), check unclosed tags, verify nesting
123- **Accessibility**: Lighthouse audit, screen reader testing, keyboard nav, color contrast
124- **Compatibility**: Can I Use (caniuse.com), feature detection, provide fallbacks
125
126## Key Standards
127
128- **WHATWG HTML Living Standard**: https://html.spec.whatwg.org/
129- **WCAG Accessibility**: https://www.w3.org/WAI/WCAG21/quickref/
130- **MDN Web Docs**: https://developer.mozilla.org/en-US/docs/Web/HTML
131
132---
gabrielmoreira