[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71GP2MCDFMV0W18MYYVQ947":3,"skill-same:01M71GP2MCDFMV0W18MYYVQ947":62},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":29,"linkOnly":30,"markdownContent":31,"markdownBody":32,"frontMatter":33,"refName":34,"commitSha":35,"skillDirectory":36,"forksCount":37,"repositoryHtmlUrl":38,"repositoryHomepageUrl":6,"ownerHtmlUrl":39,"ownerBlogUrl":40,"ownerDescription":6,"updatedAt":41,"install":42,"resources":55},"01M71GP2MCDFMV0W18MYYVQ947","frontend-state-management",null,"lookatitude\u002Fguild","lookatitude","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F524917?v=4","01M71GJ2KGXFSJZKAZC5P1ZXXM","Miguel Pinto","01M71GJ2MH4SH9WJKP8M7XZZ0P",8,"MIT","https:\u002F\u002Fgithub.com\u002Flookatitude\u002Fguild\u002Fblob\u002Fmain\u002Fskills\u002Fspecialists\u002Ffrontend-state-management\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[23,24,25,26,27,28],"frontend","state management","state","management","frontend state","frontend state management","2026-11-10 10:12:30",false,"---\nname: frontend-state-management\ndescription: Designs client-side state architecture across frameworks — local vs global, server-state vs client-state separation (React Query \u002F SWR \u002F TanStack Query), store shape (Redux \u002F Zustand \u002F Pinia \u002F Svelte stores), selectors, and cache normalisation. Output: a state-shape decision plus the wiring code and a test pinning the boundary. Pulled by the `frontend` specialist. TRIGGER: \"where should this state live\", \"local vs global state for X\", \"set up React Query \u002F SWR \u002F TanStack for X\", \"design the Zustand \u002F Redux \u002F Pinia store for X\", \"normalise the cache for X\", \"share filter state across X\", \"add selectors for X\". DO NOT TRIGGER for: server-side data layer, schema, or query design (backend-data-layer — that's the source of truth; this is the client cache), API contract shape (backend-api-contract), React component internals \u002F hooks (use `frontend-react`), bundler config (use `frontend-bundler-config`), accessibility (use `frontend-a11y`), React Native runtime stores (mobile-react-native).\nwhen_to_use: The parent `frontend` specialist pulls this skill when the task requires deciding where state lives and how it is shaped, fetched, cached, and selected. Also fires on explicit user request.\ntype: specialist\n---\n\n# frontend-state-management\n\nThe right state lives in exactly one place, and the test pins which boundary owns it.\n\n## What you do\n\nDecide where each piece of state lives and how it is shaped, then wire it. The first call is always server-state vs client-state — they have different lifecycles and want different tools.\n\n- Separate server-state (fetched, cacheable, can go stale) from client-state (UI, ephemeral). Don't hand-manage fetched data in a global store — let a query cache own it.\n- Keep state local until two siblings need it; lift, then globalize, in that order — not the reverse.\n- Choose by need: a query cache (React Query \u002F SWR \u002F TanStack Query) for server-state; a lightweight store (Zustand \u002F Jotai \u002F Pinia \u002F Svelte stores) for shared client-state; Redux when its middleware and devtools discipline earn their weight.\n- Normalize cached collections by id; read through memoized selectors so a change to one row doesn't re-render the list.\n- Make cache invalidation explicit — keys, TTLs, and the mutations that trigger refetch.\n\n## Output shape\n\nA state-shape decision plus wiring:\n\n1. **State-shape decision** — what's server-state, what's client-state, where each lives, and why.\n2. **Store \u002F query setup** — the wiring (provider, store, query client) as code.\n3. **Selectors** — memoized accessors at the read sites.\n4. **Invalidation plan** — cache keys and when they refetch or reset.\n5. **Test** — pins the boundary (selector returns the derived value; cache invalidates on mutation).\n\n## Anti-patterns\n\n- Server data hand-managed in a global store — you reinvent caching, worse than the library.\n- Everything global — every component re-renders on every unrelated change.\n- Unmemoized selectors returning fresh object refs — defeats the framework's bail-out.\n- No invalidation story — stale data after mutations, or a refetch-the-world hammer.\n- Prop-drilling five levels deep when a store or context is the honest answer.\n- Derivable state stored and kept in sync by hand — two sources of truth, guaranteed drift.\n\n## Handoff\n\nReturn the state-shape decision and wiring to the invoking `frontend` specialist. The server contract behind the cache is `backend-api-contract` \u002F `backend-data-layer` territory — this skill owns the client cache, not the source of truth. Component internals consuming the state chain into `frontend-react`. This skill does not dispatch.\n","# frontend-state-management\n\nThe right state lives in exactly one place, and the test pins which boundary owns it.\n\n## What you do\n\nDecide where each piece of state lives and how it is shaped, then wire it. The first call is always server-state vs client-state — they have different lifecycles and want different tools.\n\n- Separate server-state (fetched, cacheable, can go stale) from client-state (UI, ephemeral). Don't hand-manage fetched data in a global store — let a query cache own it.\n- Keep state local until two siblings need it; lift, then globalize, in that order — not the reverse.\n- Choose by need: a query cache (React Query \u002F SWR \u002F TanStack Query) for server-state; a lightweight store (Zustand \u002F Jotai \u002F Pinia \u002F Svelte stores) for shared client-state; Redux when its middleware and devtools discipline earn their weight.\n- Normalize cached collections by id; read through memoized selectors so a change to one row doesn't re-render the list.\n- Make cache invalidation explicit — keys, TTLs, and the mutations that trigger refetch.\n\n## Output shape\n\nA state-shape decision plus wiring:\n\n1. **State-shape decision** — what's server-state, what's client-state, where each lives, and why.\n2. **Store \u002F query setup** — the wiring (provider, store, query client) as code.\n3. **Selectors** — memoized accessors at the read sites.\n4. **Invalidation plan** — cache keys and when they refetch or reset.\n5. **Test** — pins the boundary (selector returns the derived value; cache invalidates on mutation).\n\n## Anti-patterns\n\n- Server data hand-managed in a global store — you reinvent caching, worse than the library.\n- Everything global — every component re-renders on every unrelated change.\n- Unmemoized selectors returning fresh object refs — defeats the framework's bail-out.\n- No invalidation story — stale data after mutations, or a refetch-the-world hammer.\n- Prop-drilling five levels deep when a store or context is the honest answer.\n- Derivable state stored and kept in sync by hand — two sources of truth, guaranteed drift.\n\n## Handoff\n\nReturn the state-shape decision and wiring to the invoking `frontend` specialist. The server contract behind the cache is `backend-api-contract` \u002F `backend-data-layer` territory — this skill owns the client cache, not the source of truth. Component internals consuming the state chain into `frontend-react`. This skill does not dispatch.\n",{},"main","2e58b0360ca51ca3c96ca8e015ef5aba5738803d","skills\u002Fspecialists\u002Ffrontend-state-management",0,"https:\u002F\u002Fgithub.com\u002Flookatitude\u002Fguild","https:\u002F\u002Fgithub.com\u002Flookatitude","https:\u002F\u002Flookatitude.com","2026-11-06 03:55:18",{"source":7,"skillName":5,"commands":43,"prompt":53,"zipAvailable":54},[44,47,50],{"tool":45,"command":46},"npx","npx skills add lookatitude\u002Fguild --skill frontend-state-management",{"tool":48,"command":49},"bunx","bunx skills add lookatitude\u002Fguild --skill frontend-state-management",{"tool":51,"command":52},"pnpm","pnpm dlx skills add lookatitude\u002Fguild --skill frontend-state-management","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Flookatitude\u002Fguild\u002Fblob\u002Fmain\u002Fskills\u002Fspecialists\u002Ffrontend-state-management\u002FSKILL.md",true,[56],{"path":57,"resourceType":58,"resourceTypeDesc":59,"sizeBytes":60,"sourceHtmlUrl":61},"evals.json","REFERENCE","参考文档",735,"https:\u002F\u002Fgithub.com\u002Flookatitude\u002Fguild\u002Fblob\u002Fmain\u002Fskills\u002Fspecialists\u002Ffrontend-state-management\u002Fevals.json",[63,75,85,103,121,132],{"skillNo":64,"name":65,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":66,"categories":67,"keywords":68,"publishedAt":29},"01M71GQQ1ZAND0XQBS4GTSWYFK","technical-writer-user-manual","https:\u002F\u002Fgithub.com\u002Flookatitude\u002Fguild\u002Fblob\u002Fmain\u002Fskills\u002Fspecialists\u002Ftechnical-writer-user-manual\u002FSKILL.md",[],[69,70,71,72,73,74],"writer","technical","technical writer","technical writer user manual","manual","user",{"skillNo":76,"name":77,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":78,"categories":79,"keywords":80,"publishedAt":29},"01M71GQMQ71DQNH4A7REXRVFCB","technical-writer-release-notes","https:\u002F\u002Fgithub.com\u002Flookatitude\u002Fguild\u002Fblob\u002Fmain\u002Fskills\u002Fspecialists\u002Ftechnical-writer-release-notes\u002FSKILL.md",[],[81,69,82,83,84,70,71],"release","notes","technical writer release notes","release notes",{"skillNo":86,"name":87,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":88,"categories":89,"keywords":98,"publishedAt":29},"01M71GQJQT9G8QHE0A9SN01VE4","technical-writer-api-docs","https:\u002F\u002Fgithub.com\u002Flookatitude\u002Fguild\u002Fblob\u002Fmain\u002Fskills\u002Fspecialists\u002Ftechnical-writer-api-docs\u002FSKILL.md",[90,93],{"categoryNo":91,"categoryName":92,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":94,"categoryName":95,"taxonomyType":96,"taxonomyTypeDesc":97},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[99,70,71,100,101,102,69],"technical writer api docs","docs","api docs","api",{"skillNo":104,"name":105,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":114,"publishedAt":29},"01M71GQH3T5F23M2M298WXVAQ5","social-media-platform-post","https:\u002F\u002Fgithub.com\u002Flookatitude\u002Fguild\u002Fblob\u002Fmain\u002Fskills\u002Fspecialists\u002Fsocial-media-platform-post\u002FSKILL.md",[108,111],{"categoryNo":109,"categoryName":110,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000019","营销推广",{"categoryNo":112,"categoryName":113,"taxonomyType":96,"taxonomyTypeDesc":97},"01JBSEEDCAT000000000000035","市场营销",[115,116,117,118,119,120],"social media platform post","post","Media","platform","social","social media",{"skillNo":122,"name":123,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":124,"categories":125,"keywords":128,"publishedAt":29},"01M71GQFS4MJ4S8ZRK7KQNNPJE","social-media-engagement-templates","https:\u002F\u002Fgithub.com\u002Flookatitude\u002Fguild\u002Fblob\u002Fmain\u002Fskills\u002Fspecialists\u002Fsocial-media-engagement-templates\u002FSKILL.md",[126,127],{"categoryNo":109,"categoryName":110,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":112,"categoryName":113,"taxonomyType":96,"taxonomyTypeDesc":97},[119,129,117,130,131,120],"engagement","social media engagement templates","templates",{"skillNo":133,"name":134,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":135,"categories":136,"keywords":142,"publishedAt":29},"01M71GQEPZ5GX6NBFQ9H0W5E0C","social-media-content-calendar","https:\u002F\u002Fgithub.com\u002Flookatitude\u002Fguild\u002Fblob\u002Fmain\u002Fskills\u002Fspecialists\u002Fsocial-media-content-calendar\u002FSKILL.md",[137,138,139],{"categoryNo":109,"categoryName":110,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":112,"categoryName":113,"taxonomyType":96,"taxonomyTypeDesc":97},{"categoryNo":140,"categoryName":141,"taxonomyType":96,"taxonomyTypeDesc":97},"01JBSEEDCAT000000000000036","内容创作者",[143,144,119,120,145,146,117],"calendar","content calendar","social media content calendar","content"]