[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6C4PDGB6ZZWBS35N3DF7PZZ":3,"skill-same:01M6C4PDGB6ZZWBS35N3DF7PZZ":89},{"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":26,"publishedAt":35,"linkOnly":36,"markdownContent":37,"markdownBody":38,"frontMatter":39,"refName":40,"commitSha":41,"skillDirectory":42,"forksCount":43,"repositoryHtmlUrl":44,"repositoryHomepageUrl":6,"ownerHtmlUrl":45,"ownerBlogUrl":46,"ownerDescription":47,"updatedAt":48,"install":49,"resources":62},"01M6C4PDGB6ZZWBS35N3DF7PZZ","xstate",null,"WHEN React state changes in response to an external answer — async submit, in-flight or loading flags, retries, cancellation, polling, optimistic updates, stale responses — or to an interaction with an interruptible middle, such as a drag or a gesture; or WHEN building, reviewing, testing, or visualising XState 5 actors and @xstate\u002Freact integrations; NOT for a value one event sets completely, such as a text draft, a focus flag, or a plain open and closed toggle; models typed lifecycles and renders legal Mermaid stateDiagram-v2 charts.","mintuz\u002Fskills","mintuz","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F447031?v=4","01M6BVWJYSVR4XQC9AQCEMWQRG","Adam Bulmer","01M6C4DCXKNYZB281YB3PZDJJG",35,"MIT","https:\u002F\u002Fgithub.com\u002Fmintuz\u002Fskills\u002Fblob\u002Fmain\u002Fsrc\u002Fweb\u002Fskills\u002Fxstate\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发",[5,27,28,29,30,31,32,33,34],"testing","react","mermaid","state","Charts","open","text","integrations","2026-11-10 10:12:30",false,"---\nname: xstate\ndescription: WHEN React state changes in response to an external answer — async submit, in-flight or loading flags, retries, cancellation, polling, optimistic updates, stale responses — or to an interaction with an interruptible middle, such as a drag or a gesture; or WHEN building, reviewing, testing, or visualising XState 5 actors and @xstate\u002Freact integrations; NOT for a value one event sets completely, such as a text draft, a focus flag, or a plain open and closed toggle; models typed lifecycles and renders legal Mermaid stateDiagram-v2 charts.\n---\n\n# XState\n\nTreat a statechart as an executable ownership model for time, concurrency, and resource lifetimes.\n\n## Recognise a hand-rolled statechart\n\nEach of these is a lifecycle already modelled by hand:\n\n- a `useState` flag for work in flight: `isSubmitting`, `isLoading`, `pending`;\n- a `.then`, `.catch`, or `await` block that sets two or more pieces of state in sequence;\n- a re-entry guard such as `if (submitting) return`;\n- a line that clears an error or a stale result before a retry;\n- a `useEffect` that starts asynchronous work and needs an ignore flag in its cleanup;\n- two booleans that must never both be true, such as `isLoading` with `error`;\n- a `setTimeout` or `setInterval` for retry, debounce, or polling that something must clear;\n- a `pointerdown`, `dragstart`, or gesture handler that binds listeners to the document and must unbind them;\n- handling for a response that arrives after cancel, replacement, or unmount.\n\nAny one of them leads to step 1, however small the request and whether or not the file imports `xstate`. When the code already exists, name each defect it has today and the wrong behaviour a user would see before proposing the machine that removes it (`principle-capture-the-baseline`).\n\nFor a visualisation-only request, inspect the current machine source and go to step 6 instead.\n\n## 1. Establish the temporal boundary\n\nInventory the mounted journey, external authority, live resources, concurrent concerns, retry and cancellation policy, and every source of stale or duplicate work. Inspect existing actors and runtime integrations, and confirm the installed XState major version; the XState 4 and 5 APIs differ.\n\nUse XState only where ordering, concurrency, retries, cancellation, stale results, or resource lifetimes make the behaviour temporal. Classify with two tests, by what they show, not by what the state renders:\n\n1. An external answer (a network response, a timer, another actor, the platform) makes state temporal whatever it looks like on screen. A disabled button or a spinner presents temporal state; it is not presentation state.\n2. Direct user input creates a lifecycle whenever the interaction has an interruptible middle: a drag holds pointer capture, cancels on Escape, and must release on unmount; a panel that animates shut has a closing phase.\n\nState belongs to the UI framework only when both tests come back empty: one event sets the value completely, leaving no phase to interrupt and nothing to dispose.\n\n**Complete when:** every temporal responsibility has one named owner, and every proposed actor owns at least one distinct lifecycle or resource.\n\n## 2. Model the journey\n\nRead [modelling.md](references\u002Fmodelling.md) before creating or changing a machine. Apply it to the actor boundary, typed factory, event and command unions, lifecycle states, transition placement, hierarchy, parallel regions, and readiness joins.\n\nBefore creating the file, find which layer owns machines: architecture tests, import-boundary rules such as `eslint-plugin-boundaries` or `dependency-cruiser`, `CLAUDE.md`, architecture decision records, and the directory holding existing machines. A correct machine in a forbidden directory fails CI.\n\n**Complete when:** the machine sits in the layer the repository's own rules assign to machines, mutually exclusive meanings are states, independent concerns are parallel only when they have independent lifecycles, and each transition sits at the narrowest state that owns it (`principle-model-the-domain`).\n\n## 3. Own effects and convergence\n\nRead [lifecycles.md](references\u002Flifecycles.md) whenever the feature invokes asynchronous work, owns a live handle, retries, cancels, accepts optimistic state, or waits for external authority. Keep handles inside invoked actors and fence work by identity.\n\n**Complete when:** state exit or parent stop disposes every resource, stale and duplicate results are harmless, retry timers cancel with their lifecycle, and authoritative convergence—not an optimistic acknowledgement—confirms completion.\n\n## 4. Integrate React narrowly\n\nRead [react.md](references\u002Freact.md) for any `@xstate\u002Freact` surface. Let the route or feature boundary own `useActorRef`, expose typed actor refs to descendants, and subscribe through focused selectors.\n\nRun both step 1 tests over every `useState` you write or keep, and state the verdict in your reply so the user can overrule it. Where the tests are decisive, act and report the call in one line: *\"`isSubmitting` is set by the request, so it moved into the machine as `submitting`.\"* Where the call is genuinely close (a real but small lifecycle, or a machine the repository's layer rules would push far from its component), ask the user before building: name the state, name the phase that makes it a lifecycle, and ask whether it belongs in the machine.\n\n**Complete when:** every retained `useState` holds a value one event sets completely, no React state duplicates a fact an external answer owns, actor-derived status and permissions have one pure derivation, and each component subscribes only to values it renders or uses (`principle-derive-from-one-owner`).\n\n## 5. Prove behaviour through actors\n\nRead [testing.md](references\u002Ftesting.md) before writing or reviewing tests. Drive real actors with typed public events and fake ports; cover positive behaviour, negative space, stale identities, retries, cancellation, convergence, and teardown (`principle-test-behavior-not-implementation`).\n\n**Complete when:** tests observe public actor behaviour, exactly-once cleanup is demonstrated, `sendParent` behaviour is exercised through a listening parent, and any model-based graph coverage is justified by chart complexity.\n\n## 6. Render the statecharts\n\nRead [diagramming.md](references\u002Fdiagramming.md) whenever the user asks for a diagram. After designing or changing any machine, render or update its diagrams even unasked.\n\n**Complete when:** every designed or changed machine has a source-grounded diagram, composite and concurrent boundaries are legal, parser-sensitive labels are safe, and render validation is reported accurately.\n\n## Finish\n\nType-check the code against the project's installed XState and React adapters, run the actor and UI tests, and regenerate the diagrams from the final machine definitions.\n\n**Complete when:** the implementation, tests, and diagrams account for every temporal branch and resource lifetime, without duplicating authoritative truth or presentation derivations.\n","# XState\n\nTreat a statechart as an executable ownership model for time, concurrency, and resource lifetimes.\n\n## Recognise a hand-rolled statechart\n\nEach of these is a lifecycle already modelled by hand:\n\n- a `useState` flag for work in flight: `isSubmitting`, `isLoading`, `pending`;\n- a `.then`, `.catch`, or `await` block that sets two or more pieces of state in sequence;\n- a re-entry guard such as `if (submitting) return`;\n- a line that clears an error or a stale result before a retry;\n- a `useEffect` that starts asynchronous work and needs an ignore flag in its cleanup;\n- two booleans that must never both be true, such as `isLoading` with `error`;\n- a `setTimeout` or `setInterval` for retry, debounce, or polling that something must clear;\n- a `pointerdown`, `dragstart`, or gesture handler that binds listeners to the document and must unbind them;\n- handling for a response that arrives after cancel, replacement, or unmount.\n\nAny one of them leads to step 1, however small the request and whether or not the file imports `xstate`. When the code already exists, name each defect it has today and the wrong behaviour a user would see before proposing the machine that removes it (`principle-capture-the-baseline`).\n\nFor a visualisation-only request, inspect the current machine source and go to step 6 instead.\n\n## 1. Establish the temporal boundary\n\nInventory the mounted journey, external authority, live resources, concurrent concerns, retry and cancellation policy, and every source of stale or duplicate work. Inspect existing actors and runtime integrations, and confirm the installed XState major version; the XState 4 and 5 APIs differ.\n\nUse XState only where ordering, concurrency, retries, cancellation, stale results, or resource lifetimes make the behaviour temporal. Classify with two tests, by what they show, not by what the state renders:\n\n1. An external answer (a network response, a timer, another actor, the platform) makes state temporal whatever it looks like on screen. A disabled button or a spinner presents temporal state; it is not presentation state.\n2. Direct user input creates a lifecycle whenever the interaction has an interruptible middle: a drag holds pointer capture, cancels on Escape, and must release on unmount; a panel that animates shut has a closing phase.\n\nState belongs to the UI framework only when both tests come back empty: one event sets the value completely, leaving no phase to interrupt and nothing to dispose.\n\n**Complete when:** every temporal responsibility has one named owner, and every proposed actor owns at least one distinct lifecycle or resource.\n\n## 2. Model the journey\n\nRead [modelling.md](references\u002Fmodelling.md) before creating or changing a machine. Apply it to the actor boundary, typed factory, event and command unions, lifecycle states, transition placement, hierarchy, parallel regions, and readiness joins.\n\nBefore creating the file, find which layer owns machines: architecture tests, import-boundary rules such as `eslint-plugin-boundaries` or `dependency-cruiser`, `CLAUDE.md`, architecture decision records, and the directory holding existing machines. A correct machine in a forbidden directory fails CI.\n\n**Complete when:** the machine sits in the layer the repository's own rules assign to machines, mutually exclusive meanings are states, independent concerns are parallel only when they have independent lifecycles, and each transition sits at the narrowest state that owns it (`principle-model-the-domain`).\n\n## 3. Own effects and convergence\n\nRead [lifecycles.md](references\u002Flifecycles.md) whenever the feature invokes asynchronous work, owns a live handle, retries, cancels, accepts optimistic state, or waits for external authority. Keep handles inside invoked actors and fence work by identity.\n\n**Complete when:** state exit or parent stop disposes every resource, stale and duplicate results are harmless, retry timers cancel with their lifecycle, and authoritative convergence—not an optimistic acknowledgement—confirms completion.\n\n## 4. Integrate React narrowly\n\nRead [react.md](references\u002Freact.md) for any `@xstate\u002Freact` surface. Let the route or feature boundary own `useActorRef`, expose typed actor refs to descendants, and subscribe through focused selectors.\n\nRun both step 1 tests over every `useState` you write or keep, and state the verdict in your reply so the user can overrule it. Where the tests are decisive, act and report the call in one line: *\"`isSubmitting` is set by the request, so it moved into the machine as `submitting`.\"* Where the call is genuinely close (a real but small lifecycle, or a machine the repository's layer rules would push far from its component), ask the user before building: name the state, name the phase that makes it a lifecycle, and ask whether it belongs in the machine.\n\n**Complete when:** every retained `useState` holds a value one event sets completely, no React state duplicates a fact an external answer owns, actor-derived status and permissions have one pure derivation, and each component subscribes only to values it renders or uses (`principle-derive-from-one-owner`).\n\n## 5. Prove behaviour through actors\n\nRead [testing.md](references\u002Ftesting.md) before writing or reviewing tests. Drive real actors with typed public events and fake ports; cover positive behaviour, negative space, stale identities, retries, cancellation, convergence, and teardown (`principle-test-behavior-not-implementation`).\n\n**Complete when:** tests observe public actor behaviour, exactly-once cleanup is demonstrated, `sendParent` behaviour is exercised through a listening parent, and any model-based graph coverage is justified by chart complexity.\n\n## 6. Render the statecharts\n\nRead [diagramming.md](references\u002Fdiagramming.md) whenever the user asks for a diagram. After designing or changing any machine, render or update its diagrams even unasked.\n\n**Complete when:** every designed or changed machine has a source-grounded diagram, composite and concurrent boundaries are legal, parser-sensitive labels are safe, and render validation is reported accurately.\n\n## Finish\n\nType-check the code against the project's installed XState and React adapters, run the actor and UI tests, and regenerate the diagrams from the final machine definitions.\n\n**Complete when:** the implementation, tests, and diagrams account for every temporal branch and resource lifetime, without duplicating authoritative truth or presentation derivations.\n",{"name":5,"description":7},"main","4e0a12b5048eac78a3ace4feee657873cdd530ef","src\u002Fweb\u002Fskills\u002Fxstate",7,"https:\u002F\u002Fgithub.com\u002Fmintuz\u002Fskills","https:\u002F\u002Fgithub.com\u002Fmintuz","http:\u002F\u002Fwww.mintuz.com","Working at @monzo, Previously worked at Moonpig, @booking and @bbc","2026-11-13 19:21:11",{"source":8,"skillName":5,"commands":50,"prompt":60,"zipAvailable":61},[51,54,57],{"tool":52,"command":53},"npx","npx skills add mintuz\u002Fskills --skill xstate",{"tool":55,"command":56},"bunx","bunx skills add mintuz\u002Fskills --skill xstate",{"tool":58,"command":59},"pnpm","pnpm dlx skills add mintuz\u002Fskills --skill xstate","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fmintuz\u002Fskills\u002Fblob\u002Fmain\u002Fsrc\u002Fweb\u002Fskills\u002Fxstate\u002FSKILL.md",true,[63,69,73,77,81,85],{"path":64,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":67,"sourceHtmlUrl":68},"agents\u002Fopenai.yaml","REFERENCE","参考文档",196,"https:\u002F\u002Fgithub.com\u002Fmintuz\u002Fskills\u002Fblob\u002Fmain\u002Fsrc\u002Fweb\u002Fskills\u002Fxstate\u002Fagents\u002Fopenai.yaml",{"path":70,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":71,"sourceHtmlUrl":72},"references\u002Fdiagramming.md",6114,"https:\u002F\u002Fgithub.com\u002Fmintuz\u002Fskills\u002Fblob\u002Fmain\u002Fsrc\u002Fweb\u002Fskills\u002Fxstate\u002Freferences\u002Fdiagramming.md",{"path":74,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":75,"sourceHtmlUrl":76},"references\u002Flifecycles.md",7674,"https:\u002F\u002Fgithub.com\u002Fmintuz\u002Fskills\u002Fblob\u002Fmain\u002Fsrc\u002Fweb\u002Fskills\u002Fxstate\u002Freferences\u002Flifecycles.md",{"path":78,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":79,"sourceHtmlUrl":80},"references\u002Fmodelling.md",4074,"https:\u002F\u002Fgithub.com\u002Fmintuz\u002Fskills\u002Fblob\u002Fmain\u002Fsrc\u002Fweb\u002Fskills\u002Fxstate\u002Freferences\u002Fmodelling.md",{"path":82,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":83,"sourceHtmlUrl":84},"references\u002Freact.md",2540,"https:\u002F\u002Fgithub.com\u002Fmintuz\u002Fskills\u002Fblob\u002Fmain\u002Fsrc\u002Fweb\u002Fskills\u002Fxstate\u002Freferences\u002Freact.md",{"path":86,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":87,"sourceHtmlUrl":88},"references\u002Ftesting.md",3717,"https:\u002F\u002Fgithub.com\u002Fmintuz\u002Fskills\u002Fblob\u002Fmain\u002Fsrc\u002Fweb\u002Fskills\u002Fxstate\u002Freferences\u002Ftesting.md",[90,113,126,147,164,180],{"skillNo":91,"name":92,"nameZh":6,"description":93,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":94,"categories":95,"keywords":104,"publishedAt":35},"01M6C4PB6VVC2X19B63B7YNH0T","web-design","WHEN refining UI layout, typography, color, or polish; NOT code implementation; provides concise principles for intentional, legible design.","https:\u002F\u002Fgithub.com\u002Fmintuz\u002Fskills\u002Fblob\u002Fmain\u002Fsrc\u002Fweb\u002Fskills\u002Fweb-design\u002FSKILL.md",[96,101],{"categoryNo":97,"categoryName":98,"taxonomyType":99,"taxonomyTypeDesc":100},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",{"categoryNo":102,"categoryName":103,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",[105,106,107,108,109,110,111,112],"web","design","web design","code","code implementation","polish","ui","typography",{"skillNo":114,"name":115,"nameZh":6,"description":116,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":117,"categories":118,"keywords":120,"publishedAt":35},"01M6C4P8D92GJDA49V7X1CZXEV","tailwind","USE WHEN writing, fixing or reviewing styling in a project that uses Tailwind CSS, even a one-class change or a request that does not name Tailwind: colours, focus rings, spacing, class names chosen by a prop, map or CVA variants, theme tokens and dark mode in the Tailwind stylesheet or tailwind.config, setup or upgrades (if unsure whether the project uses Tailwind, check package.json or the main stylesheet first); NOT WHEN writing plain CSS or Sass in a project without Tailwind; produces class names Tailwind can find, syntax for the installed major version, visible focus indicators, and no unrequested dependency or invented brand value.","https:\u002F\u002Fgithub.com\u002Fmintuz\u002Fskills\u002Fblob\u002Fmain\u002Fsrc\u002Fweb\u002Fskills\u002Ftailwind\u002FSKILL.md",[119],{"categoryNo":102,"categoryName":103,"taxonomyType":21,"taxonomyTypeDesc":22},[121,122,123,124,106,125],"Tailwind","libraries","component","css","design systems",{"skillNo":127,"name":128,"nameZh":6,"description":129,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":130,"categories":131,"keywords":135,"publishedAt":35},"01M6C4P5VWQ69Q32DA0634GDJY","refactoring","WHEN you need a plan to refactor, restructure, or clean up working code and the test result is known, either green or a recorded failing set; NOT for new feature delivery or any behavior change; reversible-baseline safety with prioritized improvements.","https:\u002F\u002Fgithub.com\u002Fmintuz\u002Fskills\u002Fblob\u002Fmain\u002Fsrc\u002Fweb\u002Fskills\u002Frefactoring\u002FSKILL.md",[132],{"categoryNo":133,"categoryName":134,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000007","代码审查",[128,136,137,108,138,139,140,141,142,143,144,145,146],"SET","up","feature delivery","test","new feature","plan","change","behavior","baseline","Safety","refactor",{"skillNo":148,"name":28,"nameZh":6,"description":149,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":150,"categories":151,"keywords":154,"publishedAt":35},"01M6C4P345APEFEX00J8T7QMXQ","USE WHEN changing the logic, data, props, state, Effects or rendered text of a React component, hook or page, even a one-line change; NOT WHEN the request is styling only (class names, Tailwind, CSS, dark mode, spacing, shadows) or tests only, or when it models submit, in-flight, loading, retry or failure states, even for a named React form (xstate covers that, including its React wiring); applies React 19 composition, state, Effect, structure, API and performance rules with only the project's installed libraries.","https:\u002F\u002Fgithub.com\u002Fmintuz\u002Fskills\u002Fblob\u002Fmain\u002Fsrc\u002Fweb\u002Fskills\u002Freact\u002FSKILL.md",[152,153],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[28,155,156,157,124,121,158,27,159,108,160,161,162,163,30,139],"management","styling","state management","performance","hooks","components","architecture","api","react components",{"skillNo":165,"name":166,"nameZh":6,"description":167,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":168,"categories":169,"keywords":172,"publishedAt":35},"01M6C4P0DK385QBG3B3S86TQV2","react-testing","USE WHEN writing, fixing or reviewing a React Testing Library test for a component, hook or context provider, even one small test, or when asked for an end-to-end journey inside a Vitest or React Testing Library suite; NOT WHEN changing the component itself (react), testing XState actors or @xstate\u002Freact (xstate), or writing a Playwright or Cypress test; covers renderHook, providers, async results, forms and false-pass anti-patterns, and declines end-to-end journeys with the testable slices.","https:\u002F\u002Fgithub.com\u002Fmintuz\u002Fskills\u002Fblob\u002Fmain\u002Fsrc\u002Fweb\u002Fskills\u002Freact-testing\u002FSKILL.md",[170,171],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[28,173,27,174,175,159,176,177,178,160,179,163],"react testing","context","anti-patterns","e2e","library","testing library","Providers",{"skillNo":181,"name":182,"nameZh":6,"description":183,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":184,"categories":185,"keywords":188,"publishedAt":35},"01M6C4NY0FTYGTS7THKRAC20T3","frontend-testing","USE WHEN testing non-React UI (vanilla JavaScript or TypeScript DOM code, a web component, or a Vue, Svelte or Angular component) with DOM Testing Library in Vitest or Jest with jsdom: writing, fixing or reviewing a test, or a request to add an end-to-end journey or a layout check to that suite; NOT WHEN the code or project uses React or React Testing Library (use web:react-testing), for XState actors (web:xstate), or for Playwright, Cypress or screenshot-comparison work in a real browser; covers queries, accessible names, userEvent, async results, network stubs and assertions that pass for the wrong reason, and declines what jsdom cannot prove while offering the part that fits.","https:\u002F\u002Fgithub.com\u002Fmintuz\u002Fskills\u002Fblob\u002Fmain\u002Fsrc\u002Fweb\u002Fskills\u002Ffrontend-testing\u002FSKILL.md",[186,187],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[189,27,190,191,192,193,143,177,178,111],"frontend","frontend testing","browser","first","regression"]