create-claude-pipeline 0.1.0

package/template/.claude/skills/explore-design-system/SKILL.md

@@ -0,0 +1,150 @@
+---
+name: explore-design-system
+description: "디자이너 Agent가 디자인 명세(02_design_spec.md) 작성 전에 기존 프로젝트의 디자인 시스템을 파악할 때 사용하는 skill. 기존 색상 체계, 폰트, 컴포넌트, UI 라이브러리, CSS 변수, 테마 설정을 탐색해서 새 디자인이 기존 서비스와 일관성을 유지하도록 한다. 디자이너가 STEP 2(기존 디자인 시스템 파악)를 수행할 때, 코드베이스의 시각적 체계를 처음 접하는 상황에서, 또는 기존 디자인 시스템을 확장하는 작업을 할 때 반드시 사용한다."
+context: fork
+agent: Explore
+---
+
+# Explore Design System
+
+디자이너 Agent가 디자인 명세를 작성하기 전에 기존 프로젝트의 디자인 시스템 현황을 파악하는 skill이다.
+
+기존 프로젝트가 이미 색상, 폰트, 컴포넌트 등을 정의하고 있다면, 새 디자인 명세는 이를 따라야 한다. 이 skill은 코드베이스를 탐색해서 기존 체계를 발견하고, 디자이너가 일관된 명세를 작성할 수 있도록 현황을 정리한다.
+
+기존 프로젝트가 없는 경우(신규 프로젝트)에도 이 skill을 실행하되, "기존 디자인 시스템 없음 — 처음부터 정의 필요"라고 보고한다.
+
+---
+
+## 탐색 절차
+
+Explore agent를 사용하여 아래 항목들을 병렬로 탐색한다.
+
+### 1. UI 라이브러리 확인
+
+`package.json` (또는 프로젝트 의존성 파일)에서 UI 관련 라이브러리를 확인한다.
+
+찾을 키워드:
+- `tailwindcss`, `@tailwindcss/...`
+- `@shadcn/ui`, `shadcn`
+- `@mui/material`, `@mui/icons-material`
+- `antd`, `ant-design`
+- `@chakra-ui/react`
+- `@radix-ui/...`
+- `styled-components`, `@emotion/...`
+- `sass`, `less`
+- `bootstrap`, `react-bootstrap`
+
+라이브러리가 있으면 버전도 함께 기록한다. 어떤 라이브러리를 쓰는지에 따라 디자인 토큰 정의 방식이 달라진다.
+
+### 2. 테마 / 디자인 토큰 탐색
+
+아래 파일들을 찾는다:
+
+```
+Glob: **/tailwind.config.{js,ts,mjs,cjs}
+Glob: **/theme.{js,ts,tsx}
+Glob: **/tokens.{css,scss,js,ts,json}
+Glob: **/variables.{css,scss,less}
+Glob: **/globals.css, **/global.css, **/app.css
+Glob: **/_variables.scss, **/_tokens.scss
+```
+
+찾은 파일에서 추출할 정보:
+- **색상**: primary, secondary, accent, background, text 등
+- **폰트**: font-family, font-size 스케일
+- **간격**: spacing 스케일 (4px? 8px?)
+- **반경**: border-radius 값들
+- **그림자**: box-shadow 정의
+- **브레이크포인트**: 반응형 기준점
+
+### 3. 기존 컴포넌트 탐색
+
+공통/재사용 컴포넌트 폴더를 찾는다:
+
+```
+Glob: **/components/ui/**/*.{tsx,jsx,vue}
+Glob: **/components/common/**/*.{tsx,jsx,vue}
+Glob: **/components/shared/**/*.{tsx,jsx,vue}
+Glob: **/components/base/**/*.{tsx,jsx,vue}
+Glob: **/ui/**/*.{tsx,jsx,vue}
+```
+
+찾은 컴포넌트 각각에 대해:
+- 컴포넌트명
+- Props 인터페이스 (있으면)
+- 크기 변형 (sm/md/lg)이 있는지
+- 상태 변형 (variant, color 등)이 있는지
+
+### 4. 아이콘 / 에셋 확인
+
+```
+Glob: **/icons/**/*.{svg,tsx}
+Glob: **/assets/**/*.{svg,png}
+Glob: **/public/images/**/*
+```
+
+아이콘 라이브러리 사용 여부도 확인한다 (`lucide-react`, `react-icons`, `heroicons` 등).
+
+---
+
+## 출력 형식
+
+탐색 결과를 아래 형식으로 정리하여 반환한다:
+
+```markdown
+# 기존 디자인 시스템 현황
+
+## UI 라이브러리
+- (없음 / shadcn@버전 / MUI@버전 / Tailwind@버전 등)
+- CSS 방법론: (CSS Modules / Tailwind utility / styled-components / etc.)
+
+## 기존 색상 체계
+- Primary: #...
+- Secondary: #...
+- (없으면 "정의되지 않음 — 새로 정의 필요")
+
+## 기존 타이포그래피
+- Font Family: ...
+- Size 스케일: ...
+- (없으면 "정의되지 않음")
+
+## 기존 간격 / 반경 / 그림자
+- Spacing 단위: ...
+- Border Radius: ...
+- (없으면 "정의되지 않음")
+
+## 기존 컴포넌트 목록
+| 컴포넌트명 | 경로 | Props/변형 | 비고 |
+|-----------|------|-----------|------|
+| Button | components/ui/Button.tsx | size, variant | 재사용 가능 |
+
+## 재사용 가능한 것
+- (기존 것을 그대로 쓸 수 있는 컴포넌트/토큰 목록)
+
+## 새로 만들어야 할 것
+- (기획안 기준으로 기존에 없는 컴포넌트/토큰 목록)
+
+## 디자이너 참고사항
+- (기존 체계와 충돌할 수 있는 부분, 주의할 점)
+```
+
+---
+
+## 신규 프로젝트인 경우
+
+탐색 결과 디자인 시스템 관련 파일이 전혀 없으면:
+
+```markdown
+# 기존 디자인 시스템 현황
+
+기존 디자인 시스템 없음 — 처음부터 정의 필요.
+
+## 감지된 기술 스택
+- (package.json 기반 프레임워크: React/Vue/Next.js 등)
+
+## 권장사항
+- CSS 방법론: (프레임워크에 따라 Tailwind / CSS Modules 등 제안)
+- 컴포넌트 라이브러리: (필요 시 shadcn / Radix 등 제안)
+```
+
+이 경우 디자이너는 디자인 토큰과 컴포넌트를 모두 새로 정의한다.

