mobile-screen-eval

A rigorous three-layer UX evaluation skill for Claude. Audit any mobile screen against Nielsen's 10 usability heuristics, WCAG 2.1 AA accessibility, and mobile platform guidelines (iOS HIG + Material Design).

Works with any mobile product: consumer apps, B2B tools, fintech, health, delivery, or anything else.

Install

As a Claude Code plugin:

/plugin marketplace add jainulabudeenm/mobile-screen-eval
/plugin install mobile-screen-eval

Or via npx, which also covers Claude.ai and any other Claude interface:

npx mobile-screen-eval             # global, all your projects
npx mobile-screen-eval --project   # this project only, shareable via git

Restart Claude Code after the npx route to pick it up.

Use

1. Upload a mobile screen (PNG, Figma frame link, or description)
2. Say "audit this screen", "run mobile-screen-eval", or just "what's wrong with this?"
3. Claude runs all three layers and produces a full per-screen report

What you get

For each screen:

• What's working, patterns worth preserving, with plain-language rationale
• Findings, grouped by layer, each with: Element, Observation, Why it's a problem, Recommendation, Effort hint
• Recommendations prioritised by severity, then impact × effort
• Open questions, the things that need design context before a verdict

Three evaluation layers

Layer 1: Nielsen's 10 usability heuristics. The industry standard since 1994. Covers system status visibility, real-world language, user control, consistency, error prevention, recognition vs recall, flexibility, minimalist design, error recovery, and help/documentation.

Layer 2: WCAG 2.1 AA. The international accessibility standard. Covers text alternatives, colour contrast (4.5:1 for body text), resizable text, timing, target size, error identification, and more.

Layer 3: Mobile platform accessibility. iOS HIG + Material Design guidelines. Covers touch target size (44pt iOS / 48dp Android), Dynamic Type and Font Scale support, VoiceOver and TalkBack semantics, input types, haptics, and platform conventions.

Severity scale

Nielsen's 0 to 4 scale, consistently applied:

| Level | Label | Meaning | |---|---|---| | 0 | Not a problem | Noted, don't fix | | 1 | Cosmetic | Fix if time permits | | 2 | Minor | Low priority, easy workaround | | 3 | Major | Fix before ship | | 4 | Catastrophic | Must fix, blocks task or safety |

Every finding has to be defensible: what happens to the user, how often and for whom, whether they can recover, and what it costs. A Sev 4 answers at least two of those significantly.

Batch use (Claude Code)

For 10+ screens, run in Claude Code with a folder of exported PNGs and a manifest CSV. Claude writes per-screen .md files and appends to a master findings CSV as it goes. Full batch instructions are in skills/mobile-screen-eval/references/templates.md.

Add your own design principles

This skill covers the universal three layers. If your product has its own design principles, brand guidelines, or context-specific rules, share them with Claude at the start of a session. Claude applies them as a fourth layer on top of the universal three.

For teams

Install project-scoped and commit .claude/skills/ to git. Every designer on the team gets the skill when they clone the repo.

What's in here

skills/mobile-screen-eval/      the skill itself, readable
  SKILL.md                      workflow, severity rubric, principles
  references/
    nielsen-heuristics.md       all 10, with mobile violation examples
    wcag-aa-mobile.md           WCAG 2.1 AA + iOS HIG + Material a11y
    templates.md                per-screen and batch report templates
skills/mobile-screen-eval.skill packaged artifact, what npx installs
scripts/pack.sh                 rebuilds the artifact from the folder

The folder is the source of truth. Run ./scripts/pack.sh after editing anything under it.

Update

npx mobile-screen-eval@latest

License

MIT