[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71H7WBZ16RQGD3W9CZ89TFT":3,"skill-same:01M71H7WBZ16RQGD3W9CZ89TFT":56},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":31,"linkOnly":32,"markdownContent":33,"markdownBody":34,"frontMatter":35,"refName":36,"commitSha":37,"skillDirectory":38,"forksCount":13,"repositoryHtmlUrl":39,"repositoryHomepageUrl":6,"ownerHtmlUrl":40,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":41,"install":42,"resources":55},"01M71H7WBZ16RQGD3W9CZ89TFT","tanstack-router",null,"TanStack Router — type-safe routing, nested layouts, search params, and data loading","lambda-solver\u002Flambdabench-pro","lambda-solver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F279071046?v=4","01M71H55W2WK3PM6RRAY9JZWAJ","01M71H55WRT9XAFDAVACTCC2XP",0,"MIT","https:\u002F\u002Fgithub.com\u002Flambda-solver\u002Flambdabench-pro\u002Fblob\u002Fmain\u002F.opencode\u002Fskills\u002Ftanstack\u002F02-router\u002FSKILL.md",[],[18,19,20,21,22,23,24,25,26,27,28,29,30],"router","tanstack router","tanstack","type","routing","nested","opencode","data loading","loading","search","safe","data","search params","2026-11-10 10:12:30",false,"---\nname: tanstack-router\ndescription: TanStack Router — type-safe routing, nested layouts, search params, and data loading\nlicense: MIT\ncompatibility: opencode\n---\n\n# TanStack Router\n\n## Installation\n\n```bash\nbun add @tanstack\u002Freact-router\nbun add -D @tanstack\u002Frouter-devtools @tanstack\u002Frouter-vite-plugin\n```\n\n## Setup\n\n```tsx\n\u002F\u002F main.tsx\nimport { createRouter, RouterProvider } from \"@tanstack\u002Freact-router\";\nimport { routeTree } from \".\u002FrouteTree.gen\"; \u002F\u002F generated\n\nconst router = createRouter({ routeTree });\n\ndeclare module \"@tanstack\u002Freact-router\" {\n  interface Register {\n    router: typeof router;\n  }\n}\n\nrender(\u003CRouterProvider router={router} \u002F>, document.getElementById(\"root\"));\n```\n\n## File-Based Routes\n\n```tsx\n\u002F\u002F src\u002Froutes\u002F__root.tsx — root layout\nexport const Route = createRootRoute({\n  component: RootComponent,\n});\n\nfunction RootComponent() {\n  return (\n    \u003C>\n      \u003CNavigation \u002F>\n      \u003COutlet \u002F>\n      \u003CTanStackRouterDevtools \u002F>\n    \u003C\u002F>\n  );\n}\n\n\u002F\u002F src\u002Froutes\u002Findex.tsx — home page\nexport const Route = createFileRoute(\"\u002F\")({\n  component: HomePage,\n});\n\n\u002F\u002F src\u002Froutes\u002Fusers.$userId.tsx — dynamic segment\nexport const Route = createFileRoute(\"\u002Fusers\u002F$userId\")({\n  component: UserPage,\n  loader: ({ params }) => fetchUser(params.userId),\n});\n\n\u002F\u002F src\u002Froutes\u002Fusers.index.tsx — users list (when no $userId)\nexport const Route = createFileRoute(\"\u002Fusers\u002F\")({\n  component: UsersListPage,\n});\n```\n\n## Type-Safe Links\n\n```tsx\n\u002F\u002F ✅ type-safe — params and search are validated\n\u003CLink to=\"\u002Fusers\u002F$userId\" params={{ userId: '123' }}>\n  View User\n\u003C\u002FLink>\n\n\u002F\u002F ✅ with search params\n\u003CLink\n  to=\"\u002Fusers\"\n  search={{ page: 1, filter: 'active' }}\n>\n  Page 1\n\u003C\u002FLink>\n\n\u002F\u002F ❌ no type safety with string href\n\u003Ca href=\"\u002Fusers\u002F123\">View User\u003C\u002Fa>\n```\n\n## Search Params (URL State)\n\n```tsx\n\u002F\u002F Define search schema\nimport { z } from \"zod\";\n\nconst usersSearchSchema = z.object({\n  page: z.number().default(1),\n  filter: z.enum([\"all\", \"active\", \"inactive\"]).default(\"all\"),\n  q: z.string().optional(),\n});\n\nexport const Route = createFileRoute(\"\u002Fusers\u002F\")({\n  validateSearch: usersSearchSchema,\n  component: UsersPage,\n});\n\n\u002F\u002F Use in component\nfunction UsersPage() {\n  const { page, filter, q } = Route.useSearch();\n  const navigate = Route.useNavigate();\n\n  const setFilter = (filter: string) => {\n    navigate({ search: (prev) => ({ ...prev, filter, page: 1 }) });\n  };\n\n  return (\n    \u003Cdiv>\n      \u003CFilterSelect value={filter} onChange={setFilter} \u002F>\n      \u003CUserList page={page} filter={filter} query={q} \u002F>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n## Data Loading\n\n```tsx\nexport const Route = createFileRoute(\"\u002Fusers\u002F$userId\")({\n  loader: async ({ params }) => {\n    const user = await fetchUser(params.userId);\n    return { user };\n  },\n  component: UserPage,\n});\n\nfunction UserPage() {\n  const { user } = Route.useLoaderData();\n  return \u003CUserProfile user={user} \u002F>;\n}\n\n\u002F\u002F With TanStack Query integration\nexport const Route = createFileRoute(\"\u002Fusers\u002F$userId\")({\n  loader: async ({ params, context }) => {\n    await context.queryClient.ensureQueryData({\n      queryKey: [\"users\", params.userId],\n      queryFn: () => fetchUser(params.userId),\n    });\n  },\n  component: UserPage,\n});\n```\n\n## Nested Layouts\n\n```tsx\n\u002F\u002F src\u002Froutes\u002Fdashboard.tsx — layout\nexport const Route = createFileRoute(\"\u002Fdashboard\")({\n  component: DashboardLayout,\n});\n\nfunction DashboardLayout() {\n  return (\n    \u003Cdiv className=\"flex\">\n      \u003CSidebar \u002F>\n      \u003Cmain>\n        \u003COutlet \u002F>\n      \u003C\u002Fmain>\n    \u003C\u002Fdiv>\n  );\n}\n\n\u002F\u002F src\u002Froutes\u002Fdashboard.index.tsx — \u002Fdashboard\n\u002F\u002F src\u002Froutes\u002Fdashboard.settings.tsx — \u002Fdashboard\u002Fsettings\n\u002F\u002F src\u002Froutes\u002Fdashboard.profile.tsx — \u002Fdashboard\u002Fprofile\n```\n\n## Navigation\n\n```tsx\n\u002F\u002F Programmatic navigation\nconst navigate = useNavigate()\nnavigate({ to: '\u002Fusers', search: { page: 2 } })\n\n\u002F\u002F Back navigation\nconst router = useRouter()\nrouter.history.back()\n\n\u002F\u002F Active link styling\n\u003CLink\n  to=\"\u002Fusers\"\n  activeProps={{ className: 'font-bold' }}\n  activeOptions={{ exact: true }}\n>\n  Users\n\u003C\u002FLink>\n```\n\n## Best Practices\n\n- **Use file-based routing** — type-safe, no manual route config\n- **Put filters in URL** — shareable, bookmarkable, back-button works\n- **Use `validateSearch`** — validates and types URL search params\n- **Load data in route loader** — parallel fetching, less waterfall\n- **Use `\u003COutlet \u002F>`** for nested layouts — composition over configuration\n","# TanStack Router\n\n## Installation\n\n```bash\nbun add @tanstack\u002Freact-router\nbun add -D @tanstack\u002Frouter-devtools @tanstack\u002Frouter-vite-plugin\n```\n\n## Setup\n\n```tsx\n\u002F\u002F main.tsx\nimport { createRouter, RouterProvider } from \"@tanstack\u002Freact-router\";\nimport { routeTree } from \".\u002FrouteTree.gen\"; \u002F\u002F generated\n\nconst router = createRouter({ routeTree });\n\ndeclare module \"@tanstack\u002Freact-router\" {\n  interface Register {\n    router: typeof router;\n  }\n}\n\nrender(\u003CRouterProvider router={router} \u002F>, document.getElementById(\"root\"));\n```\n\n## File-Based Routes\n\n```tsx\n\u002F\u002F src\u002Froutes\u002F__root.tsx — root layout\nexport const Route = createRootRoute({\n  component: RootComponent,\n});\n\nfunction RootComponent() {\n  return (\n    \u003C>\n      \u003CNavigation \u002F>\n      \u003COutlet \u002F>\n      \u003CTanStackRouterDevtools \u002F>\n    \u003C\u002F>\n  );\n}\n\n\u002F\u002F src\u002Froutes\u002Findex.tsx — home page\nexport const Route = createFileRoute(\"\u002F\")({\n  component: HomePage,\n});\n\n\u002F\u002F src\u002Froutes\u002Fusers.$userId.tsx — dynamic segment\nexport const Route = createFileRoute(\"\u002Fusers\u002F$userId\")({\n  component: UserPage,\n  loader: ({ params }) => fetchUser(params.userId),\n});\n\n\u002F\u002F src\u002Froutes\u002Fusers.index.tsx — users list (when no $userId)\nexport const Route = createFileRoute(\"\u002Fusers\u002F\")({\n  component: UsersListPage,\n});\n```\n\n## Type-Safe Links\n\n```tsx\n\u002F\u002F ✅ type-safe — params and search are validated\n\u003CLink to=\"\u002Fusers\u002F$userId\" params={{ userId: '123' }}>\n  View User\n\u003C\u002FLink>\n\n\u002F\u002F ✅ with search params\n\u003CLink\n  to=\"\u002Fusers\"\n  search={{ page: 1, filter: 'active' }}\n>\n  Page 1\n\u003C\u002FLink>\n\n\u002F\u002F ❌ no type safety with string href\n\u003Ca href=\"\u002Fusers\u002F123\">View User\u003C\u002Fa>\n```\n\n## Search Params (URL State)\n\n```tsx\n\u002F\u002F Define search schema\nimport { z } from \"zod\";\n\nconst usersSearchSchema = z.object({\n  page: z.number().default(1),\n  filter: z.enum([\"all\", \"active\", \"inactive\"]).default(\"all\"),\n  q: z.string().optional(),\n});\n\nexport const Route = createFileRoute(\"\u002Fusers\u002F\")({\n  validateSearch: usersSearchSchema,\n  component: UsersPage,\n});\n\n\u002F\u002F Use in component\nfunction UsersPage() {\n  const { page, filter, q } = Route.useSearch();\n  const navigate = Route.useNavigate();\n\n  const setFilter = (filter: string) => {\n    navigate({ search: (prev) => ({ ...prev, filter, page: 1 }) });\n  };\n\n  return (\n    \u003Cdiv>\n      \u003CFilterSelect value={filter} onChange={setFilter} \u002F>\n      \u003CUserList page={page} filter={filter} query={q} \u002F>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n## Data Loading\n\n```tsx\nexport const Route = createFileRoute(\"\u002Fusers\u002F$userId\")({\n  loader: async ({ params }) => {\n    const user = await fetchUser(params.userId);\n    return { user };\n  },\n  component: UserPage,\n});\n\nfunction UserPage() {\n  const { user } = Route.useLoaderData();\n  return \u003CUserProfile user={user} \u002F>;\n}\n\n\u002F\u002F With TanStack Query integration\nexport const Route = createFileRoute(\"\u002Fusers\u002F$userId\")({\n  loader: async ({ params, context }) => {\n    await context.queryClient.ensureQueryData({\n      queryKey: [\"users\", params.userId],\n      queryFn: () => fetchUser(params.userId),\n    });\n  },\n  component: UserPage,\n});\n```\n\n## Nested Layouts\n\n```tsx\n\u002F\u002F src\u002Froutes\u002Fdashboard.tsx — layout\nexport const Route = createFileRoute(\"\u002Fdashboard\")({\n  component: DashboardLayout,\n});\n\nfunction DashboardLayout() {\n  return (\n    \u003Cdiv className=\"flex\">\n      \u003CSidebar \u002F>\n      \u003Cmain>\n        \u003COutlet \u002F>\n      \u003C\u002Fmain>\n    \u003C\u002Fdiv>\n  );\n}\n\n\u002F\u002F src\u002Froutes\u002Fdashboard.index.tsx — \u002Fdashboard\n\u002F\u002F src\u002Froutes\u002Fdashboard.settings.tsx — \u002Fdashboard\u002Fsettings\n\u002F\u002F src\u002Froutes\u002Fdashboard.profile.tsx — \u002Fdashboard\u002Fprofile\n```\n\n## Navigation\n\n```tsx\n\u002F\u002F Programmatic navigation\nconst navigate = useNavigate()\nnavigate({ to: '\u002Fusers', search: { page: 2 } })\n\n\u002F\u002F Back navigation\nconst router = useRouter()\nrouter.history.back()\n\n\u002F\u002F Active link styling\n\u003CLink\n  to=\"\u002Fusers\"\n  activeProps={{ className: 'font-bold' }}\n  activeOptions={{ exact: true }}\n>\n  Users\n\u003C\u002FLink>\n```\n\n## Best Practices\n\n- **Use file-based routing** — type-safe, no manual route config\n- **Put filters in URL** — shareable, bookmarkable, back-button works\n- **Use `validateSearch`** — validates and types URL search params\n- **Load data in route loader** — parallel fetching, less waterfall\n- **Use `\u003COutlet \u002F>`** for nested layouts — composition over configuration\n",{"name":5,"license":14,"description":7,"compatibility":24},"main","816c073aaf171300af3605b06f7ec5aa7370ef0b",".opencode\u002Fskills\u002Ftanstack\u002F02-router","https:\u002F\u002Fgithub.com\u002Flambda-solver\u002Flambdabench-pro","https:\u002F\u002Fgithub.com\u002Flambda-solver","2026-05-31 17:08:46",{"source":8,"skillName":5,"commands":43,"prompt":53,"zipAvailable":54},[44,47,50],{"tool":45,"command":46},"npx","npx skills add lambda-solver\u002Flambdabench-pro --skill tanstack-router",{"tool":48,"command":49},"bunx","bunx skills add lambda-solver\u002Flambdabench-pro --skill tanstack-router",{"tool":51,"command":52},"pnpm","pnpm dlx skills add lambda-solver\u002Flambdabench-pro --skill tanstack-router","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Flambda-solver\u002Flambdabench-pro\u002Fblob\u002Fmain\u002F.opencode\u002Fskills\u002Ftanstack\u002F02-router\u002FSKILL.md",true,[],[57,88,110,128,149,168],{"skillNo":58,"name":59,"nameZh":6,"description":60,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":61,"categories":62,"keywords":68,"publishedAt":31},"01M71H9FNA5D6Y4ANXD18Z1Z3X","tmux-workflow","Development workflow with tmux — run dev servers, Storybook, and background processes in persistent sessions with live logs, while keeping OpenCode free for chat","https:\u002F\u002Fgithub.com\u002Flambda-solver\u002Flambdabench-pro\u002Fblob\u002Fmain\u002Freference\u002Fghui\u002F.opencode\u002Fskills\u002Ftmux\u002FSKILL.md",[63],{"categoryNo":64,"categoryName":65,"taxonomyType":66,"taxonomyTypeDesc":67},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[69,70,71,72,73,74,75,76,77,78,79,24,80,81,82,83,84,85,86,87],"tmux","workflow","tmux workflow","chat","dev servers","background","processes","storybook","live","servers","run","with","logs","development workflow","free","dev","sessions","for","development",{"skillNo":89,"name":90,"nameZh":6,"description":91,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":92,"categories":93,"keywords":97,"publishedAt":31},"01M71H9DQJDAJVZX37NDN99D3P","04-anti-patterns","React anti-patterns to avoid — manual JSX repetition, useEffect misuse, reference instability, prop drilling, conditional hooks, and common performance traps","https:\u002F\u002Fgithub.com\u002Flambda-solver\u002Flambdabench-pro\u002Fblob\u002Fmain\u002Freference\u002Fghui\u002F.opencode\u002Fskills\u002Freact\u002Fpatterns\u002F04-anti-patterns\u002FSKILL.md",[94],{"categoryNo":95,"categoryName":96,"taxonomyType":66,"taxonomyTypeDesc":67},"01JBSEEDCAT000000000000009","前端开发",[98,99,100,101,102,103,104,105,106,107,108,24,109],"patterns","anti patterns","04 anti patterns","common","jsx","reference","conditional","hooks","manual","performance","anti-patterns","react",{"skillNo":111,"name":112,"nameZh":6,"description":113,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":114,"categories":115,"keywords":117,"publishedAt":31},"01M71H9BXF511W2R3B73S5P9ZN","03-state-management","React state management patterns — lifting state, colocation, URL state, server state with TanStack Query, local state with useState\u002FuseReducer","https:\u002F\u002Fgithub.com\u002Flambda-solver\u002Flambdabench-pro\u002Fblob\u002Fmain\u002Freference\u002Fghui\u002F.opencode\u002Fskills\u002Freact\u002Fpatterns\u002F03-state-management\u002FSKILL.md",[116],{"categoryNo":95,"categoryName":96,"taxonomyType":66,"taxonomyTypeDesc":67},[118,119,120,121,109,122,98,123,20,124,125,24,126,80,127],"management","state management","state","03 state management","query","URL","react state management","local","server","tanstack query",{"skillNo":129,"name":130,"nameZh":6,"description":131,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":132,"categories":133,"keywords":135,"publishedAt":31},"01M71H9AAGVWMYQ4NG82QPYCTE","02-component-composition","React component composition patterns — render props, compound components, list rendering with map, slot patterns, and layout primitives","https:\u002F\u002Fgithub.com\u002Flambda-solver\u002Flambdabench-pro\u002Fblob\u002Fmain\u002Freference\u002Fghui\u002F.opencode\u002Fskills\u002Freact\u002Fpatterns\u002F02-component-composition\u002FSKILL.md",[134],{"categoryNo":95,"categoryName":96,"taxonomyType":66,"taxonomyTypeDesc":67},[136,137,138,24,80,139,140,109,141,98,142,143,144,145,146,147,148],"02 component composition","component","Composition","compound","components","primitives","composition patterns","list","map","rendering","render","react component","layout",{"skillNo":150,"name":151,"nameZh":6,"description":152,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":153,"categories":154,"keywords":156,"publishedAt":31},"01M71H98RDXRQZDR496SRD906M","01-fp-style","React functional programming style — pure components, hooks conventions, Effect Atom integration, and Tailwind patterns","https:\u002F\u002Fgithub.com\u002Flambda-solver\u002Flambdabench-pro\u002Fblob\u002Fmain\u002Freference\u002Fghui\u002F.opencode\u002Fskills\u002Freact\u002Fpatterns\u002F01-fp-style\u002FSKILL.md",[155],{"categoryNo":95,"categoryName":96,"taxonomyType":66,"taxonomyTypeDesc":67},[157,158,159,98,160,161,24,162,109,163,140,105,164,165,166,167],"01 fp style","style","atom","conventions","integration","functional","programming","Tailwind","tailwind patterns","functional programming","effect",{"skillNo":169,"name":170,"nameZh":6,"description":171,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":172,"categories":173,"keywords":175,"publishedAt":31},"01M71H95PYGAWBS5C8KN0C4WGT","react-animation","React animation with react\u002Fmotion (Framer Motion) — declarative animations, gestures, layout animations, and performance best practices","https:\u002F\u002Fgithub.com\u002Flambda-solver\u002Flambdabench-pro\u002Fblob\u002Fmain\u002Freference\u002Fghui\u002F.opencode\u002Fskills\u002Freact\u002Fanimation\u002FSKILL.md",[174],{"categoryNo":95,"categoryName":96,"taxonomyType":66,"taxonomyTypeDesc":67},[109,176,177,107,178,24,148,179,180,80,181,182,183,184],"react animation","Animation","framer motion","motion","best practices","framer","gestures","animations","declarative"]