@kood/claude-code 0.7.6 → 0.7.8

package/dist/index.js

@@ -22,8 +22,8 @@ var banner = () => {
 };
 
 // src/commands/init.ts
-import fs8 from "fs-extra";
-import os from "os";
+import fs9 from "fs-extra";
+import os2 from "os";
 
 // src/features/templates/template-path-resolver.ts
 import path2 from "path";
@@ -688,16 +688,50 @@ async function promptScopeSelection(options) {
   }
   return { scope: response.value };
 }
+async function promptCodexSync(options) {
+  const { providedSyncCodex } = options;
+  if (providedSyncCodex !== void 0) {
+    return { syncCodex: providedSyncCodex };
+  }
+  if (!process.stdin.isTTY || !process.stdout.isTTY) {
+    return { syncCodex: false };
+  }
+  logger.blank();
+  const result = await promptConfirm(
+    "Also sync with Codex now? (~/.codex/skills/)",
+    false
+  );
+  return { syncCodex: result.confirmed };
+}
 
 // src/shared/gitignore-manager.ts
 import fs7 from "fs-extra";
 import path9 from "path";
 var CLAUDE_GENERATED_FOLDERS = [
+  ".claude/brainstorms/",
+  ".claude/crawler/",
+  ".claude/first-principles/",
+  ".claude/genius-ideas/",
   ".claude/plan/",
+  ".claude/plans/",
   ".claude/ralph/",
   ".claude/refactor/",
-  ".claude/prd/"
+  ".claude/prd/",
+  ".claude/research/",
+  ".claude/validation-results/"
 ];
+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 +743,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) {
@@ -755,6 +779,126 @@ async function updateGitignore(targetDir) {
   }
 }
 
