[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EAAJCZ66PB5HTYT6J9VPWM":3,"skill-same:01M6EAAJCZ66PB5HTYT6J9VPWM":70},{"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":28,"publishedAt":38,"linkOnly":39,"markdownContent":40,"markdownBody":41,"frontMatter":42,"refName":47,"commitSha":48,"skillDirectory":49,"forksCount":50,"repositoryHtmlUrl":51,"repositoryHomepageUrl":52,"ownerHtmlUrl":53,"ownerBlogUrl":6,"ownerDescription":54,"updatedAt":55,"install":56,"resources":69},"01M6EAAJCZ66PB5HTYT6J9VPWM","zustand-5",null,"Zustand 5 state management patterns. Trigger: When managing React state with Zustand.","ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",66,"Apache-2.0","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FGentleman-Programming\u002FGentleman-Skills\u002Fzustand-5\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[29,30,31,32,33,34,35,36,37],"zustand","zustand 5","react","state management","state","programming","management","patterns","trigger","2026-11-10 10:12:30",false,"---\nname: zustand-5\ndescription: >\n  Zustand 5 state management patterns.\n  Trigger: When managing React state with Zustand.\nlicense: Apache-2.0\nmetadata:\n  author: gentleman-programming\n  version: \"1.0\"\n---\n\n## Basic Store\n\n```typescript\nimport { create } from \"zustand\";\n\ninterface CounterStore {\n  count: number;\n  increment: () => void;\n  decrement: () => void;\n  reset: () => void;\n}\n\nconst useCounterStore = create\u003CCounterStore>((set) => ({\n  count: 0,\n  increment: () => set((state) => ({ count: state.count + 1 })),\n  decrement: () => set((state) => ({ count: state.count - 1 })),\n  reset: () => set({ count: 0 }),\n}));\n\n\u002F\u002F Usage\nfunction Counter() {\n  const { count, increment, decrement } = useCounterStore();\n  return (\n    \u003Cdiv>\n      \u003Cspan>{count}\u003C\u002Fspan>\n      \u003Cbutton onClick={increment}>+\u003C\u002Fbutton>\n      \u003Cbutton onClick={decrement}>-\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n## Persist Middleware\n\n```typescript\nimport { create } from \"zustand\";\nimport { persist } from \"zustand\u002Fmiddleware\";\n\ninterface SettingsStore {\n  theme: \"light\" | \"dark\";\n  language: string;\n  setTheme: (theme: \"light\" | \"dark\") => void;\n  setLanguage: (language: string) => void;\n}\n\nconst useSettingsStore = create\u003CSettingsStore>()(\n  persist(\n    (set) => ({\n      theme: \"light\",\n      language: \"en\",\n      setTheme: (theme) => set({ theme }),\n      setLanguage: (language) => set({ language }),\n    }),\n    {\n      name: \"settings-storage\",  \u002F\u002F localStorage key\n    }\n  )\n);\n```\n\n## Selectors (Zustand 5)\n\n```typescript\n\u002F\u002F ✅ Select specific fields to prevent unnecessary re-renders\nfunction UserName() {\n  const name = useUserStore((state) => state.name);\n  return \u003Cspan>{name}\u003C\u002Fspan>;\n}\n\n\u002F\u002F ✅ For multiple fields, use useShallow\nimport { useShallow } from \"zustand\u002Freact\u002Fshallow\";\n\nfunction UserInfo() {\n  const { name, email } = useUserStore(\n    useShallow((state) => ({ name: state.name, email: state.email }))\n  );\n  return \u003Cdiv>{name} - {email}\u003C\u002Fdiv>;\n}\n\n\u002F\u002F ❌ AVOID: Selecting entire store (causes re-render on any change)\nconst store = useUserStore();  \u002F\u002F Re-renders on ANY state change\n```\n\n## Async Actions\n\n```typescript\ninterface UserStore {\n  user: User | null;\n  loading: boolean;\n  error: string | null;\n  fetchUser: (id: string) => Promise\u003Cvoid>;\n}\n\nconst useUserStore = create\u003CUserStore>((set) => ({\n  user: null,\n  loading: false,\n  error: null,\n\n  fetchUser: async (id) => {\n    set({ loading: true, error: null });\n    try {\n      const response = await fetch(`\u002Fapi\u002Fusers\u002F${id}`);\n      const user = await response.json();\n      set({ user, loading: false });\n    } catch (error) {\n      set({ error: \"Failed to fetch user\", loading: false });\n    }\n  },\n}));\n```\n\n## Slices Pattern\n\n```typescript\n\u002F\u002F userSlice.ts\ninterface UserSlice {\n  user: User | null;\n  setUser: (user: User) => void;\n  clearUser: () => void;\n}\n\nconst createUserSlice = (set): UserSlice => ({\n  user: null,\n  setUser: (user) => set({ user }),\n  clearUser: () => set({ user: null }),\n});\n\n\u002F\u002F cartSlice.ts\ninterface CartSlice {\n  items: CartItem[];\n  addItem: (item: CartItem) => void;\n  removeItem: (id: string) => void;\n}\n\nconst createCartSlice = (set): CartSlice => ({\n  items: [],\n  addItem: (item) => set((state) => ({ items: [...state.items, item] })),\n  removeItem: (id) => set((state) => ({\n    items: state.items.filter(i => i.id !== id)\n  })),\n});\n\n\u002F\u002F store.ts\ntype Store = UserSlice & CartSlice;\n\nconst useStore = create\u003CStore>()((...args) => ({\n  ...createUserSlice(...args),\n  ...createCartSlice(...args),\n}));\n```\n\n## Immer Middleware\n\n```typescript\nimport { create } from \"zustand\";\nimport { immer } from \"zustand\u002Fmiddleware\u002Fimmer\";\n\ninterface TodoStore {\n  todos: Todo[];\n  addTodo: (text: string) => void;\n  toggleTodo: (id: string) => void;\n}\n\nconst useTodoStore = create\u003CTodoStore>()(\n  immer((set) => ({\n    todos: [],\n\n    addTodo: (text) => set((state) => {\n      \u002F\u002F Mutate directly with Immer!\n      state.todos.push({ id: crypto.randomUUID(), text, done: false });\n    }),\n\n    toggleTodo: (id) => set((state) => {\n      const todo = state.todos.find(t => t.id === id);\n      if (todo) todo.done = !todo.done;\n    }),\n  }))\n);\n```\n\n## DevTools\n\n```typescript\nimport { create } from \"zustand\";\nimport { devtools } from \"zustand\u002Fmiddleware\";\n\nconst useStore = create\u003CStore>()(\n  devtools(\n    (set) => ({\n      \u002F\u002F store definition\n    }),\n    { name: \"MyStore\" }  \u002F\u002F Name in Redux DevTools\n  )\n);\n```\n\n## Outside React\n\n```typescript\n\u002F\u002F Access store outside components\nconst { count, increment } = useCounterStore.getState();\nincrement();\n\n\u002F\u002F Subscribe to changes\nconst unsubscribe = useCounterStore.subscribe(\n  (state) => console.log(\"Count changed:\", state.count)\n);\n```\n\n## Keywords\nzustand, state management, react, store, persist, middleware\n\n","## Basic Store\n\n```typescript\nimport { create } from \"zustand\";\n\ninterface CounterStore {\n  count: number;\n  increment: () => void;\n  decrement: () => void;\n  reset: () => void;\n}\n\nconst useCounterStore = create\u003CCounterStore>((set) => ({\n  count: 0,\n  increment: () => set((state) => ({ count: state.count + 1 })),\n  decrement: () => set((state) => ({ count: state.count - 1 })),\n  reset: () => set({ count: 0 }),\n}));\n\n\u002F\u002F Usage\nfunction Counter() {\n  const { count, increment, decrement } = useCounterStore();\n  return (\n    \u003Cdiv>\n      \u003Cspan>{count}\u003C\u002Fspan>\n      \u003Cbutton onClick={increment}>+\u003C\u002Fbutton>\n      \u003Cbutton onClick={decrement}>-\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n## Persist Middleware\n\n```typescript\nimport { create } from \"zustand\";\nimport { persist } from \"zustand\u002Fmiddleware\";\n\ninterface SettingsStore {\n  theme: \"light\" | \"dark\";\n  language: string;\n  setTheme: (theme: \"light\" | \"dark\") => void;\n  setLanguage: (language: string) => void;\n}\n\nconst useSettingsStore = create\u003CSettingsStore>()(\n  persist(\n    (set) => ({\n      theme: \"light\",\n      language: \"en\",\n      setTheme: (theme) => set({ theme }),\n      setLanguage: (language) => set({ language }),\n    }),\n    {\n      name: \"settings-storage\",  \u002F\u002F localStorage key\n    }\n  )\n);\n```\n\n## Selectors (Zustand 5)\n\n```typescript\n\u002F\u002F ✅ Select specific fields to prevent unnecessary re-renders\nfunction UserName() {\n  const name = useUserStore((state) => state.name);\n  return \u003Cspan>{name}\u003C\u002Fspan>;\n}\n\n\u002F\u002F ✅ For multiple fields, use useShallow\nimport { useShallow } from \"zustand\u002Freact\u002Fshallow\";\n\nfunction UserInfo() {\n  const { name, email } = useUserStore(\n    useShallow((state) => ({ name: state.name, email: state.email }))\n  );\n  return \u003Cdiv>{name} - {email}\u003C\u002Fdiv>;\n}\n\n\u002F\u002F ❌ AVOID: Selecting entire store (causes re-render on any change)\nconst store = useUserStore();  \u002F\u002F Re-renders on ANY state change\n```\n\n## Async Actions\n\n```typescript\ninterface UserStore {\n  user: User | null;\n  loading: boolean;\n  error: string | null;\n  fetchUser: (id: string) => Promise\u003Cvoid>;\n}\n\nconst useUserStore = create\u003CUserStore>((set) => ({\n  user: null,\n  loading: false,\n  error: null,\n\n  fetchUser: async (id) => {\n    set({ loading: true, error: null });\n    try {\n      const response = await fetch(`\u002Fapi\u002Fusers\u002F${id}`);\n      const user = await response.json();\n      set({ user, loading: false });\n    } catch (error) {\n      set({ error: \"Failed to fetch user\", loading: false });\n    }\n  },\n}));\n```\n\n## Slices Pattern\n\n```typescript\n\u002F\u002F userSlice.ts\ninterface UserSlice {\n  user: User | null;\n  setUser: (user: User) => void;\n  clearUser: () => void;\n}\n\nconst createUserSlice = (set): UserSlice => ({\n  user: null,\n  setUser: (user) => set({ user }),\n  clearUser: () => set({ user: null }),\n});\n\n\u002F\u002F cartSlice.ts\ninterface CartSlice {\n  items: CartItem[];\n  addItem: (item: CartItem) => void;\n  removeItem: (id: string) => void;\n}\n\nconst createCartSlice = (set): CartSlice => ({\n  items: [],\n  addItem: (item) => set((state) => ({ items: [...state.items, item] })),\n  removeItem: (id) => set((state) => ({\n    items: state.items.filter(i => i.id !== id)\n  })),\n});\n\n\u002F\u002F store.ts\ntype Store = UserSlice & CartSlice;\n\nconst useStore = create\u003CStore>()((...args) => ({\n  ...createUserSlice(...args),\n  ...createCartSlice(...args),\n}));\n```\n\n## Immer Middleware\n\n```typescript\nimport { create } from \"zustand\";\nimport { immer } from \"zustand\u002Fmiddleware\u002Fimmer\";\n\ninterface TodoStore {\n  todos: Todo[];\n  addTodo: (text: string) => void;\n  toggleTodo: (id: string) => void;\n}\n\nconst useTodoStore = create\u003CTodoStore>()(\n  immer((set) => ({\n    todos: [],\n\n    addTodo: (text) => set((state) => {\n      \u002F\u002F Mutate directly with Immer!\n      state.todos.push({ id: crypto.randomUUID(), text, done: false });\n    }),\n\n    toggleTodo: (id) => set((state) => {\n      const todo = state.todos.find(t => t.id === id);\n      if (todo) todo.done = !todo.done;\n    }),\n  }))\n);\n```\n\n## DevTools\n\n```typescript\nimport { create } from \"zustand\";\nimport { devtools } from \"zustand\u002Fmiddleware\";\n\nconst useStore = create\u003CStore>()(\n  devtools(\n    (set) => ({\n      \u002F\u002F store definition\n    }),\n    { name: \"MyStore\" }  \u002F\u002F Name in Redux DevTools\n  )\n);\n```\n\n## Outside React\n\n```typescript\n\u002F\u002F Access store outside components\nconst { count, increment } = useCounterStore.getState();\nincrement();\n\n\u002F\u002F Subscribe to changes\nconst unsubscribe = useCounterStore.subscribe(\n  (state) => console.log(\"Count changed:\", state.count)\n);\n```\n\n## Keywords\nzustand, state management, react, store, persist, middleware\n\n",{"name":5,"license":15,"metadata":43,"description":46},{"author":44,"version":45},"gentleman-programming","1.0","Zustand 5 state management patterns. Trigger: When managing React state with Zustand.\n","main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002FGentleman-Programming\u002FGentleman-Skills\u002Fzustand-5",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":57,"prompt":67,"zipAvailable":68},[58,61,64],{"tool":59,"command":60},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill zustand-5",{"tool":62,"command":63},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill zustand-5",{"tool":65,"command":66},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill zustand-5","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FGentleman-Programming\u002FGentleman-Skills\u002Fzustand-5\u002FSKILL.md",true,[],[71,84,94,103,109,116],{"skillNo":72,"name":73,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":74,"licenseFileUrl":6,"sourceHtmlUrl":75,"categories":76,"keywords":80,"publishedAt":38},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[77],{"categoryNo":78,"categoryName":79,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[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":74,"licenseFileUrl":6,"sourceHtmlUrl":87,"categories":88,"keywords":90,"publishedAt":38},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[89],{"categoryNo":78,"categoryName":79,"taxonomyType":21,"taxonomyTypeDesc":22},[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":74,"licenseFileUrl":6,"sourceHtmlUrl":97,"categories":98,"keywords":99,"publishedAt":38},"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":74,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":108,"publishedAt":38},"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":74,"licenseFileUrl":6,"sourceHtmlUrl":112,"categories":113,"keywords":115,"publishedAt":38},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[114],{"categoryNo":78,"categoryName":79,"taxonomyType":21,"taxonomyTypeDesc":22},[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":74,"licenseFileUrl":6,"sourceHtmlUrl":119,"categories":120,"keywords":121,"publishedAt":38},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[118]]