frontend-workflow은(는) 무엇을 하나요?
Claude Code 스킬: 프론트엔드 개발 워크플로우 엔진 — 기능 분해, 디자인 핸드오프, 코드 리뷰 체크리스트, 버그 분류, 성능 최적화 및 배포 체크리스트
개요
이 스킬은 프론트엔드 개발 프로세스의 각 단계를 체계적으로 관리할 수 있는 워크플로우 엔진입니다. 기능 기획부터 배포까지 전 과정을 지원하며, 팀의 일관된 작업 방식을 보장합니다.
주요 기능
기능 분해 (Feature Breakdown)
- 사용자 스토리를 기반으로 한 기능 분해 템플릿 제공
- 각 기능의 의존성 및 우선순위 정의 지원
- 구현 가능한 단위 작업으로 세분화
디자인 핸드오프 (Design Handoff)
- 디자인 시스템과 UI 키트 연동 가이드
- 디자인 토큰 및 컴포넌트 명세 전환 지원
- 디자인 리뷰 체크리스트 포함
코드 리뷰 체크리스트 (Code Review Checklists)
- 프론트엔드 코드 리뷰 표준 항목 제공
- 접근성, 성능, 보안, 일관성 등 주요 영역별 체크리스트
- 리뷰어를 위한 가이드라인
버그 분류 (Bug Triage)
- 버그 보고서 템플릿 제공
- 심각도와 우선순위에 따른 분류 시스템
- 재현 단계 및 환경 정보 기록 가이드
성능 최적화 (Performance Optimization)
- Web Vitals 및 Core Web Vitals 점검 항목
- 렌더링, 네트워크, 메모리 최적화 체크리스트
- Lighthouse 및 기타 도구 연동 가이드
배포 체크리스트 (Deployment Checklists)
- 배포 전 확인 사항 (환경 변수, CDN 설정, SSL 인증서 등)
- 롤백 절차 및 모니터링 설정 가이드
- 배포 후 검증 항목
사용 방법
- Claude Code 환경에서 스킬 로드
- 원하는 워크플로우 단계 선택 (예: "기능 분해 시작")
- 제공된 템플릿과 체크리스트에 따라 작업 진행
- 완료된 항목을 체크하며 진행 상황 추적
요구 사항
- Claude Code 접근 권한
- 프론트엔드 프로젝트 (React, Vue, Angular 등)
- Git 버전 관리 시스템 (선택 사항)
라이선스
이 프로젝트는 MIT 라이선스를 따릅니다. 자세한 내용은 LICENSE 파일을 참조하세요.
기여
버그 리포트, 기능 제안, 풀 리퀘스트는 GitHub 저장소를 통해 환영합니다. 기여하기 전에 CONTRIBUTING.md 파일을 확인해 주세요.