+// src/features/codex-sync/codex-sync.ts
+import fs8 from "fs-extra";
+import os from "os";
+import path10 from "path";
+function resolveCodexHome() {
+  const envCodexHome = process.env.CODEX_HOME?.trim();
+  if (envCodexHome) {
+    return path10.resolve(envCodexHome);
+  }
+  return path10.join(os.homedir(), ".codex");
+}
+function normalizeLineEndings(content) {
+  return content.replace(/\r\n/g, "\n");
+}
+function yamlQuote(value) {
+  return `"${value.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
+}
+function extractDescriptionFromFrontmatter(markdown) {
+  const frontmatterMatch = markdown.match(/^---\n([\s\S]*?)\n---\n?/);
+  if (!frontmatterMatch) {
+    return void 0;
+  }
+  const lines = frontmatterMatch[1].split("\n");
+  for (const rawLine of lines) {
+    const line = rawLine.trim();
+    if (!line.startsWith("description:")) {
+      continue;
+    }
+    const value = line.slice("description:".length).trim();
+    if (!value) {
+      return void 0;
+    }
+    return value.replace(/^['"]|['"]$/g, "");
+  }
+  return void 0;
+}
+function buildCommandSkillContent(commandPath, commandRaw) {
+  const commandName = path10.basename(commandPath, ".md");
+  const normalizedCommand = normalizeLineEndings(commandRaw).trim();
+  const sourcePath = path10.resolve(commandPath);
+  const description = extractDescriptionFromFrontmatter(normalizedCommand) || `${commandName} command imported from .claude/commands`;
+  return `---
+name: ${yamlQuote(commandName)}
+description: ${yamlQuote(description)}
+---
+
+Imported command source: ${sourcePath}
+
+Use this as a command playbook. If scripts are referenced with .claude-relative paths,
+resolve them from the current workspace first; if missing, ask for the intended repo root.
+
+---
+
+${normalizedCommand}
+`;
+}
+async function syncSkills(claudeSkillsDir, codexSkillsDir) {
+  if (!await fs8.pathExists(claudeSkillsDir)) {
+    return 0;
+  }
+  const entries = await fs8.readdir(claudeSkillsDir, { withFileTypes: true });
+  let syncedSkills = 0;
+  for (const entry of entries) {
+    if (!entry.isDirectory()) {
+      continue;
+    }
+    if (entry.name === ".system") {
+      continue;
+    }
+    const src = path10.join(claudeSkillsDir, entry.name);
+    const dest = path10.join(codexSkillsDir, entry.name);
+    if (await fs8.pathExists(dest)) {
+      await fs8.remove(dest);
+    }
+    await copyRecursive(src, dest, { files: 0, directories: 0 });
+    syncedSkills++;
+  }
+  return syncedSkills;
+}
+async function syncCommands(claudeCommandsDir, codexCommandsDir) {
+  if (!await fs8.pathExists(claudeCommandsDir)) {
+    return 0;
+  }
+  const entries = await fs8.readdir(claudeCommandsDir, { withFileTypes: true });
+  const commandFiles = entries.filter((entry) => entry.isFile() && entry.name.endsWith(".md")).map((entry) => entry.name).sort((a, b) => a.localeCompare(b));
+  if (commandFiles.length === 0) {
+    return 0;
+  }
+  await fs8.remove(codexCommandsDir);
+  await fs8.ensureDir(codexCommandsDir);
+  for (const commandFile of commandFiles) {
+    const commandPath = path10.join(claudeCommandsDir, commandFile);
+    const commandRaw = await fs8.readFile(commandPath, "utf8");
+    const commandName = path10.basename(commandFile, ".md");
+    const skillDir = path10.join(codexCommandsDir, commandName);
+    const skillPath = path10.join(skillDir, "SKILL.md");
+    await fs8.ensureDir(skillDir);
+    await fs8.writeFile(skillPath, buildCommandSkillContent(commandPath, commandRaw));
+  }
+  return commandFiles.length;
+}
+async function syncWithCodex(targetDir) {
+  const codexHome = resolveCodexHome();
+  const codexSkillsDir = path10.join(codexHome, "skills");
+  const codexCommandsDir = path10.join(codexSkillsDir, "claude-commands");
+  await fs8.ensureDir(codexSkillsDir);
+  const claudeRootDir = path10.join(targetDir, ".claude");
+  const claudeSkillsDir = path10.join(claudeRootDir, "skills");
+  const claudeCommandsDir = path10.join(claudeRootDir, "commands");
+  const syncedSkills = await syncSkills(claudeSkillsDir, codexSkillsDir);
+  const syncedCommands = await syncCommands(claudeCommandsDir, codexCommandsDir);
+  return {
+    codexHome,
+    codexSkillsDir,
+    codexCommandsDir,
+    syncedSkills,
+    syncedCommands
+  };
+}
+
 // src/commands/init.ts
 var TEMPLATE_DESCRIPTIONS = {
   "tanstack-start": "TanStack Start + React \uD480\uC2A4\uD0DD \uD504\uB85C\uC81D\uD2B8",
@@ -764,7 +908,7 @@ var TEMPLATE_DESCRIPTIONS = {
 };
 async function validateTargetDirectory(targetDir) {
   try {
-    const stat = await fs8.stat(targetDir);
+    const stat = await fs9.stat(targetDir);
     if (!stat.isDirectory()) {
       logger.error(`Target is not a directory: ${targetDir}`);
       process.exit(1);
@@ -778,7 +922,7 @@ async function validateTargetDirectory(targetDir) {
     process.exit(1);
   }
   try {
-    await fs8.access(targetDir, fs8.constants.W_OK);
+    await fs9.access(targetDir, fs9.constants.W_OK);
   } catch {
     logger.error(`No write permission for: ${targetDir}`);
     process.exit(1);
@@ -905,7 +1049,7 @@ var init = async (options) => {
   const { scope } = await promptScopeSelection({
     providedScope: options.scope
   });
-  const targetDir = scope === "user" ? os.homedir() : projectDir;
+  const targetDir = scope === "user" ? os2.homedir() : projectDir;
   const isUserScope = scope === "user";
   if (isUserScope) {
     logger.blank();
@@ -960,15 +1104,46 @@ var init = async (options) => {
       );
     }
   }
+  const { syncCodex } = await promptCodexSync({
+    providedSyncCodex: options.syncCodex
+  });
+  if (!syncCodex) {
+    return;
+  }
+  logger.blank();
+  logger.info("Syncing .claude skills/commands to Codex...");
+  try {
+    const result = await syncWithCodex(targetDir);
+    if (result.syncedSkills > 0) {
+      logger.step(`Skills synced: ${result.syncedSkills}`);
+    }
+    if (result.syncedCommands > 0) {
+      logger.step(`Commands synced: ${result.syncedCommands}`);
+    }
+    if (result.syncedSkills === 0 && result.syncedCommands === 0) {
+      logger.warn(
+        "Nothing was synced. .claude/skills and .claude/commands were not found."
+      );
+    } else {
+      logger.success(`Codex sync complete: ${result.codexSkillsDir}`);
+    }
+  } catch (error) {
+    logger.warn(
+      `Codex sync failed: ${error instanceof Error ? error.message : "Unknown error"}`
+    );
+  }
 };
 
 // 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.8");
 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/").option("-a, --agents", "install agents to .claude/agents/").option("--scope <scope>", "installation scope (project|user)").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/").option(
+  "--sync-codex",
+  "sync installed .claude skills/commands to Codex (~/.codex/skills/)"
+).option("--scope <scope>", "installation scope (project|user)").action(async (options) => {
   banner();
   if (options.list) {
     const templates = await listAvailableTemplates();
@@ -984,7 +1159,8 @@ program.option(
     scope: options.scope,
     skills: options.skills,
     commands: options.commands,
-    agents: options.agents
+    agents: options.agents,
+    syncCodex: options.syncCodex
   });
 });
 program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kood/claude-code",
-  "version": "0.7.6",
+  "version": "0.7.8",
   "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>