@choblue/claude-code-toolkit 1.2.6 → 1.2.7

package/.claude/skills/TailwindCSS/SKILL.md

@@ -49,165 +49,7 @@ React 규칙은 `../React/SKILL.md`, 공통 원칙은 `../Coding/SKILL.md`를
 
 ---
 
-## 2. 반응형 디자인
-
-### 브레이크포인트
-| 접두사 | 최소 너비 | 용도 |
-|--------|-----------|------|
-| (없음) | 0px | 모바일 기본 |
-| `sm:` | 640px | 소형 태블릿 |
-| `md:` | 768px | 태블릿 |
-| `lg:` | 1024px | 데스크톱 |
-| `xl:` | 1280px | 대형 데스크톱 |
-| `2xl:` | 1536px | 초대형 데스크톱 |
-
-### Mobile-First 원칙
-- 모바일 스타일을 기본으로 작성하고, 큰 화면에 대해 재정의한다
-
-```typescript
-// Good - Mobile-First
-<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-  {items.map((item) => (
-    <Card key={item.id} data={item} />
-  ))}
-</div>
-
-// Good - 반응형 타이포그래피
-<h1 className="text-2xl font-bold md:text-3xl lg:text-4xl">
-  제목
-</h1>
-```
-
----
-
-## 3. 다크 모드
-
-### dark: prefix 사용
-- `dark:` 접두사로 다크 모드 스타일을 정의한다
-- v4에서는 기본적으로 `prefers-color-scheme` 미디어 쿼리로 동작한다
-- 수동 토글(class 전략)이 필요하면 CSS에서 `@custom-variant`를 설정한다
-
-```css
-/* app.css - 수동 다크 모드 토글 시 */
-@import "tailwindcss";
-@custom-variant dark (&:where(.dark, .dark *));
-```
-
-```typescript
-// 컴포넌트에서 사용
-<div className="bg-white text-gray-900 dark:bg-gray-900 dark:text-white">
-  <p className="text-gray-600 dark:text-gray-300">
-    라이트/다크 모드를 지원하는 텍스트
-  </p>
-</div>
-```
-
-### 시맨틱 색상 활용
-- 반복되는 라이트/다크 색상 조합은 `@theme`과 CSS 변수로 추출한다
-
-```css
-/* app.css */
-@import "tailwindcss";
-
-@theme {
-  --color-background: #ffffff;
-  --color-foreground: #0a0a0a;
-}
-
-.dark {
-  --color-background: #0a0a0a;
-  --color-foreground: #fafafa;
-}
-```
-
----
-
-## 4. 커스텀 설정
-
-### @theme 디렉티브 사용
-- CSS 파일에서 `@theme` 디렉티브로 디자인 토큰을 정의한다
-- v4에서는 `tailwind.config.ts`가 불필요하다. 모든 커스텀 설정은 CSS의 `@theme`에서 정의한다
-- v4는 콘텐츠 파일을 자동 감지하므로 `content` 배열 설정이 불필요하다
-
-```css
-/* app.css */
-@import "tailwindcss";
-
-@theme {
-  --color-primary-50: #eff6ff;
-  --color-primary-100: #dbeafe;
-  --color-primary-500: #3b82f6;
-  --color-primary-600: #2563eb;
-  --color-primary-700: #1d4ed8;
-  --color-success: #10b981;
-  --color-warning: #f59e0b;
-  --color-danger: #ef4444;
-
-  --spacing-18: 4.5rem;
-  --spacing-88: 22rem;
-
-  --font-sans: 'Inter', sans-serif;
-}
-```
-
----
-
-## 5. 자주 쓰는 패턴
-
-### Flexbox 레이아웃
-```typescript
-// 가로 정렬 (중앙)
-<div className="flex items-center justify-center">
-
-// 가로 정렬 (양쪽 분산)
-<div className="flex items-center justify-between">
-
-// 세로 정렬
-<div className="flex flex-col gap-4">
-
-// 자식 요소 간격
-<div className="flex gap-2">
-```
-
-### Grid 레이아웃
-```typescript
-// 반응형 그리드
-<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
-
-// 고정 비율 그리드
-<div className="grid grid-cols-[1fr_2fr] gap-4">
-
-// 사이드바 레이아웃
-<div className="grid grid-cols-[240px_1fr] gap-8">
-```
-
-### Spacing 패턴
-```typescript
-// 섹션 간격
-<section className="py-12 md:py-16 lg:py-20">
-
-// 컨테이너
-<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-
-// 카드
-<div className="rounded-lg border p-6 shadow-sm">
-```
-
-### Typography 패턴
-```typescript
-// 텍스트 말줄임
-<p className="truncate">긴 텍스트...</p>
-
-// 여러 줄 말줄임
-<p className="line-clamp-3">긴 텍스트...</p>
-
-// 반응형 텍스트
-<h1 className="text-2xl font-bold tracking-tight md:text-4xl">
-```
-
----
-
-## 6. cn() 유틸리티
+## 2. cn() 유틸리티
 
 ### clsx + tailwind-merge 조합
 - 조건부 클래스 결합에는 `cn()` 유틸리티를 사용한다
