tjdrhs90/rn-launch-harness/rn-harness-design

Name: rn-harness-design
Author: tjdrhs90

Claude Code and agent skill by tjdrhs90/rn-launch-harness

Trust tier 2

community

LLM review pending

Source check pending

Checking that the SKILL.md file is still in the repository.

Phase 3 — Design system with NativeWind theme, colors, typography, and component specs.

Install

npx vskill@latest install tjdrhs90/rn-launch-harness/rn-harness-design

SKILL.md

rn-harness-design — Phase 3: 디자인 시스템

PRD를 기반으로 NativeWind 디자인 시스템을 설계한다.

Trigger

오케스트레이터에서 Phase 3으로 호출됨.

Input

docs/harness/plans/YYYY-MM-DD-prd.md (PRD)
docs/harness/references/ (있으면)

Process

Step 1: 브랜드 톤 결정

3가지 비주얼 방향 제안:

미니멀 — 깔끔, 여백, 모노톤
웜 — 따뜻한 색감, 라운드, 친근
볼드 — 강렬한 색상, 대비, 임팩트

AskUserQuestion으로 사용자 선택.

Step 2: 컬러 시스템

typescript

// 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 모드 모두 정의.

Step 3: 타이포그래피

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

Step 4: 컴포넌트 스펙

주요 컴포넌트 variant 정의:

Button: primary, secondary, outline, ghost / sm, md, lg
Card: default, elevated, outlined
Input: default, error, disabled / with icon
Typography: h1, h2, h3, body, caption, label
Badge: default, success, warning, error
Toast: success, error, info, warning

Step 5: 화면 레이아웃

각 주요 화면의 레이아웃 구조:

tsx

<SafeAreaView className="flex-1 bg-background">
  <Header />
  <ScrollView className="flex-1 px-4">
    {/* Content */}
  </ScrollView>
  {/* AdBanner는 SafeAreaView 안, 하단 */}
  <AdBanner />
</SafeAreaView>

Step 6: 광고 배치 디자인

AdMob 광고의 시각적 통합:

배너: 콘텐츠와 자연스럽게 어우러지는 배치
전면: 닫기 버튼 접근성 확보
리워드: 보상 안내 UI 디자인

Step 7: 4축 자체 평가

축	비중	목표	설명
Design Quality	30%	7/10+	일관성, 정체성
Originality	25%	6/10+	커스텀 결정, 템플릿 탈피
Craft	25%	7/10+	간격, 타이포, 대비
Functionality	20%	8/10+	사용성

Output

docs/harness/plans/YYYY-MM-DD-design.md:

markdown

# Design System
 
## 브랜드 톤
[선택된 톤 + 이유]
 
## 컬러 시스템
### Light Mode
### Dark Mode
 
## 타이포그래피
 
## 컴포넌트 스펙
### Button
### Card
### Input
### Typography
 
## 화면 레이아웃
### 홈
### 상세
### 프로필
 
## 광고 배치 디자인
 
## 자체 평가
| 축 | 점수 | 근거 |

추가로 파일 직접 수정:

tailwind.config.js — colors, fonts 확장
src/shared/config/theme.ts — 테마 토큰 정의

State Update

yaml

current_phase: contract
next_role: rn-harness-contract

HARD GATES

NativeWind className만 사용 (inline style 금지)
Light/Dark 모드 모두 정의
컬러 대비 4.5:1 이상
SafeAreaView 모든 화면에 필수
사용자 브랜드 톤 확인 필수

Security

Security scanPassed, 100 of 100Pattern checks on the skill's files.
Model reviewNot runA model review is scheduled for the next rescan.

See the full security report

Quality evaluation

Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

SKILL.md in the repositoryCheckingskills/rn-harness-design/SKILL.md

Popularity

7-day trend score: 0

Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

Claude Code
Cursor
GitHub Copilot
Windsurf
Codex
Gemini CLI
Cline
Amp
Roo Code
Goose
Continue
Kilo Code
Junie
Trae
OpenHands
Qwen Code
AI Agent
Tabnine Chat
Sourcegraph Cody
Amazon Q
Firebase Genkit
Sweep
Devin
Phind
Mentat
Claude Desktop
Aider
GPT Pilot
Plandex
bolt.new
v0
Replit Agent
Anse
TypingMind
BetterChatGPT
LibreChat
Warp AI
Pieces
Fig AI

Embed badge

[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/tjdrhs90/rn-launch-harness/rn-harness-design/badge)](https://verified-skill.com/skills/tjdrhs90/rn-launch-harness/rn-harness-design)

Something wrong with this skill or its page? Tell us.