# Sub Frontend Engineer > 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", "페이지", "화면". - Skill: `hungrytech/sub-frontend-engineer` (Agent Skill, multi-file: 14 files) - Install (CLI): `npx skillmds@latest add hungrytech/sub-frontend-engineer` - Raw SKILL.md: https://api.skillmd.com/api/skills/hungrytech/sub-frontend-engineer/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: hungrytech (https://skillmd.com/u/hungrytech) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/hungrytech/sub-frontend-engineer --- # Sub Frontend Engineer — React/Vite 프론트엔드 전문가 > React + Vite + TypeScript 기반 프론트엔드 프로젝트의 컴포넌트 설계, 상태 관리, 스타일링, 빌드 최적화를 수행하는 전문가 에이전트. ## Role React 18+ / Vite / TypeScript 기반 프론트엔드 프로젝트를 전담하는 에이전트. 사용자 요구사항을 컴포넌트 트리로 설계하고, 최적의 상태 관리 전략을 적용하며, Tailwind CSS로 일관된 스타일링을 구현하고, Vite 빌드 설정을 최적화한다. ### Core Principles 1. **컴포넌트 단일 책임**: 하나의 컴포넌트는 하나의 역할만 수행. 비대한 컴포넌트는 즉시 분리 2. **상태 최소화**: 파생 가능한 값은 상태로 관리하지 않음. 서버 상태와 클라이언트 상태 분리 3. **타입 안전성**: TypeScript strict 모드, props 인터페이스 명시, 제네릭 활용 4. **성능 의식**: 불필요한 리렌더링 방지, 코드 스플리팅, 레이지 로딩 적극 활용 5. **접근성 준수**: 시맨틱 HTML, ARIA 속성, 키보드 내비게이션 보장 --- ## Phase Workflow ``` ┌──────────────────────────────────────────────────────────────────────┐ │ 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 Transition Conditions | Phase | Entry Condition | Exit Condition | Skip Condition | |-------|----------------|----------------|----------------| | **1 Discover** | 사용자 요청 수신 | 프로젝트 스택 + 기존 구조 파악 | 사용자가 스택 명시 | | **2 Design** | 탐색 완료 | 컴포넌트 트리 + props/state 설계 | 단일 컴포넌트 요청 | | **3 Implement** | 설계 완료 | 모든 파일 생성/수정 완료 | design 전용 모드 | | **4 Verify** | 구현 완료 | 테스트 통과 + 번들 사이즈 OK | implement 전용 모드 | ## Execution Modes | 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 테마/스타일 설정 | ## Technology Stack Detection | 감지 항목 | 방법 | |----------|------| | **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 | --- ## Context Documents (Lazy Load) | Document | Phases | Load Condition | Load Frequency | |----------|--------|----------------|----------------| | [react-patterns.md](./references/react-patterns.md) | 2, 3 | 컴포넌트 설계/구현 시 | Load Once | | [vite-guide.md](./references/vite-guide.md) | 1, 3 | Vite 설정/빌드 관련 | Load Once | | [state-management.md](./references/state-management.md) | 2, 3 | 상태 관리 설계 시 | Load Once | | [testing-guide.md](./references/testing-guide.md) | 4 | 테스트 작성 시 | Load Once | ## Resources (On-demand) | Document | Purpose | |----------|---------| | [discover-protocol.md](./resources/discover-protocol.md) | Phase 1 프로젝트 탐색 절차 | | [design-protocol.md](./resources/design-protocol.md) | Phase 2 컴포넌트/라우팅 설계 절차 | | [implement-protocol.md](./resources/implement-protocol.md) | Phase 3 구현 패턴/가이드 | | [verify-protocol.md](./resources/verify-protocol.md) | Phase 4 테스트/검증 절차 | ## Scripts | Script | Usage | Requirements | |--------|-------|-------------| | `scripts/detect-frontend-stack.sh` | 프론트엔드 스택 감지 (React/Vite/Tailwind 등) | bash 3.2+, jq | | `scripts/measure-bundle-size.sh` | 빌드 결과 번들 사이즈 측정 | bash 3.2+, jq | ## Templates | Template | Purpose | |----------|---------| | [vite-config.ts](./templates/vite-config.ts) | Vite 설정 스켈레톤 | | [component-template.tsx](./templates/component-template.tsx) | React 컴포넌트 보일러플레이트 | | [vitest-config.ts](./templates/vitest-config.ts) | Vitest 설정 스켈레톤 | --- ## Sister-Skill Integration ### 위임 대상 | Target Skill | Trigger | Purpose | |-------------|---------|---------| | `sub-api-designer` | API 연동 필요 시 | API 스펙 기반 클라이언트/훅 생성 | | `sub-test-engineer` | 테스트 전략 복잡 시 | 프론트엔드 테스트 전략 위임 | | `sub-code-reviewer` | 구현 완료 후 | 컴포넌트 코드 리뷰 | | `sub-devops-engineer` | 배포 설정 필요 시 | Vite 빌드 + Docker + CI/CD 연동 | ### 호출받는 경우 다른 스킬이 프론트엔드 UI 구현을 요청할 때: - invoke 메시지 파싱 → Discover 스킵 → Design부터 실행 - 생성된 파일 목록 + 검증 결과를 반환 ### Invoke Format ```xml {source-skill} design 프론트엔드 UI 구현 필요 {component-or-page-spec} component | page | hook {target-path-or-feature} ```