@kood/claude-code 0.5.9 → 0.6.0

package/templates/.claude/skills/bug-fix/SKILL.md

@@ -359,6 +359,10 @@ Task(subagent_type="architect", model="opus", ...)
 | 검증 | code-reviewer | opus | 수정 후 코드 리뷰, 회귀 검증 |
 | 린트 | lint-fixer | sonnet | tsc/eslint 오류 수정 |
 | 문서 | document-writer | haiku/sonnet | 버그 리포트, 수정 내역 문서화 |
+| 보안 | security-reviewer | opus | 보안 취약점 버그, SQL Injection, XSS |
+| 테스트 | qa-tester | sonnet | 수정 후 CLI/서비스 테스트 검증 |
+| 조사 | researcher | sonnet | 외부 라이브러리 버그, API 문서 조사 |
+| 시각 | vision | sonnet | UI 버그 스크린샷 분석, 레이아웃 검증 |
 
 ### Bug Severity별 병렬 처리
 
@@ -803,6 +807,71 @@ Task({
 // → 총 소요 시간: 15-18분
 ```
 
+#### 예시 5: 보안 버그 수정 + 전체 스캔
+
+**상황:** SQL Injection 취약점 발견 및 유사 취약점 스캔 필요
+
+```typescript
+// ✅ 보안 버그 수정 + 검증 병렬
+Task({
+  subagent_type: 'implementation-executor',
+  model: 'sonnet',
+  prompt: 'SQL Injection 취약점 수정'
+})
+Task({
+  subagent_type: 'security-reviewer',
+  model: 'opus',
+  prompt: '유사 보안 취약점 전체 스캔'
+})
+
+// → 수정과 동시에 다른 보안 취약점 발견
+```
+
+#### 예시 6: 버그 수정 후 테스트 검증
+
+**상황:** 인증 로직 수정 후 실제 서비스 테스트 필요
+
+```typescript
+// ✅ 버그 수정 후 테스트 검증
+Task({
+  subagent_type: 'implementation-executor',
+  model: 'sonnet',
+  prompt: '인증 버그 수정: 토큰 재발급 로직 개선'
+})
+
+// 수정 완료 후 테스트
+Task({
+  subagent_type: 'qa-tester',
+  model: 'sonnet',
+  prompt: 'tmux 세션으로 수정된 기능 테스트: 로그인 → 토큰 만료 → 재발급 시나리오'
+})
+```
+
+#### 예시 7: 라이브러리 버그 조사
+
+**상황:** 외부 라이브러리 버전 업그레이드 후 오류 발생
+
+```typescript
+// ✅ 라이브러리 버그 조사 + 수정 병렬
+Task({
+  subagent_type: 'researcher',
+  model: 'sonnet',
+  prompt: 'TanStack Query v5.60.0 breaking changes 조사 및 마이그레이션 가이드 탐색'
+})
+Task({
+  subagent_type: 'explore',
+  model: 'haiku',
+  prompt: '현재 코드베이스에서 TanStack Query 사용 위치 전체 탐색'
+})
+
+// → 조사 결과 기반으로 수정
+Task({
+  subagent_type: 'implementation-executor',
+  model: 'sonnet',
+  prompt: '[조사 결과 기반] Breaking changes 대응 코드 수정'
+})
+```
+
 ### Bug Fix Workflow with Agents
 
 | 단계 | 작업 | 에이전트 | 모델 | 병렬 실행 |

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

@@ -0,0 +1,156 @@
+---
+name: crawler
+description: Playwriter로 웹사이트 직접 탐방하여 크롤링 설계. API/쿠키/토큰/헤더 분석 후 문서화.
+user-invocable: true
+---
+
+# Crawler Skill
+
+> Playwriter 탐방 → API/Network 분석 → 문서화 → 코드 생성
+
+**Templates:** [document-templates.md](references/document-templates.md) · [code-templates.md](references/code-templates.md)
+**Checklists:** [pre-crawl-checklist.md](references/pre-crawl-checklist.md) · [anti-bot-checklist.md](references/anti-bot-checklist.md)
+**References:** [playwriter-commands.md](references/playwriter-commands.md) · [crawling-patterns.md](references/crawling-patterns.md) · [selector-strategies.md](references/selector-strategies.md) · [network-crawling.md](references/network-crawling.md)
+
+---
+
+<trigger_conditions>
+
+| 트리거 | 반응 |
+|--------|------|
+| 크롤링, 스크래핑, crawl, scrape | 즉시 실행 |
+| 웹사이트 데이터 추출 | 즉시 실행 |
+| API 리버스 엔지니어링 | API 인터셉트 |
+| 봇 탐지 우회 | Anti-Detect 참고 |
+
+</trigger_conditions>
+
+---
+
+<workflow>
+
+| Phase | 작업 | 명령어 |
+|-------|------|--------|
+| **1. 세션** | 생성 + 페이지 열기 | `playwriter session new` |
+| **2. 탐색** | 구조 파악 | `accessibilitySnapshot`, `screenshotWithAccessibilityLabels` |
+| **3. 분석** | API 인터셉트, Selector 추출 | `page.on('response')`, `getLocatorStringForElement` |
+| **4. 문서화** | `.claude/crawler/[사이트]/` 저장 | Write |
+| **5. 코드** | 크롤러 생성 | [code-templates.md](references/code-templates.md) |
+
+</workflow>
+
+---
+
+<quick_commands>
+
+```bash
+# 세션 생성 + 페이지 열기
+playwriter session new
+playwriter -s 1 -e "state.page = await context.newPage(); await state.page.goto('https://target.com')"
+
+# 구조 파악
+playwriter -s 1 -e "console.log(await accessibilitySnapshot({ page: state.page }))"
+
+# API 인터셉트
+playwriter -s 1 -e $'
+state.responses = [];
+state.page.on("response", async res => {
+  if (res.url().includes("/api/")) {
+    try { state.responses.push({ url: res.url(), body: await res.json() }); } catch {}
+  }
+});
+'
+
+# 인증 추출
+playwriter -s 1 -e "console.log(JSON.stringify(await context.cookies(), null, 2))"
+playwriter -s 1 -e "console.log(await state.page.evaluate(() => localStorage.getItem('token')))"
+
+# Selector 변환
+playwriter -s 1 -e "console.log(await getLocatorStringForElement(state.page.locator('aria-ref=e14')))"
+```
+
+</quick_commands>
+
+---
+
+<method_selection>
+
+| 조건 | 방식 | 비고 |
+|------|------|------|
+| API 발견 + 인증 단순 | **fetch** | 가장 빠름 |
+| API + 쿠키/토큰 필요 | **fetch + Cookie** | 만료 관리 필요 |
+| 봇 탐지 강함 | **Nstbrowser** | Anti-Detect |
+| API 없음 (SSR) | **Playwright DOM** | 직접 파싱 |
+
+</method_selection>
+
+---
+
+<output_structure>
+
+```
+.claude/crawler/[사이트명]/
+├── ANALYSIS.md      # 사이트 구조
+├── SELECTORS.md     # DOM selector
+├── API.md           # API endpoint
+├── NETWORK.md       # 인증 정보
+└── CRAWLER.ts       # 생성 코드
+```
+
+**Templates:** [document-templates.md](references/document-templates.md)
+
+</output_structure>
+
+---
+
+<validation>
+
+```text
+✅ playwriter 세션 생성
+✅ accessibilitySnapshot 구조 파악
+✅ API 인터셉트 시도
+✅ selector 추출 검증
+✅ .claude/crawler/ 문서화
+✅ 크롤러 코드 생성
+```
+
+</validation>
+
+---
+
+<forbidden>
+
+| 분류 | 금지 |
+|------|------|
+| **분석** | 구조 파악 없이 selector 추측 |
+| **방식** | API 확인 없이 DOM만 시도 |
+| **문서** | 분석 결과 문서화 생략 |
+| **네트워크** | Rate limiting 미고려 |
+
+</forbidden>
+
+---
+
+<example>
+
+```bash
+# 사용자: /crawler https://shop.example.com 상품 크롤링
+
+# 1. 세션
+playwriter session new  # => 1
+playwriter -s 1 -e "state.page = await context.newPage(); await state.page.goto('https://shop.example.com/products')"
+
+# 2. 구조 파악
+playwriter -s 1 -e "console.log(await accessibilitySnapshot({ page: state.page }))"
+# => list "Products" [ref=e5]: listitem [ref=e6]: link "Product A" [ref=e7]
+
+# 3. API 확인 (스크롤 트리거)
+playwriter -s 1 -e "await state.page.evaluate(() => window.scrollTo(0, 9999))"
+playwriter -s 1 -e "console.log(state.responses.map(r => r.url))"
+# => ["/api/products?page=2"]
+
+# 4. 문서화 → .claude/crawler/shop-example-com/
+# 5. API 기반 크롤러 생성
+```
+
+</example>

package/templates/.claude/skills/crawler/references/anti-bot-checklist.md

@@ -0,0 +1,162 @@
+# 봇 탐지 대응 체크리스트
+
+> 크롤러 코드 작성 시 봇 탐지 회피 참고
+
+---
+
+<fingerprint>
+
+## 브라우저 지문
+
+```bash
+playwriter -s 1 -e $'
+const fp = await state.page.evaluate(() => ({
+  webdriver: navigator.webdriver,
+  plugins: navigator.plugins.length,
+  languages: navigator.languages,
+  platform: navigator.platform,
+}));
+console.log(fp);
+'
+```
+
+| 지문 | 봇 특징 | 대응 |
+|------|--------|------|
+| `navigator.webdriver` | `true` | Anti-Detect |
+| `plugins.length` | `0` | 스푸핑 |
+| UA vs platform | 불일치 | 일관성 |
+| Canvas/WebGL | 일정함 | 다양화 |
+| TLS/JA3 | 비표준 | Anti-Detect |
+
+</fingerprint>
+
+---
+
+<behavior>
+
+## 행동 패턴
+
+| 패턴 | 봇 | 인간 |
+|------|-----|------|
+| 요청 간격 | 일정 | 불규칙 |
+| 클릭 | 즉시 | 호버 후 |
+| 스크롤 | 점프 | 부드럽게 |
+| 체류 시간 | 짧음 | 다양 |
+
+```bash
+# 자연스러운 클릭
+playwriter -s 1 -e $'
+const btn = state.page.locator("button");
+await btn.hover();
+await state.page.waitForTimeout(100 + Math.random() * 200);
+await btn.click();
+'
+```
+
+</behavior>
+
+---
+
+<network>
+
+## 네트워크
+
+| IP 유형 | 위험도 |
+|---------|-------|
+| 데이터센터 (AWS, GCP) | 높음 |
+| VPN/프록시 | 중간 |
+| 주거용 | 낮음 |
+
+**헤더 체크:**
+- `Accept-Language` 지역 일치
+- `Referer` 적절히 설정
+- 헤더 순서 브라우저와 일치
+
+</network>
+
+---
+
+<captcha>
+
+## CAPTCHA 대응
+
+```bash
+playwriter -s 1 -e $'
+const captcha = await state.page.evaluate(() => ({
+  recaptcha: !!document.querySelector(".g-recaptcha"),
+  hcaptcha: !!document.querySelector(".h-captcha"),
+  turnstile: !!document.querySelector(".cf-turnstile"),
+}));
+console.log(captcha);
+'
+```
+
+| CAPTCHA | 대응 |
+|---------|------|
+| reCAPTCHA v2 | 2captcha 서비스 |
+| reCAPTCHA v3 | 행동 개선 |
+| hCaptcha | 서비스 사용 |
+| Turnstile | Anti-Detect |
+
+</captcha>
+
+---
+
+<test_sites>
+
+## 탐지 테스트
+
+```bash
+playwriter -s 1 -e $'
+await state.page.goto("https://bot.sannysoft.com/");
+await state.page.screenshot({ path: "bot-test.png", scale: "css", fullPage: true });
+'
+```
+
+| 사이트 | 확인 |
+|--------|------|
+| bot.sannysoft.com | 종합 봇 탐지 |
+| browserleaks.com | 브라우저 지문 |
+| pixelscan.net | Anti-Detect 효과 |
+
+</test_sites>
+
+---
+
+<checklist>
+
+## 회피 체크리스트
+
+**필수:**
+```text
+✅ User-Agent 실제 브라우저
+✅ webdriver = false
+✅ 플러그인/언어/플랫폼 일관성
+✅ 쿠키 활성화
+✅ 헤더 순서 일치
+```
+
+**행동:**
+```text
+✅ 무작위 딜레이 (1-5초)
+✅ 클릭 전 호버
+✅ 자연스러운 스크롤
+✅ 체류 시간 다양화
+```
+
+</checklist>
+
+---
+
+<tool_selection>
+
+## 도구 선택
+
+| 조건 | 도구 |
+|------|------|
+| 봇 탐지 없음 | Playwright |
+| 기본 탐지 | Playwright + Stealth |
+| 고급 탐지 | Nstbrowser |
+| Cloudflare | Anti-Detect 필수 |
+
+</tool_selection>

package/templates/.claude/skills/crawler/references/code-templates.md

@@ -0,0 +1,119 @@
+# 크롤러 코드 템플릿
+
+> 분석 결과 기반 자동 생성용
+
+---
+
+## 방식 선택
+
+| 조건 | 방식 | 템플릿 |
+|------|------|--------|
+| API 발견 + 인증 단순 | fetch | API 크롤러 |
+| API + 쿠키/토큰 | fetch + Cookie | API 크롤러 (인증) |
+| 봇 탐지 강함 | Nstbrowser | (별도 구현) |
+| API 없음 (SSR) | Playwright | DOM 크롤러 |
+
+---
+
+## API 크롤러
+
+```typescript
+// CRAWLER.ts - API 기반
+interface ApiResponse {
+  data: Item[];
+  pagination: { page: number; total: number; hasNext: boolean };
+}
+
+interface Item {
+  id: string;
+  title: string;
+}
+
+export class ApiCrawler {
+  private baseUrl = 'https://example.com/api';
+  private headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+    // 'Authorization': 'Bearer ...',
+    // 'Cookie': '...',
+  };
+
+  async fetchPage(page: number, limit = 20): Promise<ApiResponse> {
+    const res = await fetch(
+      `${this.baseUrl}/items?page=${page}&limit=${limit}`,
+      { headers: this.headers }
+    );
+    if (!res.ok) throw new Error(`API error: ${res.status}`);
+    return res.json();
+  }
+
+  async crawlAll(): Promise<Item[]> {
+    const items: Item[] = [];
+    let page = 1;
+    let hasNext = true;
+
+    while (hasNext) {
+      const res = await this.fetchPage(page);
+      items.push(...res.data);
+      hasNext = res.pagination.hasNext;
+      page++;
+      await new Promise(r => setTimeout(r, 100)); // Rate limit
+    }
+    return items;
+  }
+}
+```
+
+---
+
+## DOM 크롤러 (Playwright)
+
+```typescript
+// CRAWLER.ts - DOM 기반
+import { chromium, Browser, Page } from 'playwright';
+
+interface Item {
+  id: string;
+  title: string;
+  url: string;
+}
+
+export class DomCrawler {
+  private browser: Browser | null = null;
+  private page: Page | null = null;
+
+  async init(): Promise<void> {
+    this.browser = await chromium.launch({ headless: true });
+    this.page = await this.browser.newPage();
+  }
+
+  async crawlList(url: string): Promise<Item[]> {
+    if (!this.page) throw new Error('Not initialized');
+    await this.page.goto(url, { waitUntil: 'domcontentloaded' });
+
+    return this.page.$$eval('.item-card', cards =>
+      cards.map(card => ({
+        id: card.getAttribute('data-id') || '',
+        title: card.querySelector('h2')?.textContent?.trim() || '',
+        url: card.querySelector('a')?.href || '',
+      }))
+    );
+  }
+
+  async crawlAllPages(baseUrl: string): Promise<Item[]> {
+    const items: Item[] = [];
+    let page = 1;
+
+    while (true) {
+      const result = await this.crawlList(`${baseUrl}?page=${page}`);
+      if (result.length === 0) break;
+      items.push(...result);
+      page++;
+    }
+    return items;
+  }
+
+  async close(): Promise<void> {
+    await this.browser?.close();
+  }
+}
+```

package/templates/.claude/skills/crawler/references/crawling-patterns.md

@@ -0,0 +1,167 @@
+# 크롤링 패턴
+
+> 데이터 로딩, 페이지네이션, 인증 패턴
+
+---
+
+<rendering>
+
+## 렌더링 방식
+
+| 방식 | 특징 | 전략 |
+|------|------|------|
+| **SSR** | HTML에 데이터 포함 | DOM 파싱 |
+| **CSR** | JS로 API 호출 | API 직접 호출 |
+
+```javascript
+// SSR/CSR 판별
+const html = await page.content();
+console.log(html.length > 5000 ? 'SSR 가능' : 'CSR');
+```
+
+</rendering>
+
+---
+
+<pagination>
+
+## 페이지네이션
+
+### URL 기반
+
+```typescript
+for (let page = 1; ; page++) {
+  const items = await fetch(`${baseUrl}?page=${page}`).then(r => r.json());
+  if (items.length === 0) break;
+  allItems.push(...items);
+}
+```
+
+### 커서 기반
+
+```typescript
+let cursor: string | null = null;
+do {
+  const data = await fetch(cursor ? `${url}?cursor=${cursor}` : url).then(r => r.json());
+  allItems.push(...data.items);
+  cursor = data.nextCursor;
+} while (cursor);
+```
+
+### 무한 스크롤
+
+```javascript
+// API 인터셉트 후 스크롤
+for (let i = 0; i < 10; i++) {
+  await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+  await page.waitForTimeout(1000);
+}
+```
+
+### 더보기 버튼
+
+```javascript
+const btn = page.locator('button:has-text("더보기")');
+while (await btn.isVisible()) {
+  await btn.click();
+  await page.waitForLoadState('networkidle');
+}
+```
+
+</pagination>
+
+---
+
+<auth>
+
+## 인증 패턴
+
+### 쿠키/세션
+
+```javascript
+const cookies = await context.cookies();
+const session = cookies.find(c => c.name === 'session');
+
+await fetch(url, {
+  headers: { 'Cookie': `session=${session.value}` }
+});
+```
+
+### Bearer 토큰
+
+```javascript
+const token = await page.evaluate(() => localStorage.getItem('token'));
+
+await fetch(url, {
+  headers: { 'Authorization': `Bearer ${token}` }
+});
+```
+
+</auth>
+
+---
+
+<dynamic>
+
+## 동적 콘텐츠
+
+### Lazy Loading
+
+```javascript
+// 스크롤로 이미지 로드
+await page.evaluate(async () => {
+  for (let y = 0; y < document.body.scrollHeight; y += 500) {
+    window.scrollTo(0, y);
+    await new Promise(r => setTimeout(r, 200));
+  }
+});
+```
+
+### Shadow DOM
+
+```javascript
+const content = await page.evaluate(() => {
+  return document.querySelector('custom-element').shadowRoot.innerHTML;
+});
+```
+
+### iframe
+
+```javascript
+const frame = page.frameLocator('#content-frame');
+const items = await frame.locator('.item').allTextContents();
+```
+
+</dynamic>
+
+---
+
+<rate_limit>
+
+## Rate Limiting
+
+```typescript
+// 딜레이 적용
+async function rateLimitedFetch(urls: string[], delayMs = 100) {
+  const results = [];
+  for (const url of urls) {
+    results.push(await fetch(url).then(r => r.json()));
+    await new Promise(r => setTimeout(r, delayMs));
+  }
+  return results;
+}
+
+// 재시도
+async function fetchWithRetry(url: string, retries = 3) {
+  for (let i = 0; i < retries; i++) {
+    const res = await fetch(url);
+    if (res.status === 429) {
+      await new Promise(r => setTimeout(r, (parseInt(res.headers.get('Retry-After') || '60')) * 1000));
+      continue;
+    }
+    return res.json();
+  }
+}
+```
+
+</rate_limit>