gstack/skills/design/references/legacy/ios-design-review.md

iOS Design Review

Designer's-eye QA on a real iOS device. Finds visual inconsistency, spacing issues, hierarchy problems, AI-slop patterns, and accessibility gaps. Rates each dimension 0-10. Mirrors $design --mode Critique --module plan-design-review's scoring rubric ported to iOS idioms.

Connection

Uses the running gstack-ios-qa-daemon. If no daemon is running, spawn one via the same flow as $qa --mode Report --module ios-qa (Phase 0-2). Read-only by default — no mutating calls.

Dimensions + scoring

For each screen in the app, score 0-10 and explain what would push it to 10:

1. Typography hierarchy. Display vs body vs caption sizes consistent with Apple HIG. SF Pro at correct dynamic-type scale. Line-height matches font size. No 12pt body anywhere.
2. Spacing rhythm. 4pt or 8pt grid used consistently. No magic 17/23/31pt paddings. Safe-area insets respected.
3. Color hierarchy. Primary action highest contrast; secondary muted; destructive distinct. Dark mode renders correctly. Contrast ratios meet WCAG AA for body text (4.5:1) and large text (3:1).
4. Touch targets. Every interactive element >= 44x44pt. No "tappable text" smaller than 24pt.
5. Loading + empty + error states. Each present and intentional. No blank screens during async work. Empty states explain what to do next.
6. Accessibility. VoiceOver labels on every interactive element. Dynamic Type cap at XXL doesn't break layouts. Reduce Motion respected. Color-blindness palette tested (deuteranopia is most common).
7. Animation discipline. No more than 2 simultaneous animations. Duration 200-300ms for UI feedback. Spring damping correct (not bouncy for serious flows).
8. iOS idiom alignment. Uses native components (NavigationStack, List, Form, system sheets) where appropriate. No re-invented navigation. No web-style hamburger menus on phone.
9. Information density. Per-screen content fits without horizontal scroll. Long screens have section anchors. Lists use real iOS list patterns (swipe-to-delete, contextual menus).
10. AI-slop check. Generic stock layouts, "lorem ipsum" data left in, cargo-cult Material Design imported from Android, gradients that smell AI-generated.

Loop

1. POST /session/acquire with capability observe (read-only).
2. For each major screen (driven from a screen list the user provides, or auto-discovered via the accessibility tree):
   • GET /screenshot
   • GET /elements
   • Apply the 10-dimension rubric.
   • Record findings.
3. Produce a markdown report with screenshots, scores per screen, and a "biggest leverage fix" suggestion per dimension.
4. Use AskUserQuestion for any score < 7 — present the issue with recommended fix + tradeoff so the user can decide whether to address.

Output

Write a markdown report to "${GSTACK_HOME:-$HOME/.gstack}"/projects/<stable-project-id>/ios-design-review-<date>.md. Include the screenshots inline. The CEO/eng review skills can reference this report when planning UI changes.

Failure modes

Symptom	Action
403 capability_insufficient from /screenshot	Daemon is in tailnet mode and token is below observe tier — owner must mint with --capability observe
Screenshot is black/blank	App may be in foreground but not rendering; AskUserQuestion to confirm the app is in the expected state
10 screens, but ground-truth screen list said 12	AskUserQuestion: were 2 hidden behind state we haven't triggered?

Upstream judgment port: PR #679

Match the user language

User-language rule

Write questions, progress updates, reports, and artifacts in the language used by the user. Source material, code identifiers, commands, and quotations may remain in their original language when translating them would reduce accuracy.