@kood/claude-code 0.6.5 → 0.6.7

package/templates/.claude/skills/sql-optimizer/orm-patterns.md

@@ -0,0 +1,218 @@
+# ORM별 최적화 패턴
+
+> SQL Optimizer 스킬에서 참조하는 ORM별 안티패턴 + 수정 코드
+
+---
+
+## Prisma (v5+, select/omit 지원)
+
+```typescript
+// ❌ C1: N+1 - include 없이 루프 접근
+const users = await prisma.user.findMany()
+for (const user of users) {
+  const posts = await prisma.post.findMany({ where: { authorId: user.id } })
+}
+
+// ✅ 수정: select로 필요 필드만 (v5+)
+const users = await prisma.user.findMany({
+  select: {
+    id: true,
+    name: true,
+    posts: {
+      select: { id: true, title: true },
+      take: 10,
+      orderBy: { createdAt: 'desc' }
+    }
+  }
+})
+
+// ❌ H4: include 깊은 중첩 (3단계+)
+await prisma.user.findMany({
+  include: { posts: { include: { comments: { include: { author: true } } } } }
+})
+
+// ✅ 수정: select + 필요 깊이만 + _count
+await prisma.user.findMany({
+  select: {
+    id: true,
+    posts: {
+      select: {
+        id: true,
+        title: true,
+        _count: { select: { comments: true } }
+      }
+    }
+  }
+})
+
+// ❌ C4: 배치 없이 대량 생성
+for (const item of items) {
+  await prisma.item.create({ data: item })
+}
+
+// ✅ 수정: createMany 배치
+await prisma.item.createMany({ data: items })
+
+// ❌ L2: Serverless 환경 매번 new PrismaClient
+export async function handler() {
+  const prisma = new PrismaClient()  // 연결 풀 소모
+  return prisma.user.findMany()
+}
+
+// ✅ 수정: 전역 인스턴스 재사용
+const prisma = new PrismaClient()
+export async function handler() {
+  return prisma.user.findMany()
+}
+```
+
+### Prisma 버전별 차이
+
+| 기능 | v5 | v6 | v7 |
+|------|-----|-----|-----|
+| `select` | ✅ | ✅ | ✅ |
+| `omit` | ✅ (Preview) | ✅ | ✅ |
+| `relationLoadStrategy: 'join'` | ✅ (v5.9+) | ✅ | ✅ |
+| Pure TS Client (Rust 제거) | ❌ | ❌ | ✅ |
+
+---
+
+## Drizzle
+
+```typescript
+// ❌ M6: prepared statement 미사용 (반복 쿼리)
+for (const id of userIds) {
+  await db.select().from(users).where(eq(users.id, id))
+}
+
+// ✅ 수정: prepare + IN 조건 (PostgreSQL named prepared statement)
+const getUsers = db
+  .select({ id: users.id, name: users.name })
+  .from(users)
+  .where(inArray(users.id, sql.placeholder('ids')))
+  .prepare('get_users_batch')
+
+await getUsers.execute({ ids: userIds })
+
+// ❌ C4: select() 전체 컬럼
+const result = await db.select().from(users)
+
+// ✅ 수정: partial select
+const result = await db
+  .select({ id: users.id, email: users.email })
+  .from(users)
+
+// ✅ JSON 집계 (N+1 방지, 단일 쿼리)
+const usersWithPosts = await db
+  .select({
+    id: users.id,
+    name: users.name,
+    posts: sql`json_agg(${posts}) FILTER (WHERE ${posts.id} IS NOT NULL)`
+  })
+  .from(users)
+  .leftJoin(posts, eq(users.id, posts.userId))
+  .groupBy(users.id)
+  .limit(20)
+  .prepare('get_users_with_posts')
+  .execute()
+```
+
+---
+
+## TypeORM
+
+```typescript
+// ❌ H5: lazy loading 루프
+const users = await User.find()
+for (const user of users) {
+  const posts = await user.posts  // Promise<Post[]> - 매번 쿼리
+}
+
+// ✅ 수정: leftJoinAndSelect + 필드 선택
+const users = await createQueryBuilder('user')
+  .leftJoinAndSelect('user.posts', 'post')
+  .select(['user.id', 'user.name', 'post.id', 'post.title'])
+  .getMany()
+
+// ✅ 성능 극대화: getRawMany (3.5x 빠름, 엔티티 변환 생략)
+const users = await createQueryBuilder('user')
+  .leftJoin('user.posts', 'post')
+  .select(['user.id', 'user.name', 'post.id', 'post.title'])
+  .getRawMany()
+
+// ✅ 배치 로드 (IN 쿼리, N+1 대안)
+const users = await User.find()
+const userIds = users.map(u => u.id)
+const posts = await Post.find({ where: { userId: In(userIds) } })
+```
+
+---
+
+## Raw SQL
+
+```sql
+-- ❌ H2: WHERE IN 서브쿼리
+SELECT * FROM orders
+WHERE customer_id IN (SELECT id FROM customers WHERE country = 'KR');
+
+-- ✅ 수정: JOIN + 필요 컬럼만
+SELECT o.id, o.total, o.created_at
+FROM orders o
+INNER JOIN customers c ON o.customer_id = c.id
+WHERE c.country = 'KR';
+
+-- ❌ M3: 집계 서브쿼리 (Window Function 미사용)
+SELECT *, (SELECT COUNT(*) FROM orders o WHERE o.user_id = u.id) as order_count
+FROM users u;
+
+-- ✅ 수정: LEFT JOIN + GROUP BY
+SELECT u.id, u.name, COUNT(o.id) as order_count
+FROM users u
+LEFT JOIN orders o ON u.id = o.user_id
+GROUP BY u.id, u.name;
+
+-- ❌ M4: Partial Index 미적용
+SELECT * FROM orders WHERE status = 'pending' AND created_at > NOW() - INTERVAL '7 days';
+-- CREATE INDEX idx_orders_created ON orders(created_at);  -- 전체 인덱스
+
+-- ✅ 수정: Partial Index (최대 275x 성능 향상)
+CREATE INDEX idx_orders_pending ON orders(created_at)
+  WHERE status = 'pending';
+
+-- ❌ M1: DISTINCT 마스킹 (잘못된 JOIN 은폐)
+SELECT DISTINCT u.* FROM users u
+JOIN orders o ON u.id = o.user_id;
+
+-- ✅ 수정: JOIN 로직 수정 또는 EXISTS
+SELECT u.* FROM users u
+WHERE EXISTS (SELECT 1 FROM orders o WHERE o.user_id = u.id);
+```
+
+---
+
+## 대량 데이터 로드 최적화
+
+```sql
+-- Step 1: 트랜잭션 시작
+BEGIN;
+
+-- Step 2: 인덱스 임시 제거 + 트리거 비활성화
+DROP INDEX IF EXISTS idx_target;
+ALTER TABLE target DISABLE TRIGGER ALL;
+
+-- Step 3: 메모리 설정 증가
+SET maintenance_work_mem = '1GB';
+
+-- Step 4: COPY 사용 (INSERT 대비 10x 빠름)
+COPY target FROM STDIN;
+
+-- Step 5: 트리거 복구 + 인덱스 재생성
+ALTER TABLE target ENABLE TRIGGER ALL;
+CREATE INDEX idx_target ON target(col);
+
+-- Step 6: 트랜잭션 완료
+COMMIT;
+
+-- Step 7: 통계 업데이트 (트랜잭션 외부에서 실행)
+ANALYZE target;
+```

