首页/前端开发/web-design-guidelines
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-guidelines
compare_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日