메뉴
앱 디자인 시스템을 설계하고 NativeWind/Tailwind 코드로 구현하는 스킬. 컬러 팔레트, 타이포그래피, 컴포넌트 variant, 화면 레이아웃을 정의하고 tailwind.config.js와 theme.ts를 실제로 업데이트한다. '디자인 해줘', '디자인 시스템 만들어줘', '색상 팔레트', 'UI 설계', '화면 디자인' 요청 시 반드시 이 스킬을 사용할 것.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Drive iOS Simulator and Android emulator/device screens for AI agents. Use when asked to automate a simulator or emulator, tap/swipe/type on a device, describe UI, take a screenshot, or interact with a mobile app.
구현된 앱의 기능, UX, 디자인을 종합 검수하는 스킬. PRD 대비 기능 완성도, 화면 흐름, 디자인 가이드라인 준수, 접근성, 엣지 케이스를 점검한다. '앱 검수', '기능 점검', 'UX 검토', '디자인 QA', '출시 전 점검' 요청 시 반드시 이 스킬을 사용할 것.
React Native + Expo + FSD 앱의 전체 라이프사이클(아이디어→기획→스펙→디자인→구현→QA→배포)을 10개 에이전트·9개 스킬로 오케스트레이션하는 일회성 빌드 파이프라인. '앱 만들어줘', '풀스택으로 만들어줘', '프로덕션 앱 만들어줘', 'end-to-end 개발', '처음부터 끝까지 만들어줘' 요청 시 반드시 이 스킬을 사용할 것. (출시 후 반복 개선은 /iterate-app)
출시/1차 구현 완료 후 앱을 지속적으로 고도화하는 루프 스킬. 현황 진단 → 다음 고도화 추천(데이터 기반 랭킹) → 한 슬라이스 개발 → 검증 → 다음 추천을 반복한다. 전체 파이프라인을 재실행하지 않는다. '다음 뭐 만들지', '고도화해줘', '개선 루프', '기능 추가 우선순위', 'iterate', '다음 스프린트 돌려줘' 요청 시 반드시 이 스킬을 사용할 것.
FSD entity(도메인 모델) 레이어에 새 엔티티(api/store/types/index)를 생성하는 스킬. '엔티티 만들어줘', 'entity 추가', '도메인 모델 추가' 요청 시 반드시 이 스킬을 사용할 것.
FSD 아키텍처 규칙에 따라 새 feature 모듈(api/hooks/store/types/ui/index)을 스캐폴딩하는 스킬. barrel export·타입 프리픽스·레이어 의존성을 강제한다. '피처 만들어줘', 'feature 추가해줘', '새 기능 만들어줘' 요청 시 반드시 이 스킬을 사용할 것.
| name | design-system |
| description | 앱 디자인 시스템을 설계하고 NativeWind/Tailwind 코드로 구현하는 스킬. 컬러 팔레트, 타이포그래피, 컴포넌트 variant, 화면 레이아웃을 정의하고 tailwind.config.js와 theme.ts를 실제로 업데이트한다. '디자인 해줘', '디자인 시스템 만들어줘', '색상 팔레트', 'UI 설계', '화면 디자인' 요청 시 반드시 이 스킬을 사용할 것. |
앱 컨셉에 맞는 디자인 시스템을 설계하고 NativeWind 코드로 구현하는 스킬.
_workspace/plan/prd.md)디자인 시스템을 정의하기 전에 NativeWind가 올바르게 설정되었는지 검증한다.
이 설정이 누락되면 className이 전혀 작동하지 않아 모든 디자인 작업이 무의미하다.
검증 항목 (모두 PASS 필수):
1. babel.config.js
- presets에 ['babel-preset-expo', { jsxImportSource: 'nativewind' }] 존재 여부
- presets에 'nativewind/babel' 존재 여부
2. metro.config.js
- withNativeWind(config, { input: './global.css' }) 래핑 여부
3. tailwind.config.js
- presets: [require('nativewind/preset')] 존재 여부
- content에 app/, src/ 경로 포함 여부
4. global.css
- @tailwind base; @tailwind components; @tailwind utilities; 존재 여부
5. 루트 _layout.tsx
- import '../global.css'; 존재 여부
6. nativewind-env.d.ts
- /// <reference types="nativewind/types" /> 존재 여부
npx expo start -c)tailwind.config.js의 colors 섹션에 반영tailwind.config.js의 fontSize 섹션에 반영src/shared/ui/의 기존 컴포넌트 확인tailwind.config.js 업데이트src/shared/config/theme.ts 업데이트_workspace/design/design-system.md에 전체 디자인 시스템 문서 저장| Step | Agent |
|---|---|
| 1-6 | design-architect |