@su-record/vibe 2.4.34 → 2.4.35

package/languages/typescript-vue.md

@@ -0,0 +1,353 @@
+# 🟢 TypeScript + Vue/Nuxt 품질 규칙
+
+## 핵심 원칙 (core에서 상속)
+
+```markdown
+✅ 단일 책임 (SRP)
+✅ 중복 제거 (DRY)
+✅ 재사용성
+✅ 낮은 복잡도
+✅ 함수 ≤ 30줄, Template ≤ 100줄
+✅ 중첩 ≤ 3단계
+✅ Cyclomatic complexity ≤ 10
+```
+
+## Vue 3 + TypeScript 특화 규칙
+
+### 1. Composition API 사용 (Options API 지양)
+
+```typescript
+// ❌ Options API (레거시)
+export default {
+  data() {
+    return { count: 0 };
+  },
+  methods: {
+    increment() {
+      this.count++;
+    }
+  }
+};
+
+// ✅ Composition API + script setup
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+
+const count = ref(0);
+const doubled = computed(() => count.value * 2);
+
+function increment() {
+  count.value++;
+}
+
+onMounted(() => {
+  console.log('컴포넌트 마운트됨');
+});
+</script>
+```
+
+### 2. 타입 안전한 Props/Emits
+
+```typescript
+// ✅ Props 타입 정의
+interface Props {
+  userId: string;
+  title?: string;
+  items: Item[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '기본 제목',
+});
+
+// ✅ Emits 타입 정의
+interface Emits {
+  (e: 'update', value: string): void;
+  (e: 'delete', id: number): void;
+  (e: 'select', item: Item): void;
+}
+
+const emit = defineEmits<Emits>();
+
+// 사용
+emit('update', '새 값');
+emit('delete', 123);
+```
+
+### 3. Composables로 로직 분리
+
+```typescript
+// ✅ composables/useUser.ts
+import { ref, computed } from 'vue';
+import type { User } from '@/types';
+
+export function useUser(userId: string) {
+  const user = ref<User | null>(null);
+  const isLoading = ref(false);
+  const error = ref<string | null>(null);
+
+  const fullName = computed(() =>
+    user.value ? `${user.value.firstName} ${user.value.lastName}` : ''
+  );
+
+  async function fetchUser() {
+    isLoading.value = true;
+    error.value = null;
+    try {
+      const response = await api.getUser(userId);
+      user.value = response.data;
+    } catch (e) {
+      error.value = '사용자를 불러오지 못했습니다';
+    } finally {
+      isLoading.value = false;
+    }
+  }
+
+  return {
+    user,
+    isLoading,
+    error,
+    fullName,
+    fetchUser,
+  };
+}
+
+// 컴포넌트에서 사용
+<script setup lang="ts">
+const { user, isLoading, fetchUser } = useUser(props.userId);
+
+onMounted(fetchUser);
+</script>
+```
+
+### 4. Pinia 상태 관리
+
+```typescript
+// ✅ stores/user.ts
+import { defineStore } from 'pinia';
+import type { User } from '@/types';
+
+interface UserState {
+  currentUser: User | null;
+  users: User[];
+  isLoading: boolean;
+}
+
+export const useUserStore = defineStore('user', {
+  state: (): UserState => ({
+    currentUser: null,
+    users: [],
+    isLoading: false,
+  }),
+
+  getters: {
+    isLoggedIn: (state) => !!state.currentUser,
+    userCount: (state) => state.users.length,
+  },
+
+  actions: {
+    async login(email: string, password: string) {
+      this.isLoading = true;
+      try {
+        const user = await authApi.login(email, password);
+        this.currentUser = user;
+      } finally {
+        this.isLoading = false;
+      }
+    },
+
+    logout() {
+      this.currentUser = null;
+    },
+  },
+});
+
+// Setup Store 스타일 (권장)
+export const useUserStore = defineStore('user', () => {
+  const currentUser = ref<User | null>(null);
+  const isLoggedIn = computed(() => !!currentUser.value);
+
+  async function login(email: string, password: string) {
+    currentUser.value = await authApi.login(email, password);
+  }
+
+  return { currentUser, isLoggedIn, login };
+});
+```
+
+### 5. Nuxt 3 특화 규칙
+
+```typescript
+// ✅ Server API Routes (server/api/)
+// server/api/users/[id].get.ts
+export default defineEventHandler(async (event) => {
+  const id = getRouterParam(event, 'id');
+
+  if (!id) {
+    throw createError({
+      statusCode: 400,
+      message: 'ID가 필요합니다',
+    });
+  }
+
+  const user = await prisma.user.findUnique({ where: { id } });
+
+  if (!user) {
+    throw createError({
+      statusCode: 404,
+      message: '사용자를 찾을 수 없습니다',
+    });
+  }
+
+  return user;
+});
+
+// ✅ useFetch / useAsyncData
+<script setup lang="ts">
+// SSR 지원 데이터 페칭
+const { data: user, pending, error } = await useFetch<User>(
+  `/api/users/${props.userId}`
+);
+
+// 캐싱 키 지정
+const { data: posts } = await useAsyncData(
+  `user-${props.userId}-posts`,
+  () => $fetch(`/api/users/${props.userId}/posts`)
+);
+</script>
+
+// ✅ Middleware
+// middleware/auth.ts
+export default defineNuxtRouteMiddleware((to, from) => {
+  const { isLoggedIn } = useUserStore();
+
+  if (!isLoggedIn && to.path !== '/login') {
+    return navigateTo('/login');
+  }
+});
+```
+
+### 6. 컴포넌트 구조
+
+```vue
+<!-- ✅ 권장 컴포넌트 구조 -->
+<script setup lang="ts">
+// 1. 타입 import
+import type { User, Item } from '@/types';
+
+// 2. 컴포넌트 import
+import UserAvatar from '@/components/UserAvatar.vue';
+
+// 3. Props/Emits
+interface Props {
+  user: User;
+  editable?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  editable: false,
+});
+
+const emit = defineEmits<{
+  (e: 'update', user: User): void;
+}>();
+
+// 4. Composables
+const { isLoading, save } = useUserForm();
+
+// 5. Reactive state
+const formData = ref({ ...props.user });
+const isEditing = ref(false);
+
+// 6. Computed
+const canSave = computed(() =>
+  formData.value.name.length > 0 && !isLoading.value
+);
+
+// 7. Methods
+async function handleSave() {
+  await save(formData.value);
+  emit('update', formData.value);
+}
+
+// 8. Lifecycle
+onMounted(() => {
+  console.log('컴포넌트 준비됨');
+});
+</script>
+
+<template>
+  <div class="user-card">
+    <UserAvatar :src="user.avatar" />
+    <h2>{{ user.name }}</h2>
+    <button
+      v-if="editable"
+      :disabled="!canSave"
+      @click="handleSave"
+    >
+      저장
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.user-card {
+  padding: 1rem;
+  border-radius: 8px;
+}
+</style>
+```
+
+## 안티패턴
+
+```typescript
+// ❌ v-if와 v-for 함께 사용
+<li v-for="user in users" v-if="user.isActive">
+
+// ✅ computed로 필터링
+const activeUsers = computed(() => users.value.filter(u => u.isActive));
+<li v-for="user in activeUsers">
+
+// ❌ Props 직접 수정
+props.user.name = '새 이름';
+
+// ✅ emit으로 부모에게 알림
+emit('update', { ...props.user, name: '새 이름' });
+
+// ❌ $refs 남용
+this.$refs.input.focus();
+
+// ✅ template ref + expose
+const inputRef = ref<HTMLInputElement>();
+defineExpose({ focus: () => inputRef.value?.focus() });
+```
+
+## 파일 구조 (Nuxt 3)
+
+```
+project/
+├── components/
+│   ├── ui/              # 기본 UI 컴포넌트
+│   ├── features/        # 기능별 컴포넌트
+│   └── layouts/         # 레이아웃 컴포넌트
+├── composables/         # Composition 함수
+├── stores/              # Pinia 스토어
+├── server/
+│   ├── api/             # API 라우트
+│   ├── middleware/      # 서버 미들웨어
+│   └── utils/           # 서버 유틸리티
+├── pages/               # 파일 기반 라우팅
+├── middleware/          # 클라이언트 미들웨어
+├── types/               # TypeScript 타입
+└── utils/               # 유틸리티 함수
+```
+
+## 체크리스트
+
+- [ ] Composition API + `<script setup>` 사용
+- [ ] Props/Emits 타입 정의
+- [ ] Composables로 로직 분리
+- [ ] Pinia Setup Store 스타일 사용
+- [ ] `any` 타입 사용 금지
+- [ ] v-if/v-for 분리
+- [ ] scoped 스타일 사용

