원클릭으로 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

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.