package/templates/.claude/skills/tanstack-start-react-best-practices/AGENTS.md

@@ -1,8 +1,8 @@
 # TanStack Start React 베스트 프랙티스
 
-**Version 1.0.0**
-TanStack Start 최적화 가이드
-January 2026
+**Version 3.0.0**
+TanStack Start v1 + TanStack Router + React 19 최적화 가이드
+February 2026
 
 > **참고:**
 > 이 문서는 주로 에이전트와 LLM이 React 및 TanStack Start 코드베이스를 유지보수, 생성, 리팩토링할 때 따르기 위한 것입니다. 사람도 유용하게 사용할 수 있지만, AI 지원 워크플로의 자동화 및 일관성을 위해 최적화되어 있습니다.
@@ -11,7 +11,7 @@ January 2026
 
 ## 요약
 
-AI 에이전트와 LLM을 위한 React 및 TanStack Start 애플리케이션 종합 성능 최적화 가이드. 7개 카테고리에 걸쳐 38개 규칙을 포함하며, 영향도별로 우선순위를 매겼습니다 (critical: waterfall 제거, 번들 크기 감소 → incremental: JavaScript 성능). 각 규칙은 자동 리팩토링 및 코드 생성을 위한 상세한 설명, 올바른 구현 대 잘못된 구현을 비교하는 실제 예시, 구체적인 영향 지표를 포함합니다.
+AI 에이전트와 LLM을 위한 React 19 및 TanStack Start v1 애플리케이션 종합 성능 최적화 가이드. 8개 카테고리에 걸쳐 55개 규칙을 포함하며, 영향도별로 우선순위를 매겼습니다 (critical: waterfall 제거, 번들 크기 감소 → incremental: JavaScript 성능). TanStack Router 라우팅 패턴(Link, useNavigate, useSearch, useParams, beforeLoad, Outlet, pendingComponent, 프리로딩, 파일 컨벤션), React Compiler 자동 메모이제이션, use() hook, useOptimistic, createMiddleware, inputValidator, 데이터 스트리밍 등 최신 패턴 반영. 각 규칙은 자동 리팩토링 및 코드 생성을 위한 상세한 설명, 올바른 구현 대 잘못된 구현을 비교하는 실제 예시, 구체적인 영향 지표를 포함합니다.
 
 ---
 
