fix: address review feedback and audit all 28 skills against source

- Address all 9 Sheraff review comments (ensureQueryData, auth patterns,
  open redirect, useLocation migration, reusable components, zodValidator)
- Address all 11 actionable CodeRabbit comments (naming collisions,
  framework-agnostic comments, missing imports, bin/intent.js error handling)
- Full source-verified audit of all 28 skills across 7 re-audited packages
- Fix solid-start: add HydrationScript, move HeadContent to body, use
  shellComponent pattern
- Fix solid-router: useLoaderDeps returns Accessor<T>, ScrollRestoration
  deprecated, add missing hooks/components
- Fix vue-router: useLinkProps returns LinkHTMLAttributes, useLoaderDeps
  returns Ref<T>, fix split-file convention
- Fix start-server-core: correct file path, server fn prefix, getValidatedQuery
  API, add createServerFn imports to all examples
- Fix router-core skills: preloadStaleTime wording, loader route param,
  error retry pattern, search-params adapter scoping
- All 28 skills pass @tanstack/intent validate

Author: tannerlinsley

packages/react-router/bin/intent.js

@@ -6,7 +6,12 @@
 try {
   await import('@tanstack/intent/intent-library')
 } catch (e) {
-  if (e?.code === 'ERR_MODULE_NOT_FOUND' || e?.code === 'MODULE_NOT_FOUND') {
+  const isModuleNotFound =
+    e?.code === 'ERR_MODULE_NOT_FOUND' || e?.code === 'MODULE_NOT_FOUND'
+  const missingIntentLibrary =
+    typeof e?.message === 'string' && e.message.includes('@tanstack/intent')
+
+  if (isModuleNotFound && missingIntentLibrary) {
     console.error('@tanstack/intent is not installed.')
     console.error('')
     console.error('Install it as a dev dependency:')

packages/react-router/eslint.config.ts

@@ -6,6 +6,9 @@ import type { Linter } from 'eslint'
 
 export default [
   ...rootConfig,
+  {
+    ignores: ['bin/**'],
+  },
   {
     files: ['src/**/*.{ts,tsx}', 'tests/**/*.{ts,tsx}'],
   },

packages/react-router/package.json

@@ -90,10 +90,7 @@
   "sideEffects": false,
   "files": [
     "dist",
-    "src",
-    "skills",
-    "bin",
-    "!skills/_artifacts"
+    "src"
   ],
   "engines": {
     "node": ">=20.19"
@@ -107,7 +104,6 @@
     "tiny-warning": "^1.0.3"
   },
   "devDependencies": {
-    "@tanstack/intent": "^0.0.14",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@vitejs/plugin-react": "^4.3.4",
@@ -121,8 +117,5 @@
   "peerDependencies": {
     "react": ">=18.0.0 || >=19.0.0",
     "react-dom": ">=18.0.0 || >=19.0.0"
-  },
-  "bin": {
-    "intent": "./bin/intent.js"
   }
 }

packages/react-router/skills/compositions/router-query/SKILL.md

@@ -86,7 +86,7 @@ export const Route = createRootRouteWithContext<{
 
 ```tsx
 // src/router.tsx
-import { QueryClient } from '@tanstack/react-query'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { createRouter } from '@tanstack/react-router'
 import { routeTree } from './routeTree.gen'
 
@@ -190,14 +190,21 @@ This is the recommended pattern. The loader ensures data is in the cache before
 import { queryOptions, useSuspenseQuery } from '@tanstack/react-query'
 import { createFileRoute } from '@tanstack/react-router'
 
+interface Post {
+  id: string
+  title: string
+}
+
 const postsQueryOptions = queryOptions({
   queryKey: ['posts'],
-  queryFn: () => fetch('/api/posts').then((r) => r.json()),
+  queryFn: (): Promise<Array<Post>> =>
+    fetch('/api/posts').then((r) => r.json()),
 })
 
 export const Route = createFileRoute('/posts')({
   loader: ({ context }) => {
-    // ensureQueryData returns cached data if fresh, fetches if stale
+    // ensureQueryData returns cached data if available, fetches if not in cache
+    // To also refetch stale data, pass revalidateIfStale: true
     return context.queryClient.ensureQueryData(postsQueryOptions)
   },
   component: PostsPage,
@@ -209,7 +216,7 @@ function PostsPage() {
 
   return (
     <ul>
-      {posts.map((post: any) => (
+      {posts.map((post) => (
         <li key={post.id}>{post.title}</li>
       ))}
     </ul>
@@ -224,6 +231,12 @@ function PostsPage() {
 import { queryOptions, useSuspenseQuery } from '@tanstack/react-query'
 import { createFileRoute } from '@tanstack/react-router'
 
+interface Post {
+  id: string
+  title: string
+  content: string
+}
+
 const postQueryOptions = (postId: string) =>
   queryOptions({
     queryKey: ['posts', postId],
@@ -250,6 +263,8 @@ function PostPage() {
 For non-critical data, start the fetch without blocking navigation:
 
 ```tsx
+import { useQuery, useSuspenseQuery } from '@tanstack/react-query'
+
 export const Route = createFileRoute('/dashboard')({
   loader: ({ context }) => {
     // Await critical data
@@ -340,15 +355,15 @@ A module-level singleton `QueryClient` is shared across all server requests, lea
 ```tsx
 // WRONG — shared across SSR requests
 const queryClient = new QueryClient()
-export function createRouter() {
+export function createAppRouter() {
   return createRouter({
     routeTree,
     context: { queryClient },
   })
 }
 
-// CORRECT — new QueryClient per createRouter call
-export function createRouter() {
+// CORRECT — new QueryClient per createAppRouter call
+export function createAppRouter() {
   const queryClient = new QueryClient()
   return createRouter({
     routeTree,

packages/react-router/skills/lifecycle/migrate-from-react-router/SKILL.md

@@ -20,8 +20,11 @@ sources:
 
 This is a step-by-step migration checklist. Each check covers one conversion task. Complete them in order.
 
-> **CRITICAL**: If your UI is blank after migration, open the console. Errors like "cannot use useNavigate outside of context" mean React Router imports remain alongside TanStack Router imports. Uninstall `react-router` to surface them as TypeScript errors.
+> **CRITICAL**: If your UI is blank after migration, open the console. Errors like "cannot use useNavigate outside of context" mean React Router imports remain alongside TanStack Router imports. Uninstall `react-router` (and `react-router-dom` if present) to surface them as TypeScript errors.
+>
 > **CRITICAL**: TanStack Router uses `to` + `params` for navigation, NOT template literal paths. Never interpolate params into the `to` string.
+>
+> **NOTE**: React Router v7 recommends importing from `react-router` (not `react-router-dom`). The `react-router-dom` package still exists but just re-exports from `react-router`. Check for imports from both.
 
 ## Pre-Migration
 
@@ -34,8 +37,8 @@ git checkout -b migrate-to-tanstack-router
 - [ ] **Install TanStack Router alongside React Router temporarily**
 
 ```bash
-npm install @tanstack/react-router
-npm install -D @tanstack/router-plugin @tanstack/react-router-devtools
+npm install @tanstack/react-router @tanstack/react-router-devtools
+npm install -D @tanstack/router-plugin
 ```
 
 - [ ] **Configure bundler plugin (Vite example)**
@@ -197,7 +200,7 @@ Key differences:
 
 - `to` is a route path pattern, NOT an interpolated string
 - `params` is a separate prop with typed values
-- Active class: `className="[&.active]:font-bold"` (automatic `active` data attribute)
+- Active styling: use `activeProps={{ className: 'font-bold' }}` or `data-status="active"` attribute for CSS
 
 - [ ] **Convert all `useNavigate` calls**
 
@@ -294,6 +297,43 @@ Or from within the route component:
 const { postId } = Route.useParams()
 ```
 
+## `useLocation` — Common Pitfall
+
+- [ ] **Replace `useLocation` with specific hooks**
+
+React Router's `useLocation` is heavily used, and TanStack Router has a hook with the same name — but they are NOT equivalent. TanStack Router's `useLocation()` returns the router's current location, which during pending navigations may differ from what's currently rendered. Most React Router `useLocation` usage should be replaced with more specific hooks. See [#3110](https://github.com/TanStack/router/issues/3110).
+
+Replace based on what you actually need:
+
+```tsx
+// React Router
+import { useLocation } from 'react-router'
+const location = useLocation()
+
+// ❌ DON'T just swap to TanStack Router's useLocation — it's the "live" URL
+import { useLocation } from '@tanstack/react-router'
+
+// ✅ DO use the specific hook for what you need:
+import {
+  useMatch,
+  useMatches,
+  useParams,
+  useSearch,
+} from '@tanstack/react-router'
+
+// Current route match (replaces most useLocation().pathname usage)
+const match = useMatch({ from: '/posts/$postId' })
+
+// All active matches (replaces useLocation for breadcrumbs/analytics)
+const matches = useMatches()
+
+// Path params (replaces useLocation + manual parsing)
+const { postId } = useParams({ from: '/posts/$postId' })
+
+// Search params (replaces useLocation().search parsing)
+const { page } = useSearch({ from: '/posts' })
+```
+
 ## Outlet
 
 - [ ] **Replace React Router `Outlet` with TanStack Router `Outlet`**
@@ -352,62 +392,28 @@ Key differences:
 
 ## Code Splitting
 
-- [ ] **Convert lazy route imports**
-
-React Router:
-
-```tsx
-const LazyPage = lazy(() => import('./pages/LazyPage'))
-{ path: '/lazy', element: <Suspense><LazyPage /></Suspense> }
-```
-
-TanStack Router (with `autoCodeSplitting: true` in plugin config, this is automatic). For manual splitting:
+- [ ] **Convert lazy route imports** — with `autoCodeSplitting: true` in the plugin config, this is automatic. For manual splitting, use `.lazy.tsx` files:
 
 ```tsx
 // src/routes/lazy-page.lazy.tsx
 import { createLazyFileRoute } from '@tanstack/react-router'
 
 export const Route = createLazyFileRoute('/lazy-page')({
-  component: LazyPage,
+  component: () => <div>Lazy loaded</div>,
 })
-
-function LazyPage() {
-  return <div>Lazy loaded</div>
-}
 ```
 
 ## Cleanup
 
-- [ ] **Remove React Router**
+- [ ] **Remove React Router and verify**
 
 ```bash
 npm uninstall react-router react-router-dom
+grep -r "from 'react-router" src/  # find stale imports
+npx tsc --noEmit                    # verify clean build
 ```
 
-- [ ] **Search for remaining React Router imports**
-
-```bash
-grep -r "from 'react-router" src/
-grep -r 'from "react-router' src/
-```
-
-Any remaining imports will now produce TypeScript errors after uninstalling.
-
-- [ ] **Verify TypeScript compiles cleanly**
-
-```bash
-npx tsc --noEmit
-```
-
-- [ ] **Test all routes manually**
-
-Verify:
-
-- All routes render
-- Navigation works (including browser back/forward)
-- Search params persist and validate
-- Dynamic route params resolve
-- Loaders execute and data displays
+- [ ] **Test all routes** — verify rendering, navigation (incl. back/forward), search params, dynamic params, and loaders
 
 ## Common Mistakes
 
@@ -477,6 +483,7 @@ File naming also uses `$`: `src/routes/posts/$postId.tsx`
 | `useParams()`                | `useParams({ from: '/route/$param' })`               |
 | `useSearchParams()`          | `validateSearch` + `useSearch({ from })`             |
 | `useLoaderData()`            | `Route.useLoaderData()`                              |
+| `useLocation()`              | `useMatch`, `useMatches`, `useParams`, `useSearch`   |
 | `<Outlet />`                 | `<Outlet />`                                         |
 | `loader({ params })`         | `loader: ({ params }) => ...` (route option)         |
 | `action({ request })`        | Use mutations / form libraries                       |

packages/react-router/skills/react-router/SKILL.md

@@ -381,6 +381,23 @@ function Nav() {
 }
 ```
 
+### Reusable Components with Router Hooks
+
+To create a component that uses router hooks across multiple routes, pass a union of route paths as the `from` prop:
+
+```tsx
+function PostIdDisplay({ from }: { from: '/posts/$id' | '/drafts/$id' }) {
+  const { id } = useParams({ from })
+  return <span>ID: {id}</span>
+}
+
+// Usage in different route components
+<PostIdDisplay from="/posts/$id" />
+<PostIdDisplay from="/drafts/$id" />
+```
+
+This pattern avoids `strict: false` (which returns an imprecise union) while keeping the component reusable across specific known routes.
+
 ### Auth Provider Must Wrap RouterProvider
 
 If routes use auth context (via `createRootRouteWithContext`), the auth provider must be an ancestor of `RouterProvider`:
@@ -420,7 +437,7 @@ const router = createRouter({
 
 ### 1. HIGH: Using React hooks in `beforeLoad` or `loader`
 
-`beforeLoad` and `loader` are NOT React components — they are plain async functions called by the router. React hooks cannot be used in them.
+`beforeLoad` and `loader` are NOT React components — they are plain async functions. React hooks cannot be called in them. Pass auth state via router context instead.
 
 ```tsx
 // WRONG — useAuth is a React hook, cannot be called here
@@ -429,18 +446,7 @@ beforeLoad: () => {
   if (!auth.user) throw redirect({ to: '/login' })
 }
 
-// CORRECT — pass auth state via router context
-const rootRoute = createRootRouteWithContext<{ auth: AuthState }>()({
-  component: RootComponent,
-})
-
-// In the component that creates the router:
-const router = createRouter({
-  routeTree,
-  context: { auth: getAuthState() },
-})
-
-// Then in a route:
+// CORRECT — read auth from router context
 beforeLoad: ({ context }) => {
   if (!context.auth.isAuthenticated) {
     throw redirect({ to: '/login' })
@@ -450,25 +456,26 @@ beforeLoad: ({ context }) => {
 
 ### 2. HIGH: Wrapping RouterProvider inside an auth provider incorrectly
 
-If you use `createRootRouteWithContext<{ auth: AuthState }>()`, the auth state must be available when the router is created — not injected after.
+Create the router once with an `undefined!` placeholder, then inject live auth via `RouterProvider`'s `context` prop. Do NOT recreate the router on auth changes — this resets caches and rebuilds the tree.
 
 ```tsx
-// WRONG — router created before auth is available
-const router = createRouter({ routeTree, context: {} })
+// CORRECT — create router once, inject live auth via context prop
+const router = createRouter({
+  routeTree,
+  context: { auth: undefined! }, // placeholder, filled by RouterProvider
+})
 
-function App() {
-  const auth = useAuth() // too late
-  return <RouterProvider router={router} />
+function InnerApp() {
+  const auth = useAuth()
+  return <RouterProvider router={router} context={{ auth }} />
 }
 
-// CORRECT — provide context at creation time
 function App() {
-  const auth = useAuth()
-  const router = useMemo(
-    () => createRouter({ routeTree, context: { auth } }),
-    [auth],
+  return (
+    <AuthProvider>
+      <InnerApp />
+    </AuthProvider>
   )
-  return <RouterProvider router={router} />
 }
 ```
 

packages/react-start/bin/intent.js

@@ -6,7 +6,12 @@
 try {
   await import('@tanstack/intent/intent-library')
 } catch (e) {
-  if (e?.code === 'ERR_MODULE_NOT_FOUND' || e?.code === 'MODULE_NOT_FOUND') {
+  const isModuleNotFound =
+    e?.code === 'ERR_MODULE_NOT_FOUND' || e?.code === 'MODULE_NOT_FOUND'
+  const missingIntentLibrary =
+    typeof e?.message === 'string' && e.message.includes('@tanstack/intent')
+
+  if (isModuleNotFound && missingIntentLibrary) {
     console.error('@tanstack/intent is not installed.')
     console.error('')
     console.error('Install it as a dev dependency:')