fe-build

FE Build 스킬

승인된 스펙을 기반으로 React/Next.js + Vite SPA + TypeScript 코드를 구현합니다.

When to Use

• feature.md 또는 스펙 문서가 승인된 직후
• 컴포넌트/페이지/훅 신규 개발
• 기존 컴포넌트 기능 추가

Instructions

Phase 1 — 사전 확인 + 에이전트 위임

구현 시작 전 반드시 확인:

1. feature.md 또는 스펙 문서가 존재하고 승인됐는가?
2. 기술 스택 확인 (package.json 참조)
3. 레포의 정전(canonical) 모범 파일을 먼저 읽고 그 shape 를 복사한다 — 신규 코드는 이 스킬의 산문 예시가 아니라 소비자 레포의 실제 패턴을 1차 소스로 따른다. 데이터 계층은 src/features/*/api.ts(쿼리/뮤테이션 형태)·src/lib/query-keys.ts(키 팩토리)·src/lib/api/client.ts(타입드 클라이언트·인터셉터)를, UI 는 src/components/ui/*(shadcn 프리미티브)를 grep·Read 해 동일 컨벤션으로 작성한다. 해당 파일이 없으면 이 스킬의 예시를 폴백으로.
4. 프레임워크 규칙 로드 — 이 스킬이 로드될 때 주어진 base directory 기준 ../../docs/framework-rules.md 를 Read 한다. 전문(약 570줄)을 통째로 넣지 않는다: grep -n "^## " <파일> 로 절 위치를 잡고 «공통 규칙» 절 + 감지한 프레임워크 절(Next.js App Router / Vite + React SPA)만 offset·limit 으로 읽는다. 워크스페이스(pnpm-workspace.yaml·package.json workspaces·turbo.json)가 있으면 ../../docs/monorepo.md 도 읽는다. 소비자 프로젝트 CLAUDE.md 의 규칙이 항상 우선하고 이 파일은 프레임워크별 보조 레퍼런스다. 아래 에이전트에 위임할 때 그 절대경로를 브리프에 함께 넘긴다 — 에이전트는 플러그인 트리 위치를 모르고, 이 레포의 CLAUDE.md 가 @import 하는 것은 소비자 세션에 닿지 않는다.

코드베이스 탐색은 직접 하지 않고 에이전트에 위임한다:

상황	위임 에이전트
3쿼리 이상의 파일·심볼 탐색 필요	fe-explorer — 요약만 반환, 컨텍스트 보호
테스트 코드 생성 (BDD/TDD)	fe-test-author — 시나리오 도출 + 파일 작성
tsc·린터(ESLint/Biome) 오류 수정	fe-build-fixer — 최소 diff 오류 제거

Phase 2 — 구현 순서

반드시 이 순서를 지킵니다:

1. 타입 정의 먼저 (types/ 또는 컴포넌트 상단)
2. 비즈니스 로직 분리 (커스텀 훅)
3. 컴포넌트 구현 (UI만 담당, 로직은 분리된 레이어에서)
4. 테스트 작성 (Vitest + RTL)
5. 타입체크 확인 (tsc --noEmit)

Phase 3 — 코딩 규칙

타입

// ✅ Good
interface CampaignListProps {
  campaigns: Campaign[];
  onSelect: (id: string) => void;
}

// ❌ Bad - any 금지
const handleData = (data: any) => {}

데이터 fetch

// ✅ Good - TanStack Query + 중앙 키 팩토리 (인라인 ad-hoc 키 금지)
const { data, isPending, isError } = useQuery({
  queryKey: queryKeys.campaigns.list(params),
  queryFn: () => fetchCampaigns(params),
})

// 생성 API 클라이언트(openapi-fetch) 감지 시 — 자체 백엔드는 타입드 클라이언트 경유:
//   queryFn: async () => { const { data, error } = await api.GET('/campaigns'); if (error) throw ...; return data }

// ❌ Bad - useEffect fetch / 인라인 ad-hoc 키(`['campaigns']`) / 스키마를 as any 로 무마
useEffect(() => {
  fetch('/api/campaigns').then(...)
}, [])