@kood/claude-code 0.4.1 → 0.5.0

package/templates/.claude/skills/figma-to-code/references/design-tokens.md

@@ -1,19 +1,19 @@
-# Design Tokens Extraction and Mapping
+# Design Tokens 추출 및 매핑
 
-Guide for precisely converting Figma Variables and Styles to Tailwind CSS v4 @theme blocks.
+Figma Variables와 Styles를 Tailwind CSS v4 @theme 블록으로 정확히 변환하는 가이드.
 
-**Tailwind v4 Characteristics:**
-- **No Config File**: Remove tailwind.config.js
-- **@theme in CSS**: Define tokens directly in globals.css
-- **Auto Class Generation**: `@theme { --color-primary: #xxx; }` → `bg-primary` generated automatically
+**Tailwind v4 특징:**
+- **No Config File**: tailwind.config.js 제거
+- **@theme in CSS**: globals.css에 직접 토큰 정의
+- **Auto Class Generation**: `@theme { --color-primary: #xxx; }` → `bg-primary` 자동
 
 ---
 
-## Variables Extraction
+## Variables 추출
 
 ### Color Variables
 
-**Figma Structure:**
+**Figma 구조:**
 ```
 color/
 ├─ primary/
@@ -29,11 +29,11 @@ color/
    └─ warning → #F59E0B
 ```
 
-**Code Conversion:**
+**코드 변환:**
 
-#### Tailwind v4 (@theme block)
+#### Tailwind v4 (@theme 블록)
 
-**Vite** (src/index.css or src/main.css):
+**Vite** (src/index.css 또는 src/main.css):
 ```css
 @import "tailwindcss";
 
@@ -59,23 +59,23 @@ color/
 @import "tailwindcss";
 
 @theme {
-  /* Same structure */
+  /* 동일한 구조 */
 }
 ```
 
-**Auto Class Generation:**
+**자동 클래스 생성:**
 ```tsx
-// After @theme { --color-primary-500: #3182F6; }
-<div className="bg-primary-500">     {/* Background color */}
-<div className="text-primary-500">   {/* Text color */}
-<div className="border-primary-500"> {/* Border color */}
+// @theme { --color-primary-500: #3182F6; } 정의 후
+<div className="bg-primary-500">     {/* 배경색 */}
+<div className="text-primary-500">   {/* 텍스트 */}
+<div className="border-primary-500"> {/* 보더 */}
 ```
 
-**Merge:** Define both existing globals.css tokens and Figma-extracted tokens in @theme block together.
+**병합:** 기존 globals.css 토큰과 Figma 추출 토큰을 @theme 블록에 함께 정의.
 
 ### Spacing Variables
 
-**Figma Structure:**
+**Figma 구조:**
 ```
 spacing/
 ├─ xs  → 4px
@@ -86,7 +86,7 @@ spacing/
 └─ 2xl → 48px
 ```
 
-**Code Conversion (Tailwind v4):**
+**코드 변환 (Tailwind v4):**
 
 ```css
 @import "tailwindcss";
@@ -101,11 +101,11 @@ spacing/
 }
 ```
 
-**Usage:** `p-md` (16px), `gap-xs` (4px), `m-lg` (24px)
+**사용:** `p-md` (16px), `gap-xs` (4px), `m-lg` (24px)
 
 ### Typography Variables
 
-**Figma Structure:**
+**Figma 구조:**
 ```
 font/
 ├─ size/
@@ -123,7 +123,7 @@ font/
    └─ bold     → 700
 ```
 
-**Code Conversion (Tailwind v4):**
+**코드 변환 (Tailwind v4):**
 
 ```css
 @import "tailwindcss";
@@ -147,11 +147,11 @@ font/
 }
 ```
 
-**Usage:** `text-sm font-regular font-sans` (14px/400/Pretendard), `text-lg font-semibold` (18px/600)
+**사용:** `text-sm font-regular font-sans` (14px/400/Pretendard), `text-lg font-semibold` (18px/600)
 
 ---
 
-## Styles Extraction
+## Styles 추출
 
 ### Text Styles
 
