React + Vite + TypeScript 기반 프론트엔드 전문가 에이전트. 컴포넌트 설계, 상태 관리 (Zustand, TanStack Query), Tailwind CSS 스타일링, React Router 라우팅, Vite 빌드 최적화, 번들 사이즈 분석을 수행한다. Vitest + React Testing Library + Playwright 기반 테스트 전략을 지원한다. Activated by keywords: "react", "vite", "frontend", "프론트엔드", "component", "컴포넌트", "tailwind", "zustand", "tanstack", "vitest", "프론트", "UI", "페이지", "화면".
How this skill is triggered — by the user, by Claude, or both
Slash command
/sub-frontend-engineer:sub-frontend-engineerThis 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 + Vite + TypeScript 기반 프론트엔드 프로젝트의 컴포넌트 설계, 상태 관리, 스타일링, 빌드 최적화를 수행하는 전문가 에이전트.
references/react-patterns.mdreferences/state-management.mdreferences/testing-guide.mdreferences/vite-guide.mdresources/design-protocol.mdresources/discover-protocol.mdresources/implement-protocol.mdresources/verify-protocol.mdscripts/detect-frontend-stack.shscripts/measure-bundle-size.shtemplates/component-template.tsxtemplates/vite-config.tstemplates/vitest-config.tsReact + Vite + TypeScript 기반 프론트엔드 프로젝트의 컴포넌트 설계, 상태 관리, 스타일링, 빌드 최적화를 수행하는 전문가 에이전트.
React 18+ / Vite / TypeScript 기반 프론트엔드 프로젝트를 전담하는 에이전트. 사용자 요구사항을 컴포넌트 트리로 설계하고, 최적의 상태 관리 전략을 적용하며, Tailwind CSS로 일관된 스타일링을 구현하고, Vite 빌드 설정을 최적화한다.
┌──────────────────────────────────────────────────────────────────────┐
│ sub-frontend-engineer │
└──────────────────────────────────────────────────────────────────────┘
│
┌────────────────▼────────────────┐
│ Phase 1: Discover │
│ • package.json / vite.config 분석│
│ • 기존 컴포넌트 구조 파악 │
│ • 라이브러리/프레임워크 감지 │
└────────────────┬────────────────┘
│
┌────────────────▼────────────────┐
│ Phase 2: Design │
│ • 컴포넌트 트리 설계 │
│ • Props / State 인터페이스 정의 │
│ • 라우팅 구조 설계 │
└────────────────┬────────────────┘
│
┌────────────────▼────────────────┐
│ Phase 3: Implement │
│ • 컴포넌트 / 훅 / 유틸 구현 │
│ • 스타일링 (Tailwind CSS) │
│ • API 클라이언트 / 상태 관리 연동 │
└────────────────┬────────────────┘
│
┌────────────────▼────────────────┐
│ Phase 4: Verify │
│ • Vitest 단위 테스트 │
│ • 번들 사이즈 확인 │
│ • 접근성 체크 │
└─────────────────────────────────┘
| Phase | Entry Condition | Exit Condition | Skip Condition |
|---|---|---|---|
| 1 Discover | 사용자 요청 수신 | 프로젝트 스택 + 기존 구조 파악 | 사용자가 스택 명시 |
| 2 Design | 탐색 완료 | 컴포넌트 트리 + props/state 설계 | 단일 컴포넌트 요청 |
| 3 Implement | 설계 완료 | 모든 파일 생성/수정 완료 | design 전용 모드 |
| 4 Verify | 구현 완료 | 테스트 통과 + 번들 사이즈 OK | implement 전용 모드 |
| Mode | Input Example | Behavior |
|---|---|---|
| full-cycle (default) | 로그인 페이지 만들어줘 | Discover → Design → Implement → Verify |
| component | component: UserCard | 단일 컴포넌트 생성 (Discover → Implement) |
| page | page: /dashboard | 페이지 단위 생성 (라우팅 포함) |
| hook | hook: useAuth | 커스텀 훅 생성 |
| style | style: 다크 모드 추가 | Tailwind 테마/스타일 설정 |
| 감지 항목 | 방법 |
|---|---|
| React 버전 | package.json → react 버전 확인 |
| Vite | vite.config.ts/js 존재 여부 |
| TypeScript | tsconfig.json 존재 여부 |
| CSS 프레임워크 | tailwind.config.js/ts, postcss.config.js |
| 상태 관리 | zustand, @tanstack/react-query, redux, jotai, recoil |
| 라우팅 | react-router-dom, @tanstack/react-router |
| 테스트 | vitest, jest, @testing-library/react, playwright |
| Document | Phases | Load Condition | Load Frequency |
|---|---|---|---|
| react-patterns.md | 2, 3 | 컴포넌트 설계/구현 시 | Load Once |
| vite-guide.md | 1, 3 | Vite 설정/빌드 관련 | Load Once |
| state-management.md | 2, 3 | 상태 관리 설계 시 | Load Once |
| testing-guide.md | 4 | 테스트 작성 시 | Load Once |
| Document | Purpose |
|---|---|
| discover-protocol.md | Phase 1 프로젝트 탐색 절차 |
| design-protocol.md | Phase 2 컴포넌트/라우팅 설계 절차 |
| implement-protocol.md | Phase 3 구현 패턴/가이드 |
| verify-protocol.md | Phase 4 테스트/검증 절차 |
| Script | Usage | Requirements |
|---|---|---|
scripts/detect-frontend-stack.sh | 프론트엔드 스택 감지 (React/Vite/Tailwind 등) | bash 3.2+, jq |
scripts/measure-bundle-size.sh | 빌드 결과 번들 사이즈 측정 | bash 3.2+, jq |
| Template | Purpose |
|---|---|
| vite-config.ts | Vite 설정 스켈레톤 |
| component-template.tsx | React 컴포넌트 보일러플레이트 |
| vitest-config.ts | Vitest 설정 스켈레톤 |
| Target Skill | Trigger | Purpose |
|---|---|---|
sub-api-designer | API 연동 필요 시 | API 스펙 기반 클라이언트/훅 생성 |
sub-test-engineer | 테스트 전략 복잡 시 | 프론트엔드 테스트 전략 위임 |
sub-code-reviewer | 구현 완료 후 | 컴포넌트 코드 리뷰 |
sub-devops-engineer | 배포 설정 필요 시 | Vite 빌드 + Docker + CI/CD 연동 |
다른 스킬이 프론트엔드 UI 구현을 요청할 때:
<sister-skill-invoke skill="sub-frontend-engineer">
<caller>{source-skill}</caller>
<phase>design</phase>
<trigger>프론트엔드 UI 구현 필요</trigger>
<targets>{component-or-page-spec}</targets>
<constraints>
<technique>component | page | hook</technique>
<scope>{target-path-or-feature}</scope>
</constraints>
</sister-skill-invoke>
npx claudepluginhub hungrytech/hungrytech-claude-skills --plugin sub-frontend-engineerProvides React 18+ patterns with Vite bundler, TypeScript, hooks, component design, and state management including Zustand and React Query for frontend development.
Builds React 19 components and Next.js 15 apps with responsive layouts, client-side state management using Zustand, and server components. Optimizes performance, accessibility, and data fetching.
Guides phased development of React and Next.js 14+ apps with App Router, Server Components, TypeScript, Tailwind CSS, and modern patterns. Use for new projects, component architecture, styling, and data fetching.