frontend-component-patterns

name	frontend-component-patterns
description	Next.js 기반 웹앱의 페이지 구조, 컴포넌트 분리, 상태 관리 시작점을 정리하는 frontend-builder 전용 스킬.

Frontend Component Patterns

Target Agent

frontend-builder

Trigger

• architecture 문서가 준비되었다
• UI/page/component/staged frontend output 계획이 필요하다
• frontend long turn 리스크를 낮추기 위한 plan-first 문서가 필요하다

Inputs

• _workspace/02_architecture.md
• _workspace/01_requirements.md
• package-level frontend constraints

Codex Runtime Context

• bound runtime relation: frontend
• actual execution runtime: https://github.com/coreline-ai/agent-team-module

Purpose

일관된 프론트엔드 골격을 빠르게 제안한다.

Patterns / Checklists

• app/router 기준 페이지 구조
• feature/ui/layout 분리
• 상태 관리 최소안
• 로딩/에러/빈 상태
• 구현 수치(ISR 주기, 번들 전략, 렌더링 모드 등) 결정 시 근거를 한 줄 기록

Rules

• 가능하면 plan → shell → core pages → polish 순서의 staged output으로 나눈다.
• requirements 와 architecture 를 벗어나는 UI 확장을 하지 않는다.
• artifact-first inspection이 가능하도록 문서형 산출물을 먼저 남긴다.

Output Format Rules

• 페이지 목록은 "페이지 | 경로 | 렌더링 전략 | 인증" 테이블로 정리한다.
• 컴포넌트 분리는 디렉터리 트리 형식으로 보여준다.
• 02_architecture에서 정의한 용어/enum을 그대로 사용한다.
• 문서 끝에 ## Downstream Handoff Note 섹션을 포함한다.

Output Guidance

• _workspace/03_frontend_plan.md 에 우선 구현 페이지를 표시한다.
• 가능하면 plan → shell → core pages → polish 순서의 staged output으로 나눈다.

Completion Criteria

• 주요 페이지, 컴포넌트 경계, 상태/오류 케이스가 문서에 드러난다.
• QA가 UX/연결성 누락을 문서만으로 검토할 수 있다.

Downstream Handoff

• qa-reviewer가 UX/연결성 누락을 검토할 수 있도록 상태와 페이지 범위를 명시한다.
• runtime anomaly가 있어도 artifact-first inspection이 가능하도록 문서형 산출물을 먼저 남긴다.