메뉴
审查 UI 代码是否符合 Vercel Web Interface Guidelines 规范。触发词包括"审查我的 UI"、"检查可访问性"、"审计设计"、"审查 UX"、"检查站点最佳实践"。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
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
输出问题 + 位置。修复不明显时才解释。无前言。