메뉴
Use when building responsive web UI for phones, or when /ibr:build preamble returns platform=web mobile. Covers viewport/safe-area, thumb zones, touch, Material 3, iOS Safari, WCAG 2.2.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | mobile-web-ui |
| description | Use when building responsive web UI for phones, or when /ibr:build preamble returns platform=web mobile. Covers viewport/safe-area, thumb zones, touch, Material 3, iOS Safari, WCAG 2.2. |
| version | 0.1.0 |
| user-invocable | false |
Opinionated rules for mobile-first web. Full research context + citations: docs/research/2026-04-13-mobile-ui-best-practices.md.
<meta name="viewport" content="width=device-width, initial-scale=1"> — prevents iOS 300ms click delay100dvh for true viewport (not 100vh — includes dynamic chrome)env(safe-area-inset-bottom) for home-indicator clearanceprefers-reduced-motion honored for every non-essential animation (WCAG SC 2.3.3)| Standard | Size | Use as |
|---|---|---|
| WCAG 2.5.8 (AA minimum) | 24×24 CSS px | Legal floor — not a design target |
| WCAG 2.5.5 (AAA enhanced) | 44×44 CSS px | Working minimum |
| Material Design 3 | 48×48 dp | Preferred for Android-targeted web |
Default: 44×44 px for tap targets. Full-width primary CTAs in the bottom 25–40% of viewport (natural thumb zone — NN/g: 96% tap accuracy vs 61% in stretch zone).
Never hardcode hex. Use role tokens so dark mode + theming work.
on-surface, surface, outline, errorprimary, secondary, tertiarysurface-container-lowest → -highest — tonal elevation replaces shadow-only depth5 roles × 3 sizes — Display (57/45/36), Headline (32/28/24), Title (22/16/14), Body (16/14/12), Label (14/12/11). Weights limited to Regular or Medium. Body Large (16px) for primary reading.
inputmode / type="email|tel|number|url" for correct mobile keyboardautocomplete tokens for autofill@media (hover: hover) for desktop-only affordancesUse the motion-physics springs for interactive transitions (M3 Expressive, May 2025). Durations/easings still documented for non-interactive. Always respect prefers-reduced-motion.
transform / opacity for animation (compositor-only):hover used to reveal primary content → broken on touchUse when /ibr:build detects .mockup-gallery/ or IBR needs to tie a build to gallery-selected mockups. Reads ratings/selections, enforces approved target roles, preserves scratch-first workflow, and writes implementation completion. Filesystem only.
Use when validating iOS, watchOS, or macOS UI with IBR.
Use when working on iOS, watchOS, or macOS apps — .swift files, SwiftUI views, simulators. IBR's native scan workflow for touch targets, a11y labels, watchOS constraints, Fix Guide.
Use when scanning, auditing, comparing, or testing UI with IBR.
Use when planning or implementing UI with IBR.
Use when planning, designing, implementing, or auditing UI/UX with IBR in Codex. Provides the latest compact IBR guidance for Calm Precision, web archetypes, interaction states, mobile, content states, data visualization, Mockup Gallery targets, and imagegen approval gates.