디자인만 있는 상태에서 설계 문서부터 만듭니다

# [프로젝트명] PRD

## 1. 제품 개요

[어떤 사용자를 위해 무엇을 만드는지 한 문장으로 작성합니다.]

## 2. 문제 정의

- [현재 사용자가 겪는 문제]
- [기존 방식이 불편한 이유]

## 3. 목표 사용자

- 주요 사용자: [예: 캠핑 장소를 비교하는 20~40대 사용자]
- 사용 환경: [예: 이동 중 모바일, 집에서 데스크톱]

## 4. 제품 목표

- [완성 후 사용자가 할 수 있어야 하는 일]
- [디자인 시안을 구현할 때 반드시 지킬 결과]

## 5. 제외 범위

- [이번 작업에서 만들지 않을 기능]
- [실제 API, 로그인, 결제처럼 포함하지 않을 범위]

## 6. 디자인 기준

- 제공된 [Figma 링크 또는 디자인 파일]을 시각 기준으로 사용합니다.
- 디자인에 없는 화면, 기능, 이미지, 아이콘을 임의로 추가하지 않습니다.
- 새 에셋을 만들기 전에 기존 assets 폴더와 디자인 원본을 확인합니다.
- 확인된 색상, 폰트, 간격, 라운드, 그림자를 우선 사용합니다.

## 7. 핵심 기능

- [기능 이름]: [사용자가 무엇을 할 수 있는지]
- [기능 이름]: [입력과 결과]

## 8. 화면 목록과 목적

### [화면 이름]

- 목적: [이 화면에서 사용자가 해결할 일]
- 주요 행동: [클릭, 입력, 선택, 이동]
- 필요한 정보: [화면에 보여야 할 데이터]
- 이동 경로: [어디에서 들어오고 어디로 이동하는지]

## 9. 사용자 흐름

1. 사용자가 [첫 행동]을 합니다.
2. 화면이 [변경되는 상태]를 보여줍니다.
3. 사용자가 [다음 행동]을 합니다.
4. [완료 결과]를 확인합니다.

## 10. 화면 상태

- 기본 상태: [처음 보이는 내용]
- 로딩 상태: [기다리는 동안 보이는 내용]
- 빈 상태: [결과가 없을 때 다음 행동 안내]
- 오류 상태: [원인과 해결 행동]
- 비활성 상태: [언제 버튼이나 입력이 비활성화되는지]

## 11. 데이터와 저장

- 데이터 출처: [실제 API, 제공된 JSON, 목업 데이터]
- 브라우저 저장: [localStorage 사용 여부와 key]
- 저장하지 않는 정보: [개인정보 등]

## 12. 개발 조건

- HTML, CSS, JavaScript로 구현합니다.
- React, Vue, TypeScript, Tailwind를 추가하지 않습니다.
- 기존 폴더 구조, 공통 스타일, 컴포넌트 역할을 우선 유지합니다.
- 제공된 에셋을 우선 사용합니다.
- 요청 없이 패키지나 외부 라이브러리를 추가하지 않습니다.

## 13. 명명 규칙

- CSS class와 HTML id는 snake_case를 사용합니다.
- 상태 class는 is_active, is_open, is_selected 형식으로 작성합니다.
- 오류 class는 has_error 형식으로 작성합니다.
- JavaScript 변수와 함수는 camelCase를 사용합니다.
- 불리언은 is, has, can, should로 시작합니다.
- 이벤트 함수는 handleXxx 형식으로 작성합니다.

## 14. 반응형 기준

- 모바일: 360px
- 태블릿: 768px
- 데스크톱: 1280px
- 모든 기준에서 페이지 전체 가로 스크롤이 없어야 합니다.

## 15. 접근성

- 클릭 동작은 button, 페이지 이동은 a 요소를 사용합니다.
- 모든 입력은 label 또는 접근 가능한 이름을 가집니다.
- 키보드 focus-visible 상태가 보여야 합니다.
- 색상만으로 상태를 구분하지 않습니다.
- 의미 있는 이미지는 alt를 가집니다.
- prefers-reduced-motion 설정을 반영합니다.

## 16. 인터랙션 라이브러리

- CSS와 기본 JavaScript로 가능한 동작은 별도 라이브러리 없이 구현합니다.
- GSAP은 디자인에 복잡한 등장·전환 모션이 있을 때만 사용합니다.
- ScrollTrigger는 스크롤 위치와 연결된 모션에만 사용합니다.
- Lenis는 부드러운 스크롤이 제품 요구사항일 때만 사용합니다.
- Swiper는 실제 슬라이더나 갤러리에만 사용합니다.

