html-coder
GitHub专注专业HTML开发的技能，涵盖语义化标记、无障碍访问、HTML5特性及标准合规内容。支持创建文档、构建表单、响应式设计及多媒体实现，并提供最佳实践与API使用指导。
Trigger Scenarios
Install
npx skills add TokenRhythm/opensquilla --skill html-coder -g -y
SKILL.md
Frontmatter
{
"name": "html-coder",
"homepage": "https:\/\/clawhub.ai\/jhauga\/html-coder",
"invocation": "direct",
"provenance": {
"origin": "clawhub-mit0",
"license": "MIT-0",
"upstream_url": "https:\/\/clawhub.ai\/jhauga\/html-coder",
"maintained_by": "OpenSquilla"
},
"visibility": "public",
"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.",
"collaborators": [
"make-skill-template",
"finalize-agent-prompt"
],
"description_zh": "用于构建网页、表单和交互内容的专业HTML开发技能。当创建HTML文档、组织网页内容、实现语义化标记、添加表单和媒体、使用HTML5 API，或需要HTML模板、最佳实践和无障碍指引时使用。支持现代HTML5标准和响应式设计模式。"
}
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
open_workspace_previewwith the entry file and the complete dedicated root:
{
"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:
references/add-css-style.md- Add CSS vialinktag, inline, or embedded in htmlreferences/add-javascript.md- Add JavaScript viascript src="link.js"tag, inlinescript, 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
- 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
Version History
-
d27ba0e
Current 2026-09-27 17:06
移除了MetaSkill和Coding Mode相关的安全档案退休逻辑，更新了保留的合同测试，并清理了Dream Hook测试中的退休提案措辞。
-
7e0b08e
2026-09-22 06:06
将页面交付工具从 publish_artifact 更改为 open_workspace_preview，以支持本地优先的HTML预览功能。
-
f662be3
2026-07-31 11:48
新增OpenSquilla网页交付流程，支持通过publish_artifact发布可运行的独立项目目录；优化cron和MetaSkill工作流，修复相关回归问题。
- 7f72a32 2026-07-05 18:38
