About mobile-design-review
mobile-design-review is a skill for auditing mobile app design, scoring findings, and maintaining a design baseline. It defaults to a report without app-file edits, with fixes enabled only on request.
Key features
- 01Static and live design review
- 02Ten-category rubric and scoring
- 03Regression comparison with baseline
- 04Opt-in, bounded fix workflow
Use cases
- 01Review a mobile app before release
- 02Compare a new review with its baseline
- 03Identify design issues on a scoped screen
- 04Apply requested fixes while tracking risk
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/mobile-design-reviewin Claude Code to confirm it loaded.
Details
From the project READMEmobile-design-review: Audit, Score, Baseline
Report-only by default. --fix (or the user asking you to fix what you find) enables
the fix loop. Never both silently.
The method is ../_shared/references/review-rubric.md (passes, narration, Trunk Test,
finding format, ten categories, scoring math, baseline file) and
../_shared/references/tells.md (the grep checklist + tell catalog). Fix
recommendations cite ../_shared/references/redesign-protocol.md (lever order) and
sections of ../mobile-taste/SKILL.md. Read all four before starting.
Flow
- Stack sniff.
package.json/app.json/ theme files /MOBILE-DESIGN.md/design-baseline.json. If a baseline exists, this run is a REGRESSION run - deltas lead the report. - Scope. Whole app by default; a named screen/flow if the user scoped it. List the screens you will cover (from the route tree) so coverage is explicit.
- Static pass (always): the tells.md grep block, then code inspection per the ten rubric categories. Triage every hit.
- Live pass (when reachable): simulator/emulator → Expo web phone-viewport → user-provided screenshots, in that order. Per screen: screenshot, first-impression narration, Trunk Test, touch targets, dark mode + large fonts when practical. If nothing is reachable, say so and continue static-only.
- Findings. review-rubric.md format:
FINDING-NNN [impact | category], evidence, tell number when it maps, concrete fix. - Scores. Design Score + AI Slop Score per the mechanical letter math. Per-category letters in a table. No rounding up.
- Baseline. Write/refresh
design-baseline.json. On a regression run, the delta table (category changes, new, resolved) comes FIRST. - Report. Narrations, Trunk Test results, findings by impact, scores, the
explicit unverified list ("no device reachable: keyboard, splash, scroll perf, font
scale, edge-to-edge NOT verified"), and - report-only mode - a recommended fix order
(the modernization-lever order from
../_shared/references/redesign-protocol.md).
Fix mode (opt-in only)
Runs the fix loop from redesign-protocol.md: one finding per atomic commit
(style(design): FINDING-NNN ...), before/after screenshots when a live pass exists,
re-check to close, risk governor (stop > 20%, hard cap 20 fixes), findings marked
fixed in the baseline. Constraints:
- Never touches navigation structure, route names, deep links, tab order, token names, or form field semantics - those are redesign-skill territory and approval-gated there.
- High-impact findings first, then medium; polish only if the user asked for polish.
- Stopping at the governor is a success state: report fixed / remaining / risk math.
Rules that bind this skill
- Report-only means ZERO app-file edits. The one sanctioned write is
design-baseline.json(the review's own artifact); skip even that if the user asked for zero writes and inline the JSON in the report instead. - Every score follows the math; every dismissed grep hit gets its one-line reason.
- If the project declares design commitments -
MOBILE-DESIGN.md, or any equivalent committed design doc - findings also flag DRIFT from them (a declared accent used inconsistently, a Nav Read the code no longer matches). Name the doc you used.