[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EGP4TMH0KB3RHVEEX2JSDQ":3,"skill-same:01M6EGP4TMH0KB3RHVEEX2JSDQ":45},{"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":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":20,"frontMatter":21,"refName":22,"commitSha":23,"skillDirectory":24,"forksCount":25,"repositoryHtmlUrl":26,"repositoryHomepageUrl":27,"ownerHtmlUrl":28,"ownerBlogUrl":6,"ownerDescription":29,"updatedAt":30,"install":31,"resources":44},"01M6EGP4TMH0KB3RHVEEX2JSDQ","xstate",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",66,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FTerminalSkills\u002Fskills\u002Fxstate\u002FSKILL.md",[],[5],"2026-11-10 10:12:30",false,"# XState\n\n## Overview\n\nXState models application logic as state machines. Instead of managing boolean flags (`isLoading`, `isError`, `isSuccess`), you define states and transitions explicitly — making impossible states impossible. Ideal for complex flows: checkout, onboarding, authentication, multi-step forms.\n\n## Instructions\n\n### Step 1: Define a Machine\n\n```typescript\n\u002F\u002F machines\u002FauthMachine.ts — Authentication state machine\nimport { setup, assign, fromPromise } from 'xstate'\n\nexport const authMachine = setup({\n  types: {\n    context: {} as {\n      user: { id: string; name: string; email: string } | null\n      error: string | null\n      retries: number\n    },\n    events: {} as\n      | { type: 'LOGIN'; email: string; password: string }\n      | { type: 'LOGOUT' }\n      | { type: 'RETRY' },\n  },\n  actors: {\n    loginUser: fromPromise(async ({ input }: { input: { email: string; password: string } }) => {\n      const res = await fetch('\u002Fapi\u002Fauth\u002Flogin', {\n        method: 'POST',\n        body: JSON.stringify(input),\n      })\n      if (!res.ok) throw new Error('Invalid credentials')\n      return res.json()\n    }),\n  },\n}).createMachine({\n  id: 'auth',\n  initial: 'idle',\n  context: { user: null, error: null, retries: 0 },\n\n  states: {\n    idle: {\n      on: { LOGIN: 'authenticating' },\n    },\n\n    authenticating: {\n      invoke: {\n        src: 'loginUser',\n        input: ({ event }) => ({ email: event.email, password: event.password }),\n        onDone: {\n          target: 'authenticated',\n          actions: assign({ user: ({ event }) => event.output, error: null }),\n        },\n        onError: {\n          target: 'error',\n          actions: assign({\n            error: ({ event }) => event.error.message,\n            retries: ({ context }) => context.retries + 1,\n          }),\n        },\n      },\n    },\n\n    authenticated: {\n      on: { LOGOUT: { target: 'idle', actions: assign({ user: null }) } },\n    },\n\n    error: {\n      on: {\n        RETRY: { target: 'authenticating', guard: ({ context }) => context.retries \u003C 3 },\n        LOGIN: 'authenticating',\n      },\n    },\n  },\n})\n```\n\n### Step 2: Use in React\n\n```tsx\n\u002F\u002F components\u002FLoginPage.tsx — XState in React\nimport { useMachine } from '@xstate\u002Freact'\nimport { authMachine } from '..\u002Fmachines\u002FauthMachine'\n\nexport function LoginPage() {\n  const [state, send] = useMachine(authMachine)\n\n  if (state.matches('authenticated')) {\n    return \u003Cdiv>Welcome, {state.context.user.name}!\u003C\u002Fdiv>\n  }\n\n  return (\n    \u003Cform onSubmit={(e) => {\n      e.preventDefault()\n      const form = new FormData(e.currentTarget)\n      send({\n        type: 'LOGIN',\n        email: form.get('email') as string,\n        password: form.get('password') as string,\n      })\n    }}>\n      \u003Cinput name=\"email\" type=\"email\" required \u002F>\n      \u003Cinput name=\"password\" type=\"password\" required \u002F>\n\n      {state.matches('error') && (\n        \u003Cp className=\"error\">{state.context.error}\u003C\u002Fp>\n      )}\n\n      \u003Cbutton disabled={state.matches('authenticating')}>\n        {state.matches('authenticating') ? 'Signing in...' : 'Sign In'}\n      \u003C\u002Fbutton>\n\n      {state.matches('error') && state.context.retries \u003C 3 && (\n        \u003Cbutton type=\"button\" onClick={() => send({ type: 'RETRY' })}>\n          Retry ({3 - state.context.retries} left)\n        \u003C\u002Fbutton>\n      )}\n    \u003C\u002Fform>\n  )\n}\n```\n\n## Guidelines\n\n- Use XState for complex flows (multi-step forms, checkout, real-time connections). Overkill for simple toggle state.\n- State machines prevent impossible states — you can't be \"loading\" and \"error\" simultaneously.\n- XState Visualizer (stately.ai\u002Fviz) renders your machine as a diagram — great for documentation.\n- For simple state: Zustand or Jotai. For complex stateful logic: XState.\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002FTerminalSkills\u002Fskills\u002Fxstate",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":7,"skillName":5,"commands":32,"prompt":42,"zipAvailable":43},[33,36,39],{"tool":34,"command":35},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill xstate",{"tool":37,"command":38},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill xstate",{"tool":40,"command":41},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill xstate","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FTerminalSkills\u002Fskills\u002Fxstate\u002FSKILL.md",true,[],[46,60,70,79,85,92],{"skillNo":47,"name":48,"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":49,"categories":50,"keywords":56,"publishedAt":18},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[51],{"categoryNo":52,"categoryName":53,"taxonomyType":54,"taxonomyTypeDesc":55},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[57,58,59],"model","model hierarchy","model hierarchy skill",{"skillNo":61,"name":62,"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":63,"categories":64,"keywords":66,"publishedAt":18},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[65],{"categoryNo":52,"categoryName":53,"taxonomyType":54,"taxonomyTypeDesc":55},[67,68,69],"MCP","zoom","zoom mcp",{"skillNo":71,"name":72,"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":73,"categories":74,"keywords":75,"publishedAt":18},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[76,77,78,68],"sdk","zoom apps sdk","apps",{"skillNo":80,"name":81,"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":82,"categories":83,"keywords":84,"publishedAt":18},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[81],{"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":91,"publishedAt":18},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[90],{"categoryNo":52,"categoryName":53,"taxonomyType":54,"taxonomyTypeDesc":55},[87],{"skillNo":93,"name":94,"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":95,"categories":96,"keywords":97,"publishedAt":18},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[94]]