[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EMQDKBK0PDB60MXGGA5CCH":3,"skill-same:01M6EMQDKBK0PDB60MXGGA5CCH":69},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":27,"linkOnly":28,"markdownContent":29,"markdownBody":30,"frontMatter":31,"refName":32,"commitSha":33,"skillDirectory":34,"forksCount":35,"repositoryHtmlUrl":36,"repositoryHomepageUrl":37,"ownerHtmlUrl":38,"ownerBlogUrl":6,"ownerDescription":39,"updatedAt":40,"install":41,"resources":54},"01M6EMQDKBK0PDB60MXGGA5CCH","state-management",null,"TanStack Query + Zustand patterns.","ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fbarnhardt-enterprises-inc\u002Fstate-management\u002FSKILL.md",[],[19,20,21,22,23,24,25,26],"state management","state","management","tanstack","zustand","tanstack query","patterns","query","2026-11-10 10:12:30",false,"---\nname: state-management\ndescription: TanStack Query + Zustand patterns.\n---\n\n# State Management\n\n## Philosophy\n\n- **Server State** → TanStack Query\n- **Client State** → Zustand\n- **Form State** → React Hook Form + Zod\n- **URL State** → nuqs or searchParams\n\n## TanStack Query\n\n### Query Keys Factory\n```typescript\nexport const userKeys = {\n  all: ['users'] as const,\n  lists: () => [...userKeys.all, 'list'] as const,\n  list: (filters: Filters) => [...userKeys.lists(), filters] as const,\n  details: () => [...userKeys.all, 'detail'] as const,\n  detail: (id: string) => [...userKeys.details(), id] as const,\n};\n```\n\n### Hooks Pattern\n```typescript\nexport function useUsers(filters?: Filters) {\n  return useQuery({\n    queryKey: userKeys.list(filters ?? {}),\n    queryFn: () => getUsers(filters),\n  });\n}\n\nexport function useUser(id: string) {\n  return useQuery({\n    queryKey: userKeys.detail(id),\n    queryFn: () => getUser(id),\n    enabled: !!id,\n  });\n}\n\nexport function useCreateUser() {\n  const queryClient = useQueryClient();\n  return useMutation({\n    mutationFn: createUser,\n    onSuccess: () => {\n      queryClient.invalidateQueries({ queryKey: userKeys.lists() });\n    },\n  });\n}\n\nexport function useUpdateUser() {\n  const queryClient = useQueryClient();\n  return useMutation({\n    mutationFn: ({ id, data }: { id: string; data: UpdateUserInput }) =>\n      updateUser(id, data),\n    onSuccess: (_, { id }) => {\n      queryClient.invalidateQueries({ queryKey: userKeys.detail(id) });\n      queryClient.invalidateQueries({ queryKey: userKeys.lists() });\n    },\n  });\n}\n```\n\n## Zustand\n\n### Typed Store\n```typescript\ninterface UIStore {\n  sidebarOpen: boolean;\n  theme: 'light' | 'dark';\n  toggleSidebar: () => void;\n  setTheme: (theme: 'light' | 'dark') => void;\n}\n\nexport const useUIStore = create\u003CUIStore>((set) => ({\n  sidebarOpen: true,\n  theme: 'light',\n  toggleSidebar: () => set((s) => ({ sidebarOpen: !s.sidebarOpen })),\n  setTheme: (theme) => set({ theme }),\n}));\n```\n\n### Performance: Use Selectors\n```typescript\n\u002F\u002F CORRECT - Only re-renders when sidebarOpen changes\nconst sidebarOpen = useUIStore((s) => s.sidebarOpen);\n\n\u002F\u002F WRONG - Re-renders on ANY state change\nconst { sidebarOpen } = useUIStore();\n```\n\n### Persist Middleware\n```typescript\nimport { persist } from 'zustand\u002Fmiddleware';\n\nexport const useSettingsStore = create\u003CSettingsStore>()(\n  persist(\n    (set) => ({\n      language: 'en',\n      setLanguage: (language) => set({ language }),\n    }),\n    {\n      name: 'settings-storage',\n    }\n  )\n);\n```\n\n### Computed Values with Selectors\n```typescript\n\u002F\u002F Create a selector\nconst selectFilteredItems = (state: Store) =>\n  state.items.filter(item => item.active);\n\n\u002F\u002F Use in component\nconst filteredItems = useStore(selectFilteredItems);\n```\n\n## Form State: React Hook Form + Zod\n\n```typescript\nimport { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform\u002Fresolvers\u002Fzod';\nimport { z } from 'zod';\n\nconst schema = z.object({\n  name: z.string().min(1, 'Required'),\n  email: z.string().email('Invalid email'),\n});\n\ntype FormData = z.infer\u003Ctypeof schema>;\n\nexport function UserForm() {\n  const { register, handleSubmit, formState: { errors } } = useForm\u003CFormData>({\n    resolver: zodResolver(schema),\n  });\n\n  const onSubmit = (data: FormData) => {\n    \u002F\u002F data is typed and validated\n  };\n\n  return (\n    \u003Cform onSubmit={handleSubmit(onSubmit)}>\n      \u003Cinput {...register('name')} \u002F>\n      {errors.name && \u003Cspan>{errors.name.message}\u003C\u002Fspan>}\n\n      \u003Cinput {...register('email')} \u002F>\n      {errors.email && \u003Cspan>{errors.email.message}\u003C\u002Fspan>}\n\n      \u003Cbutton type=\"submit\">Submit\u003C\u002Fbutton>\n    \u003C\u002Fform>\n  );\n}\n```\n","# State Management\n\n## Philosophy\n\n- **Server State** → TanStack Query\n- **Client State** → Zustand\n- **Form State** → React Hook Form + Zod\n- **URL State** → nuqs or searchParams\n\n## TanStack Query\n\n### Query Keys Factory\n```typescript\nexport const userKeys = {\n  all: ['users'] as const,\n  lists: () => [...userKeys.all, 'list'] as const,\n  list: (filters: Filters) => [...userKeys.lists(), filters] as const,\n  details: () => [...userKeys.all, 'detail'] as const,\n  detail: (id: string) => [...userKeys.details(), id] as const,\n};\n```\n\n### Hooks Pattern\n```typescript\nexport function useUsers(filters?: Filters) {\n  return useQuery({\n    queryKey: userKeys.list(filters ?? {}),\n    queryFn: () => getUsers(filters),\n  });\n}\n\nexport function useUser(id: string) {\n  return useQuery({\n    queryKey: userKeys.detail(id),\n    queryFn: () => getUser(id),\n    enabled: !!id,\n  });\n}\n\nexport function useCreateUser() {\n  const queryClient = useQueryClient();\n  return useMutation({\n    mutationFn: createUser,\n    onSuccess: () => {\n      queryClient.invalidateQueries({ queryKey: userKeys.lists() });\n    },\n  });\n}\n\nexport function useUpdateUser() {\n  const queryClient = useQueryClient();\n  return useMutation({\n    mutationFn: ({ id, data }: { id: string; data: UpdateUserInput }) =>\n      updateUser(id, data),\n    onSuccess: (_, { id }) => {\n      queryClient.invalidateQueries({ queryKey: userKeys.detail(id) });\n      queryClient.invalidateQueries({ queryKey: userKeys.lists() });\n    },\n  });\n}\n```\n\n## Zustand\n\n### Typed Store\n```typescript\ninterface UIStore {\n  sidebarOpen: boolean;\n  theme: 'light' | 'dark';\n  toggleSidebar: () => void;\n  setTheme: (theme: 'light' | 'dark') => void;\n}\n\nexport const useUIStore = create\u003CUIStore>((set) => ({\n  sidebarOpen: true,\n  theme: 'light',\n  toggleSidebar: () => set((s) => ({ sidebarOpen: !s.sidebarOpen })),\n  setTheme: (theme) => set({ theme }),\n}));\n```\n\n### Performance: Use Selectors\n```typescript\n\u002F\u002F CORRECT - Only re-renders when sidebarOpen changes\nconst sidebarOpen = useUIStore((s) => s.sidebarOpen);\n\n\u002F\u002F WRONG - Re-renders on ANY state change\nconst { sidebarOpen } = useUIStore();\n```\n\n### Persist Middleware\n```typescript\nimport { persist } from 'zustand\u002Fmiddleware';\n\nexport const useSettingsStore = create\u003CSettingsStore>()(\n  persist(\n    (set) => ({\n      language: 'en',\n      setLanguage: (language) => set({ language }),\n    }),\n    {\n      name: 'settings-storage',\n    }\n  )\n);\n```\n\n### Computed Values with Selectors\n```typescript\n\u002F\u002F Create a selector\nconst selectFilteredItems = (state: Store) =>\n  state.items.filter(item => item.active);\n\n\u002F\u002F Use in component\nconst filteredItems = useStore(selectFilteredItems);\n```\n\n## Form State: React Hook Form + Zod\n\n```typescript\nimport { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform\u002Fresolvers\u002Fzod';\nimport { z } from 'zod';\n\nconst schema = z.object({\n  name: z.string().min(1, 'Required'),\n  email: z.string().email('Invalid email'),\n});\n\ntype FormData = z.infer\u003Ctypeof schema>;\n\nexport function UserForm() {\n  const { register, handleSubmit, formState: { errors } } = useForm\u003CFormData>({\n    resolver: zodResolver(schema),\n  });\n\n  const onSubmit = (data: FormData) => {\n    \u002F\u002F data is typed and validated\n  };\n\n  return (\n    \u003Cform onSubmit={handleSubmit(onSubmit)}>\n      \u003Cinput {...register('name')} \u002F>\n      {errors.name && \u003Cspan>{errors.name.message}\u003C\u002Fspan>}\n\n      \u003Cinput {...register('email')} \u002F>\n      {errors.email && \u003Cspan>{errors.email.message}\u003C\u002Fspan>}\n\n      \u003Cbutton type=\"submit\">Submit\u003C\u002Fbutton>\n    \u003C\u002Fform>\n  );\n}\n```\n",{"name":5,"description":7},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Faiskillstore\u002Fmarketplace\u002Fbarnhardt-enterprises-inc\u002Fstate-management",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":8,"skillName":5,"commands":42,"prompt":52,"zipAvailable":53},[43,46,49],{"tool":44,"command":45},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill state-management",{"tool":47,"command":48},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill state-management",{"tool":50,"command":51},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill state-management","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fbarnhardt-enterprises-inc\u002Fstate-management\u002FSKILL.md",true,[55,61,65],{"path":56,"resourceType":57,"resourceTypeDesc":58,"sizeBytes":59,"sourceHtmlUrl":60},"references\u002Ftanstack-query.md","REFERENCE","参考文档",2911,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fbarnhardt-enterprises-inc\u002Fstate-management\u002Freferences\u002Ftanstack-query.md",{"path":62,"resourceType":57,"resourceTypeDesc":58,"sizeBytes":63,"sourceHtmlUrl":64},"references\u002Fzustand.md",3153,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fbarnhardt-enterprises-inc\u002Fstate-management\u002Freferences\u002Fzustand.md",{"path":66,"resourceType":57,"resourceTypeDesc":58,"sizeBytes":67,"sourceHtmlUrl":68},"skill-report.json",12694,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fbarnhardt-enterprises-inc\u002Fstate-management\u002Fskill-report.json",[70,84,94,103,109,116],{"skillNo":71,"name":72,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":73,"categories":74,"keywords":80,"publishedAt":27},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[75],{"categoryNo":76,"categoryName":77,"taxonomyType":78,"taxonomyTypeDesc":79},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[81,82,83],"model","model hierarchy","model hierarchy skill",{"skillNo":85,"name":86,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":87,"categories":88,"keywords":90,"publishedAt":27},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[89],{"categoryNo":76,"categoryName":77,"taxonomyType":78,"taxonomyTypeDesc":79},[91,92,93],"MCP","zoom","zoom mcp",{"skillNo":95,"name":96,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":97,"categories":98,"keywords":99,"publishedAt":27},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[100,101,102,92],"sdk","zoom apps sdk","apps",{"skillNo":104,"name":105,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":108,"publishedAt":27},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[105],{"skillNo":110,"name":111,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":112,"categories":113,"keywords":115,"publishedAt":27},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[114],{"categoryNo":76,"categoryName":77,"taxonomyType":78,"taxonomyTypeDesc":79},[111],{"skillNo":117,"name":118,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":119,"categories":120,"keywords":121,"publishedAt":27},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[118]]