一键导入
frontend-task-workflow
BUDDYS-CLIENT의 프론트엔드 요청을 페이지, 도메인 기능, 공통 컴포넌트, API, 구조 검토와 검증 흐름으로 분류합니다. 여러 유형이 섞인 기능 구현이나 작업 범위와 검증 수준을 결정해야 할 때 사용합니다.
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
菜单
BUDDYS-CLIENT의 프론트엔드 요청을 페이지, 도메인 기능, 공통 컴포넌트, API, 구조 검토와 검증 흐름으로 분류합니다. 여러 유형이 섞인 기능 구현이나 작업 범위와 검증 수준을 결정해야 할 때 사용합니다.
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
BUDDYS-CLIENT에서 API 요청, 응답 타입, 인증, 에러, 캐시와 UI 상태를 연결합니다. 새 endpoint 연동, 데이터 fetching 또는 mutation, API helper 위치 결정, 네트워크 오류 처리 검토에 사용합니다.
BUDDYS-CLIENT의 파일 위치, domain/shared 소유권, App Router 경계, Server/Client Component 분리와 의존 방향을 검토합니다. 폴더 구조 변경, 공통화, 새 추상화, 코드 리뷰 또는 리팩터링 판단에 사용합니다.
BUDDYS-CLIENT의 특정 제품 도메인에 속하는 컴포넌트, 훅, 상태 로직과 사용자 흐름을 구현하거나 검토합니다. 새 route가 중심이 아닌 도메인 기능, domain-local component, hook, model 또는 flow의 위치와 경계를 결정할 때 사용합니다.
BUDDYS-CLIENT의 Next.js App Router 페이지, route, layout과 화면 흐름을 구현하거나 검토합니다. 새 페이지, 동적 route, route-local UI, loading/error/empty 상태, Server/Client Component 경계를 다루는 작업에 사용합니다.
BUDDYS-CLIENT 저장소에서 새 작업을 시작하기 전에 브랜치, 변경사항, 기술 스택, 폴더 구조, 관련 문서와 기존 구현 패턴을 파악합니다. 기능 구현, 구조 변경, 코드 리뷰처럼 현재 저장소 맥락을 먼저 확인해야 하는 작업에 사용합니다.
BUDDYS-CLIENT에서 여러 도메인이 함께 사용하는 UI 또는 layout 컴포넌트를 구현하거나 검토합니다. `src/shared/components` 추가, 도메인 컴포넌트의 공통화, 공통 컴포넌트 API와 접근성 경계를 판단할 때 사용합니다.
| name | frontend-task-workflow |
| description | BUDDYS-CLIENT의 프론트엔드 요청을 페이지, 도메인 기능, 공통 컴포넌트, API, 구조 검토와 검증 흐름으로 분류합니다. 여러 유형이 섞인 기능 구현이나 작업 범위와 검증 수준을 결정해야 할 때 사용합니다. |
필수 정보가 저장소 탐색으로도 확인되지 않으면 구현 전에 질문합니다.
| Work | Skill |
|---|---|
| 새 작업의 저장소 맥락 확인 | repo-orientation |
| 페이지, route, UI flow | page-feature-workflow |
| 도메인 기능, component, hook, model | domain-feature-workflow |
| 여러 도메인의 공통 UI 또는 layout | shared-component-workflow |
| API 요청과 상태 연결 | api-integration-workflow |
| 폴더 위치, 의존 방향, 공통화 판단 | architecture-review |
| 구현 후 검사 | verify-frontend |
| 문서 변경 | 가까운 Source of Truth와 verify-frontend |
| 설정 또는 GitHub Actions | 기존 설정과 verify-frontend |
repo-orientation으로 현재 구조와 기존 패턴을 확인합니다.docs/workflows/feature-development.md에서 구현 순서를 확인합니다.verify-frontend로 검증합니다.큰 작업에서만 아래 형식으로 계획을 작성합니다.
## Frontend Work Plan
- Goal:
- Scope:
- Related paths:
- Skill:
- Verification:
- Open questions: