ITDanZF/skill

프론트엔드 프로토타입 재구축

활성화 조건

다음 두 조건이 모두 충족될 때만 이 스킬을 사용하세요.

• 사용자가 페이지 이미지, 스크린샷, 목업 또는 프로토타입을 제공하거나 명확히 참조합니다.
• 사용자가 관련 프론트엔드 페이지를 생성, 재현, 변환, 구현 또는 복원하도록 명시적으로 요청합니다.

사용자가 이미지 검토나 설명만 요청한다면, 요청하지 않는 한 코드를 구현하지 마세요.

워크플로우

1. 먼저 프로토타입 이미지를 검사합니다.

   • 페이지 유형, 뷰포트, 주요 레이아웃 영역, 정렬 그리드, 간격 리듬, 타이포그래피 스케일, 밀도 및 시각적 계층 구조를 식별합니다.
   • 보이는 요소(내비게이션, 폼, 버튼, 테이블, 카드, 목록, 탭, 필터, 미디어, 빈 상태, 상태 표시기, 아이콘)를 추출합니다.
   • 보이는 어포던스(예: 호버 가능한 액션, 선택된 탭, 드롭다운, 토글, 필터, 모달, 페이지네이션, 입력 상태)로부터만 가능한 상호작용을 유추합니다.
   • 사용자가 기능적 동작을 요청하지 않는 한 모호한 콘텐츠는 정적 디스플레이로 처리합니다.

2. 코딩 전에 로컬 프론트엔드 프로젝트를 검사합니다.

   • 프레임워크, 라우팅, 컴포넌트 규칙, 스타일링 방법, 테마 토큰, CSS 변수, Tailwind 설정, 디자인 시스템, 아이콘 라이브러리 및 기존 페이지 패턴을 식별합니다.
   • 기존 컴포넌트, 간격 스케일, 타이포그래피 유틸리티, 색상 토큰 및 레이아웃 프리미티브를 우선 사용합니다.
   • 프로토타입과 충돌하지 않는 경우 가장 유사한 기존 페이지 또는 컴포넌트 패턴을 매칭합니다.

3. 구현 표면을 계획합니다.

   • 프로젝트 규칙에 맞는 가장 작은 파일/컴포넌트 구조를 선택합니다.
   • 프로젝트에 고정 데이터나 목업 데이터 패턴이 확립되어 있지 않은 경우 정적 프로토타입 데이터를 로컬에 두고 명확하게 유지합니다.
   • 정적 페이지 재현을 위해 새로운 상태 관리, 컴포넌트 라이브러리, CSS 프레임워크 또는 전역 테마 변경을 도입하지 마세요.

4. 페이지를 구현합니다.

   • 시맨틱 HTML과 프로젝트 네이티브 컴포넌트로 레이아웃 및 시각적 구조를 재현합니다.
   • 레이아웃, 크기, 간격, 반응형 동작, 호버/포커스 상태, 전환, 계층 및 단순 시각적 상태에 CSS를 사용합니다.
   • 진정으로 상태 또는 이벤트 처리가 필요한 동작에만 JavaScript를 사용합니다.
   • 코드를 효율적이고 읽기 쉽고 프로덕션 스타일로 유지합니다. 명확한 컴포넌트 경계, 최소한의 중복, 페이지를 파악하기 어렵게 만드는 일회성 추상화를 지양합니다.

5. 결과를 시각적으로 확인합니다.

   • 필요하면 관련 로컬 개발 서버 또는 정적 미리보기를 실행합니다.
   • 렌더링된 페이지를 대상 뷰포트 및 해당되는 경우 적어도 하나의 반응형 중단점에서 프로토타입과 비교합니다.
   • 완료하기 전에 간격, 계층 구조, 색상, 크기 및 오버플로우의 명백한 불일치를 수정합니다.

테마 및 색상 규칙

로컬 프로젝트 테마를 진리로 사용합니다.

