html-coder

Expert HTML development skill for building web pages, forms, and interactive content. Use when creating HTML documents, structuring web content, imp…

执行命令无严重或高危命中TokenRhythm/opensquilla

它会碰到什么

扫了多少10 个文本文件，142 KB

它会碰到什么执行命令

命中总数2 处

命中统计严重 0 · 高 0 · 中 1 · 低 0

这一栏是扫描器报的事实，不是结论。命中多不等于有毒（安全工具、规则库、示例脚本本来就会包含危险写法），命中少也不等于干净。它和你手上的凭据、文件、网络有什么关系，需要你自己看。

技能内容

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_preview with 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—as AwesomeWebpageMetaSkill does—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](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

<!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

想直接用这个技能？

本站把开放许可（MIT / Apache 等）的技能按仓库打包整理到网盘，点一下转存到你自己的网盘，不用一个个从 GitHub 拉。许可未声明的技能只给原始仓库链接，不打包。

去原始仓库

它属于哪个仓库

仓库TokenRhythm/opensquilla

星标★ 7,018

本站分层T1

该仓技能数68

原文件路径src/opensquilla/skills/bundled/html-coder/SKILL.md

同一个仓库里的其他技能

看这个仓库的全部 68 个技能