跳到主要内容
哒哒星球DADA PLANET

Skill · 已公开版本

web-design-guidelines · 检查网页的可用性细节

检查界面代码里的键盘操作、表单提示、可读性等细节,输出能定位到文件行号的问题。

先看看示例

作者提供的示例,实际效果取决于你的输入和使用工具。

输入

示例文件Card.tsx第12行:<div onClick={openDetails}>查看详情</div>;没有键盘处理。

输出

编辑示例 · 未运行
Card.tsx:12 — “查看详情”使用仅绑定click的div,键盘用户无法按原生按钮方式聚焦并触发。若执行动作,改为button;若跳转页面,改为带href的链接。修复后检查Tab焦点与Enter/Space的对应行为。

方法说明

---
name: web-design-guidelines
description: Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
metadata:
  author: vercel
  version: "1.0.0"
  argument-hint: <file-or-pattern>
---

# Web Interface Guidelines

Review files for compliance with Web Interface Guidelines.

## How It Works

1. Fetch the latest guidelines from the source URL below
2. Read the specified files (or prompt user for files/pattern)
3. Check against all rules in the fetched guidelines
4. Output findings in the terse `file:line` format

## Guidelines Source

Fetch fresh guidelines before each review:

```
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
```

Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.

## Usage

When a user provides a file or pattern argument:
1. Fetch guidelines from the source URL above
2. Read the specified files
3. Apply all rules from the fetched guidelines
4. Output findings using the format specified in the guidelines

If no files specified, ask the user which files to review.