📝 docs: 여러 문서 및 파일 삭제

.claude/skills/markup-figma/SKILL.md

@@ -0,0 +1,107 @@
+---
+name: markup-figma
+description: |
+  Figma URL 또는 Figma MCP로 추출한 디자인 데이터를 받아
+  Nuxt SFC + Tailwind CSS 마크업으로 자동 변환합니다.
+
+  다음 상황에서 반드시 사용하세요:
+  - "이 Figma 마크업해줘", "Figma 디자인 컴포넌트로 만들어줘"
+  - Figma URL 또는 링크를 받고 HTML/Vue 구현을 요청받았을 때
+  - 피그마 시안 기반 반응형 마크업이 필요할 때
+---
+
+# Figma → 마크업 변환 (markup-figma)
+
+Figma 디자인 데이터 → Nuxt SFC + Tailwind 마크업 자동 변환.
+
+## 언제 사용하는가
+
+- 디자이너로부터 Figma URL을 받아 퍼블리싱을 시작할 때
+- Figma MCP가 Claude Code에 연결되어 있을 때
+- Figma 없이 스크린샷/Export 이미지로 구현할 때
+
+## 입력
+
+- Figma 프레임 URL 또는 노드 ID
+- (선택) 브레이크포인트 요건, 이미지 에셋 CDN 경로
+
+---
+
+## 작업 순서
+
+### Phase 1: Figma 데이터 추출
+
+#### Figma MCP 사용 가능 시
+```
+Figma URL → MCP로 레이어 트리, 스타일, 치수 자동 추출
+```
+
+추출 항목:
+- 컬러 HEX값 (RGBA → HEX 변환)
+- 폰트: 패밀리, 사이즈(px), weight, 줄간격
+- 레이아웃: width/height, padding, gap
+- 컴포넌트 이름 → Vue 컴포넌트 이름 매핑 (`PascalCase`)
+- 이미지 에셋 URL
+
+#### MCP 없이 진행 시
+사용자에게 아래 정보를 요청한다:
+- 섹션별 스크린샷 (모바일 / 데스크톱 분리)
+- 컬러 HEX, 폰트 스펙, 여백(px)
+- CTA 링크 및 버튼 텍스트
+
+### Phase 2: Tailwind 매핑
+
+| Figma 값 | Tailwind 클래스 예시 |
+|---|---|
+| `width: 320px` | `w-80` 또는 `w-[320px]` |
+| `padding: 16px 24px` | `py-4 px-6` |
+| `gap: 12px` | `gap-3` |
+| `font-size: 14px` | `text-sm` |
+| `border-radius: 8px` | `rounded-lg` |
+| `color: #1A1A1A` | `text-[#1A1A1A]` 또는 디자인 토큰 |
+
+- Tailwind 디자인 토큰(`tailwind.config.ts`)이 있으면 임의값 대신 토큰 사용
+- 임의값(`w-[123px]`)은 디자인 시스템에 없는 값에만 사용
+
+### Phase 3: 컴포넌트 구조 결정
+
+Figma 컴포넌트 → Vue 파일 매핑:
+- Figma 상위 프레임 → 페이지 레이아웃 (`pages/` 또는 `layouts/`)
+- Figma Instance → `components/` 파일
+- 반복 컴포넌트 → Props로 추상화
+
+### Phase 4: SFC 코드 생성
+
+`markup-base` Phase 3~5 동일 적용 (클래스 순서, ARIA, SFC 구조).
+
+반응형 처리:
+- Figma Mobile 프레임 → base 클래스
+- Figma Desktop 프레임 → `lg:` 접두사
+
+### Phase 5: 검수 체크리스트
+
+- [ ] 폰트 스펙 일치 여부 (px → rem 변환 확인)
+- [ ] 이미지 `alt` 텍스트 작성 여부
+- [ ] 인터랙션 요소 ARIA 속성 확인
+- [ ] Tailwind 클래스 7단계 순서 준수
+
+---
+
+## 출력 형식
+
+```
+## Figma 마크업: <프레임명>
+
+### 추출된 디자인 정보
+- 컬러: [HEX 목록]
+- 폰트: [패밀리 / 사이즈 목록]
+- 브레이크포인트: [mobile / desktop 치수]
+
+### 코드
+\`\`\`vue
+...
+\`\`\`
+
+### 미확인 항목
+- [ ] [에셋 URL, 링크 등 확정 필요 항목]
+```