HTML Coder

核心用法

HTML Coder 是一项专注于专业网页开发的技能，涵盖从基础文档结构到复杂交互实现的完整技术栈。核心能力包括：

语义化标记：使用 <article>、<nav>、<header>、<section> 等语义元素替代无语义的 div 堆砌，提升代码可读性与 SEO 效果。

表单开发：支持 HTML5 全类型输入控件、内置验证属性（required、pattern、type="email"）、字段集分组及无障碍标签关联。

多媒体与图形：响应式图片方案（<picture>、srcset、loading="lazy"）、Canvas 2D 绘图、SVG 矢量图形集成。

HTML5 API 应用：Web Storage 本地存储、Geolocation 地理定位、Drag & Drop 拖放、Web Workers 后台线程。

无障碍访问：ARIA 属性补充、屏幕阅读器兼容、键盘导航支持、WCAG 合规性检查。

显著优点

• 标准权威性：基于 WHATWG HTML Living Standard 和 W3C WCAG 规范，确保代码长期兼容
• 性能优化内置：原生懒加载、响应式图片、验证优先于 JavaScript 的策略减少运行时开销
• 协作生态：与 make-skill-template 和 finalize-agent-prompt 技能联动，支持模板生成和提示优化
• 验证工具链：整合 W3C Validator、Lighthouse、Can I Use 等权威检测资源

潜在局限

• 纯标记定位：不涵盖 CSS 样式深度实现或 JavaScript 复杂交互逻辑，需配合其他技能完成完整前端开发
• 浏览器兼容性：部分 HTML5 API（如 Web Workers、Geolocation）需关注旧版浏览器降级方案
• 动态内容限制：静态模板为主，服务器端渲染或单页应用架构需额外技术栈支持

适合人群

前端开发初学者建立标准化编码习惯、全栈开发者快速生成语义化页面原型、无障碍专员进行 WCAG 合规性审查、内容编辑者构建结构化文档模板。

常规风险

• 无障碍遗漏：缺乏 alt 文本、错误标题层级或缺失标签关联可能导致屏幕阅读器用户体验受损
• 验证失效：手写标记易产生未闭合标签或嵌套错误，需定期使用 W3C Validator 检测
• 安全风险：表单提交未配合服务端验证时，客户端 HTML5 验证可被绕过，不可作为唯一安全防线

核心用法

HTML Coder 是一款面向专业网页开发的纯文档型技能，专注于帮助开发者构建符合现代标准的 HTML 文档。其核心功能包括：

• 语义化文档结构：指导使用 <article>、<nav>、<header>、<section>、<footer> 等语义元素替代无意义的 div 堆砌，提升代码可读性和 SEO 表现
• 无障碍表单构建：提供完整的表单模式，包括字段集分组、标签关联、HTML5 原生验证属性（required、pattern、type="email" 等）
• 响应式多媒体：支持 <picture> 元素、srcset 属性、loading="lazy" 延迟加载等现代图片处理技术
• HTML5 API 参考：涵盖 Web Storage、Geolocation、Canvas、SVG、Drag & Drop、Web Workers 等 API 的使用指导

该技能通过四个核心参考文档提供支持：reference.md（完整元素属性参考）、essentials.md（语义标记与响应式技术）、quickstart.md（快速参考手册）、standards.md（HTML5 规范与标准）。

显著优点

1. 零安全风险：纯 Markdown 文档结构，无可执行代码、无脚本文件、无动态执行能力，从根本上杜绝代码注入和恶意行为
2. 权威标准依托：所有技术参考均链接至 WHATWG HTML Living Standard、W3C WCAG、MDN Web Docs 等业界顶级文档源
3. 无障碍优先设计：内置 ARIA 规范、屏幕阅读器支持、键盘导航、色彩对比度等 WCAG 合规指导
4. 现代开发模式：涵盖 HTML5 最新特性，支持响应式设计、性能优化（懒加载、DOM 深度最小化）
5. 协作生态：与 make-skill-template 和 finalize-agent-prompt 技能联动，支持技能模板创建和提示词优化

潜在缺点与局限性

1. 无实时验证能力：作为纯文档技能，无法直接执行代码或提供实时 HTML 验证反馈，开发者需手动使用 W3C Validator 等外部工具
2. 依赖开发者主动性：需要用户主动查阅参考文档，无法自动检测或修复代码中的语义错误或可访问性问题
3. 技术栈局限：仅覆盖 HTML 层面，不涉及 CSS、JavaScript 等配套技术的深度整合
4. 版本滞后风险：HTML 标准持续演进（WHATWG 采用 Living Standard 模式），文档内容可能存在更新延迟

适合的目标群体

• 前端开发初学者：系统学习语义化 HTML 和 Web 标准
• 全栈开发者：快速查阅 HTML5 API 和最佳实践
• 无障碍工程师：获取 ARIA 和 WCAG 合规指导
• 内容创作者：构建结构化、SEO 友好的网页内容
• 教育培训机构：作为 HTML 课程的辅助参考材料

使用风险

1. 性能风险：无。纯文档无运行时开销。
2. 依赖风险：无。零第三方依赖，无供应链攻击面。
3. 网络风险：极低。仅包含 3 个外部文档链接（MDN、WHATWG、W3C），均为 TLS 加密的权威来源。
4. 隐私风险：无。不收集用户数据，无敏感信息访问。
5. 误报注意：安全扫描曾将 "Expert" 关键词误标为 DAN 模式，已确认为正常产品描述。