@@ -169,7 +169,7 @@ font/
 }
 ```
 
-**Code Conversion:**
+**코드 변환:**
 
 #### CSS Class
 
@@ -187,7 +187,7 @@ font/
 
 ```tsx
 <h1 className="font-sans text-[28px] font-semibold leading-[36px] tracking-[-0.02em]">
-  Heading
+  제목
 </h1>
 ```
 
@@ -212,16 +212,16 @@ const H1 = ({ children }: { children: React.ReactNode }) => (
 }
 ```
 
-**RGB → HEX Conversion:**
+**RGB → HEX 변환:**
 ```
 r: 0.133 × 255 = 34  → 22
 g: 0.725 × 255 = 185 → B9
 b: 0.478 × 255 = 122 → 7A
 
-Result: #22B97A (more accurately: #22C55E)
+결과: #22B97A (정확히는 #22C55E)
 ```
 
-**Code Usage:**
+**코드 사용:**
 ```css
 .text-success {
   color: #22C55E;
@@ -246,7 +246,7 @@ Result: #22B97A (more accurately: #22C55E)
 }
 ```
 
-**Code Conversion:**
+**코드 변환:**
 ```css
 .shadow-medium {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
@@ -262,19 +262,19 @@ Result: #22B97A (more accurately: #22C55E)
 
 ---
 
-## Conversion Rules
+## 변환 규칙
 
-### Unit Conversion
+### 단위 변환
 
-| Figma | CSS | Description |
-|-------|-----|-------------|
-| `16` | `16px` | Pixels as-is |
-| `{ unit: "PERCENT", value: 120 }` | `120%` or `1.2` | line-height |
+| Figma | CSS | 설명 |
+|-------|-----|------|
+| `16` | `16px` | 픽셀 그대로 |
+| `{ unit: "PERCENT", value: 120 }` | `120%` 또는 `1.2` | line-height |
 | `{ unit: "PERCENT", value: -2 }` | `-0.02em` | letter-spacing |
 | `{ r: 0.5, g: 0.5, b: 0.5, a: 1 }` | `#808080` | RGB → HEX |
-| `{ r: 0, g: 0, b: 0, a: 0.5 }` | `rgba(0,0,0,0.5)` | When transparency present |
+| `{ r: 0, g: 0, b: 0, a: 0.5 }` | `rgba(0,0,0,0.5)` | 투명도 있을 때 |
 
-### Naming Rules
+### 네이밍 규칙
 
 | Figma | CSS Variable | Tailwind |
 |-------|--------------|----------|
@@ -282,7 +282,7 @@ Result: #22B97A (more accurately: #22C55E)
 | `spacing/md` | `--spacing-md` | `md` (spacing) |
 | `font/size/lg` | `--font-size-lg` | `text-lg` |
 
-### Case Conversion
+### 케이스 변환
 
 ```
 Figma (PascalCase/slash): Heading/H1
@@ -292,42 +292,42 @@ Tailwind (custom):        [28px] or heading-h1
 
 ---
 
-## Workflow
+## 워크플로우
 
-| Step | Tool | Output |
-|------|------|--------|
-| Extract Variables | get_variables | variables.json |
-| Convert CSS | Node script | :root { --color-*: #...; } |
-| Extract Styles | get_styles | styles.json |
-| Generate @theme | Manual/script | @theme { --shadow-*: ...; } |
-| Validate | DevTools | className values match |
+| 단계 | 도구 | 출력 |
+|------|------|------|
+| Variables 추출 | get_variables | variables.json |
+| CSS 변환 | Node 스크립트 | :root { --color-*: #...; } |
+| Styles 추출 | get_styles | styles.json |
+| @theme 생성 | 수동/스크립트 | @theme { --shadow-*: ...; } |
+| 검증 | DevTools | className 값 일치 확인 |
 
 ---
 
-## Best Practices
+## 베스트 프랙티스
 
 ### DO
 
-| Principle | Example |
-|-----------|---------|
-| **Variables First** | Figma Variables → CSS Variables → Tailwind |
-| **Exact Values** | `#3182F6` (hex as-is) |
-| **Maintain Hierarchy** | `color/primary/500` → `--color-primary-500` |
-| **Use Code Syntax** | Reference Figma codeSyntax attribute |
+| 원칙 | 예시 |
+|------|------|
+| **Variables 우선** | Figma Variables → CSS Variables → Tailwind |
+| **정확한 값** | `#3182F6` (16진수 그대로) |
+| **계층 유지** | `color/primary/500` → `--color-primary-500` |
+| **코드 신택스 활용** | Figma codeSyntax 속성 참조 |
 
 ### DON'T
 
