← Back to Mobile app developers
See how it helps
Mobile interface components
Designs reusable mobile components with clear hierarchy, real content and complete states across sizes and themes.
mobile-ui-components
Team members using this skill
When is it useful?
Use when screens break around safe areas, long text or dark mode.
What does it help you do?
- Structures content and emphasis around actual user information.
- Adapts layouts to safe areas and phone or tablet dimensions.
- Defines loading, disabled, error and theme variants consistently.
Try asking this
Design a reusable account card with long names, missing photos, dark mode and large system text. Display a long translated role beside a missing portrait at maximum supported text scaling. The card should reflow without clipping its name or primary action.
Detailed documentation
Read the skill’s original instructions, examples and checks in their authored language.
Show less
Mobile UI & Component Systems
Build cohesive mobile screens from a clear visual hierarchy, semantic tokens and reusable components that hold up with real content across screen sizes and themes.
1. Visual hierarchy and real content
- Establish a clear three-level hierarchy on every screen: primary focal point (key metric, content or primary CTA), secondary supporting context, and tertiary metadata.
- Design with realistic, representative content—including long localized strings, multi-line titles, missing avatars, zero values and large numbers—never idealized one-word placeholders.
- Keep card and list row density balanced: group related fields cleanly, limit each row to 3–4 data points, and use consistent spacing, alignment and typography tokens from the shared design system.
2. Safe areas, viewports and adaptive layout
- Respect OS safe areas on every screen: top status bar, notch / Dynamic Island, Android camera cutouts, bottom home indicator and gesture bar, and keyboard insets.
- Pin sticky bottom action bars above the safe-area inset and above the software keyboard when inputs are focused, with a subtle divider or elevation so scrolling content does not bleed into the action bar.
- Define how screens adapt from compact phones (
320–375ptwide) to large phones, landscape orientation and tablets/foldables (reflowing single-column lists into master-detail or responsive grids where appropriate).
3. Reusable component states and dark mode
- Specify every reusable mobile component (buttons, list items, inputs, chips, banners, sheets, dialogs) across its interactive and data states:
default,pressed,focused,disabled,loading,errorandselected. - Use semantic color and surface tokens so light mode, dark mode and elevated surfaces (modals, sheets, sticky bars) maintain clear separation and legibility without hardcoded hex values.
Before you finish
- Visual hierarchy highlights the primary task and holds up with long, realistic content.
- Safe areas, sticky bars, keyboard insets and compact-to-large screen widths are specified.
- Components reuse shared design tokens and define all interactive states in light and dark mode.
Included files 1
SKILL.md