package/package.json

@@ -1,87 +1,88 @@
-{
-  "name": "@su-record/vibe",
-  "version": "2.4.34",
-  "description": "Vibe - Claude Code exclusive SPEC-driven AI coding framework with 35+ integrated tools",
-  "type": "module",
-  "main": "dist/cli/index.js",
-  "exports": {
-    ".": "./dist/cli/index.js",
-    "./tools": "./dist/tools/index.js",
-    "./tools/memory": "./dist/tools/memory/index.js",
-    "./tools/convention": "./dist/tools/convention/index.js",
-    "./tools/semantic": "./dist/tools/semantic/index.js",
-    "./tools/thinking": "./dist/tools/thinking/index.js",
-    "./tools/planning": "./dist/tools/planning/index.js",
-    "./tools/prompt": "./dist/tools/prompt/index.js",
-    "./tools/ui": "./dist/tools/ui/index.js",
-    "./tools/time": "./dist/tools/time/index.js",
-    "./tools/reasoning": "./dist/tools/reasoning/index.js",
-    "./tools/analytics": "./dist/tools/analytics/index.js",
-    "./orchestrator": "./dist/orchestrator/index.js",
-    "./lib/gpt": "./dist/lib/gpt-api.js",
-    "./lib/gemini": "./dist/lib/gemini-api.js"
-  },
-  "bin": {
-    "vibe": "./dist/cli/index.js"
-  },
-  "scripts": {
-    "build": "tsc",
-    "dev": "tsc --watch",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "prepublishOnly": "npm run build"
-  },
-  "keywords": [
-    "ai",
-    "vibe",
-    "coding",
-    "spec-driven",
-    "claude",
-    "mcp",
-    "framework",
-    "requirements",
-    "user-story",
-    "ultrawork",
-    "parallel-agents",
-    "memory-management",
-    "knowledge-graph",
-    "code-analysis",
-    "code-quality"
-  ],
-  "author": "Su",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/su-record/vibe.git"
-  },
-  "homepage": "https://github.com/su-record/vibe#readme",
-  "engines": {
-    "node": ">=18.0.0"
-  },
-  "dependencies": {
-    "@anthropic-ai/claude-agent-sdk": "^0.2.6",
-    "@modelcontextprotocol/sdk": "^1.0.0",
-    "better-sqlite3": "^12.4.1",
-    "chalk": "^5.3.0",
-    "glob": "^11.0.3",
-    "ts-morph": "^26.0.0"
-  },
-  "devDependencies": {
-    "@types/better-sqlite3": "^7.6.13",
-    "@types/glob": "^8.1.0",
-    "@types/node": "^22.0.0",
-    "typescript": "^5.5.4",
-    "vitest": "^4.0.9"
-  },
-  "files": [
-    "dist/",
-    ".claude/",
-    "commands/",
-    "agents/",
-    "skills/",
-    "hooks/",
-    "CLAUDE.md",
-    "README.md",
-    "LICENSE"
-  ]
-}
+{
+  "name": "@su-record/vibe",
+  "version": "2.4.35",
+  "description": "Vibe - Claude Code exclusive SPEC-driven AI coding framework with 35+ integrated tools",
+  "type": "module",
+  "main": "dist/cli/index.js",
+  "exports": {
+    ".": "./dist/cli/index.js",
+    "./tools": "./dist/tools/index.js",
+    "./tools/memory": "./dist/tools/memory/index.js",
+    "./tools/convention": "./dist/tools/convention/index.js",
+    "./tools/semantic": "./dist/tools/semantic/index.js",
+    "./tools/thinking": "./dist/tools/thinking/index.js",
+    "./tools/planning": "./dist/tools/planning/index.js",
+    "./tools/prompt": "./dist/tools/prompt/index.js",
+    "./tools/ui": "./dist/tools/ui/index.js",
+    "./tools/time": "./dist/tools/time/index.js",
+    "./tools/reasoning": "./dist/tools/reasoning/index.js",
+    "./tools/analytics": "./dist/tools/analytics/index.js",
+    "./orchestrator": "./dist/orchestrator/index.js",
+    "./lib/gpt": "./dist/lib/gpt-api.js",
+    "./lib/gemini": "./dist/lib/gemini-api.js"
+  },
+  "bin": {
+    "vibe": "./dist/cli/index.js"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "ai",
+    "vibe",
+    "coding",
+    "spec-driven",
+    "claude",
+    "mcp",
+    "framework",
+    "requirements",
+    "user-story",
+    "ultrawork",
+    "parallel-agents",
+    "memory-management",
+    "knowledge-graph",
+    "code-analysis",
+    "code-quality"
+  ],
+  "author": "Su",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/su-record/vibe.git"
+  },
+  "homepage": "https://github.com/su-record/vibe#readme",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "dependencies": {
+    "@anthropic-ai/claude-agent-sdk": "^0.2.6",
+    "@modelcontextprotocol/sdk": "^1.0.0",
+    "better-sqlite3": "^12.4.1",
+    "chalk": "^5.3.0",
+    "glob": "^11.0.3",
+    "ts-morph": "^26.0.0"
+  },
+  "devDependencies": {
+    "@types/better-sqlite3": "^7.6.13",
+    "@types/glob": "^8.1.0",
+    "@types/node": "^22.0.0",
+    "typescript": "^5.5.4",
+    "vitest": "^4.0.9"
+  },
+  "files": [
+    "dist/",
+    "vibe/",
+    "languages/",
+    "commands/",
+    "agents/",
+    "skills/",
+    "hooks/",
+    "CLAUDE.md",
+    "README.md",
+    "LICENSE"
+  ]
+}

