先看看示例
作者提供的示例,实际效果取决于你的输入和使用工具。
输入
示例文件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.