@kood/claude-code 0.4.0 → 0.5.0

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/async-loader.md

@@ -1,15 +1,15 @@
 ---
-title: Parallel Data Fetching in TanStack Router Loader
+title: TanStack Router Loader에서 병렬 데이터 페칭
 impact: CRITICAL
-impactDescription: 2-10× improvement
+impactDescription: 2-10배 성능 향상
 tags: async, loader, tanstack-router, parallelization, waterfalls
 ---
 
-## Parallel Data Fetching in TanStack Router Loader
+## TanStack Router Loader에서 병렬 데이터 페칭
 
-Execute independent server function calls concurrently in `loader` using `Promise.all()`. This eliminates request waterfalls.
+`loader`에서 독립적인 서버 함수 호출을 `Promise.all()`을 사용해 동시 실행. 요청 워터폴 (waterfalls)을 제거합니다.
 
-**Incorrect (sequential execution, 2 round trips):**
+**❌ 잘못된 예 (순차 실행, 2번의 왕복):**
 
 ```typescript
 import { createFileRoute } from '@tanstack/react-router'
@@ -24,7 +24,7 @@ export const Route = createFileRoute('/dashboard')({
 })
 ```
 
-**Correct (parallel execution, 1 round trip):**
+**✅ 올바른 예 (병렬 실행, 1번의 왕복):**
 
 ```typescript
 import { createFileRoute } from '@tanstack/react-router'
@@ -41,4 +41,4 @@ export const Route = createFileRoute('/dashboard')({
 })
 ```
 
-This pattern works with any independent `createServerFn()` calls, reducing page load time by 50-80%.
+독립적인 `createServerFn()` 호출에 모두 적용 가능하며, 페이지 로드 시간을 50-80% 단축합니다.

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

@@ -5,11 +5,11 @@ impactDescription: 2-10× improvement
 tags: async, parallelization, promises, waterfalls
 ---
 
-## Promise.all() for Independent Operations
+## 독립적인 작업에 Promise.all() 사용하기
 
-When async operations have no interdependencies, execute them concurrently using `Promise.all()`.
+비동기 작업들이 서로 의존성이 없을 때는 `Promise.all()`을 사용하여 동시에 실행합니다.
 
-**Incorrect (sequential execution, 3 round trips):**
+**❌ 잘못된 예시 (순차 실행, 3번의 라운드 트립):**
 
 ```typescript
 const user = await fetchUser()
@@ -17,7 +17,7 @@ const posts = await fetchPosts()
 const comments = await fetchComments()
 ```
 
-**Correct (parallel execution, 1 round trip):**
+**✅ 올바른 예시 (병렬 실행, 1번의 라운드 트립):**
 
 ```typescript
 const [user, posts, comments] = await Promise.all([

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/bundle-barrel-imports.md

@@ -5,55 +5,55 @@ impactDescription: 200-800ms import cost, slow builds
 tags: bundle, imports, tree-shaking, barrel-files, performance
 ---
 
-## Avoid Barrel File Imports
+## 배럴 파일 (Barrel File) 임포트 피하기
 
-Import directly from source files instead of barrel files to avoid loading thousands of unused modules. **Barrel files** are entry points that re-export multiple modules (e.g., `index.js` that does `export * from './module'`).
+수천 개의 사용하지 않는 모듈을 로드하지 않도록 배럴 파일 대신 소스 파일에서 직접 임포트합니다. **배럴 파일**은 여러 모듈을 재내보내는 진입점입니다 (예: `export * from './module'`을 하는 `index.js`).
 
-Popular icon and component libraries can have **up to 10,000 re-exports** in their entry file. For many React packages, **it takes 200-800ms just to import them**, affecting both development speed and production cold starts.
+인기 있는 아이콘 및 컴포넌트 라이브러리는 진입 파일에서 **최대 10,000개의 재내보내기**를 가질 수 있습니다. 많은 React 패키지의 경우 **임포트하는 데만 200-800ms가 걸리며**, 개발 속도와 프로덕션 콜드 스타트 모두에 영향을 미칩니다.
 
-**Why tree-shaking doesn't help:** When a library is marked as external (not bundled), the bundler can't optimize it. If you bundle it to enable tree-shaking, builds become substantially slower analyzing the entire module graph.
+**트리 쉐이킹이 도움이 되지 않는 이유:** 라이브러리가 외부로 표시되면(번들링되지 않음) 번들러가 최적화할 수 없습니다. 트리 쉐이킹을 활성화하기 위해 번들링하면 전체 모듈 그래프를 분석하느라 빌드가 상당히 느려집니다.
 
-**Incorrect (imports entire library):**
+**❌ 잘못된 예시 (전체 라이브러리 임포트):**
 
 ```tsx
 import { Check, X, Menu } from 'lucide-react'
-// Loads 1,583 modules, takes ~2.8s extra in dev
-// Runtime cost: 200-800ms on every cold start
+// 1,583개 모듈 로드, 개발 환경에서 약 2.8초 추가 소요
+// 런타임 비용: 모든 콜드 스타트마다 200-800ms
 
 import { Button, TextField } from '@mui/material'
-// Loads 2,225 modules, takes ~4.2s extra in dev
+// 2,225개 모듈 로드, 개발 환경에서 약 4.2초 추가 소요
 ```
 
-**Correct (imports only what you need):**
+**✅ 올바른 예시 (필요한 것만 임포트):**
 
 ```tsx
 import Check from 'lucide-react/dist/esm/icons/check'
 import X from 'lucide-react/dist/esm/icons/x'
 import Menu from 'lucide-react/dist/esm/icons/menu'
-// Loads only 3 modules (~2KB vs ~1MB)
+// 3개 모듈만 로드 (~2KB vs ~1MB)
 
 import Button from '@mui/material/Button'
 import TextField from '@mui/material/TextField'
-// Loads only what you use
+// 사용하는 것만 로드
 ```
 
-**Alternative (Next.js 13.5+):**
+**대안 (Next.js 13.5+):**
 
 ```js
-// next.config.js - use optimizePackageImports
+// next.config.js - optimizePackageImports 사용
 module.exports = {
   experimental: {
     optimizePackageImports: ['lucide-react', '@mui/material']
   }
 }
 
-// Then you can keep the ergonomic barrel imports:
+// 그러면 인체공학적인 배럴 임포트를 유지할 수 있습니다:
 import { Check, X, Menu } from 'lucide-react'
-// Automatically transformed to direct imports at build time
+// 빌드 시 자동으로 직접 임포트로 변환됨
 ```
 
-Direct imports provide 15-70% faster dev boot, 28% faster builds, 40% faster cold starts, and significantly faster HMR.
+직접 임포트는 개발 부팅이 15-70% 더 빠르고, 빌드가 28% 더 빠르고, 콜드 스타트가 40% 더 빠르고, HMR이 훨씬 더 빠릅니다.
 
-Libraries commonly affected: `lucide-react`, `@mui/material`, `@mui/icons-material`, `@tabler/icons-react`, `react-icons`, `@headlessui/react`, `@radix-ui/react-*`, `lodash`, `ramda`, `date-fns`, `rxjs`, `react-use`.
+일반적으로 영향을 받는 라이브러리: `lucide-react`, `@mui/material`, `@mui/icons-material`, `@tabler/icons-react`, `react-icons`, `@headlessui/react`, `@radix-ui/react-*`, `lodash`, `ramda`, `date-fns`, `rxjs`, `react-use`.
 
-Reference: [How we optimized package imports in Next.js](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js)
+참고: [How we optimized package imports in Next.js](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js)

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/bundle-conditional.md

@@ -5,11 +5,11 @@ impactDescription: loads large data only when needed
 tags: bundle, conditional-loading, lazy-loading
 ---
 
-## Conditional Module Loading
+## 조건부 모듈 로딩
 
-Load large data or modules only when a feature is activated.
+기능이 활성화될 때만 큰 데이터나 모듈을 로드합니다.
 
-**Example (lazy-load animation frames):**
+**예시 (애니메이션 프레임 지연 로딩):**
 
 ```tsx
 function AnimationPlayer({ enabled }: { enabled: boolean }) {
@@ -28,4 +28,4 @@ function AnimationPlayer({ enabled }: { enabled: boolean }) {
 }
 ```
 
-The `typeof window !== 'undefined'` check prevents bundling this module for SSR, optimizing server bundle size and build speed.
+`typeof window !== 'undefined'` 체크는 SSR에서 이 모듈이 번들링되는 것을 방지하여 서버 번들 크기와 빌드 속도를 최적화합니다.

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/bundle-defer-third-party.md

@@ -5,11 +5,11 @@ impactDescription: loads after hydration
 tags: bundle, third-party, analytics, defer
 ---
 
-## Defer Non-Critical Third-Party Libraries
+## 중요하지 않은 서드파티 라이브러리 연기하기
 
-Analytics, logging, and error tracking don't block user interaction. Load them after hydration.
+분석, 로깅, 에러 추적은 사용자 상호작용을 차단하지 않습니다. 하이드레이션 후에 로드합니다.
 
-**Incorrect (blocks initial bundle):**
+**❌ 잘못된 예시 (초기 번들 차단):**
 
 ```tsx
 import { Analytics } from '@vercel/analytics/react'
@@ -26,7 +26,7 @@ export default function RootLayout({ children }) {
 }
 ```
 
-**Correct (loads after hydration):**
+**✅ 올바른 예시 (하이드레이션 후 로드):**
 
 ```tsx
 import dynamic from 'next/dynamic'

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/bundle-lazy-routes.md

@@ -1,27 +1,27 @@
 ---
-title: Route-Based Code Splitting
+title: 라우트 기반 코드 스플리팅
 impact: CRITICAL
-impactDescription: 30-50% smaller initial bundle
+impactDescription: 초기 번들 30-50% 감소
 tags: bundle, lazy-loading, code-splitting, routes
 ---
 
-## Route-Based Code Splitting
+## 라우트 기반 코드 스플리팅
 
-TanStack Router automatically code-splits by route. Use `lazy()` for heavy components within routes to reduce bundle size further.
+TanStack Router는 라우트별로 자동 코드 스플리팅. 라우트 내 무거운 컴포넌트는 `lazy()`로 번들 크기를 추가 감소.
 
-**Incorrect (heavy component loaded upfront):**
+**❌ 잘못된 예 (무거운 컴포넌트 선행 로드):**
 
 ```tsx
 import { createFileRoute } from '@tanstack/react-router'
-import HeavyEditor from '@/components/HeavyEditor' // 500KB bundle
+import HeavyEditor from '@/components/HeavyEditor' // 500KB 번들
 
 export const Route = createFileRoute('/editor')({
   component: () => <HeavyEditor />
 })
-// Entire 500KB loads even if user never visits /editor
+// 사용자가 /editor를 방문하지 않아도 500KB 전체 로드
 ```
 
-**Correct (lazy load heavy components):**
+**✅ 올바른 예 (무거운 컴포넌트 지연 로딩):**
 
 ```tsx
 import { createFileRoute } from '@tanstack/react-router'
@@ -36,10 +36,10 @@ export const Route = createFileRoute('/editor')({
     </Suspense>
   )
 })
-// 500KB only loads when user navigates to /editor
+// 사용자가 /editor로 이동할 때만 500KB 로드
 ```
 
-**For multiple heavy dependencies:**
+**여러 무거운 의존성의 경우:**
 
 ```tsx
 import { lazy, Suspense } from 'react'
@@ -62,6 +62,6 @@ export const Route = createFileRoute('/dashboard')({
 })
 ```
 
-Heavy libraries to consider lazy loading: chart libraries (recharts, chart.js), rich text editors (tiptap, slate), PDF viewers, video players, 3D renderers, data visualization.
+지연 로딩을 고려할 무거운 라이브러리: 차트 라이브러리 (recharts, chart.js), 리치 텍스트 에디터 (tiptap, slate), PDF 뷰어, 비디오 플레이어, 3D 렌더러, 데이터 시각화.
 
-This reduces initial bundle by 30-50% and improves Time to Interactive.
+초기 번들을 30-50% 감소시키고 Time to Interactive를 개선합니다.

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/bundle-preload.md

@@ -5,11 +5,11 @@ impactDescription: reduces perceived latency
 tags: bundle, preload, user-intent, hover
 ---
 
-## Preload Based on User Intent
+## 사용자 의도에 따른 프리로드
 
-Preload heavy bundles before they're needed to reduce perceived latency.
+무거운 번들을 필요하기 전에 프리로드하여 체감 지연 시간을 줄입니다.
 
-**Example (preload on hover/focus):**
+**예시 (호버/포커스 시 프리로드):**
 
 ```tsx
 function EditorButton({ onClick }: { onClick: () => void }) {
@@ -31,7 +31,7 @@ function EditorButton({ onClick }: { onClick: () => void }) {
 }
 ```
 
-**Example (preload when feature flag is enabled):**
+**예시 (기능 플래그가 활성화될 때 프리로드):**
 
 ```tsx
 function FlagsProvider({ children, flags }: Props) {
@@ -47,4 +47,4 @@ function FlagsProvider({ children, flags }: Props) {
 }
 ```
 
-The `typeof window !== 'undefined'` check prevents bundling preloaded modules for SSR, optimizing server bundle size and build speed.
+`typeof window !== 'undefined'` 체크는 프리로드된 모듈이 SSR에서 번들링되는 것을 방지하여 서버 번들 크기와 빌드 속도를 최적화합니다.

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/client-event-listeners.md

@@ -5,11 +5,11 @@ impactDescription: single listener for N components
 tags: client, swr, event-listeners, subscription
 ---
 
-## Deduplicate Global Event Listeners
+## 전역 이벤트 리스너 중복 제거
 
-Use `useSWRSubscription()` to share global event listeners across component instances.
+`useSWRSubscription()`을 사용하여 컴포넌트 인스턴스 간에 전역 이벤트 리스너를 공유합니다.
 
-**Incorrect (N instances = N listeners):**
+**❌ 잘못된 예시 (N개 인스턴스 = N개 리스너):**
 
 ```tsx
 function useKeyboardShortcut(key: string, callback: () => void) {
@@ -25,18 +25,18 @@ function useKeyboardShortcut(key: string, callback: () => void) {
 }
 ```
 
-When using the `useKeyboardShortcut` hook multiple times, each instance will register a new listener.
+`useKeyboardShortcut` 훅을 여러 번 사용하면 각 인스턴스가 새로운 리스너를 등록합니다.
 
-**Correct (N instances = 1 listener):**
+**✅ 올바른 예시 (N개 인스턴스 = 1개 리스너):**
 
 ```tsx
 import useSWRSubscription from 'swr/subscription'
 
-// Module-level Map to track callbacks per key
+// 모듈 레벨 Map으로 키별 콜백 추적
 const keyCallbacks = new Map<string, Set<() => void>>()
 
 function useKeyboardShortcut(key: string, callback: () => void) {
-  // Register this callback in the Map
+  // Map에 이 콜백 등록
   useEffect(() => {
     if (!keyCallbacks.has(key)) {
       keyCallbacks.set(key, new Set())
@@ -66,8 +66,8 @@ function useKeyboardShortcut(key: string, callback: () => void) {
 }
 
 function Profile() {
-  // Multiple shortcuts will share the same listener
-  useKeyboardShortcut('p', () => { /* ... */ }) 
+  // 여러 단축키가 동일한 리스너를 공유함
+  useKeyboardShortcut('p', () => { /* ... */ })
   useKeyboardShortcut('k', () => { /* ... */ })
   // ...
 }

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/client-tanstack-query.md

@@ -1,15 +1,15 @@
 ---
-title: Use TanStack Query for Automatic Caching and Deduplication
+title: TanStack Query로 자동 캐싱 및 중복 제거
 impact: MEDIUM-HIGH
-impactDescription: eliminates duplicate requests
+impactDescription: 중복 요청 제거
 tags: client, cache, tanstack-query, deduplication
 ---
 
-## Use TanStack Query for Automatic Caching and Deduplication
+## TanStack Query로 자동 캐싱 및 중복 제거
 
-Wrap server function calls with TanStack Query to enable automatic request deduplication, caching, and background refetching.
+서버 함수 호출을 TanStack Query로 래핑하여 자동 요청 중복 제거 (deduplication), 캐싱, 백그라운드 재페칭 활성화.
 
-**Incorrect (no deduplication, each component fetches):**
+**❌ 잘못된 예 (중복 제거 없음, 각 컴포넌트가 페칭):**
 
 ```tsx
 import { useState, useEffect } from 'react'
@@ -25,10 +25,10 @@ function UserList() {
   return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>
 }
 
-// If UserList is used 3 times on a page, getUsers() is called 3 times
+// UserList를 페이지에 3번 사용하면 getUsers()가 3번 호출됨
 ```
 
-**Correct (automatic deduplication, single request):**
+**✅ 올바른 예 (자동 중복 제거, 단일 요청):**
 
 ```tsx
 import { useQuery } from '@tanstack/react-query'
@@ -43,10 +43,10 @@ function UserList() {
   return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>
 }
 
-// Multiple instances share one request, with automatic cache invalidation
+// 여러 인스턴스가 하나의 요청 공유, 자동 캐시 무효화 포함
 ```
 
-**With mutations:**
+**Mutation과 함께:**
 
 ```tsx
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
@@ -63,7 +63,7 @@ function UserManager() {
   const mutation = useMutation({
     mutationFn: createUser,
     onSuccess: () => {
-      // Automatically refetch users
+      // 자동으로 users 재페칭
       queryClient.invalidateQueries({ queryKey: ['users'] })
     }
   })
@@ -72,6 +72,6 @@ function UserManager() {
 }
 ```
 
-TanStack Query provides: request deduplication, background refetching, cache invalidation, optimistic updates, retry logic, and loading/error states.
+TanStack Query가 제공하는 것: 요청 중복 제거, 백그라운드 재페칭, 캐시 무효화, 낙관적 업데이트 (optimistic updates), 재시도 로직, 로딩/에러 상태.
 
-Reference: [TanStack Query](https://tanstack.com/query)
+참고: [TanStack Query](https://tanstack.com/query)

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/js-batch-dom-css.md

@@ -5,15 +5,15 @@ impactDescription: reduces reflows/repaints
 tags: javascript, dom, css, performance, reflow
 ---
 
-## Batch DOM CSS Changes
+## DOM CSS 변경 일괄 처리
 
-Avoid changing styles one property at a time. Group multiple CSS changes together via classes or `cssText` to minimize browser reflows.
+스타일을 한 번에 하나씩 변경하지 마세요. 여러 CSS 변경 사항을 클래스 또는 `cssText`를 통해 그룹화하여 브라우저 리플로우를 최소화하세요.
 
-**Incorrect (multiple reflows):**
+**❌ 잘못된 예시 (여러 번의 리플로우):**
 
 ```typescript
 function updateElementStyles(element: HTMLElement) {
-  // Each line triggers a reflow
+  // 각 줄이 리플로우를 트리거함
   element.style.width = '100px'
   element.style.height = '200px'
   element.style.backgroundColor = 'blue'
@@ -21,10 +21,10 @@ function updateElementStyles(element: HTMLElement) {
 }
 ```
 
-**Correct (add class - single reflow):**
+**✅ 올바른 예시 (클래스 추가 - 단일 리플로우):**
 
 ```typescript
-// CSS file
+// CSS 파일
 .highlighted-box {
   width: 100px;
   height: 200px;
@@ -38,7 +38,7 @@ function updateElementStyles(element: HTMLElement) {
 }
 ```
 
-**Correct (change cssText - single reflow):**
+**✅ 올바른 예시 (cssText 변경 - 단일 리플로우):**
 
 ```typescript
 function updateElementStyles(element: HTMLElement) {
@@ -51,13 +51,13 @@ function updateElementStyles(element: HTMLElement) {
 }
 ```
 
-**React example:**
+**React 예시:**
 
 ```tsx
-// Incorrect: changing styles one by one
+// ❌ 잘못된 예시: 스타일을 하나씩 변경
 function Box({ isHighlighted }: { isHighlighted: boolean }) {
   const ref = useRef<HTMLDivElement>(null)
-  
+
   useEffect(() => {
     if (ref.current && isHighlighted) {
       ref.current.style.width = '100px'
@@ -65,11 +65,11 @@ function Box({ isHighlighted }: { isHighlighted: boolean }) {
       ref.current.style.backgroundColor = 'blue'
     }
   }, [isHighlighted])
-  
+
   return <div ref={ref}>Content</div>
 }
 
-// Correct: toggle class
+// ✅ 올바른 예시: 클래스 토글
 function Box({ isHighlighted }: { isHighlighted: boolean }) {
   return (
     <div className={isHighlighted ? 'highlighted-box' : ''}>
@@ -79,4 +79,4 @@ function Box({ isHighlighted }: { isHighlighted: boolean }) {
 }
 ```
 
-Prefer CSS classes over inline styles when possible. Classes are cached by the browser and provide better separation of concerns.
+가능하면 인라인 스타일보다 CSS 클래스를 선호하세요. 클래스는 브라우저에 캐시되며 관심사의 분리를 더 잘 제공합니다.

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/js-cache-function-results.md

@@ -5,20 +5,20 @@ impactDescription: avoid redundant computation
 tags: javascript, cache, memoization, performance
 ---
 
-## Cache Repeated Function Calls
+## 반복되는 함수 호출 캐싱
 
-Use a module-level Map to cache function results when the same function is called repeatedly with the same inputs during render.
+렌더링 중 동일한 입력으로 동일한 함수가 반복적으로 호출될 때 모듈 레벨 Map을 사용하여 함수 결과를 캐시하세요.
 
-**Incorrect (redundant computation):**
+**❌ 잘못된 예시 (중복 계산):**
 
 ```typescript
 function ProjectList({ projects }: { projects: Project[] }) {
   return (
     <div>
       {projects.map(project => {
-        // slugify() called 100+ times for same project names
+        // slugify()가 동일한 프로젝트 이름에 대해 100번 이상 호출됨
         const slug = slugify(project.name)
-        
+
         return <ProjectCard key={project.id} slug={slug} />
       })}
     </div>
@@ -26,10 +26,10 @@ function ProjectList({ projects }: { projects: Project[] }) {
 }
 ```
 
-**Correct (cached results):**
+**✅ 올바른 예시 (캐시된 결과):**
 
 ```typescript
-// Module-level cache
+// 모듈 레벨 캐시
 const slugifyCache = new Map<string, string>()
 
 function cachedSlugify(text: string): string {
@@ -45,9 +45,9 @@ function ProjectList({ projects }: { projects: Project[] }) {
   return (
     <div>
       {projects.map(project => {
-        // Computed only once per unique project name
+        // 고유한 프로젝트 이름당 한 번만 계산됨
         const slug = cachedSlugify(project.name)
-        
+
         return <ProjectCard key={project.id} slug={slug} />
       })}
     </div>
@@ -55,7 +55,7 @@ function ProjectList({ projects }: { projects: Project[] }) {
 }
 ```
 
-**Simpler pattern for single-value functions:**
+**단일 값 함수를 위한 간단한 패턴:**
 
 ```typescript
 let isLoggedInCache: boolean | null = null
@@ -64,17 +64,17 @@ function isLoggedIn(): boolean {
   if (isLoggedInCache !== null) {
     return isLoggedInCache
   }
-  
+
   isLoggedInCache = document.cookie.includes('auth=')
   return isLoggedInCache
 }
 
-// Clear cache when auth changes
+// 인증이 변경될 때 캐시 초기화
 function onAuthChange() {
   isLoggedInCache = null
 }
 ```
 
-Use a Map (not a hook) so it works everywhere: utilities, event handlers, not just React components.
+Map을 사용하세요 (훅이 아님). 그래야 유틸리티, 이벤트 핸들러 등 어디서든 작동합니다 (React 컴포넌트뿐만 아니라).
 
-Reference: [How we made the Vercel Dashboard twice as fast](https://vercel.com/blog/how-we-made-the-vercel-dashboard-twice-as-fast)
+참고: [How we made the Vercel Dashboard twice as fast](https://vercel.com/blog/how-we-made-the-vercel-dashboard-twice-as-fast)

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/js-cache-property-access.md

@@ -5,11 +5,11 @@ impactDescription: reduces lookups
 tags: javascript, loops, optimization, caching
 ---
 
-## Cache Property Access in Loops
+## 루프에서 속성 접근 캐싱
 
-Cache object property lookups in hot paths.
+핫 패스에서 객체 속성 조회를 캐시하세요.
 
-**Incorrect (3 lookups × N iterations):**
+**❌ 잘못된 예시 (3개의 조회 × N번 반복):**
 
 ```typescript
 for (let i = 0; i < arr.length; i++) {
@@ -17,7 +17,7 @@ for (let i = 0; i < arr.length; i++) {
 }
 ```
 
-**Correct (1 lookup total):**
+**✅ 올바른 예시 (총 1번의 조회):**
 
 ```typescript
 const value = obj.config.settings.value

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/js-cache-storage.md

@@ -5,20 +5,20 @@ impactDescription: reduces expensive I/O
 tags: javascript, localStorage, storage, caching, performance
 ---
 
-## Cache Storage API Calls
+## Storage API 호출 캐싱
 
-`localStorage`, `sessionStorage`, and `document.cookie` are synchronous and expensive. Cache reads in memory.
+`localStorage`, `sessionStorage`, `document.cookie`는 동기적이고 비용이 많이 듭니다. 읽기를 메모리에 캐시하세요.
 
-**Incorrect (reads storage on every call):**
+**❌ 잘못된 예시 (호출할 때마다 스토리지 읽기):**
 
 ```typescript
 function getTheme() {
   return localStorage.getItem('theme') ?? 'light'
 }
-// Called 10 times = 10 storage reads
+// 10번 호출 = 10번 스토리지 읽기
 ```
 
-**Correct (Map cache):**
+**✅ 올바른 예시 (Map 캐시):**
 
 ```typescript
 const storageCache = new Map<string, string | null>()
@@ -32,13 +32,13 @@ function getLocalStorage(key: string) {
 
 function setLocalStorage(key: string, value: string) {
   localStorage.setItem(key, value)
-  storageCache.set(key, value)  // keep cache in sync
+  storageCache.set(key, value)  // 캐시를 동기화된 상태로 유지
 }
 ```
 
-Use a Map (not a hook) so it works everywhere: utilities, event handlers, not just React components.
+Map을 사용하세요 (훅이 아님). 그래야 유틸리티, 이벤트 핸들러 등 어디서든 작동합니다 (React 컴포넌트뿐만 아니라).
 
-**Cookie caching:**
+**쿠키 캐싱:**
 
 ```typescript
 let cookieCache: Record<string, string> | null = null
@@ -53,9 +53,9 @@ function getCookie(name: string) {
 }
 ```
 
-**Important (invalidate on external changes):**
+**중요 (외부 변경 시 무효화):**
 
-If storage can change externally (another tab, server-set cookies), invalidate cache:
+스토리지가 외부에서 변경될 수 있는 경우 (다른 탭, 서버 설정 쿠키), 캐시를 무효화하세요:
 
 ```typescript
 window.addEventListener('storage', (e) => {