[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6C4GEH65PCNZPRYA3VGZPC8":3,"skill-same:01M6C4GEH65PCNZPRYA3VGZPC8":54},{"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":26,"linkOnly":27,"markdownContent":28,"markdownBody":29,"frontMatter":30,"refName":31,"commitSha":32,"skillDirectory":33,"forksCount":34,"repositoryHtmlUrl":35,"repositoryHomepageUrl":6,"ownerHtmlUrl":36,"ownerBlogUrl":37,"ownerDescription":38,"updatedAt":39,"install":40,"resources":53},"01M6C4GEH65PCNZPRYA3VGZPC8","how",null,"WHEN explaining code flow, current execution, or state ownership; NOT for historical rationale or redesign; gives an evidence-grounded walkthrough","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\u002Fcore\u002Fskills\u002Fhow\u002FSKILL.md",[],[5,19,20,21,22,23,24,25],"code","state","flow","execution","walkthrough","redesign","evidence","2026-11-10 10:12:30",false,"---\nname: how\ndescription: \"WHEN explaining code flow, current execution, or state ownership; NOT for historical rationale or redesign; gives an evidence-grounded walkthrough\"\n---\n\n# How\n\nExplain the current implementation as a path a reader can follow. Keep historical motivation for `why` and redesign for a separate authorized task.\n\n1. Bound the question and inspect current source plus its relevant immediate callers, configuration and tests. State an interpretation when the referent is ambiguous. Handle a narrow module directly; optional independent exploration must earn its cost and follow host authorization, with no required subprocess, model or routing file.\n2. Trace the concrete trigger through each meaningful boundary: inputs and transformations, state owner, effects and observable result. Include failure, cancellation, retry and teardown paths where they change the outcome. Name process\u002Flifecycle ownership for app\u002Fextension flows and actor\u002Fresource ownership for reactive flows; use the implementation's actual architecture.\n3. Anchor consequential statements to source locators. Distinguish source-derived behavior, test results and observed runtime. Resolve revision\u002Fbuild\u002Fenvironment mismatches before claiming what the current app does; an old screenshot cannot contradict an unobserved new build conclusively. Mark unknown paths instead of filling them with plausible details.\n4. Answer at the question's scale: lead with the result, then the execution sequence, ownership and important gotchas. Add a small cited diagram only when it clarifies boundaries. Explain enough to predict behavior without producing annotated source or speculative rationale.\n","# How\n\nExplain the current implementation as a path a reader can follow. Keep historical motivation for `why` and redesign for a separate authorized task.\n\n1. Bound the question and inspect current source plus its relevant immediate callers, configuration and tests. State an interpretation when the referent is ambiguous. Handle a narrow module directly; optional independent exploration must earn its cost and follow host authorization, with no required subprocess, model or routing file.\n2. Trace the concrete trigger through each meaningful boundary: inputs and transformations, state owner, effects and observable result. Include failure, cancellation, retry and teardown paths where they change the outcome. Name process\u002Flifecycle ownership for app\u002Fextension flows and actor\u002Fresource ownership for reactive flows; use the implementation's actual architecture.\n3. Anchor consequential statements to source locators. Distinguish source-derived behavior, test results and observed runtime. Resolve revision\u002Fbuild\u002Fenvironment mismatches before claiming what the current app does; an old screenshot cannot contradict an unobserved new build conclusively. Mark unknown paths instead of filling them with plausible details.\n4. Answer at the question's scale: lead with the result, then the execution sequence, ownership and important gotchas. Add a small cited diagram only when it clarifies boundaries. Explain enough to predict behavior without producing annotated source or speculative rationale.\n",{"name":5,"description":7},"main","4e0a12b5048eac78a3ace4feee657873cdd530ef","src\u002Fcore\u002Fskills\u002Fhow",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-10 23:06:05",{"source":8,"skillName":5,"commands":41,"prompt":51,"zipAvailable":52},[42,45,48],{"tool":43,"command":44},"npx","npx skills add mintuz\u002Fskills --skill how",{"tool":46,"command":47},"bunx","bunx skills add mintuz\u002Fskills --skill how",{"tool":49,"command":50},"pnpm","pnpm dlx skills add mintuz\u002Fskills --skill how","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fmintuz\u002Fskills\u002Fblob\u002Fmain\u002Fsrc\u002Fcore\u002Fskills\u002Fhow\u002FSKILL.md",true,[],[55,77,99,112,133,150],{"skillNo":56,"name":57,"nameZh":6,"description":58,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":59,"categories":60,"keywords":69,"publishedAt":26},"01M6C4PDGB6ZZWBS35N3DF7PZZ","xstate","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.","https:\u002F\u002Fgithub.com\u002Fmintuz\u002Fskills\u002Fblob\u002Fmain\u002Fsrc\u002Fweb\u002Fskills\u002Fxstate\u002FSKILL.md",[61,66],{"categoryNo":62,"categoryName":63,"taxonomyType":64,"taxonomyTypeDesc":65},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",{"categoryNo":67,"categoryName":68,"taxonomyType":64,"taxonomyTypeDesc":65},"01JBSEEDCAT000000000000009","前端开发",[57,70,71,72,73,74,20,75,76],"integrations","react","text","open","Charts","mermaid","testing",{"skillNo":78,"name":79,"nameZh":6,"description":80,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":81,"categories":82,"keywords":91,"publishedAt":26},"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",[83,86],{"categoryNo":84,"categoryName":85,"taxonomyType":64,"taxonomyTypeDesc":65},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":87,"categoryName":88,"taxonomyType":89,"taxonomyTypeDesc":90},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[92,93,94,19,95,96,97,98],"design","web","web design","code implementation","ui","polish","typography",{"skillNo":100,"name":101,"nameZh":6,"description":102,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":103,"categories":104,"keywords":106,"publishedAt":26},"01M6C4P8D92GJDA49V7X1CZXEV","tailwind","WHEN building design systems or component libraries with Tailwind CSS; covers design tokens, CVA patterns and dark mode.","https:\u002F\u002Fgithub.com\u002Fmintuz\u002Fskills\u002Fblob\u002Fmain\u002Fsrc\u002Fweb\u002Fskills\u002Ftailwind\u002FSKILL.md",[105],{"categoryNo":84,"categoryName":85,"taxonomyType":64,"taxonomyTypeDesc":65},[107,92,108,109,110,111],"Tailwind","css","component","libraries","design systems",{"skillNo":113,"name":114,"nameZh":6,"description":115,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":116,"categories":117,"keywords":121,"publishedAt":26},"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",[118],{"categoryNo":119,"categoryName":120,"taxonomyType":64,"taxonomyTypeDesc":65},"01JBSEEDCAT000000000000007","代码审查",[114,122,123,124,125,126,127,128,129,130,131,19,132],"baseline","SET","plan","behavior","new feature","up","Safety","test","change","feature delivery","refactor",{"skillNo":134,"name":71,"nameZh":6,"description":135,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":136,"categories":137,"keywords":140,"publishedAt":26},"01M6C4P345APEFEX00J8T7QMXQ","WHEN building or changing React components, pages, hooks, effects, or apps, including edits to existing components; NOT for test code (react-testing) or styling (css, tailwind); enforces scalable architecture, state management, API layer, performance patterns.","https:\u002F\u002Fgithub.com\u002Fmintuz\u002Fskills\u002Fblob\u002Fmain\u002Fsrc\u002Fweb\u002Fskills\u002Freact\u002FSKILL.md",[138,139],{"categoryNo":62,"categoryName":63,"taxonomyType":64,"taxonomyTypeDesc":65},{"categoryNo":67,"categoryName":68,"taxonomyType":64,"taxonomyTypeDesc":65},[71,141,76,108,142,129,143,144,145,19,20,146,107,147,148,149],"react components","performance","components","architecture","state management","api","management","hooks","styling",{"skillNo":151,"name":152,"nameZh":6,"description":153,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":154,"categories":155,"keywords":158,"publishedAt":26},"01M6C4P0DK385QBG3B3S86TQV2","react-testing","WHEN testing React components\u002Fhooks\u002Fcontext with React Testing Library; NOT e2e; covers renderHook, providers, forms, and anti-patterns.","https:\u002F\u002Fgithub.com\u002Fmintuz\u002Fskills\u002Fblob\u002Fmain\u002Fsrc\u002Fweb\u002Fskills\u002Freact-testing\u002FSKILL.md",[156,157],{"categoryNo":62,"categoryName":63,"taxonomyType":64,"taxonomyTypeDesc":65},{"categoryNo":67,"categoryName":68,"taxonomyType":64,"taxonomyTypeDesc":65},[76,159,71,143,141,160,161,162,163,164,165,148],"react testing","testing library","library","Providers","e2e","context","anti-patterns"]