What problem does it solve? Designing mobile screens without a structured process leads to vague specs, missing states, accessibility gaps, and handoffs engineers cannot implement. This Skill turns a UX prompt, feature description, or screenshot into a complete, implementation-ready mobile design plan. ## Core Features & Use Cases - Tiered Design Workflow: Classifies tasks as LOW, MEDIUM, or HIGH complexity and produces only the sections that tier requires, from quick component fixes to full multi-screen flows. - Implementation-Ready Handoffs: Produces information hierarchies, screen state models, interaction contracts, ASCII wireframes, design token specs, motion contracts, and copy tables for iOS, Android, Flutter, and React Native. - Built-in Quality Gates: Enforces accessibility contracts (WCAG, touch targets, screen readers), stop conditions for ambiguous requirements, and a self-review checklist before output. - Use Case: Ask it to design an onboarding flow for a finance app and receive a prioritized content hierarchy, per-state screen model, responsive layout spec across device buckets, token-referenced component spec, and a usability test plan. ## Quick Start Ask the assistant to design a mobile screen or flow, for example: design the checkout screen for my Android shopping app including empty, loading, and error states.
