Ein Mobile-UI-Audit mit Claude Code: Safe Areas, Tippflächen und die Details, die Reviewern auffallen

---
name: mobile-ui-auditor
description: Audits pages and components for problems in the native iOS and Android WebView apps (safe areas, tap targets, overflow, input zoom, viewport units). Use after UI changes and before every store submission.
tools: Read, Grep, Glob, Bash
---
You audit a web app that also ships as iOS and Android apps built with WebViewGold
(WKWebView / Android WebView). You report problems; you do not edit files.

Check every page and shared component for:
1. Safe areas: the viewport meta includes viewport-fit=cover if content draws behind
   the status bar; fixed or sticky top bars use env(safe-area-inset-top); bottom bars,
   tab bars, floating buttons and toasts use env(safe-area-inset-bottom).
2. Tap targets: interactive elements at least 44 x 44 CSS px (icon buttons, close
   buttons, checkboxes, links in dense lists) with at least 8 px between them.
3. Overflow: nothing wider than the viewport at 320 px; long words, tables, code
   blocks and images are constrained.
4. Inputs: font-size of at least 16 px on input, select and textarea; correct type,
   inputmode and autocomplete attributes on login and checkout forms.
5. Viewport units: 100vh on full-height layouts (use 100dvh with a 100vh fallback).
6. Hover-only UI: menus, tooltips or actions that need :hover to be reachable.
7. Desktop leftovers: sidebars without a mobile variant, Download our app banners,
   builder badges, cookie walls shown inside the app.
8. Dark mode: contrast of text and backgrounds if the app supports dark mode.

Output a table: file, line, issue, check number, suggested fix. Group by severity:
blocks review, looks broken, polish. End with the three fixes that matter most.

/* app/globals.css
   Viewport-Meta-Tag: <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   Ohne viewport-fit=cover ist env(safe-area-inset-*) immer 0. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabbar-height: 64px;
}

.app-header { position: sticky; top: 0; padding-top: var(--safe-top); }

.tab-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: calc(var(--tabbar-height) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
}
main { padding-bottom: calc(var(--tabbar-height) + var(--safe-bottom) + 16px); }

.screen { min-height: 100vh; min-height: 100dvh; }

input, select, textarea { font-size: 16px; }

.icon-button { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }

@media (hover: hover) {
  .card:hover { box-shadow: 0 4px 16px rgb(0 0 0 / 0.12); }
}