frontend-implementation

Frontend Implementation Workflow Agent. Frontend만 구현이 필요한 경우 사용합니다. UI 컴포넌트, 페이지, 상태 관리, API 연동 등을 오케스트레이션합니다.

Quality

51%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/frontend-implementation/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 초과 시 경고
접근성 검사 통과 필수
반응형 디자인 검증 필수

Repository: shaul1991/shaul-agents-plugin
Path: skills/frontend-implementation/SKILL.md
Commit: 9242c58

Last updated: about 13 hours ago
First committed: 7 months ago

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.