Menu
审查 UI 代码是否符合 Vercel Web Interface Guidelines 规范。触发词包括"审查我的 UI"、"检查可访问性"、"审计设计"、"审查 UX"、"检查站点最佳实践"。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
React 组合模式，构建可扩展的组件架构。适用于重构充斥布尔属性的组件、构建灵活的组件库、设计可复用 API。触发词包括复合组件、render props、Context Provider、组件架构等。包含 React 19 API 变更。
Vercel 官方 React 和 Next.js 性能优化指南。编写、审查或重构 React/Next.js 代码时使用，确保最佳性能模式。触发词涉及 React 组件、Next.js 页面、数据获取、Bundle 优化或性能改进。
| name | web-design-guidelines |
| description | 审查 UI 代码是否符合 Vercel Web Interface Guidelines 规范。触发词包括"审查我的 UI"、"检查可访问性"、"审计设计"、"审查 UX"、"检查站点最佳实践"。 |
| metadata | {"author":"vercel","version":"1.0.0","argument-hint":"<文件或模式>"} |
审查以下文件是否符合规范：$ARGUMENTS
读取文件，对照下方规则检查。输出简洁但全面——优先信息密度。高信噪比。
aria-label<label> 或 aria-labelonKeyDown/onKeyUp）<button>，导航用 <a>/<Link>（不要用 <div onClick>）alt（装饰性图片用 alt=""）aria-hidden="true"aria-live="polite"<button>、<a>、<label>、<table>），再考虑 ARIA<h1>–<h6>；主要内容需跳转链接scroll-margin-topfocus-visible:ring-* 或等效样式outline-none / outline: none，除非有替代 focus 样式:focus-visible 而非 :focus（避免点击时出现 focus ring）:focus-within 处理组内 focusautocomplete 和有意义的 nametype（email、tel、url、number）和 inputmodeonPaste + preventDefault）htmlFor 或包裹控件）spellCheck={false}）… 结尾并展示示例格式autocomplete="off" 避免密码管理器干扰beforeunload 或路由守卫）prefers-reduced-motion（提供简化版或禁用）transform/opacity（合成器友好）transition: all——显式列出属性transform-origin<g> wrapper 上做 transform，设置 transform-box: fill-box; transform-origin: center… 而非 ..." " 而非直引号 "10 MB、⌘ K、品牌名… 结尾："Loading…"、"Saving…"font-variant-numeric: tabular-numstext-wrap: balance 或 text-pretty（防止孤行）truncate、line-clamp-* 或 break-wordsmin-w-0 才能截断文本<img> 需显式 width 和 height（防止 CLS）loading="lazy"priority 或 fetchpriority="high"virtua、content-visibility: auto）getBoundingClientRect、offsetHeight、offsetWidth、scrollTop）<link rel="preconnect"><link rel="preload" as="font"> 配合 font-display: swap<a>/<Link>（支持 Cmd/Ctrl+点击、中键点击）useState 时考虑通过 nuqs 等同步 URL）touch-action: manipulation（防止双击缩放延迟）-webkit-tap-highlight-color 显式设置overscroll-behavior: containinertautoFocus 谨慎使用——仅桌面单一主要输入；移动端避免env(safe-area-inset-*) 处理刘海overflow-x-hidden，修复内容溢出<html> 加 color-scheme: dark（修复滚动条、输入框样式）<meta name="theme-color"> 与页面背景匹配<select>：显式 background-color 和 color（Windows 深色模式）Intl.DateTimeFormat，不用硬编码格式Intl.NumberFormat，不用硬编码格式Accept-Language / navigator.languages 检测语言，不用 IPvalue 的输入框需要 onChange（或用 defaultValue 非受控）suppressHydrationWarning 仅在真正需要时使用hover: 状态（视觉反馈）& 替代"和"user-scalable=no 或 maximum-scale=1 禁用缩放onPaste 配 preventDefaulttransition: alloutline-none 无 focus-visible 替代onClick 导航而非 <a><div> 或 <span> 加点击处理器（应为 <button>）.map() 无虚拟化aria-labelIntl.*）autoFocus 无明确理由按文件分组。用 file:line 格式（VS Code 可点击）。简洁输出。
## src/Button.tsx
src/Button.tsx:42 - 图标按钮缺少 aria-label
src/Button.tsx:18 - 输入框缺少标签
src/Button.tsx:55 - 动画缺少 prefers-reduced-motion
src/Button.tsx:67 - transition: all → 显式列出属性
## src/Modal.tsx
src/Modal.tsx:12 - 缺少 overscroll-behavior: contain
src/Modal.tsx:34 - "..." → "…"
## src/Card.tsx
✓ pass
输出问题 + 位置。修复不明显时才解释。无前言。