@kood/claude-code 0.7.6 → 0.7.7

package/dist/index.js

@@ -698,6 +698,18 @@ var CLAUDE_GENERATED_FOLDERS = [
   ".claude/refactor/",
   ".claude/prd/"
 ];
+function normalizeIgnorePattern(pattern) {
+  return pattern.replace(/\\/g, "/").replace(/^\.?\//, "").replace(/\/+$/, "").trim();
+}
+function parseIgnoreLine(line) {
+  const trimmed = line.trim();
+  if (!trimmed || trimmed.startsWith("#") || trimmed.startsWith("!")) {
+    return null;
+  }
+  const [rawPattern] = trimmed.split(/\s+#/u, 1);
+  const normalized = normalizeIgnorePattern(rawPattern);
+  return normalized || null;
+}
 async function updateGitignore(targetDir) {
   const gitignorePath = path9.join(targetDir, ".gitignore");
   const sectionComment = "# Claude Code generated files";
@@ -709,43 +721,33 @@ async function updateGitignore(targetDir) {
   } catch {
     content = "";
   }
-  const linesToAdd = [];
-  const existingLines = content.split("\n").map((line) => line.trim());
-  for (const folder of CLAUDE_GENERATED_FOLDERS) {
-    if (!existingLines.includes(folder)) {
-      linesToAdd.push(folder);
-    }
-  }
+  const eol = content.includes("\r\n") ? "\r\n" : "\n";
+  const lines = content ? content.split(/\r?\n/u) : [];
+  const existingPatterns = new Set(
+    lines.map((line) => parseIgnoreLine(line)).filter((pattern) => Boolean(pattern))
+  );
+  const linesToAdd = CLAUDE_GENERATED_FOLDERS.filter(
+    (folder) => !existingPatterns.has(normalizeIgnorePattern(folder))
+  );
   if (linesToAdd.length === 0) {
     logger.info(".gitignore already contains all Claude Code patterns");
     return;
   }
-  const needsSection = !content.includes(sectionComment);
-  let newContent = content;
-  if (newContent && !newContent.endsWith("\n")) {
-    newContent += "\n";
-  }
+  const sectionIndex = lines.findIndex(
+    (line) => line.trim() === sectionComment
+  );
+  const needsSection = sectionIndex === -1;
   if (needsSection) {
-    if (newContent) {
-      newContent += "\n";
+    if (lines.length > 0 && lines[lines.length - 1] !== "") {
+      lines.push("");
     }
-    newContent += sectionComment + "\n";
-    newContent += linesToAdd.join("\n") + "\n";
+    lines.push(sectionComment, ...linesToAdd);
   } else {
-    const lines = newContent.split("\n");
-    const sectionIndex = lines.findIndex(
-      (line) => line.includes(sectionComment)
-    );
-    if (sectionIndex !== -1) {
-      lines.splice(sectionIndex + 1, 0, ...linesToAdd);
-      newContent = lines.join("\n");
-    } else {
-      if (newContent) {
-        newContent += "\n";
-      }
-      newContent += sectionComment + "\n";
-      newContent += linesToAdd.join("\n") + "\n";
-    }
+    lines.splice(sectionIndex + 1, 0, ...linesToAdd);
+  }
+  let newContent = lines.join(eol);
+  if (!newContent.endsWith(eol)) {
+    newContent += eol;
   }
   await fs7.writeFile(gitignorePath, newContent, "utf-8");
   if (hasGitignore) {
@@ -964,7 +966,7 @@ var init = async (options) => {
 
 // src/index.ts
 var program = new Command();
-program.name("claude-code").description("Claude Code documentation installer for projects").version("0.7.6");
+program.name("claude-code").description("Claude Code documentation installer for projects").version("0.7.7");
 program.option(
   "-t, --template <names>",
   "template names (comma-separated: tanstack-start,hono)"

package/package.json

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

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

@@ -0,0 +1,199 @@
+---
+name: design
+description: UI/UX 디자인 전문 스킬. 사용자 중심 디자인, 접근성, 반응형 레이아웃, 디자인 시스템 구축. Nielsen 휴리스틱 및 WCAG 2.2 기반.
+user-invocable: true
+ui-only: true
+---
+
+@../../instructions/agent-patterns/read-parallelization.md
+@../../instructions/agent-patterns/agent-teams-usage.md
+@../../instructions/validation/forbidden-patterns.md
+@../../instructions/validation/required-behaviors.md
+
+# Design Skill - UI/UX 전문 스킬
+
+<context>
+
+**Purpose:** 사용자 중심의 UI/UX 디자인 구현. 접근성, 반응형 디자인, 디자인 시스템 구축.
+
+**Trigger:** UI/UX 디자인 구현, 랜딩 페이지 제작, 대시보드 개발, 모바일 앱 디자인, 폼 디자인
+
+**Key Features:**
+- Nielsen 10가지 휴리스틱 기반 UX
+- WCAG 2.2 AA 접근성 준수
+- 반응형 디자인 (Mobile-First)
+- 디자인 심리학 적용 (인지부하 최소화, Fitts/Hick/Miller 법칙)
+- 2024-2026 트렌드 반영 (AI 통합, 마이크로인터랙션, 다크모드)
+
+</context>
+
+---
+
+<quick_reference>
+
+## 빠른 참조
+
+### Core UX 원칙 (Nielsen)
+
+| 원칙 | 적용 |
+|------|------|
+| **시스템 상태 가시성** | Loading, Progress, 피드백 |
+| **일관성** | 패턴 재사용, 플랫폼 규칙 준수 |
+| **오류 예방** | 확인 다이얼로그, 입력 제약 |
+| **인지부하 최소화** | 7±2 항목, 단순 메뉴 |
+
+### 접근성 (WCAG 2.2 AA)
+
+| 요구사항 | 기준 |
+|---------|------|
+| **색상 대비** | 4.5:1 (일반), 3:1 (큰 텍스트) |
+| **터치 타겟** | 44x44px 최소 |
+| **키보드** | Tab, Enter, Esc 지원 |
+| **ARIA** | role, label, live 속성 |
+
+### 레이아웃 패턴
+
+| 패턴 | 용도 |
+|------|------|
+| **F-패턴** | 콘텐츠 중심 (블로그, 기사) |
+| **Z-패턴** | 랜딩 페이지 (히어로 → CTA) |
+| **12열 그리드** | 반응형 레이아웃 |
+
+</quick_reference>
+
+---
+
+<parallel_agent_execution>
+
+### ⚠️ Agent Teams 우선 원칙
+
+> **복잡한 병렬 작업 시 Agent Teams를 기본으로 사용**
+> - Agent Teams 가용 → TeamCreate → 팀원 spawn → 병렬 협업
+> - Agent Teams 미가용 → Task 병렬 호출 (폴백)
+
+**Agent Teams 모드 (기본)**:
+```typescript
+TeamCreate({ team_name: "design-team", description: "UI/UX 디자인 프로젝트" })
+Task(subagent_type="designer", team_name="design-team", name="designer", ...)
+```
+
+**수명주기 관리:**
+- 팀원 태스크 완료 → 즉시 `shutdown_request` 전송
+- 종료 후 `TaskList`로 다음 태스크 확인
+- 모든 작업 완료 → `TeamDelete`로 팀 해산
+
+---
+
+## 병렬 에이전트 실행
+
+### 핵심 원칙
+
+| 원칙 | 실행 방법 | 디자인 적용 |
+|------|----------|------------|
+| **PARALLEL** | 단일 메시지에서 여러 Tool 동시 호출 | 여러 페이지 동시 디자인 |
+| **DELEGATE** | 전문 에이전트에게 즉시 위임 | designer (UI), code-reviewer (접근성) |
+| **SMART MODEL** | 복잡도별 모델 선택 | haiku (탐색), sonnet (구현), opus (디자인 시스템) |
+
+### 패턴 1: 랜딩 페이지 섹션 병렬 디자인
+
+```typescript
+// ✅ 5개 섹션 동시 구현
+Task(subagent_type="designer", model="sonnet",
+     prompt="히어로 섹션: 헤드라인 + CTA + 이미지")
+Task(subagent_type="designer", model="sonnet",
+     prompt="소셜 프루프 섹션: 로고, 추천사, 통계")
+Task(subagent_type="designer", model="sonnet",
+     prompt="기능 섹션: 3열 그리드, 아이콘, 설명")
+Task(subagent_type="designer", model="sonnet",
+     prompt="가격 테이블: 3개 티어, 비교 기능")
+Task(subagent_type="designer", model="sonnet",
+     prompt="CTA 섹션: 최종 전환 유도")
+```
+
+**예상 시간:** 순차 300초 → 병렬 60초 (5배 향상)
+
+### 패턴 2: 반응형 Breakpoint 병렬
+
+```typescript
+// ✅ Mobile/Tablet/Desktop 동시 구현
+Task(subagent_type="designer", model="sonnet",
+     prompt="Mobile (320-767px): 세로 스택, 44px 터치 타겟")
+Task(subagent_type="designer", model="sonnet",
+     prompt="Tablet (768-1023px): 2열 그리드")
+Task(subagent_type="designer", model="sonnet",
+     prompt="Desktop (1024px+): 3열 그리드, 호버 효과")
+```
+
+### 패턴 3: 접근성 검증 병렬
+
+```typescript
+// ✅ WCAG/ARIA/키보드 동시 검증
+Task(subagent_type="code-reviewer", model="opus",
+     prompt="WCAG 2.2 AA: 색상 대비, 포커스, 텍스트 크기")
+Task(subagent_type="code-reviewer", model="opus",
+     prompt="ARIA 속성: role, label, live")
+Task(subagent_type="code-reviewer", model="opus",
+     prompt="키보드 네비게이션: Tab, Enter, Esc")
+```
+
+</parallel_agent_execution>
+
+---
+
+<detailed_references>
+
+## 상세 참고 문서
+
+각 주제별 상세 가이드는 references 폴더를 참조하세요.
+
+| 파일 | 내용 |
+|------|------|
+| **core-principles.md** | Nielsen 휴리스틱, Don Norman 원칙, Gestalt 원칙, 디자인 심리학 |
+| **accessibility.md** | POUR 원칙, 색상 대비, 키보드, ARIA, 스크린 리더 |
+| **patterns.md** | 랜딩 페이지, 대시보드, 폼, 모바일 앱 패턴 |
+| **systems.md** | 타이포그래피, 컬러, 그리드, 반응형 디자인 |
+| **responsive.md** | Container Queries, Fluid CSS, Modern CSS, 반응형 이미지 |
+| **korea-uiux.md** | 한국형 UI/UX: 토스/카카오/배민/당근 디자인 시스템, 타이포(Pretendard), 결제 UX |
+| **global-uiux.md** | 글로벌 UI/UX: Material 3, Apple HIG (Liquid Glass), Fluent 2, Carbon, SLDS |
+| **safe-area.md** | Safe Area: iOS/Android Insets, Dynamic Island, Foldable, React Native, CSS env() |
+| **checklist.md** | DO/DON'T 항목 |
+| **trends.md** | 2024-2026 디자인 트렌드 |
+
+**사용 방법:**
+```bash
+# 디자인 원칙 확인
+Read references/core-principles.md
+
+# 접근성 가이드 확인
+Read references/accessibility.md
+
+# 랜딩 페이지 패턴 확인
+Read references/patterns.md
+```
+
+</detailed_references>
+
+---
+
+<references>
+
+## 외부 참고 자료
+
+| 분류 | 자료 |
+|------|------|
+| **UX 원칙** | Nielsen Norman Group, Don Norman "The Design of Everyday Things" |
+| **접근성** | WCAG 2.2, W3C WAI, WebAIM |
+| **글로벌 디자인 시스템** | Material Design 3 (Expressive), Apple HIG (Liquid Glass), Fluent 2, Carbon, SLDS |
+| **한국 디자인 시스템** | 토스 TDS, 카카오 Krane, 쿠팡 RDS, 배민, 당근 |
+| **심리학** | Laws of UX, Gestalt 원칙, 인지부하 이론 |
+| **트렌드** | Awwwards, Dribbble, Behance, Smashing Magazine |
+
+### 외부 링크
+
+- [Nielsen 10 Usability Heuristics](https://www.nngroup.com/articles/ten-usability-heuristics/)
+- [WCAG 2.2 Guidelines](https://www.w3.org/WAI/standards-guidelines/wcag/)
+- [Material Design 3](https://m3.material.io/)
+- [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/)
+- [Laws of UX](https://lawsofux.com/)
+
+</references>

package/templates/.claude/skills/design/references/accessibility.md

@@ -0,0 +1,106 @@
+# Accessibility (WCAG 2.2 AA)
+
+<pour_principles>
+
+## POUR 원칙
+
+| 원칙 | 설명 | 구현 |
+|------|------|------|
+| **Perceivable** | 인지 가능 | 대체 텍스트, 자막, 색상 대비 |
+| **Operable** | 조작 가능 | 키보드, 충분한 시간 |
+| **Understandable** | 이해 가능 | 명확한 언어, 일관된 UI |
+| **Robust** | 견고성 | 시맨틱 HTML, ARIA |
+
+</pour_principles>
+
+---
+
+<color_contrast>
+
+## 색상 대비 (WCAG 2.2)
+
+| 유형 | 최소 비율 | 예시 |
+|------|----------|------|
+| **일반 텍스트** | 4.5:1 | 14px body text |
+| **큰 텍스트** | 3:1 | 18pt+ 또는 14pt bold+ |
+| **Interactive 요소** | 3:1 | 버튼, 아이콘 |
+
+```tsx
+// ✅ 충분한 대비
+<button className="bg-blue-600 text-white">Save</button>
+
+// ❌ 불충분한 대비
+<button className="bg-gray-100 text-gray-300">Save</button>
+```
+
+</color_contrast>
+
+---
+
+<keyboard_navigation>
+
+## 키보드 네비게이션
+
+| 키 | 동작 | 적용 |
+|---|------|------|
+| **Tab** | 다음 요소 | tabindex 순서 |
+| **Enter/Space** | 활성화 | 버튼, 링크 |
+| **Esc** | 취소/닫기 | 모달, 드롭다운 |
+| **↑↓** | 선택 이동 | 드롭다운, 슬라이더 |
+
+```tsx
+// ✅ 키보드 접근 가능
+<button
+  tabIndex={0}
+  onKeyDown={(e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      handleClick()
+    }
+  }}
+>
+  Click me
+</button>
+```
+
+</keyboard_navigation>
+
+---
+
+<aria_attributes>
+
+## ARIA 속성
+
+| 속성 | 용도 | 예시 |
+|------|------|------|
+| **role** | 역할 명시 | `role="navigation"` |
+| **aria-label** | 레이블 제공 | `aria-label="Close menu"` |
+| **aria-labelledby** | 레이블 ID 참조 | `aria-labelledby="title-id"` |
+| **aria-expanded** | 확장 상태 | `aria-expanded={isOpen}` |
+| **aria-live** | 동적 업데이트 | `aria-live="polite"` |
+
+```tsx
+// ✅ ARIA 속성 사용
+<button
+  aria-label="Close menu"
+  aria-expanded={isOpen}
+  aria-controls="menu-id"
+>
+  <svg className="w-6 h-6" aria-hidden="true" />
+</button>
+```
+
+</aria_attributes>
+
+---
+
+<screen_readers>
+
+## 스크린 리더 테스트
+
+| 도구 | 플랫폼 | 용도 |
+|------|--------|------|
+| **VoiceOver** | macOS/iOS | Safari |
+| **NVDA** | Windows | Firefox |
+| **JAWS** | Windows | Chrome |
+
+</screen_readers>

package/templates/.claude/skills/design/references/checklist.md

@@ -0,0 +1,41 @@
+# Design Checklist
+
+<do>
+
+## DO
+
+| 항목 | 설명 |
+|------|------|
+| **사용자 중심** | Nielsen 휴리스틱, Don Norman 원칙 적용 |
+| **접근성 우선** | WCAG 2.2 AA, 키보드/스크린 리더 지원 |
+| **일관성** | 디자인 시스템, 패턴 재사용 |
+| **반응형** | Mobile-First, 모든 Breakpoint 테스트 |
+| **피드백** | Loading, Success, Error 상태 명확히 |
+| **여백** | 8px 그리드, 충분한 breathing room |
+| **대비** | 4.5:1 (일반), 3:1 (큰 텍스트) |
+| **터치 타겟** | 44x44px 최소 (모바일) |
+| **오류 예방** | 확인 다이얼로그, 입력 제약 |
+| **테스트** | 실제 사용자, A/B 테스트 |
+
+</do>
+
+---
+
+<dont>
+
+## DON'T
+
+| 항목 | 이유 |
+|------|------|
+| **색상만으로 정보 전달** | 색맹 사용자 고려 |
+| **너무 많은 선택지** | Hick의 법칙 (7±2) |
+| **작은 터치 타겟** | 손가락으로 클릭 어려움 |
+| **자동 재생 미디어** | 접근성, 사용자 경험 저해 |
+| **일관성 없는 패턴** | 학습 비용 증가 |
+| **모호한 에러 메시지** | "오류 발생" 대신 구체적 설명 |
+| **과도한 애니메이션** | 멀미, 성능 저하 |
+| **플레이스홀더를 레이블로** | 입력 시 사라짐 |
+| **지나친 혁신** | 표준 패턴 무시 |
+| **접근성 무시** | 법적 문제, 사용자 배제 |
+
+</dont>

package/templates/.claude/skills/design/references/core-principles.md

@@ -0,0 +1,66 @@
+# Core Design Principles
+
+<nielsen_heuristics>
+
+## Nielsen의 10가지 휴리스틱
+
+| 원칙 | 설명 | 구현 |
+|------|------|------|
+| **1. 시스템 상태 가시성** | 진행 상황 실시간 표시 | Loading spinner, Progress bar |
+| **2. 시스템-현실 일치** | 사용자 언어 사용 | 전문 용어 회피, 친숙한 아이콘 |
+| **3. 사용자 제어** | Undo/Redo 지원 | 취소 버튼, 되돌리기 기능 |
+| **4. 일관성** | 패턴 재사용 | 디자인 시스템, 공통 컴포넌트 |
+| **5. 오류 예방** | 실수 방지 장치 | 확인 다이얼로그, 입력 제약 |
+| **6. 인지부하 최소화** | 기억 대신 인식 | 자동완성, 최근 항목 표시 |
+| **7. 유연성** | 초보자 & 전문가 지원 | 단축키, 고급 기능 숨김 |
+| **8. 미니멀리즘** | 불필요한 정보 제거 | 핵심 내용만, 여백 활용 |
+| **9. 오류 복구** | 명확한 에러 메시지 | 원인 + 해결 방법 제시 |
+| **10. 도움말** | 쉽게 접근 가능 | 툴팁, 가이드 투어 |
+
+</nielsen_heuristics>
+
+---
+
+<don_norman>
+
+## Don Norman의 인간 중심 디자인
+
+| 원칙 | 적용 |
+|------|------|
+| **Affordance** | 버튼은 누를 수 있게, 링크는 클릭 가능하게 |
+| **Signifier** | 호버 시 커서 변경, 색상/아이콘으로 힌트 |
+| **Feedback** | 클릭 → 애니메이션, 성공 → 토스트 |
+| **Mapping** | 좌우 배치 → 자연스러운 연결 |
+| **Constraint** | 날짜 선택기, 숫자만 입력 가능 |
+
+</don_norman>
+
+---
+
+<gestalt>
+
+## Gestalt 원칙
+
+| 원칙 | 설명 | 예시 |
+|------|------|------|
+| **근접성 (Proximity)** | 가까이 있는 요소는 관련됨 | 폼 필드 그룹화 |
+| **유사성 (Similarity)** | 비슷한 요소는 같은 기능 | 같은 색상 버튼 |
+| **연속성 (Continuity)** | 시선 흐름 유도 | F-패턴 레이아웃 |
+| **폐쇄성 (Closure)** | 불완전해도 전체 인식 | 로고, 아이콘 |
+
+</gestalt>
+
+---
+
+<psychology>
+
+## 디자인 심리학
+
+| 법칙 | 내용 | 적용 |
+|------|------|------|
+| **Fitts의 법칙** | 큰 타겟 = 빠른 클릭 | CTA 버튼 크게 |
+| **Hick의 법칙** | 선택지 많으면 결정 느림 | 메뉴 항목 7개 이하 |
+| **Miller의 법칙** | 단기 기억 7±2 항목 | 단계 3-5개로 제한 |
+| **인지부하 이론** | 정보량 최소화 | 한 화면에 1가지 목표 |
+
+</psychology>