package/template/.claude/skills/explore-fe-codebase/SKILL.md

@@ -0,0 +1,209 @@
+---
+name: explore-fe-codebase
+description: "FE Agent가 구현 시작 전에 기존 프론트엔드 코드 구조를 파악할 때 사용하는 skill. 프레임워크, 폴더 구조, 라우터, 상태 관리, API 클라이언트, 스타일링, 기존 컴포넌트를 탐색해서 기존 패턴과 일관된 구현이 가능하게 한다. FE Agent가 04_task_FE.md를 받고 구현에 착수하기 전, 코드베이스를 처음 접하는 상황, 또는 기존 FE 코드에 새 기능을 추가할 때 반드시 사용한다."
+context: fork
+agent: Explore
+---
+
+# Explore FE Codebase
+
+FE Agent가 구현을 시작하기 전에 기존 프론트엔드 코드의 구조와 패턴을 파악하는 skill이다.
+
+기존 프로젝트에 코드를 추가할 때, 기존 패턴과 다른 방식으로 구현하면 코드베이스가 일관성을 잃는다. 이 skill은 기존 코드를 탐색해서 "이 프로젝트에서는 이렇게 한다"를 파악하고, FE Agent가 동일한 패턴으로 구현할 수 있도록 현황을 정리한다.
+
+신규 프로젝트(기존 코드 없음)의 경우에도 실행하되, "기존 FE 코드 없음 — 처음부터 구현"으로 보고한다.
+
+---
+
+## 탐색 절차
+
+Explore agent를 사용하여 아래 항목들을 순서대로 탐색한다.
+
+### 1. 의존성 파악
+
+`package.json`을 읽어서 프레임워크와 주요 라이브러리를 파악한다.
+
+```
+Glob: **/package.json
+```
+
+확인할 항목:
+
+| 카테고리 | 찾을 패키지 |
+|---------|-----------|
+| 프레임워크 | `next`, `react`, `vue`, `nuxt`, `svelte`, `angular` |
+| 상태 관리 | `zustand`, `@reduxjs/toolkit`, `redux`, `recoil`, `jotai`, `valtio`, `pinia` |
+| API/데이터 | `@tanstack/react-query`, `swr`, `axios`, `ky`, `@trpc/client`, `@apollo/client` |
+| 스타일링 | `tailwindcss`, `styled-components`, `@emotion/react`, `sass`, `@vanilla-extract/css` |
+| UI 라이브러리 | `@shadcn/ui`, `@mui/material`, `antd`, `@chakra-ui/react`, `@radix-ui/*` |
+| 폼 | `react-hook-form`, `formik`, `zod`, `yup` |
+| 인증 | `next-auth`, `@auth/core`, `firebase` |
+| 테스트 | `vitest`, `jest`, `@testing-library/react`, `cypress`, `playwright` |
+
+버전도 함께 기록한다 — 메이저 버전에 따라 API가 다를 수 있다.
+
+### 2. 폴더 구조 파악
+
+프로젝트의 디렉토리 레이아웃을 파악한다.
+
+```
+Glob: src/**/*
+Glob: app/**/*
+Glob: pages/**/*
+Glob: components/**/*
+```
+
+확인할 패턴:
+
+| 패턴 | 의미 |
+|------|------|
+| `app/` 폴더 존재 | Next.js App Router |
+| `pages/` 폴더 존재 | Next.js Pages Router / Nuxt |
+| `src/components/` | 컴포넌트 디렉토리 |
+| `src/hooks/` | 커스텀 훅 |
+| `src/lib/` 또는 `src/utils/` | 유틸리티/헬퍼 |
+| `src/types/` | 타입 정의 |
+| `src/store/` 또는 `src/stores/` | 상태 관리 |
+| `src/services/` 또는 `src/api/` | API 레이어 |
+
+### 3. 라우터 설정
+
+라우팅 구조를 파악한다.
+
+```
+Glob: app/**/page.{tsx,jsx,vue}
+Glob: app/**/layout.{tsx,jsx,vue}
+Glob: pages/**/*.{tsx,jsx,vue}
+Glob: src/router/**/*
+Grep: createBrowserRouter|createRouter|useRouter
+```
+
+기존 경로 목록과 레이아웃 계층 구조를 파악한다.
+
+### 4. 상태 관리 설정
+
+```
+Glob: src/store/**/*
+Glob: src/stores/**/*
+Glob: src/context/**/*
+Glob: src/providers/**/*
+Grep: create(Store|Slice|Context)|defineStore|atom\(
+```
+
+확인할 것:
+- 전역 상태 관리 방식 (Zustand store / Redux slice / Context 등)
+- 기존 store 목록과 각각의 역할
+- 서버 상태 vs 클라이언트 상태 분리 패턴
+
+### 5. API 클라이언트 설정
+
+```
+Glob: src/lib/api*
+Glob: src/utils/axios*
+Glob: src/utils/fetch*
+Glob: src/services/**/*
+Grep: axios\.create|createClient|baseURL|fetcher
+```
+
+확인할 것:
+- HTTP 클라이언트 (axios / fetch / ky 등)
+- base URL 설정 방식
+- 인증 토큰 주입 방식 (interceptor / header)
+- 에러 핸들링 패턴
+- React Query / SWR 사용 시 query key 컨벤션
+
+### 6. 기존 컴포넌트 목록
+
+```
+Glob: src/components/**/*.{tsx,jsx,vue}
+Glob: components/**/*.{tsx,jsx,vue}
+```
+
+각 컴포넌트에 대해:
+- 컴포넌트명
+- Props 인터페이스 (있으면)
+- 어디서 사용되는지 (import 추적)
+
+---
+
+## 출력 형식
+
+탐색 결과를 아래 형식으로 정리하여 반환한다:
+
+```markdown
+# 기존 FE 코드 현황
+
+## 기술 스택
+
+| 카테고리 | 사용 기술 | 버전 |
+|---------|---------|------|
+| 프레임워크 | Next.js (App Router) | 14.x |
+| 상태 관리 | Zustand | 4.x |
+| API 클라이언트 | React Query + axios | 5.x / 1.x |
+| 스타일링 | Tailwind CSS | 3.x |
+| UI 라이브러리 | shadcn/ui | - |
+| 폼 | react-hook-form + zod | 7.x / 3.x |
+| 테스트 | Vitest + Testing Library | 1.x |
+
+## 폴더 구조
+
+(실제 디렉토리 트리)
+
+## 라우팅 구조
+
+| 경로 | 페이지 | 레이아웃 |
+|------|--------|---------|
+| / | app/page.tsx | app/layout.tsx |
+| /login | app/login/page.tsx | (root) |
+
+## 상태 관리
+
+| Store/Context | 역할 | 파일 |
+|---------------|------|------|
+| useAuthStore | 인증 상태 | src/store/auth.ts |
+
+## API 패턴
+
+- 클라이언트: axios (baseURL: /api)
+- 인증: Authorization header (Bearer token)
+- 서버 상태: React Query (queryKey: ['resource', id])
+- 에러: interceptor에서 401 → 로그인 리다이렉트
+
+## 기존 컴포넌트 — 재사용 가능
+
+| 컴포넌트 | 경로 | 용도 |
+|---------|------|------|
+| Button | components/ui/Button.tsx | 범용 버튼 |
+| Input | components/ui/Input.tsx | 폼 입력 |
+
+## 새로 만들어야 할 것
+
+(기획안/디자인 명세 기준으로 기존에 없는 컴포넌트/페이지)
+
+## 주의사항
+
+- (기존 패턴과 충돌 가능성, 따라야 할 컨벤션, 주의할 점)
+- 예: "기존 코드는 모두 default export 사용 — named export로 바꾸지 말 것"
+- 예: "API 호출은 반드시 services/ 폴더의 함수를 통해 — 컴포넌트에서 직접 axios 호출하지 말 것"
+```
+
+---
+
+## 신규 프로젝트인 경우
+
+FE 관련 파일이 전혀 없으면:
+
+```markdown
+# 기존 FE 코드 현황
+
+기존 FE 코드 없음 — 처음부터 구현.
+
+## 프로젝트 설정 감지
+
+- package.json: (있음/없음)
+- 감지된 기술: (있으면 나열)
+
+## 권장사항
+
+(04_task_FE.md의 기술 스택 지시에 따름)
+```

