القائمة
当用户需要审查 UI 代码、进行可访问性检查、设计审计或对照最佳实践检查网站时使用。此 Skill 对照 Web Interface Guidelines 和 WCAG 2.2 标准检查合规性，输出结构化的审查结果。
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/boshi-xixixi/TraeSkill --skill web-design-guidelinesيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
当用户需要创建新 Skill 或更新现有 Skill 时使用。此 Skill 提供技能创建的完整工作流指导，包括需求分析、编写规范、工程化构建、质量评估和迭代优化。
当用户需要将需求转化为可执行任务、进行技术选型或协调多个专业 Skill 协作时使用。此 Skill 充当任务调度中心，接收需求文档并智能路由到合适的专业领域。
当用户需要从零开始构建完整项目或需要多角色协作时使用。此 Skill 充当全能开发团队，包含产品经理、架构师、设计师、开发者和测试人员，指导从想法到上线的全过程。
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | web-design-guidelines |
| description | 当用户需要审查 UI 代码、进行可访问性检查、设计审计或对照最佳实践检查网站时使用。此 Skill 对照 Web Interface Guidelines 和 WCAG 2.2 标准检查合规性，输出结构化的审查结果。 |
| argument-hint | <file-or-pattern> |
⚠️ 性能提示: 此 Skill 包含完整的 WCAG 2.2 检查清单。对于快速审查，可以只使用"快速检查清单"；对于完整审计，使用"详细检查清单"。
此 Skill 提供两种审查模式：
从源 URL 获取最新指南：
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
读取指定的文件（或提示用户提供文件/模式）
对照获取的规则检查
使用简洁的 file:line 格式输出结果
当用户提供文件或模式参数时：
如果未指定文件，询问用户要审查哪些文件。
WCAG 2.2 在 2.1 基础上增加了 9 个新成功准则：
要求：焦点指示符必须满足以下所有条件：
检查点：
/* ✅ 合规的焦点样式 */
:focus {
outline: 2px solid #005fcc;
outline-offset: 2px;
}
/* ✅ 高对比度焦点 */
:focus {
outline: 3px solid #000000;
background: #ffff00;
}
要求：焦点指示符不能被其他内容完全遮挡
检查点：
要求：所有使用拖动操作的功能都应提供单指针替代方案
检查点：
// ❌ 不合规：只有拖动
<SortableList items={items} />
// ✅ 合规：提供替代方案
<SortableList items={items} />
<SortableList items={items} mode="buttons" />
要求：触摸目标至少 24x24 CSS 像素
检查点：
/* ✅ 合规的触摸目标 */
button {
min-height: 44px;
min-width: 44px;
padding: 12px 16px;
}
<!-- ✅ 合规 -->
<img src="chart.png" alt="2024年用户增长图表，显示同比增长25%" />
<!-- ❌ 不合规 -->
<img src="chart.png" />
<!-- ✅ 合规 -->
<label for="email">邮箱地址</label>
<input type="email" id="email" name="email" />
<!-- ❌ 不合规 -->
<span>邮箱地址</span>
<input type="email" aria-label="邮箱" />
文本对比度要求：
检查工具：
/* ✅ 合规 */
.text-primary {
color: #1a1a1a; /* 对比度 16:1 on #ffffff */
}
.text-secondary {
color: #5c5c5c; /* 对比度 7:1 on #ffffff */
}
/* ✅ 合规 */
body {
font-size: 1rem; /* = 16px default */
line-height: 1.5;
}
h1 {
font-size: 2rem; /* = 32px */
}
UI 组件对比度要求：
/* ✅ 合规 */
.input {
border: 1px solid #767676; /* 对比度 4.5:1 */
background: #ffffff;
}
.input:focus {
border-color: #005fcc; /* 对比度 4.7:1 */
}
内容放大 200% 时不丢失信息：
/* ✅ 合规 */
p {
letter-spacing: 0.12em;
word-spacing: 0.16em;
line-height: 1.5;
}
所有功能可通过键盘操作：
测试方法：
// ✅ 合规的键盘支持
<div
role="button"
tabIndex={0}
onClick={handleClick}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
handleClick();
}
}}
>
点击我
</div>
<!-- ✅ 合规 -->
<a href="#main-content" class="skip-link">
跳转到主要内容
</a>
<main id="main-content">
<!-- 主要内容 -->
</main>
<style>
.skip-link {
position: absolute;
top: -100px;
}
.skip-link:focus {
top: 0;
}
</style>
<!-- ✅ 合规 -->
<a href="/pricing">查看定价方案</a>
<!-- ❌ 不合规 -->
<a href="/pricing">点击这里</a>
<!-- ✅ 合规 -->
<label for="search">搜索产品</label>
<input type="search" id="search" placeholder="输入关键词..." />
<!-- ❌ 不合规 -->
<input type="search" placeholder="搜索产品" />
outline: none 除非有替代方案<!-- ✅ 合规 -->
<button>
<svg aria-hidden="true"><!-- ... --></svg>
<span>提交</span>
</button>
<!-- ❌ 不合规 -->
<button aria-label="提交"></button>
<!-- ✅ 合规 -->
<html lang="zh-CN">
<!-- ❌ 不合规 -->
<select onchange="this.form.submit()">
<!-- ✅ 合规 -->
<select onchange="confirm('确认选择？') && this.form.submit()">
<!-- ✅ 合规 -->
<label for="email">邮箱</label>
<input type="email" id="email" aria-describedby="email-error" />
<span id="email-error" role="alert">
请输入有效的邮箱地址
</span>
<!-- ❌ 不合规 -->
<input type="email" aria-invalid="true" />
<!-- ✅ 合规 -->
<label for="username">用户名</label>
<p id="username-hint">4-20个字符，可包含字母数字下划线</p>
<input id="username" aria-describedby="username-hint" />
<!-- ✅ 合规 -->
<button>提交</button>
<!-- ❌ 不合规 -->
<div onclick="submit()">提交</div>
<!-- ✅ 合规 -->
<div aria-live="polite" aria-atomic="true">
{statusMessage}
</div>
# 可访问性审计报告
## 概述
- **审计日期**: YYYY-MM-DD
- **审计范围**: [页面/组件/功能]
- **符合标准**: WCAG 2.2 AA
## 发现问题
### P0 - 立即修复
| 问题 | 位置 | 影响 | 建议修复 |
|------|------|------|---------|
| ... | ... | ... | ... |
### P1 - 尽快修复
| 问题 | 位置 | 影响 | 建议修复 |
|------|------|------|---------|
| ... | ... | ... | ... |
### P2 - 计划修复
| 问题 | 位置 | 影响 | 建议修复 |
|------|------|------|---------|
| ... | ... | ... | ... |
## 通过项目
- [ ] 列表
- [ ] 通过
- [ ] 的项目
## 建议
1. ...
2. ...
3. ...
## 参考资料
- [WCAG 2.2 官方文档](https://www.w3.org/TR/WCAG22/)
- [WebAIM 对比度检查](https://webaim.org/resources/contrastchecker/)
- [axe DevTools](https://www.deque.com/axe/)