Run any Skill in Manus with one click

mobile-ui

Stars0

Forks0

UpdatedJuly 6, 2026 at 14:10

Build and review React Native mobile UI with safe areas, touch states, keyboard handling, accessibility, and platform-aware polish.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

1a2b3cw

1a2b3cw/claude-code-presets

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

name	mobile-ui
description	Build and review React Native mobile UI with safe areas, touch states, keyboard handling, accessibility, and platform-aware polish.

Mobile UI

Use this skill when implementing or reviewing React Native screens, reusable mobile components, forms, bottom sheets, tabs, lists, or visual interaction states.

Required Context

Read rules/mobile-ui.md before writing UI code.
For deeper React Native details, read specs/react-native.md.
If the project has preview/, read it before UI implementation.

Workflow

Identify the target device contexts: small phone, large phone, iOS, Android, dark mode.
Design the screen around safe area, keyboard behavior, loading/error/empty states, and touch target size.
Implement with stable dimensions for repeated controls and list items.
Verify key states: default, pressed, disabled, loading, error, empty, offline when relevant.
For forms, verify keyboard type, submit behavior, validation placement, and keyboard avoidance.

Checks

No content is hidden behind status bar, tab bar, home indicator, or keyboard.
Touch targets are large enough and have clear feedback.
Icon-only actions have accessibility labels.
Dynamic text does not clip at larger font sizes.
Lists use virtualized list components when content can grow.

More from this repository

same repository

team-command-check

1a2b3cw/claude-code-presets

Execute the check workflow from this AI development team preset. Use when the user writes /check, asks for check, or wants the corresponding team process in Codex.

2026-07-120

team-command-dev

1a2b3cw/claude-code-presets

Execute the dev workflow from this AI development team preset. Use when the user writes /dev, asks for dev, or wants the corresponding team process in Codex.

2026-07-120

team-command-fix

1a2b3cw/claude-code-presets

Execute the fix workflow from this AI development team preset. Use when the user writes /fix, asks for fix, or wants the corresponding team process in Codex.

2026-07-120

team-command-plan

1a2b3cw/claude-code-presets

Execute the plan workflow from this AI development team preset. Use when the user writes /plan, asks for plan, or wants the corresponding team process in Codex.

2026-07-120

team-command-project-preset

1a2b3cw/claude-code-presets

Execute the project-preset workflow from this AI development team preset. Use when the user writes /project-preset, asks for project-preset, or wants the corresponding team process in Codex.

2026-07-120

team-command-review-all

1a2b3cw/claude-code-presets

Execute the review-all workflow from this AI development team preset. Use when the user writes /review-all, asks for review-all, or wants the corresponding team process in Codex.

2026-07-120

name	mobile-ui
description	Build and review React Native mobile UI with safe areas, touch states, keyboard handling, accessibility, and platform-aware polish.

Mobile UI

Use this skill when implementing or reviewing React Native screens, reusable mobile components, forms, bottom sheets, tabs, lists, or visual interaction states.

Required Context

Read rules/mobile-ui.md before writing UI code.
For deeper React Native details, read specs/react-native.md.
If the project has preview/, read it before UI implementation.

Workflow

Identify the target device contexts: small phone, large phone, iOS, Android, dark mode.
Design the screen around safe area, keyboard behavior, loading/error/empty states, and touch target size.
Implement with stable dimensions for repeated controls and list items.
Verify key states: default, pressed, disabled, loading, error, empty, offline when relevant.
For forms, verify keyboard type, submit behavior, validation placement, and keyboard avoidance.

Checks

No content is hidden behind status bar, tab bar, home indicator, or keyboard.
Touch targets are large enough and have clear feedback.
Icon-only actions have accessibility labels.
Dynamic text does not clip at larger font sizes.
Lists use virtualized list components when content can grow.