HTML 工具箱

Name: HTML 工具箱
Author: 天轰穿

A free HTML tool for personal developers to detect and fix common issues in layout, forms, accessibility, link security, and basic SEO metadata.

天轰穿

@thcjp

What This Skill Does

A free HTML auditing tool for personal developers that detects and fixes common issues in layout, forms, accessibility, link security, and basic SEO metadata. It provides a structured checklist and native element recommendations for single-page self-inspection.

Replaces manual code review for common HTML pitfalls by offering a zero-cost, structured checklist covering layout, forms, accessibility, link security, and SEO metadata.

When to Use It

Audit a single-page HTML file for layout shifting caused by missing image dimensions
Fix form accessibility issues like missing autocomplete, fieldset, or inputmode attributes
Add noopener and noreferrer to external links opened with target="_blank"
Check and implement basic SEO meta tags including canonical, og:image, and twitter:card
Replace custom JavaScript modals and accordions with native dialog and details elements
Verify skip navigation links and aria-hidden usage for basic accessibility compliance

Install

$ openclaw skills install @thcjp/html-toolkit-free

HTML 工具箱（免费版）

概述

本工具帮助个人开发者规避 HTML 常见错误：布局抖动、表单陷阱、可访问性缺口、链接安全与 SEO 元数据。提供原生元素优先建议，适合单页自检.

核心能力

能力	说明	免费版范围
布局抖动	img 尺寸与 aspect-ratio	基础
表单陷阱	autocomplete、fieldset、inputmode	常见项
可访问性	跳转链接、scope、aria-hidden	基础
链接安全	noopener、nofollow ugc	全覆盖
SEO 元数据	canonical、og、twitter	基础
技术实现要点：核心能力基于`input_params`参数与`output_format`配置实现,支持创建/查询/修改/删除等操作模式,通过`config_options`进行运行时配置.

核心功能执行

用input_params参数进行配置.

处理: 解析核心功能执行的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回核心功能执行的响应数据,包含状态码、结果和日志.

执行此能力时使用input_params参数,支持创建/查询/导出操作

参数配置与调用

用config_options参数进行配置.

处理: 解析参数配置与调用的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回参数配置与调用的响应数据,包含状态码、结果和日志.

执行此能力时使用config_options参数,支持修改/重置/导入操作

结果处理与输出

用output_format参数进行配置.

处理: 解析结果处理与输出的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回结果处理与输出的响应数据,包含状态码、结果和日志.

执行此能力时使用output_format参数,支持导出/保存/转换操作 能力覆盖范围：本skill的核心能力覆盖以下场景关键词：面向个人开发者的、HTML、常见坑规避工具、覆盖可访问性与表、常见错误规避工具、布局抖动预防与表、单陷阱规避、可访问性缺口、链接安全与、原生元素优先、dialog、details等。这些关键词对应description中声明的使用场景,均已在上述能力点中提供对应的操作支持.

使用场景

场景一：表单可访问性

<form>
  <fieldset>
    <legend>通知偏好</legend>
    <label><input type="radio" name="notify" value="email"> 邮件</label>
    <label><input type="radio" name="notify" value="sms"> 短信</label>
  </fieldset>
  <input type="email" autocomplete="email" inputmode="email" enterkeyhint="send">
  <button type="submit">提交</button>
</form>

场景二：链接安全

<!-- 外链必加 noopener noreferrer -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">外链</a>
<!-- 用户生成内容加 nofollow ugc -->
<a href="https://user-site.com" rel="nofollow ugc">用户链接</a>

场景三：原生组件优先

<!-- 模态用 dialog：内置焦点陷阱与 ESC -->
<dialog open>
  <p>内容</p>
  <form method="dialog"><button>关闭</button></form>
</dialog>
# ...
<!-- 手风琴用 details：无需 JS，默认可访问 -->
<details>
  <summary>常见问题</summary>
  <p>答案内容</p>
</details>

不适用场景

以下场景HTML 工具箱不适合处理：

垃圾信息群发
通信协议逆向
电话语音交互

触发条件

需要消息发送、通知推送、邮件短信、通信集成时使用。不适用于非本工具能力范围的需求.

快速开始

对照清单逐项检查页面 HTML.
修复表单可访问性与链接安全.
用原生元素替代 JS 组件.
补全 SEO 元数据. 响应解析: 完成完成后,查看输出响应确认任务状态。成功时输出包含解析摘要和响应数据;失败时根据错误信息排查问题,查阅错误解析章节获取恢复步骤.

示例

<head>
  <link rel="canonical" href="https://example.com/page">
  <meta property="og:image" content="https://example.com/og.png">
  <meta name="twitter:card" content="summary_large_image">
</head>
<body>
  <a href="#main" class="skip">跳到主内容</a>
  <nav><!-- 导航 --></nav>
  <main id="main"><!-- 主内容 --></main>
</body>

优秀实践

img 必加尺寸：即使有 CSS 尺寸，width/height 让浏览器提前预留空间.
button 显式 type：默认 type="submit" 会触发表单提交，非提交按钮写 type="button".
外链必加 rel：target="_blank" 配 rel="noopener noreferrer".
表格加 scope：<th scope="col"> 让屏幕阅读器关联表头.
原生优先：能用 <dialog>/<details> 就别写 JS.

常见问题

