@kood/claude-code 0.2.0 → 0.2.2

package/dist/index.js

@@ -159,26 +159,42 @@ var copyCommands = async (_templates, targetDir) => {
   }
   return counter;
 };
-var checkSkillsAndCommandsExist = async (_templates) => {
-  const claudeDir = path.join(getTemplatesDir(), ".claude");
-  const skillsSrc = path.join(claudeDir, "skills");
-  const commandsSrc = path.join(claudeDir, "commands");
-  const hasSkills = await fs.pathExists(skillsSrc);
-  const hasCommands = await fs.pathExists(commandsSrc);
-  return { hasSkills, hasCommands };
-};
 var checkExistingClaudeFiles = async (targetDir) => {
   const existingFiles = [];
   const skillsDir = path.join(targetDir, ".claude", "skills");
   const commandsDir = path.join(targetDir, ".claude", "commands");
+  const agentsDir = path.join(targetDir, ".claude", "agents");
   if (await fs.pathExists(skillsDir)) {
     existingFiles.push(".claude/skills/");
   }
   if (await fs.pathExists(commandsDir)) {
     existingFiles.push(".claude/commands/");
   }
+  if (await fs.pathExists(agentsDir)) {
+    existingFiles.push(".claude/agents/");
+  }
   return existingFiles;
 };
+var copyAgents = async (_templates, targetDir) => {
+  const counter = { files: 0, directories: 0 };
+  const targetAgentsDir = path.join(targetDir, ".claude", "agents");
+  const agentsSrc = path.join(getTemplatesDir(), ".claude", "agents");
+  if (await fs.pathExists(agentsSrc)) {
+    await fs.ensureDir(targetAgentsDir);
+    await copyRecursive(agentsSrc, targetAgentsDir, counter);
+  }
+  return counter;
+};
+var checkAllExtrasExist = async (_templates) => {
+  const claudeDir = path.join(getTemplatesDir(), ".claude");
+  const skillsSrc = path.join(claudeDir, "skills");
+  const commandsSrc = path.join(claudeDir, "commands");
+  const agentsSrc = path.join(claudeDir, "agents");
+  const hasSkills = await fs.pathExists(skillsSrc);
+  const hasCommands = await fs.pathExists(commandsSrc);
+  const hasAgents = await fs.pathExists(agentsSrc);
+  return { hasSkills, hasCommands, hasAgents };
+};
 
 // src/commands/init.ts
 var TEMPLATE_DESCRIPTIONS = {
@@ -270,17 +286,19 @@ var init = async (options) => {
   }
   logger.blank();
   logger.success(`Total: ${totalFiles} files, ${totalDirectories} directories`);
-  const { hasSkills, hasCommands } = await checkSkillsAndCommandsExist(templates);
+  const { hasSkills, hasCommands, hasAgents } = await checkAllExtrasExist(templates);
   let installSkills = options.skills ?? false;
   let installCommands = options.commands ?? false;
-  if (!options.skills && !options.commands && (hasSkills || hasCommands)) {
+  let installAgents = options.agents ?? false;
+  const noOptionsProvided = options.skills === void 0 && options.commands === void 0 && options.agents === void 0;
+  if (noOptionsProvided && (hasSkills || hasCommands || hasAgents)) {
     logger.blank();
     if (hasSkills) {
       const skillsResponse = await prompts({
         type: "confirm",
         name: "install",
         message: "Install skills to .claude/skills/?",
-        initial: true
+        initial: false
       });
       installSkills = skillsResponse.install ?? false;
     }
@@ -289,12 +307,21 @@ var init = async (options) => {
         type: "confirm",
         name: "install",
         message: "Install commands to .claude/commands/?",
-        initial: true
+        initial: false
       });
       installCommands = commandsResponse.install ?? false;
     }
+    if (hasAgents) {
+      const agentsResponse = await prompts({
+        type: "confirm",
+        name: "install",
+        message: "Install agents to .claude/agents/?",
+        initial: false
+      });
+      installAgents = agentsResponse.install ?? false;
+    }
   }
