菜单
Accessibility and interaction rules for building UIs. Use when building forms, buttons, navigation, animations, or any interactive elements.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Perform a meticulous final pass on UI code. Use when polishing components, doing a final review before shipping, or when asked to polish or refine the UI.
Review code for accessibility and visual design issues. Use when reviewing UI code, auditing components, checking accessibility, or when asked to review a file for design issues.
Create distinctive, production-grade frontend interfaces. Use when building web components, pages, or applications to avoid generic AI aesthetics and make memorable UIs.
Master workflow for building exceptional UIs. Use when starting UI work, building components, or when the user asks about the development process for interfaces.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications. Generates creative, polished code that avoids generic AI aesthetics.
| name | interface-guidelines |
| description | Accessibility and interaction rules for building UIs. Use when building forms, buttons, navigation, animations, or any interactive elements. |
Concise rules for building accessible, fast, delightful UIs. Use MUST/SHOULD/NEVER to guide decisions.
:focus-visible)outline: none without visible focus replacement<input> font-size ≥16px to prevent iOS zoomtouch-action: manipulation to prevent double-tap zoomautocomplete + meaningful name; correct type and inputmode<a> for navigation (support Cmd/Ctrl/middle-click)<div onClick> for navigationaria-live for toasts/inline validationprefers-reduced-motiontransform, opacity) onlytop, left, width, height)transition: all—list properties explicitlyenv(safe-area-inset-*))<title> matches current contextfont-variant-numeric: tabular-nums for number comparisonsaria-labelcolor-scheme: dark on <html> for dark themes<meta name="theme-color"> matches page background<select>: explicit background-color and color