Menu
프론트엔드 작업을 유형별 작업 흐름으로 라우팅하고, 필요한 입력/문서/검증 범위를 결정할 때 사용합니다.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
endpoint 문서를 기준으로 API helper, TanStack Query hook, 타입, 에러/cache 동작을 구현할 때 사용합니다.
apps/client, apps/market-owner, apps/design-system-web, 선택적 apps/admin 내부의 앱 전용 shared 컴포넌트를 생성, 스펙 작성, export, 검증할 때 사용합니다.
GitHub 브라우저 PR 리뷰에서 visible diff, review comment, check status, local verification 여부를 분리해 기록할 때 사용합니다.
packages/design-system 공통 컴포넌트를 Figma/이미지/상태 요구사항 기반으로 생성, 구현, story/spec/export 검증할 때 사용합니다.
필드 검증, submit, mutation, error, disabled/loading/success 상태가 있는 프론트엔드 폼 흐름을 구현할 때 사용합니다.
프론트엔드 구현 또는 리뷰 중 Toss Frontend Fundamentals의 응집도 기준으로 함께 수정되는 component, hook, type, fixture, spec, form 흐름 배치를 점검할 때 사용합니다.
| name | frontend-task-orchestrator |
| description | 프론트엔드 작업을 유형별 작업 흐름으로 라우팅하고, 필요한 입력/문서/검증 범위를 결정할 때 사용합니다. |
프론트엔드 작업을 시작하기 전에 작업 유형, 필요한 입력, 사용할 문서, 검증 범위를 결정합니다.
Jira, Figma, 사진, 스크린샷을 근거로 작업을 만들거나 시작하는 요청은 먼저 jira-design-implementation-workflow로 요구사항과 순서 게이트를 확인한 뒤 이 skill로 작업 유형을 세분화합니다.
필수 입력이 없고 repo 탐색으로도 확인할 수 없으면 구현 전에 질문합니다.
SKILL.mddocs/workflows/spec-writing.md: 새 spec 작성 또는 갱신이 필요할 때docs/code-quality/frontend-fundamentals.md: 페이지, 컴포넌트, hook, API, form 등 프론트엔드 구현 품질 self-check 허브가 필요할 때docs/code-quality/frontend-readability.md, docs/code-quality/frontend-predictability.md, docs/code-quality/frontend-cohesion.md, docs/code-quality/frontend-coupling.md: 구현 중 특정 품질 기준만 확인할 때docs/code-quality/frontend-logic-composition.md: 컴포넌트 내부 로직, custom hook 추출, orchestration hook 기준이 필요할 때docs/architecture/repo-structure.md: app/package 위치가 불명확할 때문서는 많이 읽기보다 먼저 rg, find, 가까운 기존 코드로 현재 패턴을 확인합니다.
| 작업 유형 | 사용할 skill | 기준 문서 |
|---|---|---|
| Jira/Figma/사진 기반 작업 생성 또는 착수 | jira-design-implementation-workflow | recipes/jira-design-to-implementation.md |
| 앱 shared 컴포넌트 | app-shared-component-workflow | recipes/add-app-shared-component.md |
| 공통 컴포넌트 | design-system-component-workflow | recipes/add-design-system-component.md |
| 페이지/라우트 | page-feature-workflow | recipes/add-page.md |
| API query/mutation | api-integration-workflow | recipes/add-api-query.md |
| 폼/검증/submit | form-flow-workflow | recipes/add-form.md |
| Turbo generator 추가/수정 | turbo-generator-workflow | docs/workflows/turbo-generators.md |
| 컴포넌트/hook 로직 구성 | frontend-logic-composition-workflow | docs/code-quality/frontend-logic-composition.md |
| 리팩터링 판단 | refactor-evaluator | recipes/refactor-component.md |
| 성능 이슈 | performance-diagnosis | docs/code-quality/index.md |
| 구현 후 검증 | frontend-quality-verification | docs/workflows/local-development.md |
| 코드 품질 리뷰 | frontend-fundamentals-review 또는 frontend-*-check | docs/code-quality/frontend-fundamentals.md |
| 커밋 분해 또는 PR 준비 | commit-planning-workflow | recipes/commit-plan.md |
여러 유형이 섞인 작업은 핵심 구현 작업 흐름을 먼저 선택하고, 마지막 검증은 frontend-quality-verification으로 마무리합니다.
페이지, 컴포넌트, hook, API, form 구현은 각 작업 흐름 안에서 docs/code-quality/frontend-fundamentals.md와 개별 기준 문서를 self-check 기준으로 포함합니다. 구현 중 특정 기준만 빠르게 확인해야 하면 frontend-readability-check, frontend-predictability-check, frontend-cohesion-check, frontend-coupling-check를 사용합니다. 컴포넌트 내부 로직이나 custom hook 추출 단위를 판단해야 하면 frontend-logic-composition-workflow를 사용합니다. 비자명한 변경, shared/public API 변경, PR 전 점검은 frontend-fundamentals-review를 별도 리뷰 단계로 추가합니다.
## Frontend Work Plan
- 작업 유형:
- 대상 workspace:
- 부족한 입력:
- 사용할 작업 흐름 skill:
- 사용할 문서:
- 필요한 spec:
- 품질 self-check:
- 검증: