98.8K+Download
Skip to the usage guide
ios-design-reviewby Garry Tan

iOS Design Review Skill.

A Claude Code and Codex skill for mobile app design: visual design audit of iOS apps on real hardware.

  • Mobile Apps
  • Review report
Download OpenDesignView usage guide
garrytan/gstack · ios-design-review/SKILL.mdSKILL.md
--- name: ios-design-review description: Visual design audit for iOS apps on real hardware. (gstack) --- ## When to invoke this skill ## Confusion Protocol ## Claimed Limitations Need Evidence ## Continuous Checkpoint Mode ## Context Health (soft directive) ## Question Tuning (skip entirely if QUESTION_TUNING: false)
Front matter and section headings read from the upstream file on 2026-09-14 · 33,841 characters in full

01 What it does

What the ios-design-review Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

Connects to a real iPhone via gstack-ios-qa-daemon, screenshots every screen, and evaluates visual design against Apple HIG, DESIGN.md, and best practices. Scores ten dimensions (typography hierarchy, spacing rhythm, color hierarchy, touch targets, loading/empty/error states, accessibility, animation discipline, iOS idiom alignment, information density, and AI-slop check) from 0-10, using 'what would make it a 10' framing.

Mirrors /plan-design-review scoring rubric ported to iOS idioms. Produces a markdown report with screenshots, scores per screen, and biggest-leverage fix suggestions. For plan-stage design review (before implementation), use /plan-design-review instead. For live web visual audits, use /design-review.

What it produces

  • Markdown report with screenshots inline, scores per screen (0-10 for each dimension), and biggest-leverage fix suggestions per dimension
See the example prompt ↗

How It Works

  1. 01
    Connect to Running Daemon

    Uses the running gstack-ios-qa-daemon. If no daemon is running, spawn one via the same flow as /ios-qa (Phase 0-2).

  2. 02
    Capture Screens

    For each major screen (driven from a user-provided screen list or auto-discovered via the accessibility tree), retrieves screenshot and elements via GET /screenshot and GET /elements.

  3. 03
    Apply ten-dimension Rubric

    Scores typography hierarchy, spacing rhythm, color hierarchy, touch targets, loading/empty/error states, accessibility, animation discipline, iOS idiom alignment, information density, and AI-slop check from 0-10, explaining what would push each to 10.

  4. 04
    Flag Low Scores

    Uses AskUserQuestion for any score below 7, presenting the issue with recommended fix and tradeoff so the user can decide whether to address it.

  5. 05
    Write Report

    Produces a markdown report with screenshots inline, scores per screen, and biggest-leverage fix suggestions per dimension, written to ~/.gstack/projects/<slug>/ios-design-review-<date>.md.

02 Find your fit

When to Use the ios-design-review Skill

Use the ios-design-review skill in Claude Code or Codex when the job is mobile app design of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • Visual QA of an iOS app on real hardware before shipping
  • Checking accessibility compliance (VoiceOver labels, Dynamic Type, Reduce Motion)

Know the Boundaries

  • Plan-stage design review before implementation (use /plan-design-review)
  • Live web visual audits (use /design-review)

03 Inside the skill

Rules the ios-design-review Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Read-only by Default

    Acquires session with observe capability, making no mutating calls to the iOS device.

  2. Typography Uses SF Pro and Dynamic Type

    Typography hierarchy scores display vs body vs caption sizes consistent with Apple HIG, using SF Pro at correct dynamic-type scale. No 12pt body text anywhere.

  3. Spacing Must Follow 4pt or 8pt Grid

    Spacing rhythm dimension requires 4pt or 8pt grid used consistently, with no magic 17/23/31pt paddings, and safe-area insets respected.

  4. Touch Targets Minimum 44x44pt

    Every interactive element must be at least 44x44pt. No tappable text smaller than 24pt.

  5. Contrast Ratios Meet WCAG AA

    Color hierarchy dimension requires contrast ratios meeting WCAG AA for body text (4.5:1) and large text (3:1), with dark mode rendering correctly.

  6. Animation Limited to 2 Simultaneous

    Animation discipline dimension caps simultaneous animations at 2, with duration 200-300ms for UI feedback and correct spring damping (not bouncy for serious flows).

  7. Use Native iOS Components

    iOS idiom alignment dimension requires using native components (NavigationStack, List, Form, system sheets) where appropriate, with no re-invented navigation or web-style hamburger menus on phone.

  8. Flag AI-slop Patterns

    AI-slop check dimension catches generic stock layouts, lorem ipsum data left in, cargo-cult Material Design imported from Android, and AI-generated gradients.

04 Put it to work

Install ios-design-review in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add ios-design-review to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal
npx skills add https://github.com/garrytan/gstack --skill ios-design-review

Generic skills CLI form for ios-design-review/SKILL.md; the repository may document its own path.

Give the Skill a First Mobile App Design Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt
Review the iOS design of [MyApp] running on the connected iPhone. Focus on the onboarding flow, home screen, and settings. Check for typography hierarchy issues, spacing rhythm inconsistencies, and accessibility compliance. Write the report to the project folder.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Confirm the session was acquired with observe capability and no mutating calls were made

In OpenDesign import ios-design-review from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
Garry Tan
Repository
github.com/garrytan/gstack Branch main
Skill file
ios-design-review/SKILL.md Content checksum recorded at verification; commit 71f6048
License
MIT From LICENSE.
Repository stars
132,921 GitHub snapshot taken 2026-09-14 for the whole garrytan/gstack repository, which contains 7 skills in this catalog. Not a rating or usage count for ios-design-review.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. When to invoke this skillVisual audit of iOS apps on real hardware via StateServer, scores ten dimensions 0-10
  2. ConnectionUses running gstack-ios-qa-daemon, spawns via /ios-qa flow if needed, read-only by default
  3. Dimensions + scoringTen-dimension rubric: typography, spacing, color, touch targets, states, accessibility, animation, iOS idiom, density, AI-slop
  4. LoopAcquire session, screenshot each screen, apply rubric, record findings, produce markdown report
  5. OutputMarkdown report with screenshots inline, scores per screen, biggest-leverage fix suggestions
  6. Failure modesHandles 403 capability_insufficient, blank screenshots, missing screens
The Skill's Own Description
“Visual design audit for iOS apps on real hardware. (gstack)”

Front-matter description from SKILL.md. The full file is about 33,841 characters. Read the full file on GitHub.

06 Before you install

Questions About the ios-design-review Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

What is the difference between this and /plan-design-review?

This skill runs on a real iOS device and evaluates shipped or in-progress apps against Apple HIG and iOS idioms. /plan-design-review evaluates design specs before implementation. This skill mirrors the same scoring rubric ported to iOS.

iOS Design Review

Run ios-design-review on a Real Mobile App Design Task.

Download OpenDesign, import ios-design-review from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/garrytan/gstack --skill ios-design-review

OpenDesign Desktop

One design system. Every output unmistakably your brand

Inside the full Vibe Design Workspace, use the same brand rules across websites, slide decks, interactive prototypes, dashboards, images, and HTML video. Connect Codex, Claude Code, Cursor, and other coding agents already on your computer, then create locally for free.

  • Web, slides, prototypes, dashboards, images, and video
  • 140+ design systems, plus the full template and skill library
  • Connect local Codex and 21+ coding agents · Free to use
Download free

Available for macOS and Windows