一键在 Manus 中运行任何 Skill

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 仓库查看创作者相关仓库

下载

在 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

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.

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.