菜单
Implementation details for accessible, performant interfaces. Use alongside vercel-design-guidelines for detailed technical guidance on interactions, animations, and forms.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Deploy applications and websites to Vercel. Use this skill when the user requests deployment actions such as "Deploy my app", "Deploy this to production", "Create a preview deployment", "Deploy and give me the link", or "Push this live". No authentication required - returns preview URL and claimable deployment link.
Enforce strict type safety, accessibility standards, and code quality for TypeScript/JavaScript projects using Biome's formatter and linter. Use when writing, reviewing, or fixing TS/JS/TSX/JSX code, checking for a11y issues, linting errors, type safety problems, or when the user mentions code quality, formatting, accessibility, or best practices.
Enforce modern React 19 and Next.js App Router patterns - server-first data fetching, minimal useEffect, Server Components, Server Actions, and form hooks. Use when reviewing React/Next.js code, migrating legacy patterns, or building new features with App Router.
| name | ui-ux-guidelines |
| description | Implementation details for accessible, performant interfaces. Use alongside vercel-design-guidelines for detailed technical guidance on interactions, animations, and forms. |
| allowed-tools | Read, Grep, Glob, Edit |
Note: For high-level design rules (hit targets, focus rings, contrast, etc.), defer to
vercel-design-guidelineswhich fetches live standards from Vercel. This skill provides implementation-specific details.
:focus-within where appropriatetouch-action: manipulation to prevent double-tap zoom-webkit-tap-highlight-color to match design<input> font-size ≥16px to prevent iOS zoom, or use:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover">
<input>/<textarea><textarea>, Cmd/Ctrl+Enter submitsautocomplete + meaningful name; correct type and inputmodesk-012345...)<a>/<Link> (support Cmd/Ctrl/middle-click)aria-live for toasts/inline validationoverscroll-behavior: contain in modals/drawersinert on dragged elementtransform-origin (motion starts where it "physically" should)<g>), not parent <svg>transform-box: fill-box and transform-origin: center on SVGtranslateZ(0) or will-change: transform for text anti-aliasing artifactsenv(safe-area-inset-*))<title> matches current contextfont-variant-numeric: tabular-nums)... (not ...)scroll-margin-top on headings; include "Skip to content" link10 MB, Cmd + KAccept-Language header, NOT IP geolocationcontent-visibility: auto<link rel="preconnect"> for asset/CDN domainsunicode-range:hover/:active/:focus<meta name="theme-color"> to match page backgroundcolor-scheme: dark on <html> in dark themesbackground-color and color on <select>// Bad
<input onPaste={(e) => e.preventDefault()} />
// Good
<input type="email" autoComplete="email" />
// Bad
<div onClick={handleClick}>Click me</div>
// Good
<button onClick={handleClick}>Click me</button>
// Bad
<select><option>Option 1</option></select>
// Good
<select className="bg-white dark:bg-gray-900 text-black dark:text-white">
<option>Option 1</option>
</select>