원클릭으로 Manus에서 모든 스킬 실행

mobile-ui

스타0

포크0

업데이트2026년 7월 6일 14:10

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

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

1a2b3cw

1a2b3cw/claude-code-presets

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

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.

이 저장소의 다른 Skills

같은 저장소

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.