@@ -227,12 +69,12 @@ export function cn(...inputs: ClassValue[]) {
 ```typescript
 import { cn } from '@/lib/utils';
 
-interface ButtonProps {
+type ButtonProps = {
   variant?: 'primary' | 'secondary' | 'danger';
   size?: 'sm' | 'md' | 'lg';
   className?: string;
   children: React.ReactNode;
-}
+};
 
 export function Button({ variant = 'primary', size = 'md', className, children }: ButtonProps) {
   return (
@@ -303,9 +145,8 @@ const buttonVariants = cva(
   }
 );
 
-interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {}
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof buttonVariants>;
 
 export function Button({ variant, size, className, ...props }: ButtonProps) {
   return (
@@ -322,82 +163,7 @@ export function Button({ variant, size, className, ...props }: ButtonProps) {
 
 ---
 
-## 7. 컴포넌트 추출
-
-### 반복 클래스 처리
-- 동일한 클래스 조합이 3회 이상 반복되면 컴포넌트로 추출한다
-- `@apply`보다 컴포넌트 추출을 우선한다
-
-```typescript
-// Bad - 동일한 클래스 반복
-<button className="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">저장</button>
-<button className="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">확인</button>
-<button className="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">전송</button>
-
-// Good - 컴포넌트로 추출
-<Button>저장</Button>
-<Button>확인</Button>
-<Button>전송</Button>
-```
-
-### @apply 사용 (제한적 허용)
-- 컴포넌트 추출이 어려운 경우에만 `@apply`를 사용한다
-- 주로 base layer의 글로벌 스타일에서 사용한다
-- v4에서도 `@apply`는 지원되지만, 여전히 컴포넌트 추출을 우선한다
-
-```css
-/* 허용 - 글로벌 기본 스타일 */
-@layer base {
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-/* 지양 - 컴포넌트 스타일을 @apply로 작성 */
-.btn-primary {
-  @apply rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700;
-}
-```
-
----
-
-## 8. 트랜지션 & 모션
-
-### transition 속성 명시
-- `transition-all` 사용을 금지한다 - 변경되는 속성만 명시한다
-- 불필요한 속성까지 트랜지션되면 성능이 저하된다
-
-```typescript
-// Bad - 모든 속성에 트랜지션
-<button className="transition-all">
-
-// Good - 필요한 속성만
-<button className="transition-colors">
-<div className="transition-[transform,opacity]">
-```
-
-### prefers-reduced-motion 존중
-- 애니메이션/트랜지션이 있는 요소에는 `motion-reduce:` 변형을 고려한다
-
-```typescript
-// 모션 감소 선호 시 애니메이션 비활성화
-<div className="animate-bounce motion-reduce:animate-none">
-<div className="transition-transform motion-reduce:transition-none">
-```
-
-### 다크 모드 color-scheme
-- 다크 모드 지원 시 `color-scheme: dark`를 설정하여 네이티브 UI(스크롤바, 입력 필드 등)도 다크 테마에 맞춘다
-
-```css
-/* app.css */
-.dark {
-  color-scheme: dark;
-}
-```
-
----
-
-## 9. 금지 사항
+## 3. 금지 사항
 
 - 인라인 `style={{}}` 사용 금지 - Tailwind 유틸리티 클래스를 사용한다
 - 임의값(arbitrary values) 남용 금지 - `w-[137px]` 같은 임의값은 최소화한다
@@ -426,3 +192,11 @@ const colorClasses = {
 
 <div className={colorClasses[color]}>
 ```
+
+---
+
+## 심화 참조
+
+- `references/responsive-dark.md` - 반응형 디자인, 다크 모드, 커스텀 설정 (@theme, 브레이크포인트, dark: prefix)
+- `references/patterns-components.md` - 자주 쓰는 레이아웃/타이포그래피 패턴, 컴포넌트 추출 규칙
+- `references/transitions.md` - 트랜지션 & 모션 (transition 속성 명시, prefers-reduced-motion, color-scheme)

package/.claude/skills/TailwindCSS/references/patterns-components.md

@@ -0,0 +1,93 @@
+# 자주 쓰는 패턴 & 컴포넌트 추출
+
+## 자주 쓰는 패턴
+
+### Flexbox 레이아웃
+```typescript
+// 가로 정렬 (중앙)
+<div className="flex items-center justify-center">
+
+// 가로 정렬 (양쪽 분산)
+<div className="flex items-center justify-between">
+
+// 세로 정렬
+<div className="flex flex-col gap-4">
+
+// 자식 요소 간격
+<div className="flex gap-2">
+```
+
+### Grid 레이아웃
+```typescript
+// 반응형 그리드
+<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+
+// 고정 비율 그리드
+<div className="grid grid-cols-[1fr_2fr] gap-4">
+
+// 사이드바 레이아웃
+<div className="grid grid-cols-[240px_1fr] gap-8">
+```
+
+### Spacing 패턴
+```typescript
+// 섹션 간격
+<section className="py-12 md:py-16 lg:py-20">
+
+// 컨테이너
+<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+
+// 카드
+<div className="rounded-lg border p-6 shadow-sm">
+```
+
+### Typography 패턴
+```typescript
+// 텍스트 말줄임
+<p className="truncate">긴 텍스트...</p>
+
+// 여러 줄 말줄임
+<p className="line-clamp-3">긴 텍스트...</p>
+
+// 반응형 텍스트
+<h1 className="text-2xl font-bold tracking-tight md:text-4xl">
+```
+
+---
+
+## 컴포넌트 추출
+
+### 반복 클래스 처리
+- 동일한 클래스 조합이 3회 이상 반복되면 컴포넌트로 추출한다
+- `@apply`보다 컴포넌트 추출을 우선한다
+
+```typescript
+// Bad - 동일한 클래스 반복
+<button className="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">저장</button>
+<button className="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">확인</button>
+<button className="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">전송</button>
+
+// Good - 컴포넌트로 추출
+<Button>저장</Button>
+<Button>확인</Button>
+<Button>전송</Button>
+```
+
+### @apply 사용 (제한적 허용)
+- 컴포넌트 추출이 어려운 경우에만 `@apply`를 사용한다
+- 주로 base layer의 글로벌 스타일에서 사용한다
+- v4에서도 `@apply`는 지원되지만, 여전히 컴포넌트 추출을 우선한다
+
+```css
+/* 허용 - 글로벌 기본 스타일 */
+@layer base {
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* 지양 - 컴포넌트 스타일을 @apply로 작성 */
+.btn-primary {
+  @apply rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700;
+}
+```

package/.claude/skills/TailwindCSS/references/responsive-dark.md

@@ -0,0 +1,102 @@
+# 반응형 디자인, 다크 모드, 커스텀 설정
+
+## 반응형 디자인
+
+### 브레이크포인트
+| 접두사 | 최소 너비 | 용도 |
+|--------|-----------|------|
+| (없음) | 0px | 모바일 기본 |
+| `sm:` | 640px | 소형 태블릿 |
+| `md:` | 768px | 태블릿 |
+| `lg:` | 1024px | 데스크톱 |
+| `xl:` | 1280px | 대형 데스크톱 |
+| `2xl:` | 1536px | 초대형 데스크톱 |
+
+### Mobile-First 원칙
+- 모바일 스타일을 기본으로 작성하고, 큰 화면에 대해 재정의한다
+
+```typescript
+// Good - Mobile-First
+<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+  {items.map((item) => (
+    <Card key={item.id} data={item} />
+  ))}
+</div>
+
+// Good - 반응형 타이포그래피
+<h1 className="text-2xl font-bold md:text-3xl lg:text-4xl">
+  제목
+</h1>
+```
+
+---
+
+## 다크 모드
+
+### dark: prefix 사용
+- `dark:` 접두사로 다크 모드 스타일을 정의한다
+- v4에서는 기본적으로 `prefers-color-scheme` 미디어 쿼리로 동작한다
+- 수동 토글(class 전략)이 필요하면 CSS에서 `@custom-variant`를 설정한다
+
+```css
+/* app.css - 수동 다크 모드 토글 시 */
+@import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
+```
+
+```typescript
+// 컴포넌트에서 사용
+<div className="bg-white text-gray-900 dark:bg-gray-900 dark:text-white">
+  <p className="text-gray-600 dark:text-gray-300">
+    라이트/다크 모드를 지원하는 텍스트
+  </p>
+</div>
+```
+
+### 시맨틱 색상 활용
+- 반복되는 라이트/다크 색상 조합은 `@theme`과 CSS 변수로 추출한다
+
+```css
+/* app.css */
+@import "tailwindcss";
+
+@theme {
+  --color-background: #ffffff;
+  --color-foreground: #0a0a0a;
+}
+
+.dark {
+  --color-background: #0a0a0a;
+  --color-foreground: #fafafa;
+}
+```
+
+---
+
+## 커스텀 설정
+
+### @theme 디렉티브 사용
+- CSS 파일에서 `@theme` 디렉티브로 디자인 토큰을 정의한다
+- v4에서는 `tailwind.config.ts`가 불필요하다. 모든 커스텀 설정은 CSS의 `@theme`에서 정의한다
+- v4는 콘텐츠 파일을 자동 감지하므로 `content` 배열 설정이 불필요하다
+
+```css
+/* app.css */
+@import "tailwindcss";
+
+@theme {
+  --color-primary-50: #eff6ff;
+  --color-primary-100: #dbeafe;
+  --color-primary-500: #3b82f6;
+  --color-primary-600: #2563eb;
+  --color-primary-700: #1d4ed8;
+  --color-success: #10b981;
+  --color-warning: #f59e0b;
+  --color-danger: #ef4444;
+
+  --spacing-18: 4.5rem;
+  --spacing-88: 22rem;
+
+  --font-sans: 'Inter', sans-serif;
+}
+```

package/.claude/skills/TailwindCSS/references/transitions.md

@@ -0,0 +1,33 @@
+# 트랜지션 & 모션
+
+### transition 속성 명시
+- `transition-all` 사용을 금지한다 - 변경되는 속성만 명시한다
+- 불필요한 속성까지 트랜지션되면 성능이 저하된다
+
+```typescript
+// Bad - 모든 속성에 트랜지션
+<button className="transition-all">
+
+// Good - 필요한 속성만
+<button className="transition-colors">
+<div className="transition-[transform,opacity]">
+```
+
+### prefers-reduced-motion 존중
+- 애니메이션/트랜지션이 있는 요소에는 `motion-reduce:` 변형을 고려한다
+
+```typescript
+// 모션 감소 선호 시 애니메이션 비활성화
+<div className="animate-bounce motion-reduce:animate-none">
+<div className="transition-transform motion-reduce:transition-none">
+```
+
+### 다크 모드 color-scheme
+- 다크 모드 지원 시 `color-scheme: dark`를 설정하여 네이티브 UI(스크롤바, 입력 필드 등)도 다크 테마에 맞춘다
+
+```css
+/* app.css */
+.dark {
+  color-scheme: dark;
+}
+```

package/README.md

@@ -25,34 +25,39 @@
 │   └── git-manager.md           ← Git 작업 (sonnet)
 ├── skills/
 │   ├── Coding/
-│   │   ├── SKILL.md             ← 공통 코딩 원칙
-│   │   └── backend.md           ← NestJS 코딩 규칙
+│   │   └── SKILL.md             ← 공통 코딩 원칙
+│   ├── NestJS/
+│   │   └── SKILL.md             ← NestJS 백엔드 규칙
 │   ├── Planning/
 │   │   └── SKILL.md             ← 작업 계획 (티어 판단, 작업 분해)
 │   ├── React/
-│   │   └── SKILL.md             ← React 컴포넌트, 훅, 상태 관리
+│   │   ├── SKILL.md             ← React 핵심 규칙
+│   │   └── references/          ← 상태/훅, 렌더링 패턴, 접근성/UX
 │   ├── NextJS/
-│   │   └── SKILL.md             ← Next.js App Router, SSR
+│   │   ├── SKILL.md             ← Next.js App Router 핵심 규칙
+│   │   └── references/          ← 데이터 페칭, 미들웨어, 최적화
 │   ├── TailwindCSS/
-│   │   └── SKILL.md             ← Tailwind CSS 유틸리티 패턴
+│   │   ├── SKILL.md             ← Tailwind CSS 핵심 규칙
+│   │   └── references/          ← 반응형/다크모드, 패턴, 트랜지션
 │   ├── TanStackQuery/
 │   │   └── SKILL.md             ← TanStack Query 서버 상태
 │   ├── Zustand/
 │   │   └── SKILL.md             ← Zustand 클라이언트 상태
 │   ├── ReactHookForm/
-│   │   └── SKILL.md             ← React Hook Form + Zod
+│   │   ├── SKILL.md             ← React Hook Form 핵심 규칙
+│   │   └── references/          ← Controller, 동적 필드, 중첩 스키마
 │   ├── TypeScript/
-│   │   └── SKILL.md             ← TypeScript 고급 패턴
+│   │   ├── SKILL.md             ← TypeScript 고급 패턴
+│   │   └── references/          ← 제네릭, 타입 가드, 고급 패턴
 │   ├── TypeORM/
 │   │   ├── SKILL.md             ← TypeORM Entity, Repository
 │   │   └── references/          ← 고급 쿼리, 마이그레이션, 트랜잭션
 │   ├── DDD/
 │   │   ├── SKILL.md             ← DDD 전술적 패턴
-│   │   └── references/          ← Entity/VO, Aggregate, Domain Event 심화
+│   │   └── references/          ← Entity/VO, Aggregate, Domain Event
 │   ├── TDD/
 │   │   ├── SKILL.md             ← TDD 핵심 원칙
-│   │   ├── frontend.md          ← React 테스트 규칙
-│   │   └── backend.md           ← NestJS 테스트 규칙
+│   │   └── references/          ← React 테스트, NestJS 테스트
 │   ├── Git/
 │   │   └── SKILL.md             ← 커밋/PR/브랜치 규칙
 │   ├── FailureRecovery/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@choblue/claude-code-toolkit",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "description": "Claude Code 서브에이전트 위임 툴킷 - npx로 바로 설치",
   "bin": {
     "claude-code-toolkit": "bin/cli.js"

package/.claude/skills/Coding/frontend.md

@@ -1,11 +0,0 @@
-# Coding Skill - Frontend
-
-> **이 파일은 더 이상 사용되지 않는다.**
-> 프론트엔드 규칙은 기술별 스킬 파일로 분리되었다.
-
-- `../React/SKILL.md` - React 컴포넌트, 훅, 상태 관리
-- `../NextJS/SKILL.md` - Next.js App Router, SSR, Server Actions
-- `../TailwindCSS/SKILL.md` - Tailwind CSS 유틸리티 패턴
-- `../TanStackQuery/SKILL.md` - 서버 상태 관리 (React Query)
-- `../Zustand/SKILL.md` - 클라이언트 전역 상태 관리
-- `../ReactHookForm/SKILL.md` - 폼 관리 + Zod 검증