@@ -32,10 +32,27 @@ AI 에이전트와 LLM을 위한 React 및 TanStack Start 애플리케이션 종
 @rules/server-serialization.md
 @rules/server-parallel-fetching.md
 @rules/server-deferred-data.md
+@rules/server-middleware.md
+@rules/server-validator.md
+@rules/server-streaming.md
+@rules/server-error-boundaries.md
 @rules/client-tanstack-query.md
+@rules/client-suspense-query.md
+@rules/client-optimistic-updates.md
+@rules/client-use-hook.md
 @rules/client-event-listeners.md
+@rules/routing-file-conventions.md
+@rules/routing-link-navigation.md
+@rules/routing-search-params.md
+@rules/routing-path-params.md
+@rules/routing-beforeload-auth.md
+@rules/routing-nested-layouts.md
+@rules/routing-router-context.md
+@rules/routing-preload-strategy.md
+@rules/routing-pending-component.md
 @rules/rerender-defer-reads.md
 @rules/rerender-memo.md
+@rules/rerender-react-compiler.md
 @rules/rerender-dependencies.md
 @rules/rerender-derived-state.md
 @rules/rerender-functional-setstate.md
@@ -71,11 +88,12 @@ AI 에이전트와 LLM을 위한 React 및 TanStack Start 애플리케이션 종
 |---------|---------|--------|------|
 | 1 | Waterfall 제거 | **CRITICAL** | 순차 await를 병렬로 전환. 가장 큰 성능 향상 제공 |
 | 2 | 번들 크기 최적화 | **CRITICAL** | TTI와 LCP 개선. 초기 로딩 속도 향상 |
-| 3 | 서버 사이드 성능 | HIGH | 서버 사이드 waterfall 제거, 응답 시간 단축 |
-| 4 | 클라이언트 데이터 페칭 | MEDIUM-HIGH | 자동 중복 제거, 효율적 데이터 페칭 |
-| 5 | Re-render 최적화 | MEDIUM | 불필요한 re-render 최소화, UI 반응성 향상 |
-| 6 | 렌더링 성능 | MEDIUM | 브라우저 렌더링 작업 최적화 |
-| 7 | JavaScript 성능 | LOW-MEDIUM | Hot path 마이크로 최적화 |
+| 3 | TanStack Router 라우팅 | **HIGH** | 타입 안전 네비게이션, 인증 가드, 레이아웃, 프리로딩 |
+| 4 | 서버 사이드 성능 | HIGH | 서버 사이드 waterfall 제거, 응답 시간 단축 |
+| 5 | 클라이언트 데이터 페칭 | MEDIUM-HIGH | 자동 중복 제거, 효율적 데이터 페칭 |
+| 6 | Re-render 최적화 | MEDIUM | 불필요한 re-render 최소화, UI 반응성 향상 |
+| 7 | 렌더링 성능 | MEDIUM | 브라우저 렌더링 작업 최적화 |
+| 8 | JavaScript 성능 | LOW-MEDIUM | Hot path 마이크로 최적화 |
 
 </categories>
 