## 17. 검증 방법

- 디자인 시안과 실제 브라우저 화면을 나란히 비교합니다.
- 360px, 768px, 1280px에서 잘림, 겹침, 가로 스크롤을 확인합니다.
- 모든 버튼, 링크, 입력, 메뉴를 실제로 조작합니다.
- 키보드 Tab 순서와 focus-visible을 확인합니다.
- 콘솔 오류와 임시 console.log를 확인합니다.

## 18. 완료 조건

- 모든 화면과 상태가 PRD 및 디자인 시안과 일치합니다.
- 실제 에셋이 누락되지 않습니다.
- 주요 링크, 버튼, 입력, 인터랙션이 동작합니다.
- 반응형, 접근성, 콘솔 오류 검증을 통과합니다.
- 변경 파일, 구현 내용, 검증 결과, 확인하지 못한 부분이 보고됩니다.

# [프로젝트명] 작업 규칙

## 작업 전 확인

- PRD.md와 디자인 자료를 먼저 읽습니다.
- package.json, lock 파일, 빌드 설정, 기존 폴더 구조를 확인합니다.
- 기존 공통 스타일, CSS 변수, 컴포넌트, 이미지, 아이콘, 폰트를 확인합니다.
- 확인된 사실과 추정을 구분합니다.

## 변경 원칙

- 사용자가 요청한 범위만 수정합니다.
- 기존 코드와 디자인 규칙을 최대한 유지합니다.
- 관련 없는 리팩터링, 파일명 변경, 기능 재작성을 하지 않습니다.
- 기존에 있는 기능과 공통 코드를 먼저 재사용합니다.
- 존재하지 않는 API, 파일, 경로, 에셋을 만들지 않습니다.
- 요청 없이 라이브러리를 설치하지 않습니다.

## 기술 스택

- HTML
- CSS
- JavaScript
- [프로젝트에서 이미 사용하는 라이브러리]
- React, Vue, TypeScript, Tailwind는 추가하지 않습니다.

## HTML

- 의미에 맞는 header, nav, main, section, article, footer를 사용합니다.
- 동작은 button, 페이지 이동은 a 요소를 사용합니다.
- 모든 입력은 label과 연결합니다.
- 아이콘 대신 이모지를 사용하지 않습니다.

## CSS

- 기존 CSS 변수와 디자인 토큰을 먼저 사용합니다.
- CSS class와 HTML id는 snake_case를 사용합니다.
- 상태 class는 is_active, is_open, is_selected 형식으로 작성합니다.
- 오류 class는 has_error 형식으로 작성합니다.
- 불필요한 !important를 사용하지 않습니다.
- 모바일부터 작성하고 360px, 768px, 1280px을 확인합니다.

## JavaScript

- 변수와 함수는 camelCase를 사용합니다.
- 불리언은 is, has, can, should로 시작합니다.
- 이벤트 함수는 handleXxx 형식으로 작성합니다.
- 전역 고정 상수만 UPPER_SNAKE_CASE를 사용합니다.
- 중복 로직은 목적이 분명한 함수로 분리합니다.
- 사용자 입력과 localStorage 데이터는 사용 전에 확인합니다.
- 임시 console.log는 완료 전에 제거합니다.

## 디자인 구현

- 디자인 원본을 시각 기준으로 사용합니다.
- 화면 구조, 간격, 정렬, 색상, 폰트, 상태를 임의로 재해석하지 않습니다.
- 실제 에셋을 우선 사용하고 placeholder URL을 만들지 않습니다.
- 디자인에 없는 기능이나 장식 모션을 추가하지 않습니다.

## Figma MCP

- 구조, 스크린샷, 변수, 디자인 컨텍스트를 순서대로 확인합니다.
- 생성된 코드를 그대로 붙이지 않고 현재 기술 스택에 맞게 해석합니다.
- 실제 에셋은 제공된 다운로드 기능으로 가져옵니다.
- 구현 후 브라우저 화면을 Figma 스크린샷과 비교합니다.

## 접근성과 상태

- 키보드 focus-visible을 확인합니다.
- 로딩, 빈 상태, 오류, 비활성 상태를 구현합니다.
- 색상만으로 상태를 전달하지 않습니다.
- prefers-reduced-motion을 반영합니다.

## 검증과 결과 보고

