Agent skill
frontend-implementation
Frontend Implementation Workflow Agent. Frontend만 구현이 필요한 경우 사용합니다. UI 컴포넌트, 페이지, 상태 관리, API 연동 등을 오케스트레이션합니다.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/frontend-implementation-shaul1991-shaul-agents-plugin-f5d620a9
SKILL.md
Frontend Implementation Workflow Agent
역할
Frontend만 구현이 필요한 경우 (UI 추가, 페이지 개발, 상태 관리 등)를 총괄하는 오케스트레이터입니다.
워크플로우 개요
┌─────────────────────────────────────────────────────────────┐
│ /frontend-implementation │
└─────────────────────────────────────────────────────────────┘
│
▼
Phase 1: 컴포넌트 구현 (병렬)
┌─────────────────────────────────────────────────────────────┐
│ ┌─────────────────┐ ┌─────────────────┐ ┌───────────────┐ │
│ │ frontend- │ │ frontend- │ │ frontend- │ │
│ │ component │ │ state │ │ hook │ │
│ │ (UI 컴포넌트) │ │ (상태 관리) │ │ (커스텀 훅) │ │
│ └─────────────────┘ └─────────────────┘ └───────────────┘ │
└─────────────────────────────────────────────────────────────┘
│
▼
Phase 2: 통합 (순차)
┌─────────────────────────────────────────────────────────────┐
│ ┌─────────────────┐ │
│ │ frontend-api │ │
│ │ (API 연동) │ │
│ └────────┬────────┘ │
│ ▼ │
│ ┌─────────────────┐ │
│ │ frontend-socket │ ← 실시간 기능 필요 시 │
│ │ (WebSocket) │ │
│ └─────────────────┘ │
└─────────────────────────────────────────────────────────────┘
│
▼
Phase 3: 최적화 & 테스트 (병렬)
┌─────────────────────────────────────────────────────────────┐
│ ┌─────────────────┐ ┌─────────────────┐ ┌───────────────┐ │
│ │ frontend- │ │ frontend- │ │ frontend- │ │
│ │ perf │ │ test │ │ lint │ │
│ │ (성능 최적화) │ │ (테스트) │ │ (코드 품질) │ │
│ └─────────────────┘ └─────────────────┘ └───────────────┘ │
└─────────────────────────────────────────────────────────────┘
│
▼
Phase 4: 빌드 & 배포 (순차)
┌─────────────────────────────────────────────────────────────┐
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │ frontend-build │ → │ devops-jenkins │ │
│ │ (빌드 설정) │ │ (CI/CD) │ │
│ └─────────────────┘ └─────────────────┘ │
└─────────────────────────────────────────────────────────────┘
Phase별 상세
Phase 1: 컴포넌트 구현 (병렬)
| Agent | 역할 | 산출물 |
|---|---|---|
| frontend-component | UI 컴포넌트 설계 및 구현 | 컴포넌트 파일 |
| frontend-state | 상태 관리 (Zustand/Redux/Context) | Store 파일 |
| frontend-hook | 커스텀 훅 구현 | Hook 파일 |
Phase 2: 통합 (순차)
| 순서 | Agent | 역할 | 산출물 |
|---|---|---|---|
| 1 | frontend-api | API 클라이언트, 데이터 페칭 | API 연동 코드 |
| 2 | frontend-socket | WebSocket/SSE 연동 (필요시) | 실시간 통신 코드 |
Phase 3: 최적화 & 테스트 (병렬)
| Agent | 역할 | 산출물 |
|---|---|---|
| frontend-perf | 번들 최적화, 렌더링 성능 | 성능 리포트 |
| frontend-test | 단위/통합 테스트 작성 | 테스트 파일 |
| frontend-lint | ESLint, 코드 품질 검사 | Lint 리포트 |
Phase 4: 빌드 & 배포 (순차)
| 순서 | Agent | 역할 | 산출물 |
|---|---|---|---|
| 1 | frontend-build | 빌드 설정, 환경 변수 | 빌드 결과물 |
| 2 | devops-jenkins | CI/CD 파이프라인 실행 | 배포 완료 |
산출물 디렉토리 구조
docs/implementation/<기능명>/frontend/
├── README.md # 구현 개요
├── components/ # 컴포넌트 문서
│ ├── component-spec.md
│ └── storybook-notes.md
├── state-management.md # 상태 관리 설계
├── api-integration.md # API 연동 문서
├── test-report.md # 테스트 결과
├── performance-report.md # 성능 리포트
└── build-config.md # 빌드 설정
사용 방법
/frontend-implementation <기능명>
예시
/frontend-implementation 로그인 페이지
/frontend-implementation 대시보드 UI
/frontend-implementation 실시간 채팅
협업 Agent
| Agent | 용도 |
|---|---|
| tech-implementation | 전체 구현 (Backend + Frontend) |
| backend-implementation | API가 필요한 경우 |
| ux-ui-component | UI 명세 확인 |
| design-tokens | 디자인 토큰 참조 |
컴포넌트 구조 패턴
Atomic Design
src/components/
├── atoms/ # Button, Input, Badge 등
├── molecules/ # SearchBar, Card 등
├── organisms/ # Header, Sidebar 등
└── templates/ # PageLayout 등
상태 관리 패턴
src/
├── stores/ # Zustand stores
├── contexts/ # React Context
└── hooks/ # Custom hooks
├── useAuth.ts
├── useFetch.ts
└── useDebounce.ts
주의사항
- Phase 3 테스트 통과 후 자동 빌드/배포
- Lighthouse 점수 90점 미만 시 경고
- 번들 크기 증가 500KB 초과 시 경고
- 접근성 검사 통과 필수
- 반응형 디자인 검증 필수
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?