-| Forbidden | Reason |
-|-----------|--------|
-| **Use Approximations** | `#3182F6` → `bg-blue-500` (different) |
-| **Arbitrary Naming** | Ignore Figma naming structure |
-| **Hardcode Values** | Use Variables instead of direct values |
+| 금지 사항 | 이유 |
+|----------|------|
+| **근사치 사용** | `#3182F6` → `bg-blue-500` (다름) |
+| **임의 네이밍** | Figma 네이밍 구조 무시 |
+| **하드코딩** | Variables 대신 직접 값 사용 |
 
 ---
 
-## Tools
+## 도구
 
-### Color Conversion
+### Color 변환
 
 ```js
 // RGB (0-1) → HEX
@@ -336,11 +336,11 @@ function rgbToHex(r, g, b) {
   return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase()
 }
 
-// Usage
+// 사용
 rgbToHex(0.192, 0.51, 0.965) // "#3182F6"
 ```
 
-### Letter Spacing Conversion
+### Letter Spacing 변환
 
 ```js
 // Figma PERCENT → em
@@ -348,11 +348,11 @@ function percentToEm(percent) {
   return (percent / 100).toFixed(3) + 'em'
 }
 
-// Usage
+// 사용
 percentToEm(-2) // "-0.02em"
 ```
 
-### Line Height Conversion
+### Line Height 변환
 
 ```js
 // Figma pixels → CSS
@@ -361,38 +361,40 @@ function lineHeight(fontSize, lineHeightPx) {
   return `${lineHeightPx}px /* ${(ratio * 100).toFixed(1)}% */`
 }
 
-// Usage
+// 사용
 lineHeight(28, 36) // "36px /* 128.6% */"
 ```
 
 ---
 
-## Example
+## 예제
 
-Figma Variables → @theme block → Auto class generation:
+Figma Variables → @theme 블록 → 자동 클래스 생성:
 
 ```css
 @theme { --color-primary-500: #3182F6; }
 ```
 ```tsx
-<button className="bg-primary-500">Button</button>
+<button className="bg-primary-500">버튼</button>
 ```
 
 ---
 
+---
+
 ## Tailwind v4 Migration
 
 | v3 | v4 |
 |-----|-----|
-| `tailwind.config.js` | None (moved to CSS) |
+| `tailwind.config.js` | 없음 (CSS로 이동) |
 | `theme.extend` in JS | `@theme` in CSS |
 | `@tailwind base/...` | `@import "tailwindcss"` |
 
-**globals.css location:** Vite(`src/index.css`), Next.js App(`app/globals.css`), Pages(`styles/globals.css`)
+**globals.css 위치:** Vite(`src/index.css`), Next.js App(`app/globals.css`), Pages(`styles/globals.css`)
 
 ---
 
