From fe-rail
React / Next.js / Vite SPA + TypeScript 프로젝트의 프론트엔드 컴포넌트와 페이지를 구현합니다. Use when: feature.md 또는 스펙이 승인된 후 구현 시작할 때, 컴포넌트 작성, 페이지 개발. Do NOT load for: 스펙 작성, 코드 리뷰, 버그 분석.
How this skill is triggered — by the user, by Claude, or both
Slash command
/fe-rail:fe-buildThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
승인된 스펙을 기반으로 React/Next.js + Vite SPA + TypeScript 코드를 구현합니다.
승인된 스펙을 기반으로 React/Next.js + Vite SPA + TypeScript 코드를 구현합니다.
feature.md 또는 스펙 문서가 승인된 직후구현 시작 전 반드시 확인:
feature.md 또는 스펙 문서가 존재하고 승인됐는가?코드베이스 탐색은 직접 하지 않고 에이전트에 위임한다:
| 상황 | 위임 에이전트 |
|---|---|
| 3쿼리 이상의 파일·심볼 탐색 필요 | fe-explorer — 요약만 반환, 컨텍스트 보호 |
| 테스트 코드 생성 (BDD/TDD) | fe-test-author — 시나리오 도출 + 파일 작성 |
| tsc·린터(ESLint/Biome) 오류 수정 | fe-build-fixer — 최소 diff 오류 제거 |
반드시 이 순서를 지킵니다:
1. 타입 정의 먼저 (types/ 또는 컴포넌트 상단)
2. 비즈니스 로직 분리 (커스텀 훅)
3. 컴포넌트 구현 (UI만 담당, 로직은 분리된 레이어에서)
4. 테스트 작성 (Vitest + RTL)
5. 타입체크 확인 (tsc --noEmit)
타입
// ✅ Good
interface CampaignListProps {
campaigns: Campaign[];
onSelect: (id: string) => void;
}
// ❌ Bad - any 금지
const handleData = (data: any) => {}
데이터 fetch
// ✅ Good - TanStack Query
const { data, isLoading, error } = useQuery({
queryKey: ['campaigns'],
queryFn: fetchCampaigns,
})
// ❌ Bad - useEffect fetch 금지
useEffect(() => {
fetch('/api/campaigns').then(...)
}, [])
컴포넌트 구조
// ✅ Good - 로직은 훅으로 분리
function CampaignList() {
const { campaigns, isLoading } = useCampaigns()
return <Table data={campaigns} />
}
// ❌ Bad - 컴포넌트에 비즈니스 로직 직접 작성
function CampaignList() {
const [campaigns, setCampaigns] = useState([])
const filtered = campaigns.filter(c => c.status === 'active')
// ... 복잡한 로직들
}
UI 컴포넌트 기준
cn() (clsx + tailwind-merge) 사용 — 문자열 직접 조합 금지`bg-${color}-500`) 금지 — 정적 매핑 사용구현 완료 후 반드시 실행:
# PM 감지 (PX=바이너리 실행, npm일 때 npx / PM=스크립트 실행)
PM="npm"; PX="npx"
[ -f "pnpm-lock.yaml" ] && PM="pnpm" && PX="pnpm"
[ -f "yarn.lock" ] && PM="yarn" && PX="yarn"
[ -f "bun.lockb" ] && PM="bun" && PX="bun"
$PX tsc --noEmit # 타입 에러 확인 (tsc는 바이너리)
$PM lint # 린트 확인 (npm 스크립트)
$PM test --run # 테스트 실행 (npm 스크립트)
성공 출력은 침묵, 실패만 보고합니다.
npx claudepluginhub sh5623/fe-rail --plugin fe-railCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.