القائمة
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 المهني
Use 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.
| 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 touch