package/template/.claude/skills/explore-implementation/SKILL.md

@@ -0,0 +1,147 @@
+---
+name: explore-implementation
+description: "QA 엔지니어가 테스트 케이스 작성 전에 FE/BE 구현 현황을 파악할 때 사용하는 skill. 구현된 페이지, API 엔드포인트, 라우터 경로를 탐색하고 기획안(01_plan.md)과 대비하여 미구현 항목을 찾는다. QA Agent가 04_task_QA.md를 받고 검증에 착수하기 전, 구현물을 처음 접하는 상황, 또는 테스트 범위를 결정해야 할 때 반드시 사용한다. '구현 현황 파악', '테스트 대상 파악', '뭐가 구현됐는지 확인', 'QA 시작 전 탐색' 등의 상황에서 트리거된다."
+context: fork
+agent: Explore
+---
+
+# Explore Implementation
+
+QA 엔지니어가 테스트를 시작하기 전에 실제 구현된 코드를 파악하는 skill이다.
+
+QA는 기획안에 적힌 것이 아니라 실제로 구현된 것을 테스트해야 한다. 기획안에는 있지만 아직 구현되지 않은 기능을 테스트하려고 하면 시간이 낭비되고, 구현됐는데 기획안에 없는 기능은 검증에서 빠질 수 있다. 이 skill은 코드를 직접 탐색해서 "지금 테스트할 수 있는 것"의 정확한 목록을 만든다.
+
+---
+
+## 탐색 절차
+
+Explore agent를 사용하여 아래 항목들을 탐색한다.
+
+### 1. FE 구현 현황
+
+#### 1-1. 구현된 페이지 목록
+
+라우터 설정 파일에서 실제 등록된 경로를 확인한다.
+
+```
+Glob: **/app/**/page.tsx, **/app/**/page.jsx
+Glob: **/pages/**/*.tsx, **/pages/**/*.jsx
+Grep: "path:" 또는 "Route" — 라우터 설정 파일에서
+```
+
+각 페이지에 대해 기록한다:
+- URL 경로 (예: `/orders`, `/orders/:id`)
+- 페이지 역할 (파일명과 컴포넌트 내용으로 추론)
+- 동적 라우트 여부 (`[id]`, `:id` 등)
+
+#### 1-2. 구현된 컴포넌트 목록
+
+```
+Glob: **/components/**/*.tsx, **/components/**/*.jsx
+```
+
+기능별로 그룹핑한다:
+- 공통 UI 컴포넌트 (`components/ui/`)
+- 기능별 컴포넌트 (`components/[feature]/`)
+
+#### 1-3. FE 상태 처리 확인
+
+각 데이터 의존 컴포넌트가 4상태(Loading, Error, Empty, Success)를 처리하는지 간략히 확인한다.
+
+```
+Grep: "isLoading|isError|error|Skeleton|EmptyState|ErrorMessage"
+```
+
+처리가 누락된 컴포넌트가 있으면 "테스트 시 주의사항"에 기록한다.
+
+### 2. BE 구현 현황
+
+#### 2-1. 구현된 API 엔드포인트 목록
+
+라우터 파일에서 등록된 엔드포인트를 확인한다.
+
+```
+Glob: **/routes/**/*.ts, **/routes/**/*.js
+Grep: "router\.(get|post|put|patch|delete)" — 라우터 파일에서
+Grep: "app\.(get|post|put|patch|delete)" — app 설정 파일에서
+```
+
+각 엔드포인트에 대해 기록한다:
+- HTTP 메서드 + 경로 (예: `GET /api/orders`)
+- 미들웨어 (인증 필요 여부)
+- 입력 검증 존재 여부 (Zod 스키마 등)
+
+#### 2-2. 에러 처리 패턴
+
+```
+Grep: "AppError|NotFoundError|BusinessError" — errors/ 디렉토리에서
+Glob: **/middleware/errorHandler*
+```
+
+어떤 에러 코드가 정의되어 있는지 확인한다. QA가 에러 시나리오를 테스트할 때 기대할 수 있는 응답을 파악하기 위함이다.
+
+#### 2-3. DB 모델/스키마
+
+```
+Glob: **/prisma/schema.prisma
+Glob: **/models/**/*.ts
+Glob: **/entities/**/*.ts
+```
+
+어떤 데이터 모델이 존재하는지, 필수 필드는 무엇인지 파악한다. 입력값 경계 테스트에 필요하다.
+
+### 3. 환경 설정
+
+```
+Glob: **/.env.example, **/.env.local.example
+```
+
+설정해야 하는 환경변수 목록을 확인한다. API URL, DB 연결 등 테스트 환경 구성에 필요하다.
+
+### 4. 기획안 대비 검증
+
+`context/01_plan.md`가 존재하면 읽어서, 기획안에 명시된 기능/화면/API와 실제 구현을 대조한다.
+
+비교 관점:
+- 기획안에 있지만 구현에서 찾을 수 없는 항목 → **미구현 의심**
+- 구현에 있지만 기획안에 없는 항목 → **기획 외 추가 구현** (확인 필요)
+- 기획안에 명시된 엣지케이스 중 코드에서 처리가 보이지 않는 것 → **테스트 시 주의**
+
+`context/01_plan.md`가 없으면 이 단계를 건너뛰고, "기획안 없음 — 코드 기반으로만 분석"으로 보고한다.
+
+---
+
+## 출력 형식
+
+탐색 결과를 아래 형식으로 정리하여 반환한다.
+
+```
+## 구현 현황
+
+### FE 화면 (N개)
+| # | URL 경로 | 페이지 역할 | 동적 라우트 |
+|---|---------|-----------|-----------|
+| 1 | /orders | 주문 목록 | X |
+| 2 | /orders/[id] | 주문 상세 | O |
+| ... | | | |
+
+### BE API (N개)
+| # | 메서드 | 경로 | 인증 | 검증 |
+|---|-------|------|------|------|
+| 1 | GET | /api/orders | O | X |
+| 2 | POST | /api/orders | O | Zod |
+| ... | | | | |
+
+### 기획안 대비
+- 미구현 의심 항목: (있으면 나열, 없으면 "없음")
+- 기획 외 추가 구현: (있으면 나열, 없으면 "없음")
+
+### 테스트 시 주의사항
+- (4상태 처리 누락 컴포넌트, 검증 없는 API, 에러 처리 누락 등)
+- (환경변수 설정 필요 사항)
+
+### 환경 설정
+- 필요한 환경변수: (목록)
+```
+
+테이블이 길어지면 기능 단위로 그룹핑한다 (예: 주문 관련, 유저 관련).