Menu
Phase 3 — Design system with NativeWind theme, colors, typography, and component specs.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
Phase 7 — Smart AdMob ad placement analysis and integration. Guides user through manual ad unit creation.
Phase 5 — Build the React Native + Expo app in 3 sub-phases (scaffold, API, UI). Self-evaluates before handoff.
Phase 7.5 — Human acceptance gate before store build. Runs an automated Maestro E2E smoke test on a real simulator/emulator, then PAUSES for the user to run the app themselves and explicitly approve before any EAS/local build or store submission.
React Native app launch harness — from market research to App Store & Google Play submission. One command takes you from idea to store review.
Phase 8 (EAS-free alternative) — Build & deploy without EAS. For users whose EAS free-plan project slots are full. Local Gradle (Android AAB) + Xcode/fastlane (iOS IPA), self-hosted OTA, then submit via Google Play API + fastlane/Transporter.
Phase 8 — EAS Build for iOS and Android, plus EAS Update (OTA) configuration.
| name | rn-harness-design |
| description | Phase 3 — Design system with NativeWind theme, colors, typography, and component specs. |
| allowed-tools | ["Read","Write","Edit","Bash","Glob","Grep","AskUserQuestion"] |
PRD를 기반으로 NativeWind 디자인 시스템을 설계한다.
오케스트레이터에서 Phase 3으로 호출됨.
docs/harness/plans/YYYY-MM-DD-prd.md (PRD)docs/harness/references/ (있으면)3가지 비주얼 방향 제안:
AskUserQuestion으로 사용자 선택.
// tailwind.config.js colors 확장
colors: {
primary: {
50: '#...',
100: '#...',
// ... 900
DEFAULT: '#...',
},
secondary: { ... },
// Semantic colors
success: '#...',
warning: '#...',
error: '#...',
info: '#...',
// Background
background: '#...',
surface: '#...',
// Text
text: {
primary: '#...',
secondary: '#...',
disabled: '#...',
},
}
Light/Dark 모드 모두 정의.
Heading 1: 28px / Bold / line-height 36
Heading 2: 24px / Semibold / line-height 32
Heading 3: 20px / Semibold / line-height 28
Body: 16px / Regular / line-height 24
Caption: 12px / Regular / line-height 16
Label: 14px / Medium / line-height 20
주요 컴포넌트 variant 정의:
각 주요 화면의 레이아웃 구조:
<SafeAreaView className="flex-1 bg-background">
<Header />
<ScrollView className="flex-1 px-4">
{/* Content */}
</ScrollView>
{/* AdBanner는 SafeAreaView 안, 하단 */}
<AdBanner />
</SafeAreaView>
AdMob 광고의 시각적 통합:
| 축 | 비중 | 목표 | 설명 |
|---|---|---|---|
| Design Quality | 30% | 7/10+ | 일관성, 정체성 |
| Originality | 25% | 6/10+ | 커스텀 결정, 템플릿 탈피 |
| Craft | 25% | 7/10+ | 간격, 타이포, 대비 |
| Functionality | 20% | 8/10+ | 사용성 |
docs/harness/plans/YYYY-MM-DD-design.md:
# Design System
## 브랜드 톤
[선택된 톤 + 이유]
## 컬러 시스템
### Light Mode
### Dark Mode
## 타이포그래피
## 컴포넌트 스펙
### Button
### Card
### Input
### Typography
## 화면 레이아웃
### 홈
### 상세
### 프로필
## 광고 배치 디자인
## 자체 평가
| 축 | 점수 | 근거 |
추가로 파일 직접 수정:
tailwind.config.js — colors, fonts 확장src/shared/config/theme.ts — 테마 토큰 정의current_phase: contract
next_role: rn-harness-contract