ワンクリックでManusで任意のスキルを実行

react-native-development

スター94

フォーク11

更新日2026年7月5日 07:18

Use when building screens, navigation, styling, or platform behavior in this Expo React Native app, to follow mobile-first conventions and keep logic testable.

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

Manusで実行

ソース

johnku2011

johnku2011/boilerplates-with-ai-skills

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Manusで実行

React Native Development (Expo)

Overview

Build mobile UI with Expo and React Native. Keep screens in components; extract testable logic into pure functions under src/.

Process

Prefer React Native core components and StyleSheet.create before adding UI libraries.
Keep App.tsx (or future screens) focused on layout and wiring; move non-trivial logic to pure helpers you can test with npm test.
Handle platform differences explicitly (Platform.OS, platform-specific files) instead of guessing runtime behavior.
Respect safe areas and accessibility: meaningful labels, tappable targets, sufficient contrast.
Verify with npm run typecheck and npm test before claiming completion.

Structure

Screens under app/ or src/screens/ (follow existing project layout).
Shared UI in small components; no mega-files.
Navigation: use Expo Router conventions if added later; document stack changes.

Testing Strategy

Unit tests for pure functions (formatting, validation, reducers) — required.
Component tests when logic is intertwined with rendering — optional in this starter; prefer extracting logic first.
Device/simulator for layout, gestures, and platform-specific UI — manual smoke test before release.

Guidelines

Do not block the JS thread with heavy sync work; defer or chunk large tasks.
Read secrets from environment at build time via Expo config — never hardcode API keys in source.
Adding native modules may require an Expo config plugin and a dev client build; document that before adding dependencies.
Test on at least one target (iOS simulator, Android emulator, or web) for UI changes; logic-only changes can rely on npm test.
Use project-security checks for auth tokens, deep links, and WebViews.

Anti-patterns

Copy-pasting web React patterns that assume DOM APIs.
Storing refresh tokens in AsyncStorage without encryption requirements documented.
Skipping tests because "it's just UI" while logic lives in the component.

このリポジトリの他の Skills

同じリポジトリ

bwai-advisor

johnku2011/boilerplates-with-ai-skills

Use before scaffolding a bwai project — runs the full startup-goal workflow then recommends the right boilerplate and outputs the exact bwai new command to run.

2026-07-1894

cto

johnku2011/boilerplates-with-ai-skills

Use when acting as a startup CTO for architecture, technical risk, platform direction, codebase boundaries, or engineering strategy.

2026-07-1294

founding-engineer

johnku2011/boilerplates-with-ai-skills

Use when acting as a startup founding engineer for implementation, tests, debugging, review, and verification.

2026-07-1294

product-manager

johnku2011/boilerplates-with-ai-skills

Use when acting as a startup product manager for discovery, PRDs, issue slicing, roadmap tradeoffs, or customer-value sequencing.

2026-07-1294

qa-lead

johnku2011/boilerplates-with-ai-skills

Use when acting as a startup QA lead for acceptance checks, release risk, regression focus, and verification evidence.

2026-07-1294

startup-goal

johnku2011/boilerplates-with-ai-skills

Use when coordinating a startup goal across CEO, CTO, product manager, engineering manager, founding engineer, and QA lead role subagents.

2026-07-1294

React Native Development (Expo)

Overview

Build mobile UI with Expo and React Native. Keep screens in components; extract testable logic into pure functions under src/.

Process

Prefer React Native core components and StyleSheet.create before adding UI libraries.

Keep App.tsx (or future screens) focused on layout and wiring; move non-trivial logic to pure helpers you can test with npm test.

Handle platform differences explicitly (Platform.OS, platform-specific files) instead of guessing runtime behavior.

Respect safe areas and accessibility: meaningful labels, tappable targets, sufficient contrast.

Verify with npm run typecheck and npm test before claiming completion.

Structure

Screens under app/ or src/screens/ (follow existing project layout).

Shared UI in small components; no mega-files.

Navigation: use Expo Router conventions if added later; document stack changes.

Testing Strategy

Unit tests for pure functions (formatting, validation, reducers) — required.

Component tests when logic is intertwined with rendering — optional in this starter; prefer extracting logic first.

Device/simulator for layout, gestures, and platform-specific UI — manual smoke test before release.

Guidelines

Do not block the JS thread with heavy sync work; defer or chunk large tasks.

Read secrets from environment at build time via Expo config — never hardcode API keys in source.

Adding native modules may require an Expo config plugin and a dev client build; document that before adding dependencies.

Test on at least one target (iOS simulator, Android emulator, or web) for UI changes; logic-only changes can rely on npm test.

Use project-security checks for auth tokens, deep links, and WebViews.

Anti-patterns

Copy-pasting web React patterns that assume DOM APIs.

Storing refresh tokens in AsyncStorage without encryption requirements documented.

Skipping tests because "it's just UI" while logic lives in the component.

name	react-native-development
description	Use when building screens, navigation, styling, or platform behavior in this Expo React Native app, to follow mobile-first conventions and keep logic testable.