---
name: nuxt-component-create
description: 새로운 Vue 3 컴포넌트를 팀 컨벤션에 맞게 생성할 때 사용합니다. "컴포넌트 만들어줘", "새 컴포넌트", "UI 컴포넌트 추가", "버튼 만들어줘", "카드 컴포넌트" 등을 요청하면 트리거됩니다. (기존 컴포넌트 리뷰는 vue-component-review 스킬을 사용하세요.)
---

# Vue 컴포넌트 신규 생성

이 skill은 팀 컨벤션에 맞는 **새로운** Vue 3 컴포넌트를 생성합니다.
기존 컴포넌트의 리뷰/점검은 `vue-component-review` skill을 사용합니다.

## 작업 순서

1. **요구사항 확인**
   - 컴포넌트의 목적, 필요한 props, emits, 사용 위치를 파악
   - 불명확한 부분은 사용자에게 질문

2. **기존 컴포넌트 탐색**
   - `components/` 디렉토리에서 유사/재사용 가능한 컴포넌트 확인
   - `.claude/project/conventions.md` 에서 프로젝트별 컴포넌트 규칙 확인

3. **파일 위치 결정**
   - 프로젝트의 기존 디렉토리 구조 패턴을 따름
   - 일반적 구조: `components/base/` (Atoms), `components/common/` (Molecules), `components/domain/` (Organisms)

4. **인터페이스 우선 설계**
   - `defineProps<T>()` 제네릭 형태로 props 타입 정의
   - `defineEmits<{}>()` 제네릭 형태로 events 선언
   - 필요 시 `defineSlots` 로 슬롯 타입 정의

5. **구현**
   - `<script setup lang="ts">` 사용
   - 로직이 30줄을 넘으면 composable 추출 검토
   - 템플릿의 가독성 유지

6. **스타일링**
   - Tailwind 유틸리티 클래스 우선
   - 조건부 클래스는 `clsx` 또는 `cn` 유틸리티 사용
   - `@apply` 는 꼭 필요한 경우에만

7. **검증**
   - TypeScript 오류 확인
   - 파일 길이 200줄 이내 확인

## 컴포넌트 템플릿

```vue
<script setup lang="ts">
interface Props {
  /** 버튼 라벨 */
  label: string;
  isDisabled?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  isDisabled: false,
});

const emit = defineEmits<{
  click: [event: MouseEvent];
}>();

function handleClick(event: MouseEvent) {
  if (!props.isDisabled) {
    emit('click', event);
  }
}
</script>

<template>
  <button
    :disabled="isDisabled"
    class="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 disabled:opacity-50"
    @click="handleClick"
  >
    {{ label }}
  </button>
</template>
```

## 슬롯이 있는 컴포넌트 템플릿

```vue
<script setup lang="ts">
interface Props {
  title: string;
  isCollapsible?: boolean;
}

withDefaults(defineProps<Props>(), {
  isCollapsible: false,
});

const isOpen = ref(true);

function handleToggle() {
  isOpen.value = !isOpen.value;
}
</script>

<template>
  <div class="rounded-lg border border-gray-200 p-4">
    <div class="flex items-center justify-between">
      <h3 class="text-lg font-semibold">{{ title }}</h3>
      <button v-if="isCollapsible" @click="handleToggle">
        {{ isOpen ? '접기' : '펼치기' }}
      </button>
    </div>
    <div v-show="isOpen" class="mt-4">
      <slot />
    </div>
  </div>
</template>
```

## 분리 기준 가이드

| 상황 | 조치 |
| --- | --- |
| 파일 200줄 초과 | 하위 컴포넌트로 분리 |
| script 로직 30줄 초과 | composable로 추출 |
| Props 5개 초과 | 객체 prop으로 그룹핑 검토 |
| 동일 패턴 3회 이상 반복 | 공통 컴포넌트로 추출 |

## 네이밍 규칙

- 파일명: `PascalCase.vue` (예: `UserCard.vue`)
- 이벤트 핸들러: `handle*` 또는 `on*` 접두사
- 불리언 props: `is*`, `has*`, `can*`, `should*` 접두사
- 상수: `UPPER_SNAKE_CASE`

## 주의사항

- Options API 사용 금지. 반드시 `<script setup lang="ts">`
- `any` 타입 사용 금지. 불가피 시 주석으로 사유 기재, `unknown` 우선 고려
- 직접 `fetch`/`$fetch` 호출 금지. composable 또는 API wrapper 사용
- 새 컴포넌트 생성 전 기존 컴포넌트 재사용 가능 여부를 반드시 먼저 확인
- 사용자가 리팩토링을 요청하지 않은 경우 기존 코드를 수정하지 않음