Menu
Accessibility and interaction rules for building UIs. Use when building forms, buttons, navigation, animations, or any interactive elements.
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.
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.
Based on SOC occupation classification
| 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