@@ -718,13 +736,34 @@ function UserList({ users }: { users: User[] }) {
 2. [TanStack Start Overview](https://tanstack.com/start/latest/docs/framework/react/overview)
 3. [TanStack Start Quick Start](https://tanstack.com/start/latest/docs/framework/react/quick-start)
 4. [TanStack Router](https://tanstack.com/router)
-5. [TanStack Router Deferred Data Loading](https://tanstack.com/router/v1/docs/framework/react/guide/deferred-data-loading)
-6. [TanStack Query](https://tanstack.com/query)
+5. [TanStack Router Deferred Data Loading](https://tanstack.com/router/latest/docs/framework/react/guide/deferred-data-loading)
+6. [TanStack Query](https://tanstack.com/query/latest/docs/framework/react/overview)
 7. [Server Functions Guide](https://tanstack.com/start/latest/docs/framework/react/guide/server-functions)
+8. [Middleware Guide](https://tanstack.com/start/latest/docs/framework/react/guide/middleware)
+9. [Streaming Data Guide](https://tanstack.com/start/latest/docs/framework/react/guide/streaming-data-from-server-functions)
+
+### TanStack Router
+10. [Navigation Guide](https://tanstack.com/router/latest/docs/framework/react/guide/navigation)
+11. [Link Options](https://tanstack.com/router/latest/docs/framework/react/guide/link-options)
+12. [Search Params](https://tanstack.com/router/latest/docs/framework/react/guide/search-params)
+13. [Path Params](https://tanstack.com/router/latest/docs/framework/react/guide/path-params)
+14. [Authenticated Routes](https://tanstack.com/router/latest/docs/framework/react/guide/authenticated-routes)
+15. [Outlets](https://tanstack.com/router/latest/docs/framework/react/guide/outlets)
+16. [Route Trees](https://tanstack.com/router/latest/docs/framework/react/guide/route-trees)
+17. [File-Based Routing](https://tanstack.com/router/latest/docs/framework/react/routing/file-based-routing)
+18. [Router Context](https://tanstack.com/router/latest/docs/framework/react/guide/router-context)
+19. [Preloading](https://tanstack.com/router/latest/docs/framework/react/guide/preloading)
+20. [Data Loading](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading)
+
+### React 19
+21. [React 19 Blog](https://react.dev/blog/2024/12/05/react-19)
+22. [React use() API](https://react.dev/reference/react/use)
+23. [React useOptimistic](https://react.dev/reference/react/useOptimistic)
+24. [React Compiler](https://react.dev/learn/react-compiler)
 
 ### 외부 자료
-8. [better-all](https://github.com/shuding/better-all)
-9. [node-lru-cache](https://github.com/isaacs/node-lru-cache)
-10. [Using Server Functions and TanStack Query](https://www.brenelz.com/posts/using-server-functions-and-tanstack-query/)
+25. [better-all](https://github.com/shuding/better-all)
+26. [node-lru-cache](https://github.com/isaacs/node-lru-cache)
+27. [Using Server Functions and TanStack Query](https://www.brenelz.com/posts/using-server-functions-and-tanstack-query/)
 
 </references>

package/templates/.claude/skills/tanstack-start-react-best-practices/SKILL.md

@@ -5,7 +5,7 @@ license: MIT
 framework: tanstack-start
 metadata:
   author: vercel
-  version: "1.0.0"
+  version: "3.0.0"
   adapted_for: tanstack-start
 ---
 
@@ -17,7 +17,7 @@ metadata:
 
 # TanStack Start React 베스트 프랙티스
 
-React와 TanStack Start 애플리케이션 성능 최적화 가이드. 7개 카테고리, 38개 규칙 포함. 영향도별 우선순위로 자동 리팩토링과 코드 생성 가이드 제공.
+React 19와 TanStack Start v1 애플리케이션 성능 최적화 가이드. 8개 카테고리, 55개 규칙 포함. 영향도별 우선순위로 자동 리팩토링과 코드 생성 가이드 제공. TanStack Router 라우팅 패턴(Link, useNavigate, useSearch, useParams, beforeLoad, Outlet, pendingComponent, 프리로딩), React Compiler, use() hook, useOptimistic, Middleware, Streaming 등 최신 패턴 반영.
 
 ---
 
@@ -188,11 +188,12 @@ Task(subagent_type="implementation-executor", model="sonnet",
 |---------|---------|--------|--------|
 | 1 | Waterfall 제거 | **CRITICAL** | `async-` |
 | 2 | 번들 크기 최적화 | **CRITICAL** | `bundle-` |
-| 3 | 서버 사이드 성능 | HIGH | `server-` |
-| 4 | 클라이언트 데이터 페칭 | MEDIUM-HIGH | `client-` |
-| 5 | Re-render 최적화 | MEDIUM | `rerender-` |
-| 6 | 렌더링 성능 | MEDIUM | `rendering-` |
-| 7 | JavaScript 성능 | LOW-MEDIUM | `js-` |
+| 3 | TanStack Router 라우팅 | **HIGH** | `routing-` |
+| 4 | 서버 사이드 성능 | HIGH | `server-` |
+| 5 | 클라이언트 데이터 페칭 | MEDIUM-HIGH | `client-` |
+| 6 | Re-render 최적화 | MEDIUM | `rerender-` |
+| 7 | 렌더링 성능 | MEDIUM | `rendering-` |
+| 8 | JavaScript 성능 | LOW-MEDIUM | `js-` |
 
 </categories>
 
@@ -221,35 +222,57 @@ Task(subagent_type="implementation-executor", model="sonnet",
 | `bundle-conditional` | 기능 활성화 시에만 모듈 로드 |
 | `bundle-preload` | hover/focus 시 preload로 체감 속도 향상 |
 
-### 3. 서버 사이드 성능 (HIGH)
+### 3. TanStack Router 라우팅 (HIGH)
+
+| 규칙 | 설명 |
+|------|------|
+| `routing-file-conventions` | 파일 기반 라우팅 컨벤션 (__root, $param, _layout, lazy) |
+| `routing-link-navigation` | Link 컴포넌트와 useNavigate로 타입 안전 네비게이션 |
+| `routing-search-params` | useSearch + Zod 스키마로 search params 검증 |
+| `routing-path-params` | useParams와 getRouteApi로 타입 안전 path params |
+| `routing-beforeload-auth` | beforeLoad로 인증 가드, pathless layout 조합 |
+| `routing-nested-layouts` | Outlet과 pathless layout으로 중첩 UI |
+| `routing-router-context` | createRootRouteWithContext로 의존성 주입 |
+| `routing-preload-strategy` | Link preload="intent"로 즉각적 네비게이션 |
+| `routing-pending-component` | pendingComponent로 로딩 상태 (pendingMs/pendingMinMs) |
+
+### 4. 서버 사이드 성능 (HIGH)
 
 | 규칙 | 설명 |
 |------|------|
 | `server-cache-lru` | LRU 캐시로 요청 간 캐싱 |
-| `server-serialization` | 클라이언트로 전달 데이터 최소화 |
+| `server-serialization` | loader 데이터 직렬화 최소화 |
 | `server-parallel-fetching` | loader에서 병렬 데이터 페칭 |
-| `server-deferred-data` | defer()로 비차단 데이터 로딩 |
+| `server-deferred-data` | Promise 반환으로 비차단 데이터 로딩 |
+| `server-middleware` | createMiddleware()로 인증/로깅 중앙화 |
+| `server-validator` | inputValidator()로 타입 안전한 Server Functions |
+| `server-streaming` | async generator/ReadableStream으로 데이터 스트리밍 |
+| `server-error-boundaries` | 라우트 레벨 errorComponent/notFoundComponent |
 
-### 4. 클라이언트 데이터 페칭 (MEDIUM-HIGH)
+### 5. 클라이언트 데이터 페칭 (MEDIUM-HIGH)
 
 | 규칙 | 설명 |
 |------|------|
 | `client-tanstack-query` | TanStack Query로 자동 캐싱/중복 제거 |
+| `client-suspense-query` | useSuspenseQuery로 선언적 데이터 로딩 (v5) |
+| `client-optimistic-updates` | useOptimistic으로 즉각적 UI 피드백 (React 19) |
+| `client-use-hook` | use() hook으로 Promise 처리 (React 19) |
 | `client-event-listeners` | 전역 이벤트 리스너 중복 제거 |
 
-### 5. Re-render 최적화 (MEDIUM)
+### 6. Re-render 최적화 (MEDIUM)
 
 | 규칙 | 설명 |
 |------|------|
 | `rerender-defer-reads` | 콜백 전용 상태는 구독 안 함 |
 | `rerender-memo` | 비싼 작업은 memoized 컴포넌트로 추출 |
+| `rerender-react-compiler` | React Compiler로 자동 메모이제이션 (React 19) |
 | `rerender-dependencies` | effect에 원시값 의존성 사용 |
 | `rerender-derived-state` | 파생 boolean 구독, raw 값 구독 회피 |
 | `rerender-functional-setstate` | 안정적 콜백용 함수형 setState |
 | `rerender-lazy-state-init` | 비싼 초기값은 함수로 useState에 전달 |
 | `rerender-transitions` | 비긴급 업데이트는 startTransition |
 
-### 6. 렌더링 성능 (MEDIUM)
+### 7. 렌더링 성능 (MEDIUM)
 
 | 규칙 | 설명 |
 |------|------|
@@ -259,7 +282,7 @@ Task(subagent_type="implementation-executor", model="sonnet",
 | `rendering-svg-precision` | SVG 좌표 정밀도 감소 |
 | `rendering-conditional-render` | 조건부 렌더링은 &&가 아닌 삼항 연산자 |
 
-### 7. JavaScript 성능 (LOW-MEDIUM)
+### 8. JavaScript 성능 (LOW-MEDIUM)
 
 | 규칙 | 설명 |
 |------|------|
@@ -400,26 +423,46 @@ const addItems = useCallback((newItems: Item[]) => {
 import { createServerFn } from '@tanstack/react-start'
 import { z } from 'zod'
 
-// ✅ 기본 Server Function
+// ✅ 기본 Server Function (GET)
 const getUser = createServerFn().handler(async () => {
   // 서버에서만 실행
   return await db.user.findMany()
 })
 
-// ✅ POST + Validation
-const createUserSchema = z.object({
+// ✅ POST + Validation (inputValidator는 함수 형태 필수)
+const UserSchema = z.object({
   name: z.string().min(1),
   email: z.string().email()
 })
 
 const createUser = createServerFn({ method: 'POST' })
-  .inputValidator(createUserSchema)
+  .inputValidator((d: unknown) => UserSchema.parse(d))
   .handler(async ({ data }) => {
-    // data는 완전히 타입 검증됨
+    // data는 자동으로 { name: string; email: string } 타입
     return await db.user.create({ data })
   })
 ```
 
+### Middleware로 인증 중앙화
+
+```typescript
+import { createMiddleware } from '@tanstack/react-start'
+
+const authMiddleware = createMiddleware()
+  .server(async ({ next }) => {
+    const session = await getSession()
+    if (!session?.user) throw redirect({ to: '/login' })
+    return next({ context: { user: session.user } })
+  })
+
+// 보호된 Server Function
+const getMyTodos = createServerFn()
+  .middleware([authMiddleware])
+  .handler(async ({ context }) => {
+    return await db.todo.findMany({ where: { userId: context.user.id } })
+  })
+```
+
 ### Loader 최적화
 
 ```typescript
@@ -546,18 +589,41 @@ rules/server-deferred-data.md
 
 ## 참고 자료
 
-### TanStack 공식 문서
+### TanStack Start 공식 문서
 1. [React 공식 문서](https://react.dev)
 2. [TanStack Start Overview](https://tanstack.com/start/latest/docs/framework/react/overview)
 3. [TanStack Start Quick Start](https://tanstack.com/start/latest/docs/framework/react/quick-start)
-4. [TanStack Router](https://tanstack.com/router)
-5. [TanStack Router Deferred Data Loading](https://tanstack.com/router/v1/docs/framework/react/guide/deferred-data-loading)
-6. [TanStack Query](https://tanstack.com/query)
-7. [Server Functions Guide](https://tanstack.com/start/latest/docs/framework/react/guide/server-functions)
+4. [TanStack Query](https://tanstack.com/query/latest/docs/framework/react/overview)
+5. [Server Functions Guide](https://tanstack.com/start/latest/docs/framework/react/guide/server-functions)
+6. [Middleware Guide](https://tanstack.com/start/latest/docs/framework/react/guide/middleware)
+7. [Streaming Data Guide](https://tanstack.com/start/latest/docs/framework/react/guide/streaming-data-from-server-functions)
+8. [Authentication Guide](https://tanstack.com/start/latest/docs/framework/react/guide/authentication)
+
+### TanStack Router
+9. [TanStack Router](https://tanstack.com/router)
+10. [Navigation Guide](https://tanstack.com/router/latest/docs/framework/react/guide/navigation)
+11. [Link Options](https://tanstack.com/router/latest/docs/framework/react/guide/link-options)
+12. [Search Params](https://tanstack.com/router/latest/docs/framework/react/guide/search-params)
+13. [Path Params](https://tanstack.com/router/latest/docs/framework/react/guide/path-params)
+14. [Authenticated Routes](https://tanstack.com/router/latest/docs/framework/react/guide/authenticated-routes)
+15. [Outlets](https://tanstack.com/router/latest/docs/framework/react/guide/outlets)
+16. [Route Trees](https://tanstack.com/router/latest/docs/framework/react/guide/route-trees)
+17. [File-Based Routing](https://tanstack.com/router/latest/docs/framework/react/routing/file-based-routing)
+18. [Router Context](https://tanstack.com/router/latest/docs/framework/react/guide/router-context)
+19. [Preloading](https://tanstack.com/router/latest/docs/framework/react/guide/preloading)
+20. [Data Loading](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading)
+21. [Deferred Data Loading](https://tanstack.com/router/latest/docs/framework/react/guide/deferred-data-loading)
+
+### React 19
+22. [React 19 Blog](https://react.dev/blog/2024/12/05/react-19)
+23. [React use() API](https://react.dev/reference/react/use)
+24. [React useOptimistic](https://react.dev/reference/react/useOptimistic)
+25. [React useActionState](https://react.dev/reference/react/useActionState)
+26. [React Compiler](https://react.dev/learn/react-compiler)
 
 ### 외부 자료
-8. [better-all](https://github.com/shuding/better-all)
-9. [node-lru-cache](https://github.com/isaacs/node-lru-cache)
-10. [Using Server Functions and TanStack Query](https://www.brenelz.com/posts/using-server-functions-and-tanstack-query/)
+27. [better-all](https://github.com/shuding/better-all)
+28. [node-lru-cache](https://github.com/isaacs/node-lru-cache)
+29. [Using Server Functions and TanStack Query](https://www.brenelz.com/posts/using-server-functions-and-tanstack-query/)
 
 </references>

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

@@ -13,37 +13,60 @@ tags: bundle, third-party, analytics, defer
 
 ```tsx
 import { Analytics } from '@vercel/analytics/react'
+import { ErrorTracker } from './error-tracker'
 
-export default function RootLayout({ children }) {
+function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html>
-      <body>
-        {children}
-        <Analytics />
-      </body>
-    </html>
+    <div>
+      {children}
+      <Analytics />
+      <ErrorTracker />
+    </div>
   )
 }
 ```
 
-**✅ 올바른 예시 (하이드레이션 후 로드):**
+**✅ 올바른 예시 (하이드레이션 후 lazy load):**
 
 ```tsx
-import dynamic from 'next/dynamic'
+import { lazy, Suspense, useEffect, useState } from 'react'
 
-const Analytics = dynamic(
-  () => import('@vercel/analytics/react').then(m => m.Analytics),
-  { ssr: false }
+const Analytics = lazy(() =>
+  import('@vercel/analytics/react').then(m => ({ default: m.Analytics }))
 )
 
-export default function RootLayout({ children }) {
+function RootLayout({ children }: { children: React.ReactNode }) {
+  const [hydrated, setHydrated] = useState(false)
+
+  useEffect(() => {
+    setHydrated(true)
+  }, [])
+
   return (
-    <html>
-      <body>
-        {children}
-        <Analytics />
-      </body>
-    </html>
+    <div>
+      {children}
+      {hydrated && (
+        <Suspense fallback={null}>
+          <Analytics />
+        </Suspense>
+      )}
+    </div>
   )
 }
 ```
+
+**✅ 더 간단한 대안 (useEffect로 직접 초기화):**
+
+```tsx
+function RootLayout({ children }: { children: React.ReactNode }) {
+  useEffect(() => {
+    // 하이드레이션 후 비동기 로드
+    import('./analytics').then(mod => mod.init())
+    import('./error-tracker').then(mod => mod.init())
+  }, [])
+
+  return <div>{children}</div>
+}
+```
+
+TanStack Start에서는 `next/dynamic`을 사용할 수 없으므로, React의 `lazy()` + `Suspense` 또는 `useEffect` 내 동적 `import()`를 사용합니다.