game-fe-agent/skills/dev-component/SKILL.md

name, description

name	description
dev-component	화면 명세를 받아 Atomic Design 기반 컴포넌트 트리를 설계하고 Nuxt 표준 디렉토리 구조와 컴포넌트 스켈레톤 코드를 자동 생성합니다. 다음 상황에서 반드시 사용하세요: - "이 화면 컴포넌트로 분리해줘", "컴포넌트 구조 설계해줘" - "Atomic Design으로 나눠줘", "컴포넌트 트리 만들어줘" - 신규 기능의 컴포넌트 아키텍처를 결정해야 할 때

컴포넌트 아키텍처 설계 (dev-component)

화면 명세 → Atomic Design 기반 컴포넌트 트리 → Nuxt SFC 스켈레톤 자동 생성.

언제 사용하는가

• 신규 페이지/기능의 컴포넌트 구조를 잡을 때
• 마크업 완료 후 컴포넌트 분리 기준을 결정할 때
• 팀원이 병렬로 작업할 수 있도록 역할 분리가 필요할 때

입력

• 화면 명세 또는 완성된 마크업 코드
• plan-analyzer 산출물 (컴포넌트 트리 초안)이 있으면 활용
• 기존 components/ 디렉토리 구조 (재사용 가능 컴포넌트 파악용)

---

작업 순서

Phase 1: 기존 컴포넌트 파악

1. 프로젝트 components/ 디렉토리를 읽어 재사용 가능한 컴포넌트를 파악한다.
2. 설계 전 중복 개발 방지를 위해 유사 컴포넌트 목록을 사용자에게 안내한다.

Phase 2: Atomic Design 분류

각 UI 요소를 아래 5단계로 분류한다:

레벨	위치	기준
Atoms	components/base/	더 이상 분리 불가한 기본 단위 (Button, Icon, Input, Badge)
Molecules	components/common/	Atoms 2개 이상 조합 (SearchBar, FormField, Card)
Organisms	components/<도메인>/	독립적 기능 단위 (Header, ProductList, ReviewSection)
Templates	layouts/	페이지 레이아웃 골격
Pages	pages/	실제 데이터와 결합한 최종 화면

Phase 3: 컴포넌트 트리 출력

pages/
└── <page-name>.vue
    ├── layouts/<layout>.vue
    └── components/
        ├── <domain>/
        │   ├── <Organism>.vue   ← props: { ... }
        │   └── <Organism>.vue
        └── common/
            └── <Molecule>.vue   ← props: { ... }, emits: [...]

Phase 4: Props / Emits 설계

각 컴포넌트의 인터페이스를 정의한다:

// 예시: ProductCard.vue
interface Props {
  id: string
  title: string
  imageUrl: string
  price: number
  isSoldOut?: boolean
}

type Emits = {
  click: [id: string]
  addToCart: [id: string]
}

Phase 5: 스켈레톤 코드 생성

각 컴포넌트의 SFC 스켈레톤 파일을 생성한다:

<script setup lang="ts">
interface Props {
  // Phase 4 정의 붙여넣기
}

const props = defineProps<Props>()
const emit = defineEmits<{
  // Phase 4 정의 붙여넣기
}>()
</script>

<template>
  <!-- TODO: markup-base / markup-figma 스킬로 마크업 구현 -->
</template>

---

출력 형식

## 컴포넌트 설계: <페이지명>

### 재사용 가능한 기존 컴포넌트
- `components/common/Button.vue` — CTA 버튼에 활용 가능

### 컴포넌트 트리
[ASCII 트리]

### 신규 생성 파일 목록
- `components/product/ProductCard.vue` — Props: id, title, imageUrl, price
- `components/product/ProductList.vue` — Props: items[]
- ...

### 스켈레톤 코드
[각 파일 코드]