-## References
+## 참조
 
 - [Figma Variables API](https://www.figma.com/developers/api#variables)
 - [Design Tokens with Figma](https://blog.prototypr.io/design-tokens-with-figma-aef25c42430f)

package/templates/.claude/skills/figma-to-code/references/figma-mcp-tools.md

@@ -1,65 +1,65 @@
-# Figma MCP Tools Usage
+# Figma MCP 도구 사용법
 
-Detailed guide to tools and API endpoints provided by Figma MCP.
+Figma MCP가 제공하는 도구와 API 엔드포인트 상세 가이드.
 
 ---
 
-## MCP Connection Types
+## MCP 연결 타입
 
-### Desktop MCP (Local)
+### Desktop MCP (로컬)
 
-**Advantages:**
-- Selection-based: Process only selected layers
-- Fast response
-- No internet connection required
+**장점:**
+- 선택 기반 (Selection-based): 현재 선택한 레이어만 처리
+- 빠른 응답 속도
+- 인터넷 연결 불필요
 
-**Setup:**
+**설정:**
 
 ```bash
-# Add
+# 추가
 claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp
 
-# Verify
+# 확인
 claude mcp list
 
-# Restart
+# 재시작
 claude mcp restart figma-desktop
 ```
 
-**Enable:** Figma Desktop → Dev Mode (Shift+D) → Inspect → "Enable desktop MCP server" → Verify: `http://127.0.0.1:3845/health`
+**활성화:** Figma Desktop → Dev Mode (Shift+D) → Inspect → "Enable desktop MCP server" → 확인: `http://127.0.0.1:3845/health`
 
-### Remote MCP (Cloud)
+### Remote MCP (클라우드)
 
-**Advantages:**
-- Access via file URL
-- No desktop app required
-- Better for team collaboration
+**장점:**
+- 파일 URL로 접근 가능
+- 데스크톱 앱 불필요
+- 팀 협업에 유리
 
-**Setup:**
+**설정:**
 
 ```bash
-# Add
+# 추가
 claude mcp add --transport http figma-remote-mcp https://mcp.figma.com/mcp
 
-# Authenticate
+# 인증
 claude mcp login figma-remote-mcp
 ```
 
-**Usage:**
+**사용:**
 ```
-Provide file URL:
+파일 URL 제공:
 https://www.figma.com/file/ABC123/ProjectName
 ```
 
 ---
 
-## Key MCP Tools
+## 주요 MCP 도구
 
 ### 1. get_file_info
 
-Retrieve file metadata and structure (required before starting work).
+파일 메타데이터 및 구조 조회 (작업 시작 전 필수).
 
-**Response:**
+**응답:**
 ```json
 {
   "name": "Design System",
@@ -76,9 +76,9 @@ Retrieve file metadata and structure (required before starting work).
 
 ### 2. get_variables
 
-Extract Variables (Color, Number, String, Boolean).
+Variables (Color, Number, String, Boolean) 추출.
 
-**Response:**
+**응답:**
 ```json
 {
   "variables": [
@@ -116,7 +116,7 @@ Extract Variables (Color, Number, String, Boolean).
 
 ### 3. get_styles
 
-Extract Text Styles, Color Styles, Effect Styles.
+Text Styles, Color Styles, Effect Styles 추출.
 
 **Text Styles:**
 ```json
@@ -155,9 +155,9 @@ Extract Text Styles, Color Styles, Effect Styles.
 
 ### 4. get_node_properties
 
-Retrieve layer properties including layout/Auto Layout/styles/text/images (Desktop MCP: requires layer selection).
+선택된 레이어의 레이아웃/Auto Layout/스타일/텍스트/이미지 속성 (Desktop MCP: 레이어 선택 필수).
 
-**Response:**
+**응답:**
 ```json
 {
   "id": "123:456",
@@ -179,7 +179,7 @@ Retrieve layer properties including layout/Auto Layout/styles/text/images (Deskt
   "children": [
     {
       "type": "TEXT",
-      "characters": "Button text",
+      "characters": "버튼 텍스트",
       "style": { "fontSize": 14, "fontWeight": 600 }
     }
   ]
@@ -189,98 +189,98 @@ Retrieve layer properties including layout/Auto Layout/styles/text/images (Deskt
 **→ TSX:**
 ```tsx
 <button className="flex items-center justify-center gap-[8px] px-[16px] py-[12px] bg-[#3182F6] rounded-[8px] w-[120px] h-[44px]">
-  <span className="text-[14px] font-semibold text-white">Button text</span>
+  <span className="text-[14px] font-semibold text-white">버튼 텍스트</span>
 </button>
 ```
 
 ### 5. get_images
 
-Generate download links for image assets.
+이미지 에셋 다운로드 링크 생성.
 
-**Usage:**
+**사용:**
 ```json
 // Input: image_refs: ["123:456"]
 // Output: { "123:456": "https://s3-alpha.figma.com/..." }
 ```
 
-**Workflow:**
+**워크플로우:**
 ```bash
-# PNG/JPG → WebP (SVG files should not be converted)
+# PNG/JPG → WebP (SVG 파일은 변환하지 않음)
 curl -o hero.png "https://..." && cwebp hero.png -q 80 -o hero.webp && mv hero.webp public/images/
 curl -o banner.jpg "https://..." && cwebp banner.jpg -q 80 -o banner.webp && mv banner.webp public/images/
 ```
 
 ### 6. export_node
 
-Export layer as SVG/PNG/JPG.
+레이어를 SVG/PNG/JPG로 export.
 
-**Settings:**
+**설정:**
 ```json
 { "node_id": "123:456", "format": "SVG", "scale": 2 }
 ```
 
-**Use Cases:** Icons (SVG), Illustrations (PNG/WebP 2x), Logos (SVG)
+**케이스:** 아이콘(SVG), 일러스트(PNG/WebP 2x), 로고(SVG)
 
 ---
 
-## Workflow
+## 워크플로우
 
-| Step | Tool | Output |
-|------|------|--------|
-| 1. File structure | get_file_info | Canvas/Frame structure |
-| 2. Extract tokens | get_variables | CSS Variables |
-| 3. Extract styles | get_styles | Text/Color Styles |
-| 4. Layer properties | get_node_properties | Layout/Auto Layout |
-| 5. Collect images | get_images | Download URLs |
-| 6. Implement code | - | Flexbox/Grid + exact measurements |
-| 7. Validate | DevTools | Measurement comparison |
+| 단계 | 도구 | 출력 |
+|------|------|------|
+| 1. 파일 구조 | get_file_info | Canvas/Frame 구조 |
+| 2. 토큰 추출 | get_variables | CSS Variables |
+| 3. 스타일 추출 | get_styles | Text/Color Styles |
+| 4. 레이어 속성 | get_node_properties | Layout/Auto Layout |
+| 5. 이미지 수집 | get_images | 다운로드 URL |
+| 6. 코드 구현 | - | Flexbox/Grid + 정확한 수치 |
+| 7. 검증 | DevTools | 수치 비교 |
 
 ---
 
-## Important Notes
+## 주의 사항
 
 ### Desktop MCP
 
-| Limitation | Solution |
-|-----------|----------|
-| Layer selection required | Select target layer before work |
-| Limited concurrent execution | One file at a time |
-| Requires local network | Verify firewall (port 3845) |
+| 제약 | 해결 |
+|------|------|
+| 레이어 선택 필수 | 구현 전 대상 레이어 선택 |
+| 동시 실행 제한 | 한 번에 하나의 파일만 |
+| 로컬 네트워크 필요 | 방화벽 확인 (포트 3845) |
 
 ### Remote MCP
 
-| Limitation | Solution |
-|-----------|----------|
-| Authentication required | Run `claude mcp login` |
-| Rate limit | Wait if 429 error occurs |
-| File permissions | Requires View access or higher |
+| 제약 | 해결 |
+|------|------|
+| 인증 필요 | `claude mcp login` 실행 |
+| Rate Limit | 429 에러 시 대기 |
+| 파일 권한 | View 권한 이상 필요 |
 
 ---
 
-## Debugging
+## 디버깅
 
-### Verify MCP Connection
+### MCP 연결 확인
 
 ```bash
-# Desktop MCP status
+# Desktop MCP 상태
 curl http://127.0.0.1:3845/health
 
-# Remote MCP login status
+# Remote MCP 로그인 상태
 claude mcp status figma-remote-mcp
 ```
 
-### Error Troubleshooting
+### 오류 해결
 
-| Error | Cause | Solution |
-|-------|-------|----------|
-| `Connection refused` | Desktop MCP not enabled | Enable in Figma Dev Mode |
-| `401 Unauthorized` | Remote MCP auth expired | Rerun `claude mcp login` |
-| `404 Not Found` | Invalid node_id | Verify ID in Figma |
-| `429 Too Many Requests` | Rate limit exceeded | Wait 1 minute and retry |
+| 오류 | 원인 | 해결 |
+|------|------|------|
+| `Connection refused` | Desktop MCP 미활성화 | Figma Dev Mode에서 Enable |
+| `401 Unauthorized` | Remote MCP 인증 만료 | `claude mcp login` 재실행 |
+| `404 Not Found` | 잘못된 node_id | Figma에서 ID 재확인 |
+| `429 Too Many Requests` | Rate Limit 초과 | 1분 대기 후 재시도 |
 
 ---
 
-## References
+## 참조
 
 - [Figma MCP Server Documentation](https://developers.figma.com/docs/figma-mcp-server/)
 - [Figma REST API Reference](https://www.figma.com/developers/api)