package/skills/context7-usage.md

@@ -1,82 +1,82 @@
----
-description: Context7 MCP for latest library documentation. Auto-activates when docs, documentation, latest version, official docs, API reference, or library help is needed.
----
-# Context7 Usage
-
-Guide for searching latest library/framework documentation using Context7 MCP.
-
-## When to Use
-
-| Situation | Example |
-|-----------|---------|
-| Latest API check | "React 19 use() hook usage" |
-| Version differences | "Next.js 15 changes" |
-| Official docs needed | "Prisma schema syntax" |
-| Migration guide | "Vue 2 → Vue 3 migration" |
-
-## Usage (2 Steps)
-
-### Step 1: Find Library ID
-
-```
-mcp__context7__resolve-library-id({
-  libraryName: "react"
-})
-```
-
-Returns: `/facebook/react`, `/vercel/next.js`, etc.
-
-### Step 2: Get Documentation
-
-```
-mcp__context7__get-library-docs({
-  context7CompatibleLibraryID: "/facebook/react",
-  topic: "hooks"  // optional: specific topic only
-})
-```
-
-## Common Library IDs
-
-| Library | Context7 ID |
-|---------|-------------|
-| React | /facebook/react |
-| Next.js | /vercel/next.js |
-| Vue | /vuejs/vue |
-| Svelte | /sveltejs/svelte |
-| Express | /expressjs/express |
-| Prisma | /prisma/prisma |
-| TypeScript | /microsoft/typescript |
-
-## Search Tips
-
-```
-# Broad search
-topic: omit → full documentation
-
-# Narrow search
-topic: "authentication" → auth related only
-
-# Specific feature
-topic: "server components" → server components only
-```
-
-## Web Search vs Context7
-
-| Aspect | Web Search | Context7 |
-|--------|------------|----------|
-| Speed | Slow | Fast |
-| Accuracy | Blogs mixed in | Official docs only |
-| Freshness | Variable | Always latest |
-| Reliability | Medium | High |
-
-**Prefer Context7 for library documentation**
-
-## Fallback When Fails
-
-```
-context7 fails
-    ↓
-Web Search for official docs
-    ↓
-gpt- [library question]
-```
+---
+description: Context7 MCP for latest library documentation. Auto-activates when docs, documentation, latest version, official docs, API reference, or library help is needed.
+---
+# Context7 Usage
+
+Guide for searching latest library/framework documentation using Context7 MCP.
+
+## When to Use
+
+| Situation | Example |
+|-----------|---------|
+| Latest API check | "React 19 use() hook usage" |
+| Version differences | "Next.js 15 changes" |
+| Official docs needed | "Prisma schema syntax" |
+| Migration guide | "Vue 2 → Vue 3 migration" |
+
+## Usage (2 Steps)
+
+### Step 1: Find Library ID
+
+```
+mcp__context7__resolve-library-id({
+  libraryName: "react"
+})
+```
+
+Returns: `/facebook/react`, `/vercel/next.js`, etc.
+
+### Step 2: Get Documentation
+
+```
+mcp__context7__get-library-docs({
+  context7CompatibleLibraryID: "/facebook/react",
+  topic: "hooks"  // optional: specific topic only
+})
+```
+
+## Common Library IDs
+
+| Library | Context7 ID |
+|---------|-------------|
+| React | /facebook/react |
+| Next.js | /vercel/next.js |
+| Vue | /vuejs/vue |
+| Svelte | /sveltejs/svelte |
+| Express | /expressjs/express |
+| Prisma | /prisma/prisma |
+| TypeScript | /microsoft/typescript |
+
+## Search Tips
+
+```
+# Broad search
+topic: omit → full documentation
+
+# Narrow search
+topic: "authentication" → auth related only
+
+# Specific feature
+topic: "server components" → server components only
+```
+
+## Web Search vs Context7
+
+| Aspect | Web Search | Context7 |
+|--------|------------|----------|
+| Speed | Slow | Fast |
+| Accuracy | Blogs mixed in | Official docs only |
+| Freshness | Variable | Always latest |
+| Reliability | Medium | High |
+
+**Prefer Context7 for library documentation**
+
+## Fallback When Fails
+
+```
+context7 fails
+    ↓
+Web Search for official docs
+    ↓
+gpt- [library question]
+```