Q1：为什么图片加载会跳位？ A：没设 width/height，浏览器不知预留多少空间。加上尺寸或 aspect-ratio. Q2：button 点击触发了提交？ A：默认 type="submit"，非提交按钮要写 type="button". Q3：og:image 不显示？ A：og 图需要绝对 URL，相对路径在社交平台会失败. Q4：免费版支持全站审计吗？ A：不支持。全站批量审计与 WCAG 合规为专业版能力. Q5：aria-hidden 能用在按钮上吗？ A：不能。aria-hidden 用于装饰图标，交互元素用了会让屏幕阅读器忽略它.

进阶用法

表单可访问性完整模式

<form>
  <!-- label 显式关联 -->
  <label for="email">邮箱</label>
  <input id="email" type="email" autocomplete="email"
         required aria-describedby="email-hint">
  <p id="email-hint">用于接收通知，不会公开</p>
# ...
  <!-- fieldset 分组单选 -->
  <fieldset>
    <legend>通知方式</legend>
    <label><input type="radio" name="notify" value="email"> 邮件</label>
    <label><input type="radio" name="notify" value="sms"> 短信</label>
  </fieldset>
# ...
  <button type="submit">提交</button>
</form>

图片布局抖动预防

<!-- 方式一：显式尺寸 -->
<img src="hero.jpg" width="1200" height="630" alt="产品展示">
# ...
<!-- 方式二：aspect-ratio -->
<img src="hero.jpg" alt="产品展示" style="aspect-ratio: 1200/630; width: 100%;">

原生组件替代 JS

需求	原生方案	优势
模态框	`<dialog>`	内置焦点陷阱、ESC 关闭
手风琴	`<details>`	无需 JS、默认可访问
进度条	`<progress>`	语义化、可访问
下拉菜单	`<select>`	原生键盘支持
标签页	`:target` + 锚点	纯 CSS 实现

语义化自查

[ ] 页面只有一个 <h1>
[ ] 标题层级不跳级（h1→h2→h3）
[ ] 导航用 <nav>，主内容用 <main>
[ ] 图片有 alt（装饰图 alt=""）
[ ] 表单 label 关联 input
[ ] 表头用 <th scope>
[ ] 外链加 rel="noopener noreferrer"

SEO 元数据清单

<head>
  <title>页面标题 - 品牌</title>
  <meta name="description" content="150 字内页面摘要">
  <meta property="og:title" content="分享标题">
  <meta name="twitter:card" content="summary_large_image">
</head>

依赖说明

运行环境

Agent 平台: 支持SKILL.md的任意AI Agent（Claude Code / Cursor / Codex / Gemini CLI 等）
操作系统: Windows / macOS / Linux
浏览器: 任意现代浏览器

依赖详情

依赖项	类型	是否必需	获取方式
LLM API	API	必需	由 Agent 内置 LLM 提供

API Key 配置

本工具为纯 Markdown 指令，无需额外 API Key

可用性分类

分类: MD+EXEC（Markdown 指令 + 命令行预览）
说明: 通过自然语言指令驱动 Agent 修复 HTML 常见问题

错误处理

错误场景	原因	处理方式
配置错误	参数缺失或格式错误	检查依赖说明中的配置要求
运行时错误	运行环境不满足	确认运行环境符合依赖说明
网络错误	连接超时或不可达	执行ping命令测试网络连通性,检查防火墙和代理设置连接后执行ping命令测试网络连通性,检查防火墙和代理设置连接后重新执行命令，参考国内替代方案

已知限制

需LLM支持,无LLM环境不可用
复杂业务场景建议结合人工经验判断
执行效率受模型能力与网络环境影响
当前为免费版本,如需完整功能请升级到付费版获取全部能力

输出格式

{
  "success": true,
  "data": {
    "result": "HTML 工具箱处理结果",
    "execution_time": "0.5s",
    "metadata": {
      "version": "1.0",
      "processor": "htmlkit"
    }
  },
  "execution_log": ["解析输入参数", "执行核心处理", "格式化输出结果"],
  "error": null
}

Top skills in this category

API Gateway

@byungkyu

Call third-party APIs through the Maton gateway, which injects the credential for an app the user has already connected. Use this skill when the user names a connected app and a concrete action in it - read a mailbox, query a CRM, file an issue, update a spreadsheet, run a query through a connected

39486k

Marketing Mode

@thesethrose

Marketing Mode combines 23 comprehensive marketing skills covering strategy, psychology, content, SEO, conversion optimization, and paid growth. Use when users need marketing strategy, copywriting, SEO help, conversion optimization, paid advertising, or any marketing tactic.

16927k

Blogwatcher

@steipete

Monitor blogs and RSS/Atom feeds for updates using the blogwatcher CLI.

7544k

Marketing Skills

@jchopard69

Access 23 marketing modules offering checklists, frameworks, and ready-to-use deliverables for CRO, SEO, copywriting, analytics, launches, ads, and social me...

11519k

diagram-generator

@matthewyin

Generate and edit diagrams with the mcp-diagram-generator MCP server. Use this skill for new diagrams, existing .drawio/.mmd/.excalidraw edits, network topology, architecture, flowchart, swimlane, sequence, class, ER, and Excalidraw whiteboard work. Always use this skill when the user asks to draw,

4731k