-  if (installSkills || installCommands) {
+  if (installSkills || installCommands || installAgents) {
     const existingClaudeFiles = await checkExistingClaudeFiles(targetDir);
     if (existingClaudeFiles.length > 0 && !options.force) {
       logger.warn("The following .claude files/folders already exist:");
@@ -307,9 +334,10 @@ var init = async (options) => {
         initial: false
       });
       if (!response.overwrite) {
-        logger.info("Skipping skills/commands installation.");
+        logger.info("Skipping extras installation.");
         installSkills = false;
         installCommands = false;
+        installAgents = false;
       }
     }
     if (installSkills && hasSkills) {
@@ -336,13 +364,25 @@ var init = async (options) => {
     } else if (installCommands && !hasCommands) {
       logger.warn("No commands found in selected templates.");
     }
+    if (installAgents && hasAgents) {
+      logger.blank();
+      logger.info("Installing agents...");
+      const agentsResult = await copyAgents(templates, targetDir);
+      totalFiles += agentsResult.files;
+      totalDirectories += agentsResult.directories;
+      logger.success(
+        `Agents: ${agentsResult.files} files, ${agentsResult.directories} directories`
+      );
+    } else if (installAgents && !hasAgents) {
+      logger.warn("No agents found in selected templates.");
+    }
   }
   logger.blank();
   logger.success("Claude Code documentation installed!");
   logger.blank();
   logger.info("Installed templates:");
   templates.forEach((t) => logger.step(t));
-  if (installSkills || installCommands) {
+  if (installSkills || installCommands || installAgents) {
     logger.blank();
     logger.info("Installed extras:");
     if (installSkills) {
@@ -351,6 +391,9 @@ var init = async (options) => {
     if (installCommands) {
       logger.step("Commands \u2192 .claude/commands/");
     }
+    if (installAgents) {
+      logger.step("Agents \u2192 .claude/agents/");
+    }
   }
   logger.blank();
   logger.info("Next steps:");
@@ -361,11 +404,11 @@ var init = async (options) => {
 
 // src/index.ts
 var program = new Command();
-program.name("claude-code").description("Claude Code documentation installer for projects").version("0.2.0");
+program.name("claude-code").description("Claude Code documentation installer for projects").version("0.2.2");
 program.option(
   "-t, --template <names>",
   "template names (comma-separated: tanstack-start,hono)"
-).option("-f, --force", "overwrite existing files without prompting").option("--cwd <path>", "target directory (default: current directory)").option("--list", "list available templates").option("-s, --skills", "install skills to .claude/skills/").option("-c, --commands", "install commands to .claude/commands/").action(async (options) => {
+).option("-f, --force", "overwrite existing files without prompting").option("--cwd <path>", "target directory (default: current directory)").option("--list", "list available templates").option("-s, --skills", "install skills to .claude/skills/").option("-c, --commands", "install commands to .claude/commands/").option("-a, --agents", "install agents to .claude/agents/").action(async (options) => {
   banner();
   if (options.list) {
     const templates = await listAvailableTemplates();
@@ -379,7 +422,8 @@ program.option(
     force: options.force,
     cwd: options.cwd,
     skills: options.skills,
-    commands: options.commands
+    commands: options.commands,
+    agents: options.agents
   });
 });
 program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kood/claude-code",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Claude Code documentation installer for projects",
   "type": "module",
   "bin": "./dist/index.js",

package/templates/.claude/agents/code-reviewer.md

@@ -0,0 +1,31 @@
+---
+name: code-reviewer
+description: 코드 리뷰. git diff 분석, 버그/보안/품질 이슈 탐지. "리뷰해줘", "코드 봐줘" 요청 시 사용.
+model: inherit
+color: red
+tools: ["Read", "Grep", "Bash"]
+---
+
+You are an expert code reviewer.
+
+## Responsibilities
+
+1. 버그 탐지 - 로직 오류, null/undefined, 레이스 컨디션
+2. 보안 검토 - 인젝션, XSS, 민감 데이터 노출
+3. 품질 확인 - 중복, 에러 핸들링, CLAUDE.md 규칙 준수
+
+## Process
+
+1. `git diff` 또는 지정 파일 분석
+2. 이슈 심각도 분류 (Critical/Important)
+3. 구체적 수정안 제시
+
+## Confidence
+
+80점 이상만 보고:
+- 75+ : 확실한 이슈
+- 100 : 반드시 수정
+
+## Output
+
+Critical → Important 순으로 `[파일:라인]` + 이슈 + 수정안 제시.

package/templates/.claude/agents/debug-detective.md

@@ -0,0 +1,37 @@
+---
+name: debug-detective
+description: 디버깅 전문가. 버그 원인 분석 및 수정안 제시. "에러", "버그", "안돼" 요청 시 사용.
+model: inherit
+color: yellow
+tools: ["Read", "Grep", "Glob", "Bash"]
+---
+
+You are a debugging specialist.
+
+## Responsibilities
+
+1. 에러 분석 - 스택 트레이스, 로그, 재현 조건
+2. 원인 추적 - 코드 흐름 따라 근본 원인 탐지
+3. 수정안 제시 - 최소 변경으로 해결
+
+## Process
+
+1. 증상 파악 (에러 메시지, 재현 단계)
+2. 가설 수립 (가능한 원인 목록)
+3. 코드 분석으로 가설 검증
+4. 근본 원인 수정
+
+## Common Patterns
+
+| 패턴 | 증상 | 확인 |
+|------|------|------|
+| Null Reference | TypeError | 옵셔널 체이닝 |
+| Race Condition | 간헐적 실패 | async/await |
+| Off-by-One | 잘못된 인덱스 | 반복문 경계 |
+| State Mutation | 예상외 변경 | 불변성 |
+
+## Rules
+
+- 추측 금지, 코드 근거 필수
+- 최소 변경 원칙
+- Before/After 코드 제시

package/templates/.claude/agents/refactor-advisor.md

@@ -0,0 +1,44 @@
+---
+name: refactor-advisor
+description: 리팩토링 조언. 코드 개선점 분석 및 계획 수립. "리팩토링", "정리", "개선" 요청 시 사용.
+model: inherit
+color: cyan
+tools: ["Read", "Grep", "Glob"]
+---
+
+You are a refactoring specialist.
+
+## Responsibilities
+
+1. 코드 스멜 탐지 - 중복, 긴 함수, 복잡한 조건문
+2. 구조 개선 - 모듈화, 관심사 분리
+3. 안전한 계획 - 단계별 실행, 테스트 보장
+
+## Process
+
+1. 현재 코드 구조 파악
+2. 문제점/개선점 식별
+3. 우선순위 결정
+4. 단계별 계획 수립
+
+## Code Smells
+
+| 카테고리 | 예시 |
+|----------|------|
+| Bloaters | 긴 메서드, 큰 클래스 |
+| Couplers | 과도한 의존성 |
+| Dispensables | 중복, 죽은 코드 |
+
+## Techniques
+
+| 기법 | 상황 |
+|------|------|
+| Extract Function | 긴 함수, 중복 |
+| Extract Component | 복잡한 UI |
+| Replace Conditional | 복잡한 if/switch |
+
+## Rules
+
+- 한 번에 하나의 리팩토링
+- 각 단계 후 테스트
+- 기능 변경 없이 구조만 개선

package/templates/.claude/agents/test-writer.md

@@ -0,0 +1,41 @@
+---
+name: test-writer
+description: 테스트 작성. 함수/컴포넌트 테스트 생성. "테스트 추가", "테스트 작성" 요청 시 사용.
+model: inherit
+color: green
+tools: ["Read", "Write", "Grep", "Glob"]
+---
+
+You are a testing specialist.
+
+## Responsibilities
+
+1. 유닛 테스트 - 함수, 클래스 단위
+2. 통합 테스트 - API, 서비스 상호작용
+3. 엣지 케이스 - 경계값, 에러, 빈 입력
+
+## Process
+
+1. 대상 코드 분석 (입력/출력, 의존성)
+2. 테스트 케이스 도출 (정상, 엣지, 에러)
+3. 프로젝트 테스트 패턴 확인
+4. 테스트 코드 작성
+
+## Coverage Priority
+
+| 우선순위 | 케이스 |
+|----------|--------|
+| 필수 | happy path |
+| 필수 | 에러 핸들링 |
+| 권장 | 경계값 |
+| 권장 | null/undefined |
+
+## Structure
+
+```typescript
+describe('[대상]', () => {
+  it('should [동작] when [조건]', () => {
+    // Arrange → Act → Assert
+  });
+});
+```

package/templates/.claude/skills/frontend-design/SKILL.md

@@ -0,0 +1,310 @@
+---
+name: frontend-design
+description: 프론트엔드 UI 구현 스킬. 컴포넌트, 페이지, 애플리케이션 구축 시 사용. 2026 트렌드 기반 고품질 디자인 생성.
+license: Complete terms in LICENSE.txt
+---
+
+# Frontend Design Skill
+
+프로덕션급 프론트엔드 인터페이스 구현. 독창적이고 기억에 남는 디자인.
+
+## 사용 시점
+
+| 트리거 | 예시 |
+|--------|------|
+| UI 컴포넌트 요청 | "버튼 컴포넌트 만들어줘" |
+| 페이지 구현 | "랜딩 페이지 만들어줘" |
+| 스타일링 작업 | "다크 테마 적용해줘" |
+| 애니메이션 추가 | "hover 효과 넣어줘" |
+
+## 디자인 프로세스
+
+### 1단계: 컨텍스트 파악
+
+```
+- 목적: 무슨 문제 해결?
+- 대상: 누가 사용?
+- 제약: 프레임워크, 성능, 접근성 요구사항
+```
+
+### 2단계: 미적 방향 결정
+
+**반드시 하나 선택하고 일관성 유지:**
+
+| 방향 | 특징 | 적합한 상황 |
+|------|------|-------------|
+| Liquid Glass | 투명도, 깊이, 유동적 표면 | 모던 앱, 대시보드 |
+| Calm Minimal | 여백, 선명한 타이포, 절제 | 콘텐츠 중심, 포트폴리오 |
+| Bold Maximalist | 큰 타이포, 강렬한 색, 레이어 | 크리에이티브, 브랜드 |
+| Organic Natural | 부드러운 곡선, 어시 톤, 텍스처 | 웰빙, 라이프스타일 |
+| Editorial | 매거진 레이아웃, 그리드 플레이 | 미디어, 블로그 |
+| Retro Futuristic | 네온, 그라디언트, 글리치 | 테크, 게임 |
+
+### 3단계: 구현
+
+```
+1. CSS 변수로 디자인 토큰 정의
+2. 타이포그래피 시스템 설정
+3. 컬러 팔레트 적용
+4. 레이아웃 구조화
+5. 애니메이션/인터랙션 추가
+6. 접근성 검증
+```
+
+## 핵심 규칙
+
+### 타이포그래피
+
+**DO:**
+```css
+/* Variable fonts 사용 */
+@font-face {
+  font-family: 'Display';
+  src: url('font.woff2') format('woff2');
+  font-weight: 100 900;
+  font-display: swap;
+}
+
+/* 명확한 위계 */
+--font-display: 'Playfair Display', serif;    /* 헤드라인 */
+--font-body: 'Source Sans 3', sans-serif;     /* 본문 */
+--font-mono: 'JetBrains Mono', monospace;     /* 코드 */
+```
+
+**DON'T:**
+```css
+/* ❌ 금지 - 일반적인 시스템 폰트 */
+font-family: Arial, Helvetica, sans-serif;
+font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+
+/* ❌ 금지 - AI 슬롭 폰트 */
+font-family: 'Inter', sans-serif;
+font-family: 'Roboto', sans-serif;
+font-family: 'Space Grotesk', sans-serif;
+```
+
+**추천 폰트 페어링:**
+
+| 헤드라인 | 본문 | 무드 |
+|----------|------|------|
+| Playfair Display | Source Sans 3 | 클래식, 에디토리얼 |
+| Clash Display | Satoshi | 모던, 볼드 |
+| Fraunces | Work Sans | 따뜻한, 친근한 |
+| Space Mono | DM Sans | 테크, 미니멀 |
+| Syne | Inter (예외적 허용) | 크리에이티브 |
+
+**상세**: [references/typography-2026.md](references/typography-2026.md)
+
+### 컬러
+
+**DO:**
+```css
+/* OKLCH 컬러 시스템 (2026 표준) */
+:root {
+  /* 베이스 - 소프트 뉴트럴 (순백색 X) */
+  --bg-primary: oklch(98% 0.005 90);      /* 웜 오프화이트 */
+  --bg-secondary: oklch(95% 0.01 90);     /* 린넨 */
+
+  /* 텍스트 */
+  --text-primary: oklch(20% 0.01 90);     /* 소프트 블랙 */
+  --text-secondary: oklch(45% 0.02 90);   /* 뮤트 그레이 */
+
+  /* 액센트 - 하나만 강하게 */
+  --accent: oklch(65% 0.25 180);          /* Transformative Teal */
+  --accent-hover: oklch(60% 0.28 180);
+
+  /* 상태 */
+  --success: oklch(70% 0.2 145);
+  --error: oklch(65% 0.25 25);
+}
+
+/* 다크 모드 */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-primary: oklch(15% 0.01 90);
+    --bg-secondary: oklch(20% 0.015 90);
+    --text-primary: oklch(90% 0.01 90);
+  }
+}
+```
+
+**DON'T:**
+```css
+/* ❌ 금지 - 순백색 배경 */
+background: #ffffff;
+background: white;
+
+/* ❌ 금지 - AI 슬롭 퍼플 그라디언트 */
+background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+background: linear-gradient(to right, #8b5cf6, #a855f7);
+```
+
+**2026 트렌드 컬러:**
+
+| 이름 | OKLCH | HEX (참고) | 용도 |
+|------|-------|-----------|------|
+| Cloud Dancer | oklch(97% 0.005 90) | #F5F5F5 | 배경, 여백 |
+| Mocha Mousse | oklch(55% 0.08 55) | #A47764 | 어시, 따뜻함 |
+| Transformative Teal | oklch(65% 0.15 180) | #2D9CCA | 액센트 |
+| Neo Mint | oklch(85% 0.1 160) | #AAF0D1 | 프레시, 테크 |
+| Soft Coral | oklch(75% 0.12 30) | #FFB5A7 | 따뜻한 액센트 |
+
+**상세**: [references/colors-2026.md](references/colors-2026.md)
+
+### 애니메이션
+
+**원칙:**
+1. **목적 있는 움직임만** - 장식적 애니메이션 금지
+2. **300ms 이하** - 트랜지션은 빠르게
+3. **GPU 가속** - transform, opacity만 애니메이트
+4. **접근성** - prefers-reduced-motion 존중
+
+**DO:**
+```css
+/* 기본 트랜지션 */
+.button {
+  transition: transform 200ms ease-out,
+              background-color 150ms ease;
+}
+.button:hover {
+  transform: translateY(-2px);
+}
+
+/* 스태거 애니메이션 */
+.list-item {
+  animation: fadeInUp 400ms ease-out backwards;
+}
+.list-item:nth-child(1) { animation-delay: 0ms; }
+.list-item:nth-child(2) { animation-delay: 50ms; }
+.list-item:nth-child(3) { animation-delay: 100ms; }
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 접근성 */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+**DON'T:**
+```css
+/* ❌ 금지 - 레이아웃 속성 애니메이트 */
+transition: width 300ms, height 300ms, margin 300ms;
+
+/* ❌ 금지 - 너무 느린 트랜지션 */
+transition: all 1s ease;
+
+/* ❌ 금지 - 무한 회전 (목적 없는 장식) */
+animation: spin 2s infinite linear;
+```
+
+**React (Motion 라이브러리):**
+```tsx
+import { motion } from 'motion/react';
+
+// 페이지 진입
+<motion.div
+  initial={{ opacity: 0, y: 20 }}
+  animate={{ opacity: 1, y: 0 }}
+  transition={{ duration: 0.3, ease: 'easeOut' }}
+>
+  {content}
+</motion.div>
+
+// 리스트 스태거
+<motion.ul>
+  {items.map((item, i) => (
+    <motion.li
+      key={item.id}
+      initial={{ opacity: 0, x: -20 }}
+      animate={{ opacity: 1, x: 0 }}
+      transition={{ delay: i * 0.05 }}
+    >
+      {item.name}
+    </motion.li>
+  ))}
+</motion.ul>
+```
+
+**상세**: [references/animation-patterns.md](references/animation-patterns.md)
+
+### 레이아웃
+
+**DO:**
+```css
+/* 비대칭, 그리드 브레이킹 */
+.hero {
+  display: grid;
+  grid-template-columns: 1fr 1.5fr;
+  gap: clamp(2rem, 5vw, 4rem);
+}
+
+/* 여백은 넉넉하게 */
+section {
+  padding: clamp(4rem, 10vh, 8rem) 0;
+}
+
+/* Container queries (2026 표준) */
+@container (min-width: 400px) {
+  .card { flex-direction: row; }
+}
+```
+
+**DON'T:**
+```css
+/* ❌ 금지 - 완벽한 대칭 (지루함) */
+grid-template-columns: 1fr 1fr;
+
+/* ❌ 금지 - 빽빽한 레이아웃 */
+padding: 10px;
+gap: 8px;
+```
+
+## 접근성 체크리스트
+
+| 항목 | 기준 | 확인 |
+|------|------|------|
+| 색상 대비 | WCAG AA (4.5:1 텍스트, 3:1 UI) | [ ] |
+| 키보드 네비게이션 | 모든 인터랙티브 요소 접근 가능 | [ ] |
+| 포커스 표시 | 명확한 포커스 링 | [ ] |
+| 모션 감소 | prefers-reduced-motion 처리 | [ ] |
+| 스크린 리더 | 시맨틱 HTML, aria-label | [ ] |
+| 텍스트 크기 | 16px 이상 본문 | [ ] |
+| 터치 타겟 | 44x44px 이상 | [ ] |
+
+## 금지 사항 (Anti-patterns)
+
+| 카테고리 | 금지 항목 |
+|----------|----------|
+| 폰트 | Inter, Roboto, Arial, system fonts 단독 사용 |
+| 컬러 | 퍼플 그라디언트 on 화이트, 순백색 배경 |
+| 레이아웃 | 완벽 대칭, 좁은 여백, 쿠키커터 카드 |
+| 애니메이션 | 목적 없는 회전, 1초+ 트랜지션, layout 애니메이트 |
+| 패턴 | 동일한 그림자, 동일한 border-radius, 복사된 UI |
+
+## 참조 문서
+
+- [references/typography-2026.md](references/typography-2026.md) - 폰트 선택, 스케일, 페어링
+- [references/colors-2026.md](references/colors-2026.md) - OKLCH, 팔레트, 다크모드
+- [references/animation-patterns.md](references/animation-patterns.md) - CSS/JS 패턴, 라이브러리
+
+## Sources
+
+- [UI Trends 2026 - UX Studio Team](https://www.uxstudioteam.com/ux-blog/ui-trends-2019)
+- [12 UI/UX Design Trends - Index.dev](https://www.index.dev/blog/ui-ux-design-trends)
+- [Typography Trends 2026 - Wannathis](https://wannathis.one/blog/top-typography-trends-2026-for-designers)
+- [Color Trends 2026 - Lounge Lizard](https://www.loungelizard.com/blog/web-design-color-trends/)
+- [Motion UI Trends 2026 - Loma Technology](https://lomatechnology.com/blog/motion-ui-trends-2026/2911)
+- [Motion Library](https://motion.dev/)