W
web-design-guidelines
by @vercel-labsv1.0.0
4.8(978)
Reviews UI code for compliance with 100+ web interface rules covering accessibility, performance, forms, animation, typography, images, and theming. Outputs findings in file:line format.
AccessibilityPerformanceAuditWCAG
安装方式
npx skills add vercel-labs/agent-skills --skill web-design-guidelinescompare_arrows
Before / After 效果对比
1 组BEFORE
1// ❌ Before: 无障碍问题未发现
2<button onClick={handleClick}>
3 <Icon name="close" />
4</button>
5// 缺少 aria-label
6// 缺少 focus 样式
7// 对比度 3.1:1(不达标)图标按钮无 aria-label,对比度不达标
AFTER
1// ✅ After: 自动审计并修复
2<button
3 onClick={handleClick}
4 aria-label="关闭对话框"
5 className="focus-visible:ring-2"
6>
7 <Icon name="close" />
8</button>
9// 对比度 7.2:1(WCAG AAA)自动添加 aria-label、focus 样式、修复对比度
WCAG 合规率
+58%
62% → 98%
审计时间
-98%
120分钟 → 3分钟
forum用户评价 (0)
发表评价
效果
易用性
文档
兼容性
暂无评价,来写第一条吧
统计数据
安装量163.2K
评分4.8 / 5.0
版本1.0.0
更新日期2026年3月10日
对比案例1 组
用户评分
4.8(978)
5
62%
4
28%
3
7%
2
2%
1
1%
为此 Skill 评分
0.0
兼容平台
🤖claude-code
时间线
创建2026年1月19日
最后更新2026年3月10日