• 프로젝트 토큰, CSS 변수, Tailwind 테마 값, 디자인 시스템 props 및 기존 컴포넌트 변형을 우선시합니다.
• 프로젝트에 일치하는 시맨틱 토큰이 있으면 스크린샷 색상이 약간 다르더라도 해당 토큰을 사용합니다.
• 프로젝트에 적합한 토큰이 없으면 스크린샷 색상을 직접 사용하고 재현된 페이지/컴포넌트에 로컬로 유지합니다.
• 사용자가 명시적으로 요청하지 않는 한 하나의 스크린샷과 일치시키기 위해 전역 테마 파일을 수정하지 마세요.
• 로컬 테마 의도가 명확할 때는 픽셀 완벽한 색상 복사보다 브랜드 일관성을 유지합니다.

레이아웃 및 요소 추출

코드를 작성하기 전에 다음 세부 사항을 캡처합니다.

• 페이지 셸: 헤더, 사이드바, 푸터, 콘텐츠 너비, 스크롤 영역, 고정 영역.
• 그리드: 열, 행, 거터, 카드/테이블/목록 리듬, 중단점 동작.
• 타이포그래피: 제목/본문/캡션 스케일, 두께, 줄 높이, 줄임표 처리.
• 컨트롤: 버튼 크기, 입력 높이, 선택됨/비활성화/로딩 상태, 아이콘, 배지.
• 콘텐츠 충실도: 레이블, 보이는 텍스트, 숫자, 날짜, 아바타, 이미지 플레이스홀더 및 빈 상태.
• 계층: 그림자, 테두리, 구분선, 오버레이, 팝오버 및 z-index 관계.

절대 위치 지정을 남용하지 마세요. flex, grid, 본질적 크기 조정, 종횡비, 최소/최대 제약 조건 및 컨테이너 기반 반응형 규칙을 선호합니다. 절대 위치 지정은 오버레이, 배지, 장식 앵커 또는 깔끔하게 표현할 수 없는 스크린샷 특정 계층에만 사용합니다.

상호작용 가이드라인

정적 페이지 재현의 경우 요청에 암시된 수준까지만 상호작용을 구현합니다.

• 프로토타입이 암시하는 경우 항상 접근 가능한 호버, 포커스, 활성, 선택됨, 비활성화 및 로딩 시각 효과를 포함합니다.
• 사용자가 대화형 동작을 요청하거나 프로토타입이 명확히 이에 의존하는 경우에만 간단한 열기/닫기, 탭 전환, 선택 또는 필터링을 구현합니다.
• 가능한 경우 CSS 선택자와 기본 HTML 동작을 사용하여 간단한 상호작용을 구현합니다.
• 레이아웃, 간격, 줄임표 처리, 색상 또는 반응형 동작을 패치하는 데만 사용되는 JavaScript는 피하세요. 해당 문제는 CSS로 해결합니다.

코드 품질 규칙

대규모 코드베이스 프론트엔드 관행을 따릅니다.

• 컴포넌트를 응집력 있게 유지하고 도메인 또는 가시적 역할로 이름을 지정하며, 모호한 시각적 조각으로 이름을 짓지 마세요.
• 실제 독립적인 책임이 없는 한 페이지를 매우 많은 작은 컴포넌트로 분할하지 마세요.
• 프로젝트가 TypeScript를 사용하는 경우 정적 샘플 데이터에 타입을 지정합니다.
• 수동 코딩된 SVG 대신 사용 가능한 아이콘 라이브러리를 사용합니다.
• 적절한 경우 대체 텍스트, 레이블, 키보드 포커스 스타일 및 시맨틱 구조를 추가합니다.
• 프로젝트에 간격, 크기 또는 색상 토큰이 있는 경우 하드코딩된 매직 넘버를 피하세요.
• CSS나 기존 유틸리티로 처리할 수 있는 효과에 종속성을 추가하지 마세요.

완료 체크리스트

최종 응답 전에 다음을 확인합니다.

• 이미지의 레이아웃, 요소, 테마 및 암시된 상호작용을 검사했습니다.
• 기존 프로젝트 테마 및 프론트엔드 규칙을 확인했습니다.
• 색상은 로컬 토큰을 우선 사용하며, 누락된 토큰에 대해서만 스크린샷 색상을 사용합니다.
• 가능한 경우 CSS가 시각적 레이아웃 및 상태를 처리합니다.
• 렌더링된 페이지를 미리 보았거나 미리 볼 수 없는 이유를 명시했습니다.