关于 web-design-guidelines
用于按界面规范检查 Web 文件的技能，覆盖无障碍、交互、内容、性能等方面，并以简洁的文件与行号格式报告问题。
主要功能
- 01无障碍与语义 HTML 检查
- 02键盘操作与焦点审查
- 03表单、动画和排版检查
- 04导航、本地化与主题审查
- 05简洁的文件:行号问题报告
适用场景
- 01发布 Web 界面前审查文件
- 02查找无障碍和键盘操作问题
- 03检查页面布局与内容边界情况
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/web-design-guidelines确认已加载。
附带文件references/guideline.md
详细介绍
Web 界面指南
检查文件是否符合 Web 界面指南。
工作原理
- 从
#[[file:references/guideline.md]]读取指南 - 读取指定的文件（或提示用户提供文件／模式）
- 对照指南中的所有规则进行检查
- 以简洁的
file:line格式输出检查结果
指南参考
所有规则和输出格式说明均在：
#[[file:references/guideline.md]]
指南涵盖：
- 无障碍（ARIA、语义化 HTML、键盘导航）
- 焦点状态和键盘交互
- 表单（自动补全、验证、标签）
- 动画（减少动态效果、性能）
- 排版（正确的字符、数字格式）
- 内容处理（溢出、空状态）
- 图片（尺寸、延迟加载）
- 性能（虚拟化、DOM 读取）
- 导航和状态（URL 同步、深层链接）
- 触摸和交互（点击延迟、安全区域）
- 暗黑模式和主题
- 区域设置和国际化
- 水合安全性
- 需要标记的常见反模式
用法
用户提供文件或模式参数时：
- 从
references/guideline.md读取指南 - 读取指定的文件
- 应用指南中的所有规则
- 按指南指定的格式输出检查结果
如果未指定文件，请询问用户要检查哪些文件。
输出格式
遵循指南中的格式：
- 按文件分组列出检查结果
- 使用
file:line格式（可在 VS Code 中点击） - 简洁明了，尽量减少无关内容
- 指出问题及其位置
- 除非修复方式不明显，否则不作解释
评论
支持 Markdown