メニュー
Accessibility and interaction rules for building UIs. Use when building forms, buttons, navigation, animations, or any interactive elements.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
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.
SOC 職業分類に基づく
| 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