mobile-audit
mobile-audit
This is the hold: the part of the Mobile Kit that makes "stick to good design" real. Coding agents don't design badly once; they drift: a raw hex here, an off-scale padding there, a fourth font weight, a screen with no empty state, brand color sprayed across five elements. Over a 30-screen app that drift compounds into incoherence. This skill catches it.
It works standalone, and it pairs with any plan → build → review workflow (for example the compound-engineering plugin's ce-plan / ce-work / ce-code-review): when a code review runs on mobile UI, this is the design gate it applies. It owns the authoritative D-gates (which mobile-design self-checks against) and a token-lint script. Motion-quality issues route to mobile-motion REVIEW; architecture/structure issues route to mobile-architecture AUDIT. This skill owns the design-system, platform-fit, and accessibility hold.
How the hold works (two layers)
- LINT: a deterministic script (
scripts/token-lint.mjs) greps the component layer for the mechanically-checkable violations (raw hex, off-grid spacing, raw font sizes/weights). Exit code 1 = drift exists. This is the layer that doesn't rely on anyone remembering to look. (v0 covers the deterministic color/spacing/weight checks; the gate set below is the full bar and expands the script over time.) - AUDIT: a judgment pass against the full D-gate rubric for what a script can't see: missing states, platform misfit, hierarchy, over-expression, accessibility. Reads the screen (code + a screenshot/simulator when available).
Run LINT first (cheap, catches the obvious), then AUDIT for the rest.
AUDIT
Read first: references/gate-rubric.md.
Score the artifact that exists (code, and a screenshot/simulator capture when available), never the intent. Inspect each of the eight D-gates; each is binary pass/fail with required evidence (file:line or a screenshot observation). A gate fails loudly with the specific violation and the fix.