mobile-screen-uiux

When to use

• When designing, implementing, or reviewing one mobile screen.
• When a screen needs clearer hierarchy, CTA priority, state handling, or component breakdown.
• When converting product requirements or Figma designs into code-ready UI.

Core analysis model

• Define the screen intent and user context.
• Group content by task relevance, not source object shape.
• Establish information hierarchy and CTA priority.
• Choose fixed, sticky, and scrollable regions deliberately.
• Cover loading, empty, error, offline, partial, disabled, and submitting states.
• Check accessibility, dynamic text, safe areas, keyboard overlap, and small screens.
• Convert the screen into shell, sections, primitives, and state renderers.