- [실제 lint 명령]
- [실제 테스트 명령]
- [실제 build 명령]
- 실행하지 않은 검증은 통과했다고 말하지 않습니다.
- 결과에는 변경 파일, 구현 내용, 주요 판단, 검증 결과, 확인하지 못한 부분을 구분해 작성합니다.

@AGENTS.md

## Claude Code 전용 규칙

- 여러 파일을 수정하는 작업은 구현 전에 계획을 작성합니다.
- 구현 전에 관련 파일, 기존 패턴, 실제 에셋을 확인합니다.
- 디자인 시안과 다른 결정을 해야 한다면 이유와 영향을 먼저 보고합니다.
- 같은 문제가 반복되면 공통 규칙 또는 Skill 보완 필요성을 보고합니다.
- 작업 후 PROJECT_CONTEXT.md에 완료 내용, 남은 문제, 검증 결과를 갱신합니다.

# [프로젝트명] Project Rules

- 모든 작업 전에 PRD.md와 AGENTS.md를 읽습니다.
- 디자인 원본과 기존 코드에서 확인한 사실을 우선합니다.
- PRD.md에 없는 기능이나 화면을 추가하지 않습니다.
- 기존 폴더 구조, 공통 스타일, 에셋을 먼저 확인하고 재사용합니다.
- Figma MCP를 사용할 때 구조, 스크린샷, 변수, 실제 에셋을 함께 확인합니다.
- 생성된 React 또는 Tailwind 예시는 현재 HTML, CSS, JavaScript 구조에 맞게 다시 작성합니다.
- 360px, 768px, 1280px과 키보드 조작을 확인합니다.
- 구현 후 PROJECT_CONTEXT.md에 완료 내용, 남은 문제, 마지막 검증 결과를 기록합니다.

---
name: design-to-vanilla
description: 제공된 디자인을 기존 HTML, CSS, JavaScript 프로젝트로 구현하거나 수정할 때 사용합니다.
---

# Design to Vanilla Web

## 목표

제공된 디자인과 실제 에셋을 기준으로 반응형 웹 화면을 정확하게 구현합니다.

## 작업 순서

1. PRD.md와 프로젝트 규칙을 읽습니다.
2. 기존 폴더 구조, 공통 CSS, JavaScript, 에셋을 확인합니다.
3. 화면 목록, 공통 영역, 상태, 사용자 흐름을 정리합니다.
4. Figma가 있으면 구조, 스크린샷, 변수, 디자인 컨텍스트를 확인합니다.
5. 재사용할 기존 코드와 새로 만들 최소 범위를 구분합니다.
6. 의미에 맞는 HTML 구조를 작성합니다.
7. 기존 디자인 토큰으로 CSS와 반응형을 구현합니다.
8. 디자인에 실제로 있는 JavaScript 인터랙션만 구현합니다.
9. 로딩, 빈 상태, 오류, 비활성 상태를 확인합니다.
10. 360px, 768px, 1280px에서 디자인과 비교합니다.
11. 키보드 포커스, 모션 감소 설정, 콘솔 오류를 확인합니다.
12. 변경 파일과 검증 결과를 보고합니다.

## 금지 사항

- React, Vue, TypeScript, Tailwind를 추가하지 않습니다.
- 요청 없이 패키지를 설치하지 않습니다.
- 디자인에 없는 기능, 화면, 이미지, 아이콘, 애니메이션을 만들지 않습니다.
- Figma에서 생성된 코드를 그대로 붙이지 않습니다.
- 모든 요소를 absolute로 배치하거나 디자인 이미지를 배경으로 붙이지 않습니다.
- 검증하지 않은 결과를 완료했다고 보고하지 않습니다.

# [프로젝트명] 현재 상태

마지막 업데이트: [YYYY-MM-DD]

## 구현 완료

- [완료한 화면 또는 기능]

## 구현 중

- [현재 수정 중인 화면 또는 기능]

## 확정된 UX 정책

- [예: 모바일 메뉴는 닫힌 상태로 시작]
- [예: 검색 결과가 없으면 검색어 수정 안내 표시]

## 사용 중인 라이브러리

- [라이브러리명]: [사용 목적과 적용 위치]

## 저장 데이터

- localStorage key: [key 이름과 저장 내용]

## 알려진 문제

- [재현 방법과 영향]

## 다음 작업

1. [가장 먼저 할 일]
2. [그다음 할 일]

## 마지막 검증 결과

- 실행 명령: [명령]
- 결과: [통과 또는 실패와 이유]
- 확인 화면: [360px, 768px, 1280px]
- 확인하지 못한 부분: [없으면 없음]