--- name: markup-base description: | 화면 설명, 스크린샷, 텍스트 명세를 받아 시멘틱 HTML + Tailwind CSS 기반의 Nuxt SFC 마크업을 생성합니다. 팀 공통 컨벤션(7단계 클래스 순서, ARIA, 반응형)을 자동 적용합니다. 다음 상황에서 반드시 사용하세요: - "이 화면 마크업해줘", "HTML 구조 만들어줘", "퍼블리싱해줘" - 화면 설명이나 스크린샷을 받고 컴포넌트 골격을 잡을 때 - Figma 없이 텍스트 명세나 와이어프레임으로 마크업을 시작할 때 --- # 기본 마크업 가이드 (markup-base) 화면 명세 → 시멘틱 HTML + Tailwind → Nuxt `.vue` SFC 골격을 생성합니다. ## 언제 사용하는가 - Figma 디자인 없이 화면 명세/스크린샷으로 마크업을 시작할 때 - 신규 페이지/섹션의 기본 구조를 빠르게 잡을 때 - 기존 마크업을 팀 컨벤션에 맞게 리팩토링할 때 ## 입력 - 화면 설명 (텍스트), 와이어프레임 이미지, 또는 스크린샷 - 반응형 분기점 요건 (없으면 Tailwind 기본값 사용: `sm` 640px / `md` 768px / `lg` 1024px) - 접근성 요건 (없으면 WCAG 2.1 AA 기본 적용) --- ## 작업 순서 ### Phase 1: 화면 구조 파악 1. 제공된 화면 명세 또는 이미지를 분석해 레이아웃 영역을 식별한다. - 반복 블록 → 컴포넌트 후보 표시 - 상태가 있는 영역 (로딩, 에러, 빈 상태) 확인 2. 반응형 분기점을 파악한다. - 모바일 우선(mobile-first) 여부 확인 - 중단점별 레이아웃 변화 정리 ### Phase 2: 시멘틱 구조 설계 1. HTML 시멘틱 태그를 선택한다. | 영역 | 권장 태그 | |---|---| | 페이지 헤더 | `
` | | 주 내비게이션 | `