본문으로 건너뛰기
cccskills
무료GitHub에 공개

tanstack-migration

Use when migrating SaveIt.now from the old Next.js app directory to TanStack Start, restoring route parity, UI parity, API parity, and verification without leaving Next.js runtime code.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(1)

  • SKILL.md4.1 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

TanStack Migration

Objective

Finish the SaveIt.now migration so apps/web is fully TanStack Start/Vite, with every previous route from HEAD:apps/web/app migrated to apps/web/src/routes or equivalent src modules.

Hard Rules

  • Do not restore apps/web/app, .next, next.config.*, next-env.d.ts, or any Next.js runtime.
  • Do not add next, next/link, next/image, next/navigation, next/server, next/cache, next-mdx-remote-client/rsc, next-themes, next-safe-action, or next-zod-route.
  • Do not approximate the UI. Read the old file from git history and preserve the same layout, text, components, and behavior.
  • Do not leave broken footer/header links. If a visible route links to a page, that page must exist or the link must be intentionally replaced with an existing equivalent.
  • Do not use em dash characters in code, copy, comments, or reports. Use a regular hyphen or rewrite the sentence.
  • Do not edit unrelated files outside the assigned scope unless typecheck proves the shared file is required.
  • Never revert user changes or broad migration work already present in the worktree.

Required Inventory

Use the old Next app as source of truth:

git ls-tree -r --name-only HEAD -- apps/web/app | rg 'page\.(tsx|ts)$'
git ls-tree -r --name-only HEAD -- apps/web/app/api | rg 'route\.(tsx|ts)$'

Use current TanStack routes as destination:

rg --files apps/web/src/routes

Migration Patterns

  • apps/web/app/(landing)/page.tsx and apps/web/app/(landing)/landing/page.tsx become apps/web/src/routes/index.tsx.
  • apps/web/app/(landing)/pricing/page.tsx becomes apps/web/src/routes/pricing.tsx.
  • apps/web/app/(landing)/tools/page.tsx becomes apps/web/src/routes/tools.tsx.
  • apps/web/app/(landing)/tools/<name>/page.tsx becomes apps/web/src/routes/tools.<name>.tsx, using dot route syntax.
  • Dynamic routes use TanStack file params, for example posts.$slug.tsx, docs.$slug.tsx, u.$slug.tsx, p.$bookmarkId.tsx.
  • API routes use TanStack server route files, for example api.bookmarks.ts, api.bookmarks.$bookmarkId.ts.
  • Server-only data fetching belongs in route loaders or server route handlers, not in client components.
  • Convert Link from next/link to plain <a> or TanStack Link when route params/search preservation is required.
  • Convert next/image to <img> with equivalent sizing classes and alt text.
  • Convert notFound() to a rendered not-found state or a thrown router not-found when the local pattern exists.
  • Convert redirect() to TanStack redirect helpers in loaders or client navigation in components.
  • Convert NextRequest and NextResponse to standard Request and Response.json.
  • Server-only data access should use Convex functions or server helpers; do not introduce browser-only modules into server routes.

Verification

Every migration slice must run:

cd apps/web
pnpm ts
pnpm lint
pnpm build

Run strict no-Next scans from repo root:

rg -n "NEXT_PUBLIC_|Next\.js|Nextjs|nextjs|next js|next/|@next|next-|better-auth/next-js|next-themes|next-zod-route|next-safe-action|NextRequest|NextResponse|from \"next|from 'next" . --glob '!node_modules/**' --glob '!.git/**' --glob '!apps/web/.output/**' --glob '!apps/web/dist/**' | rg -v "eslint-disable-next-line"
find apps/web -maxdepth 2 \( -name 'next.config.*' -o -name 'next-env.d.ts' -o -name '.next' -o -name 'app' \) -print
pnpm --filter web why next

Browser verify every migrated visible route in the assigned scope:

  • route returns HTTP 200 or intentionally redirects when authenticated.
  • page title/main heading and visible sections match the old route.
  • browser console has no React runtime errors.
  • linked actions still call migrated APIs.

Report Format

Return:

  • migrated routes and files
  • API routes added or fixed
  • verification commands and results
  • browser routes checked
  • remaining route gaps in the assigned scope

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Melvynx/saveit.now322026년 10월 17일 업데이트

convex

무료

Routes general Convex requests to the right project skill. Use when the user asks which Convex skill to use or gives an underspecified Convex app task.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Melvynx/saveit.now322026년 10월 17일 업데이트

Use when optimizing Convex database read bandwidth, documents-read cost, query indexes, full-table scans, function-level usage dashboard findings, or code that uses .filter(), unbounded .collect(), N+1 reads, or expensive reactive Convex queries.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Melvynx/saveit.now322026년 10월 17일 업데이트

Build reusable Convex components with isolated tables and app-facing wrappers. Use for defineComponent, app.use, ComponentApi, or shared backend modules.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Melvynx/saveit.now322026년 10월 17일 업데이트

Plan safe Convex schema and data migrations. Use for widen-migrate-narrow rollouts, backfills, breaking field changes, table splits, or failed schema deploys.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Melvynx/saveit.now322026년 10월 17일 업데이트

Audit Convex performance for hot reads, write contention, subscriptions, function limits, OCC conflicts, latency, read amplification, and expensive reactive queries.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Melvynx/saveit.now322026년 10월 17일 업데이트

Melvynx의 스킬 모두 보기

이 스킬의 문제 신고