Frontend Workflow：프론트엔드 프로젝트 총괄은(는) 무엇을 하나요?

一、최우선 순위：먼저 프로젝트 읽기

파일을 수정하기 전에 반드시 다음을 수행하세요.

프로젝트 루트 디렉터리의 AGENTS.md, CLAUDE.md, README 및 기타 적용 가능한 개발 규칙을 읽습니다.
package.json, 잠금 파일, 빌드 설정, 라우팅 설정 및 기존 컴포넌트를 확인합니다.
현재 프로젝트의 기술 스택, 프레임워크 버전, UI 컴포넌트 라이브러리, CSS 방식 및 실행 명령을 식별합니다.
프론트엔드와 백엔드가 분리된 프로젝트인 경우, 프론트엔드와 백엔드의 경계를 명확히 하고 백엔드 인터페이스 계약을 임의로 수정하지 않습니다.
프로젝트에 이미 디자인 시스템, 컴포넌트 규칙 또는 페이지 스타일이 있다면, 처음부터 다시 만들지 말고 우선적으로 계승하여 개선합니다.

사용자의 설명이나 디렉터리 이름만으로 기술 스택을 판단하지 말고 실제 파일을 확인해야 합니다.

二、기술 스택 식별 및 기술 사용 방식 결정

상황 A：React 프로젝트

순서대로 실행합니다.

frontend-design：시각 방향, 디자인 규칙 및 페이지 레이아웃을 결정합니다.
frontend-production-shadcn：프로젝트 호환성을 확인한 후, 컴포넌트, 레이아웃 및 상호작용을 구현합니다.
premium-ui：실제 페이지를 확인하고 수정을 추진합니다.

프로젝트가 이미 React, Tailwind CSS 및 shadcn/ui 등 해당 기술을 채택했거나 명시적으로 허용한 경우에만 해당 기술의 구체적인 컴포넌트 구현 방식을 직접 사용합니다.

상황 B：Vue 3 프로젝트

순서대로 실행합니다.

frontend-design：시각 방향, 디자인 규칙 및 페이지 레이아웃을 결정합니다.
frontend-production-shadcn은 디자인 규칙 및 엔지니어링 품질 참고용으로만 사용하고, React, JSX, React Hooks 또는 shadcn/ui에 특화된 구현 지침은 실행하지 않습니다.
프로젝트의 기존 Vue 3, TypeScript, 라우팅, UI 컴포넌트 라이브러리 및 CSS 방식을 사용하여 구현을 완료합니다.
premium-ui：실제 페이지를 확인하고 수정을 추진합니다.

두 번째 Skill에 맞추기 위해 Vue 3 프로젝트를 React로 마이그레이션하지 마십시오.

상황 C：기타 기술 스택

먼저 프로젝트의 기존 기술과 제약 사항을 확인합니다. frontend-design을 시각 계획에 사용하고, frontend-production-shadcn에서 마이그레이션 가능한 디자인 원칙을 참고하며, 현재 프로젝트에 적합한 기술을 사용하여 구현을 완료합니다. 마지막으로 premium-ui의 리뷰 방법을 사용하여 검수합니다.

三、세 단계 엄격히 실행

단계 1：시각 디자인

frontend-design을 호출합니다.

요구 사항：

페이지 목표, 주요 사용자 및 핵심 작업을 명확히 합니다.
시각 방향, 글꼴, 색상, 간격, 레이아웃 및 정보 계층을 결정합니다.
실질적으로 차이가 있는 디자인 방향을 제시하고 최종 선택 이유를 설명합니다.
실행 가능한 디자인 규칙을 수립한 후 구현을 시작합니다.

단계 2：엔지니어링 구현

기술 스택에 따라 frontend-production-shadcn을 호출하거나, 디자인 원칙만 참고합니다.

요구 사항：

먼저 기존 컴포넌트와 종속성을 재사용합니다.
전체 페이지, 탐색, 폼, 반응형 레이아웃 및 상호작용 상태를 구현합니다.
로딩, 빈 데이터, 오류, 비활성화 및 성공 피드백을 처리합니다.
실제 비즈니스 로직을 유지하고, 가짜 상호작용으로 기능 완료를 가장하지 않습니다.
허가 없이 대규모 리팩토링이나 프레임워크 교체를 하지 않습니다.

단계 3：시각 검수

premium-ui를 호출하여 코드만 읽지 않고 실제 구현을 확인합니다.

요구 사항：

프로젝트를 먼저 시작하고 사용 가능한 브라우저 또는 스크린샷 도구를 사용하여 페이지를 확인합니다.
타이포그래피, 정렬, 여백, 색상, 계층, 컴포넌트 일관성 및 반응형表现을 확인합니다.
버튼, 폼, 탐색 및 주요 상호작용이 유효한지 확인합니다.
디자인 목표와 실제 효과 간의 차이를 기록합니다.
발견된 문제를 수정하고 다시 확인합니다.

환경에 브라우저나 스크린샷 기능이 없다면, 실제 시각 검수를 완료할 수 없다는 점을 명확히 설명하고 페이지 효과를 확인했다고 주장하지 않습니다.

四、실행 규칙

각 단계가 완료되면 간략히 결과를 보고한 후 다음 단계로 넘어갑니다.
특정 Skill이 존재하지 않거나, 로드되지 않았거나, 실행할 수 없는 경우 명확히 설명하고 실행 가능한 대체 방안을 사용합니다.
다른 Skill이 자동으로 실행된다고 가정하지 않습니다. 필요시 명시적으로 호출하거나 읽도록 요청합니다.
사용자의 명확한 요구 사항, 프로젝트 규칙 및 기존 기술 스택을 따릅니다.
시각적 효과를 위해 접근성, 유지보수성, 성능 또는 비즈니스 정확성을 희생하지 않습니다.
완료 후 프로젝트가 지원하는 빌드, 검사 및 테스트 명령을 실행하고 결과를 보고합니다.

五、최종 인도

완료 후 다음을 보고합니다.

식별된 기술 스택 및 버전.
채택된 디자인 방향 및 주요 디자인 결정.
수정된 주요 파일 및 기능.
세 단계 각각의 실행 상황.
빌드, 테스트 및 실제 시각적 검사 결과.
아직 해결되지 않은 문제 및 수동 확인이 필요한 사항.

Frontend Workflow：프론트엔드 프로젝트 총괄