[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6AE3Q79MSB9Q9WVJ88EW00Q":3,"skill-same:01M6AE3Q79MSB9Q9WVJ88EW00Q":84},{"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":23,"publishedAt":45,"linkOnly":46,"markdownContent":47,"markdownBody":48,"frontMatter":49,"refName":50,"commitSha":51,"skillDirectory":52,"forksCount":53,"repositoryHtmlUrl":54,"repositoryHomepageUrl":55,"ownerHtmlUrl":56,"ownerBlogUrl":57,"ownerDescription":58,"updatedAt":59,"install":60,"resources":73},"01M6AE3Q79MSB9Q9WVJ88EW00Q","react18-batching-patterns",null,"Provides exact patterns for diagnosing and fixing automatic batching regressions in React 18 class components. Use this skill whenever a class component has multiple setState calls in an async method, inside setTimeout, inside a Promise .then() or .catch(), or in a native event handler. Use it before writing any flushSync call - the decision tree here prevents unnecessary flushSync overuse. Also use this skill when fixing test failures caused by intermediate state assertions that break after React 18 upgrade.","github\u002Fawesome-copilot","github","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F9919?v=4","01M6AC83DS133TPXFSP1DHNCC6","GitHub","01M6AD3PBDYPK7NVFJNJ66Y8RS",41133,"MIT","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Freact18-batching-patterns\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44],"batching","react18 batching patterns","patterns","when","writing","catch","assertions","for","tree","calls","event","upgrade","call","async","use","decision","state","component","react","components","test","2026-11-10 10:12:30",false,"---\nname: react18-batching-patterns\ndescription: 'Provides exact patterns for diagnosing and fixing automatic batching regressions in React 18 class components. Use this skill whenever a class component has multiple setState calls in an async method, inside setTimeout, inside a Promise .then() or .catch(), or in a native event handler. Use it before writing any flushSync call - the decision tree here prevents unnecessary flushSync overuse. Also use this skill when fixing test failures caused by intermediate state assertions that break after React 18 upgrade.'\n---\n\n# React 18 Automatic Batching Patterns\n\nReference for diagnosing and fixing the most dangerous silent breaking change in React 18 for class-component codebases.\n\n## The Core Change\n\n| Location of setState | React 17 | React 18 |\n|---|---|---|\n| React event handler | Batched | Batched (same) |\n| setTimeout | **Immediate re-render** | **Batched** |\n| Promise .then() \u002F .catch() | **Immediate re-render** | **Batched** |\n| async\u002Fawait | **Immediate re-render** | **Batched** |\n| Native addEventListener callback | **Immediate re-render** | **Batched** |\n\n**Batched** means: all setState calls within that execution context flush together in a single re-render at the end. No intermediate renders occur.\n\n## Quick Diagnosis\n\nRead every async class method. Ask: does any code after an `await` read `this.state` to make a decision?\n\n```\nCode reads this.state after await?\n  YES → Category A (silent state-read bug)\n  NO, but intermediate render must be visible to user?\n    YES → Category C (flushSync needed)\n    NO → Category B (refactor, no flushSync)\n```\n\nFor the full pattern for each category, read:\n- **`references\u002Fbatching-categories.md`** - Category A, B, C with full before\u002Fafter code\n- **`references\u002FflushSync-guide.md`** - when to use flushSync, when NOT to, import syntax\n\n## The flushSync Rule\n\n**Use `flushSync` sparingly.** It forces a synchronous re-render, bypassing React 18's concurrent scheduler. Overusing it negates the performance benefits of React 18.\n\nOnly use `flushSync` when:\n- The user must see an intermediate UI state before an async operation begins\n- A spinner\u002Floading state must render before a fetch starts\n- Sequential UI steps have distinct visible states (progress wizard, multi-step flow)\n\nIn most cases, the fix is a **refactor** - restructuring the code to not read `this.state` after `await`. Read `references\u002Fbatching-categories.md` for the correct approach per category.\n","# React 18 Automatic Batching Patterns\n\nReference for diagnosing and fixing the most dangerous silent breaking change in React 18 for class-component codebases.\n\n## The Core Change\n\n| Location of setState | React 17 | React 18 |\n|---|---|---|\n| React event handler | Batched | Batched (same) |\n| setTimeout | **Immediate re-render** | **Batched** |\n| Promise .then() \u002F .catch() | **Immediate re-render** | **Batched** |\n| async\u002Fawait | **Immediate re-render** | **Batched** |\n| Native addEventListener callback | **Immediate re-render** | **Batched** |\n\n**Batched** means: all setState calls within that execution context flush together in a single re-render at the end. No intermediate renders occur.\n\n## Quick Diagnosis\n\nRead every async class method. Ask: does any code after an `await` read `this.state` to make a decision?\n\n```\nCode reads this.state after await?\n  YES → Category A (silent state-read bug)\n  NO, but intermediate render must be visible to user?\n    YES → Category C (flushSync needed)\n    NO → Category B (refactor, no flushSync)\n```\n\nFor the full pattern for each category, read:\n- **`references\u002Fbatching-categories.md`** - Category A, B, C with full before\u002Fafter code\n- **`references\u002FflushSync-guide.md`** - when to use flushSync, when NOT to, import syntax\n\n## The flushSync Rule\n\n**Use `flushSync` sparingly.** It forces a synchronous re-render, bypassing React 18's concurrent scheduler. Overusing it negates the performance benefits of React 18.\n\nOnly use `flushSync` when:\n- The user must see an intermediate UI state before an async operation begins\n- A spinner\u002Floading state must render before a fetch starts\n- Sequential UI steps have distinct visible states (progress wizard, multi-step flow)\n\nIn most cases, the fix is a **refactor** - restructuring the code to not read `this.state` after `await`. Read `references\u002Fbatching-categories.md` for the correct approach per category.\n",{"name":5,"description":7},"main","5269f7ea2d6c3a9bfda5ed878b6726cf509121fd","skills\u002Freact18-batching-patterns",5354,"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot","https:\u002F\u002Fawesome-copilot.github.com\u002F","https:\u002F\u002Fgithub.com\u002Fgithub","https:\u002F\u002Fgithub.com\u002Fabout","How people build software.","2026-11-14 05:37:52",{"source":8,"skillName":5,"commands":61,"prompt":71,"zipAvailable":72},[62,65,68],{"tool":63,"command":64},"npx","npx skills add github\u002Fawesome-copilot --skill react18-batching-patterns",{"tool":66,"command":67},"bunx","bunx skills add github\u002Fawesome-copilot --skill react18-batching-patterns",{"tool":69,"command":70},"pnpm","pnpm dlx skills add github\u002Fawesome-copilot --skill react18-batching-patterns","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Freact18-batching-patterns\u002FSKILL.md",true,[74,80],{"path":75,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":78,"sourceHtmlUrl":79},"references\u002Fbatching-categories.md","REFERENCE","参考文档",5971,"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Freact18-batching-patterns\u002Freferences\u002Fbatching-categories.md",{"path":81,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":82,"sourceHtmlUrl":83},"references\u002FflushSync-guide.md",2469,"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Freact18-batching-patterns\u002Freferences\u002FflushSync-guide.md",[85,116,143,173,207,224],{"skillNo":86,"name":87,"nameZh":6,"description":88,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":89,"categories":90,"keywords":97,"publishedAt":45},"01M70KXZNX9ES38N2A8M58ZZMZ","supabase-rls-policies","Write, review, and test Supabase Row Level Security (RLS) policies so that one user cannot read or change another user's rows. Use when creating or changing tables, policies, views, or security definer functions in a Supabase project, when reviewing a migration that touches RLS, or when asked to prove user isolation with pgTAP tests that sign in as two users.","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Fsupabase-rls-policies\u002FSKILL.md",[91,94],{"categoryNo":92,"categoryName":93,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":95,"categoryName":96,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[98,99,100,101,102,27,103,104,105,106,107,108,109,110,111,112,38,113,114,115],"supabase","rls","supabase rls","supabase rls policies","project","review","change","read","write","security","isolation","tables","as","tests","prove","users","functions","with",{"skillNo":117,"name":118,"nameZh":6,"description":119,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":120,"categories":121,"keywords":123,"publishedAt":45},"01M70KWA5YWXDV6V8DZ19E3T2Y","skill-distribution-audit","Audit a skill collection before release or investigate installer omissions, archived\u002Ftemplate leakage, duplicate identities, and manifest drift. Reconcile the intended public source set, distribution manifest, and actual discovery output for a specified consumer version. Includes a deterministic set-comparison helper.","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Fskill-distribution-audit\u002FSKILL.md",[122],{"categoryNo":95,"categoryName":96,"taxonomyType":21,"taxonomyTypeDesc":22},[124,125,126,127,128,129,31,130,131,132,133,134,135,136,137,138,139,140,141,142],"distribution","skill distribution audit","audit","SET","deterministic","installer","discovery","comparison","helper","manifest","version","collection","drift","output","investigate","duplicate","template","release","reconcile",{"skillNo":144,"name":145,"nameZh":6,"description":146,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":147,"sourceHtmlUrl":148,"categories":149,"keywords":155,"publishedAt":45},"01M70KCJPFVW7PPQ49CC5R8JGK","logicapps-custom-code-net10-migration","Migrate Azure Logic Apps Standard local-function custom-code projects from .NET 8 to .NET 10. Use for legacy Logic Apps custom-code workspace upgrades, project\u002Fpackage configuration, custom-worker settings, publication, and integrated VS Code debugging. Not for ordinary .NET applications, standalone Azure Functions, Consumption workflows, or cloud deployment.","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Flogicapps-custom-code-net10-migration\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Flogicapps-custom-code-net10-migration\u002FSKILL.md",[150],{"categoryNo":151,"categoryName":152,"taxonomyType":153,"taxonomyTypeDesc":154},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[156,157,158,159,160,161,31,102,162,163,164,165,166,167,168,38,169,170,171,172],"custom","code","logicapps custom code net10 migration","migration","projects","standalone","deployment","applications","local","azure","worker","upgrades","package","apps","Legacy","debugging","workflows",{"skillNo":174,"name":175,"nameZh":6,"description":176,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":177,"sourceHtmlUrl":178,"categories":179,"keywords":184,"publishedAt":45},"01M6AEBN37RQMXJ3298PEY7PG1","winmd-api-search","Find and explore Windows desktop APIs. Use when building features that need platform capabilities — camera, file access, notifications, UI controls, AI\u002FML, sensors, networking, etc. Discovers the right API for a task and retrieves full type details (methods, properties, events, enumeration values).","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Fwinmd-api-search\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Fwinmd-api-search\u002FSKILL.md",[180,183],{"categoryNo":181,"categoryName":182,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":151,"categoryName":152,"taxonomyType":153,"taxonomyTypeDesc":154},[185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,27,200,201,202,203,204,31,205,206],"winmd api search","search","api","windows","desktop","file access","enumeration","ui","ml","file","networking","capabilities","notifications","explore","access","features","full","camera","events","platform","methods","controls",{"skillNo":208,"name":209,"nameZh":6,"description":210,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":211,"licenseFileUrl":212,"sourceHtmlUrl":213,"categories":214,"keywords":220,"publishedAt":45},"01M6AE571R3SC1ZGE202B3NB5S","resemble-detect","Deepfake detection and media safety — detect AI-generated audio, images, video, and text, trace synthesis sources, apply watermarks, verify speaker identity, and analyze media intelligence using Resemble AI","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Fresemble-detect\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Fresemble-detect\u002FSKILL.md",[215,216,219],{"categoryNo":181,"categoryName":182,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":217,"categoryName":218,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":95,"categoryName":96,"taxonomyType":21,"taxonomyTypeDesc":22},[221,127,194,222,223],"resemble detect","https","identity",{"skillNo":225,"name":226,"nameZh":6,"description":227,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":211,"licenseFileUrl":228,"sourceHtmlUrl":229,"categories":230,"keywords":235,"publishedAt":45},"01M6AE30BSK2HCY4TQQ22Z8JRD","quality-playbook","Run a complete quality engineering audit on any codebase. Derives behavioral requirements from the code, generates spec-traced functional tests, runs a three-pass code review with regression tests, executes a multi-model spec audit (Council of Three), and produces a consolidated bug report with TDD-verified patches. Finds the 35% of real defects that structural code review alone cannot catch. Works with any language. Trigger on 'quality playbook', 'spec audit', 'Council of Three', 'fitness-to-purpose', or 'coverage theater'.","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Fquality-playbook\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Fquality-playbook\u002FSKILL.md",[231,234],{"categoryNo":232,"categoryName":233,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000007","代码审查",{"categoryNo":95,"categoryName":96,"taxonomyType":21,"taxonomyTypeDesc":22},[236,237,238,239,157,103,9,126,240,241,222,242,243,244,245,246,247,248,249,250,251,252,111,253,254,255,256],"playbook","quality playbook","quality","code review","tdd","run","report","spec","bug report","council","engineering","functional","spec audit","bug","verified","multi-model","three","coverage","model","regression","structural"]