@kood/claude-code 0.4.1 → 0.5.0

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/rerender-derived-state.md

@@ -5,21 +5,21 @@ impactDescription: reduces re-render frequency
 tags: rerender, derived-state, media-query, optimization
 ---
 
-## Subscribe to Derived State
+## 파생 상태 구독
 
-Subscribe to derived boolean state instead of continuous values to reduce re-render frequency.
+리렌더링 빈도를 줄이기 위해 연속적인 값 대신 파생된 boolean 상태를 구독하세요.
 
-**Incorrect (re-renders on every pixel change):**
+**잘못된 예시 (픽셀 변경마다 리렌더링):**
 
 ```tsx
 function Sidebar() {
-  const width = useWindowWidth()  // updates continuously
+  const width = useWindowWidth()  // 연속적으로 업데이트됨
   const isMobile = width < 768
   return <nav className={isMobile ? 'mobile' : 'desktop'}>
 }
 ```
 
-**Correct (re-renders only when boolean changes):**
+**올바른 예시 (boolean 변경 시에만 리렌더링):**
 
 ```tsx
 function Sidebar() {

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/rerender-functional-setstate.md

@@ -5,70 +5,70 @@ impactDescription: prevents stale closures and unnecessary callback recreations
 tags: react, hooks, useState, useCallback, callbacks, closures
 ---
 
-## Use Functional setState Updates
+## 함수형 setState 업데이트 사용
 
-When updating state based on the current state value, use the functional update form of setState instead of directly referencing the state variable. This prevents stale closures, eliminates unnecessary dependencies, and creates stable callback references.
+현재 상태 값을 기반으로 상태를 업데이트할 때는 상태 변수를 직접 참조하는 대신 setState의 함수형 업데이트 형태를 사용하세요. 이를 통해 stale closure를 방지하고, 불필요한 의존성을 제거하며, 안정적인 콜백 참조를 생성할 수 있습니다.
 
-**Incorrect (requires state as dependency):**
+**잘못된 예시 (상태를 의존성으로 필요):**
 
 ```tsx
 function TodoList() {
   const [items, setItems] = useState(initialItems)
-  
-  // Callback must depend on items, recreated on every items change
+
+  // 콜백은 items에 의존해야 하며, items 변경마다 재생성됨
   const addItems = useCallback((newItems: Item[]) => {
     setItems([...items, ...newItems])
-  }, [items])  // ❌ items dependency causes recreations
-  
-  // Risk of stale closure if dependency is forgotten
+  }, [items])  // ❌ items 의존성으로 인한 재생성
+
+  // 의존성을 잊으면 stale closure 위험
   const removeItem = useCallback((id: string) => {
     setItems(items.filter(item => item.id !== id))
-  }, [])  // ❌ Missing items dependency - will use stale items!
-  
+  }, [])  // ❌ items 의존성 누락 - stale items 사용!
+
   return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />
 }
 ```
 
-The first callback is recreated every time `items` changes, which can cause child components to re-render unnecessarily. The second callback has a stale closure bug—it will always reference the initial `items` value.
+첫 번째 콜백은 `items`가 변경될 때마다 재생성되어 자식 컴포넌트가 불필요하게 리렌더링될 수 있습니다. 두 번째 콜백은 stale closure 버그가 있어 항상 초기 `items` 값을 참조합니다.
 
-**Correct (stable callbacks, no stale closures):**
+**올바른 예시 (안정적인 콜백, stale closure 없음):**
 
 ```tsx
 function TodoList() {
   const [items, setItems] = useState(initialItems)
-  
-  // Stable callback, never recreated
+
+  // 안정적인 콜백, 재생성 안 됨
   const addItems = useCallback((newItems: Item[]) => {
     setItems(curr => [...curr, ...newItems])
-  }, [])  // ✅ No dependencies needed
-  
-  // Always uses latest state, no stale closure risk
+  }, [])  // ✅ 의존성 불필요
+
+  // 항상 최신 상태 사용, stale closure 위험 없음
   const removeItem = useCallback((id: string) => {
     setItems(curr => curr.filter(item => item.id !== id))
-  }, [])  // ✅ Safe and stable
-  
+  }, [])  // ✅ 안전하고 안정적
+
   return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />
 }
 ```
 
-**Benefits:**
+**장점:**
 
-1. **Stable callback references** - Callbacks don't need to be recreated when state changes
-2. **No stale closures** - Always operates on the latest state value
-3. **Fewer dependencies** - Simplifies dependency arrays and reduces memory leaks
-4. **Prevents bugs** - Eliminates the most common source of React closure bugs
+1. **안정적인 콜백 참조** - 상태 변경 시 콜백을 재생성할 필요 없음
+2. **Stale closure 없음** - 항상 최신 상태 값으로 동작
+3. **적은 의존성** - 의존성 배열을 단순화하고 메모리 누수 감소
+4. **버그 방지** - React closure 버그의 가장 흔한 원인 제거
 
-**When to use functional updates:**
+**함수형 업데이트를 사용해야 하는 경우:**
 
-- Any setState that depends on the current state value
-- Inside useCallback/useMemo when state is needed
-- Event handlers that reference state
-- Async operations that update state
+- 현재 상태 값에 의존하는 모든 setState
+- 상태가 필요한 useCallback/useMemo 내부
+- 상태를 참조하는 이벤트 핸들러
+- 상태를 업데이트하는 비동기 작업
 
-**When direct updates are fine:**
+**직접 업데이트를 사용해도 되는 경우:**
 
-- Setting state to a static value: `setCount(0)`
-- Setting state from props/arguments only: `setName(newName)`
-- State doesn't depend on previous value
+- 정적 값으로 상태 설정: `setCount(0)`
+- props/arguments로만 상태 설정: `setName(newName)`
+- 상태가 이전 값에 의존하지 않는 경우
 
-**Note:** If your project has [React Compiler](https://react.dev/learn/react-compiler) enabled, the compiler can automatically optimize some cases, but functional updates are still recommended for correctness and to prevent stale closure bugs.
+**참고:** 프로젝트에 [React Compiler](https://react.dev/learn/react-compiler)가 활성화되어 있다면 컴파일러가 일부 경우를 자동으로 최적화할 수 있지만, 정확성과 stale closure 버그 방지를 위해 함수형 업데이트는 여전히 권장됩니다.

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/rerender-lazy-state-init.md

@@ -5,54 +5,54 @@ impactDescription: wasted computation on every render
 tags: react, hooks, useState, performance, initialization
 ---
 
-## Use Lazy State Initialization
+## 지연 상태 초기화 사용
 
-Pass a function to `useState` for expensive initial values. Without the function form, the initializer runs on every render even though the value is only used once.
+비용이 큰 초기 값에는 `useState`에 함수를 전달하세요. 함수 형태를 사용하지 않으면 초기화 값이 한 번만 사용되지만 매 렌더링마다 실행됩니다.
 
-**Incorrect (runs on every render):**
+**잘못된 예시 (매 렌더링마다 실행):**
 
 ```tsx
 function FilteredList({ items }: { items: Item[] }) {
-  // buildSearchIndex() runs on EVERY render, even after initialization
+  // buildSearchIndex()가 초기화 후에도 매 렌더링마다 실행됨
   const [searchIndex, setSearchIndex] = useState(buildSearchIndex(items))
   const [query, setQuery] = useState('')
-  
-  // When query changes, buildSearchIndex runs again unnecessarily
+
+  // query가 변경되면 buildSearchIndex가 불필요하게 다시 실행됨
   return <SearchResults index={searchIndex} query={query} />
 }
 
 function UserProfile() {
-  // JSON.parse runs on every render
+  // JSON.parse가 매 렌더링마다 실행됨
   const [settings, setSettings] = useState(
     JSON.parse(localStorage.getItem('settings') || '{}')
   )
-  
+
   return <SettingsForm settings={settings} onChange={setSettings} />
 }
 ```
 
-**Correct (runs only once):**
+**올바른 예시 (한 번만 실행):**
 
 ```tsx
 function FilteredList({ items }: { items: Item[] }) {
-  // buildSearchIndex() runs ONLY on initial render
+  // buildSearchIndex()가 초기 렌더링 시에만 실행됨
   const [searchIndex, setSearchIndex] = useState(() => buildSearchIndex(items))
   const [query, setQuery] = useState('')
-  
+
   return <SearchResults index={searchIndex} query={query} />
 }
 
 function UserProfile() {
-  // JSON.parse runs only on initial render
+  // JSON.parse가 초기 렌더링 시에만 실행됨
   const [settings, setSettings] = useState(() => {
     const stored = localStorage.getItem('settings')
     return stored ? JSON.parse(stored) : {}
   })
-  
+
   return <SettingsForm settings={settings} onChange={setSettings} />
 }
 ```
 
-Use lazy initialization when computing initial values from localStorage/sessionStorage, building data structures (indexes, maps), reading from the DOM, or performing heavy transformations.
+localStorage/sessionStorage에서 초기 값을 계산하거나, 데이터 구조(인덱스, 맵)를 구축하거나, DOM에서 읽거나, 무거운 변환을 수행할 때 지연 초기화를 사용하세요.
 
-For simple primitives (`useState(0)`), direct references (`useState(props.value)`), or cheap literals (`useState({})`), the function form is unnecessary.
+단순한 원시 값(`useState(0)`), 직접 참조(`useState(props.value)`), 저렴한 리터럴(`useState({})`)의 경우 함수 형태는 불필요합니다.

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/rerender-memo.md

@@ -5,11 +5,11 @@ impactDescription: enables early returns
 tags: rerender, memo, useMemo, optimization
 ---
 
-## Extract to Memoized Components
+## 메모이제이션된 컴포넌트로 추출
 
-Extract expensive work into memoized components to enable early returns before computation.
+비용이 큰 작업을 메모이제이션된 컴포넌트로 추출하여 계산 전에 조기 반환을 활성화하세요.
 
-**Incorrect (computes avatar even when loading):**
+**잘못된 예시 (로딩 중에도 avatar 계산):**
 
 ```tsx
 function Profile({ user, loading }: Props) {
@@ -23,7 +23,7 @@ function Profile({ user, loading }: Props) {
 }
 ```
 
-**Correct (skips computation when loading):**
+**올바른 예시 (로딩 중에는 계산 생략):**
 
 ```tsx
 const UserAvatar = memo(function UserAvatar({ user }: { user: User }) {
@@ -41,4 +41,4 @@ function Profile({ user, loading }: Props) {
 }
 ```
 
-**Note:** If your project has [React Compiler](https://react.dev/learn/react-compiler) enabled, manual memoization with `memo()` and `useMemo()` is not necessary. The compiler automatically optimizes re-renders.
+**참고:** 프로젝트에 [React Compiler](https://react.dev/learn/react-compiler)가 활성화되어 있다면, `memo()`와 `useMemo()`를 사용한 수동 메모이제이션은 필요하지 않습니다. 컴파일러가 자동으로 리렌더링을 최적화합니다.

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/rerender-transitions.md

@@ -5,11 +5,11 @@ impactDescription: maintains UI responsiveness
 tags: rerender, transitions, startTransition, performance
 ---
 
-## Use Transitions for Non-Urgent Updates
+## 긴급하지 않은 업데이트에 Transitions 사용
 
-Mark frequent, non-urgent state updates as transitions to maintain UI responsiveness.
+빈번하고 긴급하지 않은 상태 업데이트를 transitions로 표시하여 UI 응답성을 유지하세요.
 
-**Incorrect (blocks UI on every scroll):**
+**잘못된 예시 (스크롤마다 UI 차단):**
 
 ```tsx
 function ScrollTracker() {
@@ -22,7 +22,7 @@ function ScrollTracker() {
 }
 ```
 
-**Correct (non-blocking updates):**
+**올바른 예시 (논블로킹 업데이트):**
 
 ```tsx
 import { startTransition } from 'react'

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/server-cache-lru.md

@@ -1,22 +1,22 @@
 ---
-title: Cross-Request LRU Caching
+title: 크로스 리퀘스트 LRU 캐싱
 impact: HIGH
-impactDescription: caches across requests
+impactDescription: 요청 간 캐싱
 tags: server, cache, lru, cross-request
 ---
 
-## Cross-Request LRU Caching
+## 크로스 리퀘스트 LRU 캐싱
 
-`React.cache()` only works within one request. For data shared across sequential requests (user clicks button A then button B), use an LRU cache.
+순차적 요청 간 공유되는 데이터 (사용자가 버튼 A 클릭 후 버튼 B 클릭)에는 LRU 캐시 사용.
 
-**Implementation:**
+**구현:**
 
 ```typescript
 import { LRUCache } from 'lru-cache'
 
 const cache = new LRUCache<string, any>({
   max: 1000,
-  ttl: 5 * 60 * 1000  // 5 minutes
+  ttl: 5 * 60 * 1000  // 5분
 })
 
 export async function getUser(id: string) {
@@ -28,14 +28,14 @@ export async function getUser(id: string) {
   return user
 }
 
-// Request 1: DB query, result cached
-// Request 2: cache hit, no DB query
+// 요청 1: DB 쿼리, 결과 캐싱
+// 요청 2: 캐시 히트, DB 쿼리 없음
 ```
 
-Use when sequential user actions hit multiple endpoints needing the same data within seconds.
+순차적 사용자 액션이 수초 내에 동일한 데이터가 필요한 여러 엔드포인트를 호출할 때 사용.
 
-**With Vercel's [Fluid Compute](https://vercel.com/docs/fluid-compute):** LRU caching is especially effective because multiple concurrent requests can share the same function instance and cache. This means the cache persists across requests without needing external storage like Redis.
+**Vercel의 [Fluid Compute](https://vercel.com/docs/fluid-compute)에서:** LRU 캐싱이 특히 효과적. 여러 동시 요청이 동일한 함수 인스턴스와 캐시를 공유할 수 있습니다. 즉, Redis 같은 외부 스토리지 없이 요청 간 캐시가 유지됩니다.
 
-**In traditional serverless:** Each invocation runs in isolation, so consider Redis for cross-process caching.
+**기존 서버리스 환경:** 각 호출이 격리되어 실행되므로 프로세스 간 캐싱을 위해 Redis 고려.
 
-Reference: [https://github.com/isaacs/node-lru-cache](https://github.com/isaacs/node-lru-cache)
+참고: [https://github.com/isaacs/node-lru-cache](https://github.com/isaacs/node-lru-cache)

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/server-deferred-data.md

@@ -1,15 +1,15 @@
 ---
-title: Use Deferred Data for Non-Critical Content
+title: 중요하지 않은 콘텐츠에 지연 데이터 사용
 impact: HIGH
-impactDescription: faster initial page render
+impactDescription: 초기 페이지 렌더링 속도 향상
 tags: server, streaming, suspense, deferred-data, ux
 ---
 
-## Use Deferred Data for Non-Critical Content
+## 중요하지 않은 콘텐츠에 지연 데이터 (Deferred Data) 사용
 
-Load critical data with `await`, but return non-critical data as Promises for streaming. This allows the page to render immediately while slow queries complete in the background.
+중요한 데이터는 `await`로 로드하고, 중요하지 않은 데이터는 Promise로 반환해 스트리밍. 느린 쿼리가 백그라운드에서 완료되는 동안 페이지를 즉시 렌더링합니다.
 
-**Incorrect (blocks on slow query):**
+**❌ 잘못된 예 (느린 쿼리에서 차단):**
 
 ```typescript
 import { createFileRoute } from '@tanstack/react-router'
@@ -17,15 +17,15 @@ import { getPost, getComments } from '@/functions/data'
 
 export const Route = createFileRoute('/posts/$postId')({
   loader: async ({ params }) => {
-    const post = await getPost(params.postId) // Fast: 50ms
-    const comments = await getComments(params.postId) // Slow: 3s
+    const post = await getPost(params.postId) // 빠름: 50ms
+    const comments = await getComments(params.postId) // 느림: 3s
     return { post, comments }
   }
 })
-// Total wait: 3.05s before page renders
+// 총 대기 시간: 3.05초 후 페이지 렌더링
 ```
 
-**Correct (stream slow data):**
+**✅ 올바른 예 (느린 데이터 스트리밍):**
 
 ```typescript
 import { createFileRoute, Await } from '@tanstack/react-router'
@@ -34,10 +34,10 @@ import { Suspense } from 'react'
 
 export const Route = createFileRoute('/posts/$postId')({
   loader: async ({ params }) => {
-    // Critical: await immediately
+    // 중요: 즉시 await
     const post = await getPost(params.postId)
 
-    // Non-critical: return Promise (don't await)
+    // 중요하지 않음: Promise 반환 (await 하지 않음)
     const deferredComments = getComments(params.postId)
 
     return { post, deferredComments }
@@ -50,7 +50,7 @@ function PostPage() {
 
   return (
     <div>
-      <PostContent post={post} /> {/* Renders immediately */}
+      <PostContent post={post} /> {/* 즉시 렌더링 */}
 
       <Suspense fallback={<CommentsSkeleton />}>
         <Await promise={deferredComments}>
@@ -62,6 +62,6 @@ function PostPage() {
 }
 ```
 
-Page renders in 50ms instead of 3s. Comments stream in when ready. Use for: analytics, recommendations, user activity, social features.
+페이지가 3초 대신 50ms에 렌더링됩니다. 댓글은 준비되면 스트리밍. 다음에 사용: 분석, 추천, 사용자 활동, 소셜 기능.
 
-Reference: [TanStack Router Deferred Data Loading](https://tanstack.com/router/v1/docs/framework/react/guide/deferred-data-loading)
+참고: [TanStack Router Deferred Data Loading](https://tanstack.com/router/v1/docs/framework/react/guide/deferred-data-loading)

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/server-parallel-fetching.md

@@ -1,15 +1,15 @@
 ---
-title: Restructure Components for Parallel Server Function Calls
+title: 병렬 서버 함수 호출을 위한 컴포넌트 구조 재조정
 impact: HIGH
-impactDescription: eliminates component-level waterfalls
+impactDescription: 컴포넌트 레벨 워터폴 제거
 tags: server, parallelization, architecture, server-functions
 ---
 
-## Restructure Components for Parallel Server Function Calls
+## 병렬 서버 함수 호출을 위한 컴포넌트 구조 재조정
 
-Avoid nested component structures that force sequential server function calls. Move data fetching to parent loader when possible.
+순차적 서버 함수 호출을 강제하는 중첩 컴포넌트 구조 방지. 가능하면 부모 loader로 데이터 페칭 이동.
 
-**Incorrect (sequential: User → Posts → Comments):**
+**❌ 잘못된 예 (순차 실행: User → Posts → Comments):**
 
 ```tsx
 // routes/dashboard.tsx
@@ -25,17 +25,17 @@ function Dashboard() {
 
 // components/UserPosts.tsx
 function UserPosts({ userId }) {
-  const posts = await getPosts(userId) // Blocks until loaded
+  const posts = await getPosts(userId) // 로드될 때까지 차단
   return posts.map(p => <PostComments postId={p.id} />)
 }
 
 function PostComments({ postId }) {
-  const comments = await getComments(postId) // Sequential waterfall
+  const comments = await getComments(postId) // 순차 워터폴
   return <CommentList comments={comments} />
 }
 ```
 
-**Correct (parallel fetching in loader):**
+**✅ 올바른 예 (loader에서 병렬 페칭):**
 
 ```tsx
 // routes/dashboard.tsx
@@ -57,4 +57,4 @@ function Dashboard() {
 }
 ```
 
-Centralizing data fetching in the loader reduces waterfalls and enables parallel execution.
+loader에서 데이터 페칭을 중앙화하면 워터폴을 줄이고 병렬 실행이 가능합니다.

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/server-serialization.md

@@ -5,25 +5,25 @@ impactDescription: reduces data transfer size
 tags: server, rsc, serialization, props
 ---
 
-## Minimize Serialization at RSC Boundaries
+## RSC 경계에서 직렬화 최소화
 
-The React Server/Client boundary serializes all object properties into strings and embeds them in the HTML response and subsequent RSC requests. This serialized data directly impacts page weight and load time, so **size matters a lot**. Only pass fields that the client actually uses.
+React Server/Client 경계는 모든 객체 속성을 문자열로 직렬화하여 HTML 응답 및 후속 RSC 요청에 포함합니다. 이 직렬화된 데이터는 페이지 가중치와 로드 시간에 직접 영향을 미치므로 **크기가 매우 중요합니다**. 클라이언트가 실제로 사용하는 필드만 전달하세요.
 
-**Incorrect (serializes all 50 fields):**
+**❌ 잘못된 예시 (50개 필드 모두 직렬화):**
 
 ```tsx
 async function Page() {
-  const user = await fetchUser()  // 50 fields
+  const user = await fetchUser()  // 50개 필드
   return <Profile user={user} />
 }
 
 'use client'
 function Profile({ user }: { user: User }) {
-  return <div>{user.name}</div>  // uses 1 field
+  return <div>{user.name}</div>  // 1개 필드만 사용
 }
 ```
 
-**Correct (serializes only 1 field):**
+**✅ 올바른 예시 (1개 필드만 직렬화):**
 
 ```tsx
 async function Page() {