Menü
프론트엔드 작업을 유형별 작업 흐름으로 라우팅하고, 필요한 입력/문서/검증 범위를 결정할 때 사용합니다.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
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:
- 검증: