@kood/claude-code 0.4.1 → 0.5.0

package/templates/.claude/skills/nextjs-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/nextjs-react-best-practices/rules/async-suspense-boundaries.md

@@ -5,16 +5,16 @@ impactDescription: faster initial paint
 tags: async, suspense, streaming, layout-shift
 ---
 
-## Strategic Suspense Boundaries
+## 전략적 Suspense 경계
 
-Instead of awaiting data in async components before returning JSX, use Suspense boundaries to show the wrapper UI faster while data loads.
+비동기 컴포넌트에서 JSX를 반환하기 전에 데이터를 기다리는 대신, Suspense 경계를 사용하여 데이터가 로드되는 동안 래퍼 UI를 더 빠르게 표시합니다.
 
-**Incorrect (wrapper blocked by data fetching):**
+**잘못된 예 (래퍼가 데이터 페칭에 의해 차단됨):**
 
 ```tsx
 async function Page() {
-  const data = await fetchData() // Blocks entire page
-  
+  const data = await fetchData() // 전체 페이지를 차단
+
   return (
     <div>
       <div>Sidebar</div>
@@ -28,9 +28,9 @@ async function Page() {
 }
 ```
 
-The entire layout waits for data even though only the middle section needs it.
+중간 섹션만 데이터가 필요함에도 전체 레이아웃이 데이터를 기다립니다.
 
-**Correct (wrapper shows immediately, data streams in):**
+**올바른 예 (래퍼가 즉시 표시되고, 데이터가 스트리밍됨):**
 
 ```tsx
 function Page() {
@@ -49,20 +49,20 @@ function Page() {
 }
 
 async function DataDisplay() {
-  const data = await fetchData() // Only blocks this component
+  const data = await fetchData() // 이 컴포넌트만 차단
   return <div>{data.content}</div>
 }
 ```
 
-Sidebar, Header, and Footer render immediately. Only DataDisplay waits for data.
+Sidebar, Header, Footer는 즉시 렌더링됩니다. DataDisplay만 데이터를 기다립니다.
 
-**Alternative (share promise across components):**
+**대안 (컴포넌트 간 Promise 공유):**
 
 ```tsx
 function Page() {
-  // Start fetch immediately, but don't await
+  // 즉시 fetch를 시작하되, await하지 않음
   const dataPromise = fetchData()
-  
+
   return (
     <div>
       <div>Sidebar</div>
@@ -77,23 +77,23 @@ function Page() {
 }
 
 function DataDisplay({ dataPromise }: { dataPromise: Promise<Data> }) {
-  const data = use(dataPromise) // Unwraps the promise
+  const data = use(dataPromise) // Promise를 언래핑
   return <div>{data.content}</div>
 }
 
 function DataSummary({ dataPromise }: { dataPromise: Promise<Data> }) {
-  const data = use(dataPromise) // Reuses the same promise
+  const data = use(dataPromise) // 동일한 Promise를 재사용
   return <div>{data.summary}</div>
 }
 ```
 
-Both components share the same promise, so only one fetch occurs. Layout renders immediately while both components wait together.
+두 컴포넌트가 동일한 Promise를 공유하므로 fetch는 한 번만 발생합니다. 레이아웃은 즉시 렌더링되고 두 컴포넌트는 함께 기다립니다.
 
-**When NOT to use this pattern:**
+**이 패턴을 사용하지 말아야 할 경우:**
 
-- Critical data needed for layout decisions (affects positioning)
-- SEO-critical content above the fold
-- Small, fast queries where suspense overhead isn't worth it
-- When you want to avoid layout shift (loading → content jump)
+- 레이아웃 결정에 필요한 중요한 데이터 (위치 지정에 영향을 미침)
+- 첫 화면의 SEO 중요 콘텐츠
+- Suspense 오버헤드가 불필요한 작고 빠른 쿼리
+- 레이아웃 시프트를 피하고 싶을 때 (로딩 → 콘텐츠 점프)
 
-**Trade-off:** Faster initial paint vs potential layout shift. Choose based on your UX priorities.
+**트레이드오프:** 더 빠른 초기 페인트 vs 잠재적인 레이아웃 시프트. UX 우선순위에 따라 선택하세요.

package/templates/.claude/skills/nextjs-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
+## 배럴 파일 임포트 피하기
 
-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'`).
+수천 개의 사용하지 않는 모듈을 로드하지 않도록 배럴 파일 대신 소스 파일에서 직접 임포트하세요. **배럴 파일 (Barrel files)**은 여러 모듈을 재내보내는 진입점입니다 (예: `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/nextjs-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/nextjs-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/nextjs-react-best-practices/rules/bundle-dynamic-imports.md

@@ -5,11 +5,11 @@ impactDescription: directly affects TTI and LCP
 tags: bundle, dynamic-import, code-splitting, next-dynamic
 ---
 
-## Dynamic Imports for Heavy Components
+## 무거운 컴포넌트에 동적 임포트 사용
 
-Use `next/dynamic` to lazy-load large components not needed on initial render.
+초기 렌더링에 필요하지 않은 대형 컴포넌트는 `next/dynamic`을 사용하여 지연 로드하세요.
 
-**Incorrect (Monaco bundles with main chunk ~300KB):**
+**잘못된 예 (Monaco가 메인 청크와 함께 번들됨 ~300KB):**
 
 ```tsx
 import { MonacoEditor } from './monaco-editor'
@@ -19,7 +19,7 @@ function CodePanel({ code }: { code: string }) {
 }
 ```
 
-**Correct (Monaco loads on demand):**
+**올바른 예 (Monaco가 온디맨드로 로드됨):**
 
 ```tsx
 import dynamic from 'next/dynamic'

package/templates/.claude/skills/nextjs-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/nextjs-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/nextjs-react-best-practices/rules/client-swr-dedup.md

@@ -5,11 +5,11 @@ impactDescription: automatic deduplication
 tags: client, swr, deduplication, data-fetching
 ---
 
-## Use SWR for Automatic Deduplication
+## 자동 중복 제거를 위한 SWR 사용
 
-SWR enables request deduplication, caching, and revalidation across component instances.
+SWR은 컴포넌트 인스턴스 간 요청 중복 제거, 캐싱, 재검증을 가능하게 합니다.
 
-**Incorrect (no deduplication, each instance fetches):**
+**잘못된 예 (중복 제거 없음, 각 인스턴스가 fetch):**
 
 ```tsx
 function UserList() {
@@ -22,7 +22,7 @@ function UserList() {
 }
 ```
 
-**Correct (multiple instances share one request):**
+**올바른 예 (여러 인스턴스가 하나의 요청 공유):**
 
 ```tsx
 import useSWR from 'swr'
@@ -32,7 +32,7 @@ function UserList() {
 }
 ```
 
-**For immutable data:**
+**불변 데이터의 경우:**
 
 ```tsx
 import { useImmutableSWR } from '@/lib/swr'
@@ -42,7 +42,7 @@ function StaticContent() {
 }
 ```
 
-**For mutations:**
+**변경(Mutation)의 경우:**
 
 ```tsx
 import { useSWRMutation } from 'swr/mutation'
@@ -53,4 +53,4 @@ function UpdateButton() {
 }
 ```
 
-Reference: [https://swr.vercel.app](https://swr.vercel.app)
+참고: [https://swr.vercel.app](https://swr.vercel.app)

package/templates/.claude/skills/nextjs-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/nextjs-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/nextjs-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/nextjs-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) => {