@choblue/claude-code-toolkit 1.2.5 → 1.2.7

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,36 +25,49 @@
 │   └── 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 테스트 규칙
-│   └── Git/
-│       └── SKILL.md             ← 커밋/PR/브랜치 규칙
+│   │   └── references/          ← React 테스트, NestJS 테스트
+│   ├── Git/
+│   │   └── SKILL.md             ← 커밋/PR/브랜치 규칙
+│   ├── FailureRecovery/
+│   │   └── SKILL.md             ← 실패 복구 프로토콜
+│   └── Curation/
+│       └── SKILL.md             ← AI 결과물 큐레이션 체크리스트
+├── prompts/
+│   ├── feature.md               ← /feature [기능명] 커스텀 커맨드
+│   ├── fix.md                   ← /fix [증상] 커스텀 커맨드
+│   └── review.md                ← /review 커스텀 커맨드
 ├── hooks/
 │   ├── prompt-hook.sh           ← 통합 hook (품질 체크 + 스킬 추천 + 구조 변경 감지)
 │   └── skill-keywords.conf      ← 스킬별 키워드 매핑 설정

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@choblue/claude-code-toolkit",
-  "version": "1.2.5",
+  "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 검증