[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71AXGRH9BAEF79Q0RQEJXJD":3,"skill-same:01M71AXGRH9BAEF79Q0RQEJXJD":95},{"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":16,"sourceHtmlUrl":17,"categories":18,"keywords":24,"publishedAt":45,"linkOnly":46,"markdownContent":47,"markdownBody":48,"frontMatter":49,"refName":50,"commitSha":51,"skillDirectory":52,"forksCount":53,"repositoryHtmlUrl":54,"repositoryHomepageUrl":6,"ownerHtmlUrl":55,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":56,"install":57,"resources":70},"01M71AXGRH9BAEF79Q0RQEJXJD","frontend-patterns-current",null,"Implement or review React UI behavior, asynchronous requests, effect cleanup, accessibility and measured rendering changes. Use when a frontend task involves those contracts; preserve the app's existing framework and data layer.","strmt7\u002Fai_skills_collection_benchmarked","strmt7","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F28989754?v=4","01M71929P914SWKQ7QJV24NBBY","Stratos","01M71929Q9VGKQ7PWYR95VSQQQ",1,"MIT","https:\u002F\u002Fgithub.com\u002Fstrmt7\u002Fai_skills_collection_benchmarked\u002Fblob\u002Fmain\u002Fincluded\u002Fimproved\u002Fskills\u002Ffrontend-patterns-current\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fstrmt7\u002Fai_skills_collection_benchmarked\u002Fblob\u002Fmain\u002Fincluded\u002Fimproved\u002Fskills\u002Ffrontend-patterns-current\u002FSKILL.md",[19],{"categoryNo":20,"categoryName":21,"taxonomyType":22,"taxonomyTypeDesc":23},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44],"frontend patterns current","frontend patterns","patterns","frontend","use","when","preserve","Existing","changes","requests","app","task","behavior","effect","react ui","asynchronous","cleanup","react","implement","review","2026-11-10 10:12:30",false,"---\nname: frontend-patterns-current\ndescription: Implement or review React UI behavior, asynchronous requests, effect cleanup, accessibility and measured rendering changes. Use when a frontend task involves those contracts; preserve the app's existing framework and data layer.\nlicense: MIT\n---\n\n# Frontend behavior and request lifecycles\n\nApply the repository's [mandatory agent tools](..\u002F..\u002F..\u002F..\u002Fdocs\u002Fagent-tools.md)\nand controlling instructions before relevant work. This experimental overlay\npreserves the locked source in `provenance\u002F`; agent efficacy is unbenchmarked.\n\nFirst identify the supported browser\u002Fruntime, framework, data layer and user\nflow. Preserve their OS requirements. Installation and host independence do not\nauthorize an OS port or a replacement framework.\n\nFor requests, prefer the framework's loader or existing cache\u002Fquery library.\nAn Effect is a synchronization boundary, not a general-purpose data framework.\nIf a small client-only Effect is justified, define its contracts explicitly:\n\n- Include every response-determining input in a stable key, including relevant\n  account\u002Fauthorization scope. Never put secrets into keys, URLs or logs. Clear\n  or partition cached data when that scope changes.\n- Check status and validate the response before displaying it. A JSON parser\n  does not make an error response successful or establish a TypeScript type.\n- Cleanup must prevent late results from replacing newer state. Abort when the\n  transport supports it and retain a generation\u002Fignore guard because cancellation\n  may be ignored. Cover unmount, key changes, disable and repeated refresh.\n- Define whether stale data remains visible during a refresh. Do not display a\n  different key's data as current. Keep loading and error state consistent with\n  that decision. Do not silently retry mutations or duplicate user actions.\n- Inline fetchers and options must not create an Effect\u002Frequest loop. Stable\n  callbacks alone do not solve response races. Keep callback closures current\n  without claiming that every function-identity change is a new request.\n\n[request.ts](references\u002Frequest.ts) is an optional, client-only lifecycle example\nwith no cache, retries, deduplication, persistence, SSR or callback hooks. Its key\nmust encode all request inputs. Fetcher identity changes alone do not refetch;\ncall `refetch` or change the key. Refresh clears previous data. Disabling clears\nvisible state and aborts owned work; refetch while disabled is a no-op. A failed\nrequest is returned in state, so callers inspect `error`. Its stable `refetch`\nuses the most recently committed Effect context. It is not a drop-in replacement\nfor the source hook's `onSuccess`\u002F`onError` API or a production query library.\n\nFor UI work, use native controls and semantic elements first. Verify labels,\nkeyboard operation, focus order\u002Freturn, visible focus and meaningful loading,\nempty and error states. A menu needs keyboard behavior, not just roles. A modal\nneeds focus handling and background isolation. Choose a maintained accessible\nprimitive when the existing stack provides one; do not certify a partial snippet\nas an accessible component. Test the actual interaction in supported browsers.\n\nKeep derived rendering pure: copy shared arrays before sorting. Measure before\nadding memoization or virtualization; check actual render cost, layout and user\ninteraction rather than assuming every callback needs `useCallback`. Test\ndevelopment StrictMode separately: its extra setup\u002Fcleanup cycle can legitimately\nstart and then abort an initial request. Never suppress that behavior to make a\none-request test pass.\n\nUse deferred responses to exercise out-of-order resolution and disable\u002Funmount.\nAdd representative keyboard and browser checks when changing UI components.\nReport component checks separately from agent trials and production readiness.\n","# Frontend behavior and request lifecycles\n\nApply the repository's [mandatory agent tools](..\u002F..\u002F..\u002F..\u002Fdocs\u002Fagent-tools.md)\nand controlling instructions before relevant work. This experimental overlay\npreserves the locked source in `provenance\u002F`; agent efficacy is unbenchmarked.\n\nFirst identify the supported browser\u002Fruntime, framework, data layer and user\nflow. Preserve their OS requirements. Installation and host independence do not\nauthorize an OS port or a replacement framework.\n\nFor requests, prefer the framework's loader or existing cache\u002Fquery library.\nAn Effect is a synchronization boundary, not a general-purpose data framework.\nIf a small client-only Effect is justified, define its contracts explicitly:\n\n- Include every response-determining input in a stable key, including relevant\n  account\u002Fauthorization scope. Never put secrets into keys, URLs or logs. Clear\n  or partition cached data when that scope changes.\n- Check status and validate the response before displaying it. A JSON parser\n  does not make an error response successful or establish a TypeScript type.\n- Cleanup must prevent late results from replacing newer state. Abort when the\n  transport supports it and retain a generation\u002Fignore guard because cancellation\n  may be ignored. Cover unmount, key changes, disable and repeated refresh.\n- Define whether stale data remains visible during a refresh. Do not display a\n  different key's data as current. Keep loading and error state consistent with\n  that decision. Do not silently retry mutations or duplicate user actions.\n- Inline fetchers and options must not create an Effect\u002Frequest loop. Stable\n  callbacks alone do not solve response races. Keep callback closures current\n  without claiming that every function-identity change is a new request.\n\n[request.ts](references\u002Frequest.ts) is an optional, client-only lifecycle example\nwith no cache, retries, deduplication, persistence, SSR or callback hooks. Its key\nmust encode all request inputs. Fetcher identity changes alone do not refetch;\ncall `refetch` or change the key. Refresh clears previous data. Disabling clears\nvisible state and aborts owned work; refetch while disabled is a no-op. A failed\nrequest is returned in state, so callers inspect `error`. Its stable `refetch`\nuses the most recently committed Effect context. It is not a drop-in replacement\nfor the source hook's `onSuccess`\u002F`onError` API or a production query library.\n\nFor UI work, use native controls and semantic elements first. Verify labels,\nkeyboard operation, focus order\u002Freturn, visible focus and meaningful loading,\nempty and error states. A menu needs keyboard behavior, not just roles. A modal\nneeds focus handling and background isolation. Choose a maintained accessible\nprimitive when the existing stack provides one; do not certify a partial snippet\nas an accessible component. Test the actual interaction in supported browsers.\n\nKeep derived rendering pure: copy shared arrays before sorting. Measure before\nadding memoization or virtualization; check actual render cost, layout and user\ninteraction rather than assuming every callback needs `useCallback`. Test\ndevelopment StrictMode separately: its extra setup\u002Fcleanup cycle can legitimately\nstart and then abort an initial request. Never suppress that behavior to make a\none-request test pass.\n\nUse deferred responses to exercise out-of-order resolution and disable\u002Funmount.\nAdd representative keyboard and browser checks when changing UI components.\nReport component checks separately from agent trials and production readiness.\n",{"name":5,"license":15,"description":7},"main","5c95bcac4646c5aed06bd9aed5235cfc7985aafc","included\u002Fimproved\u002Fskills\u002Ffrontend-patterns-current",0,"https:\u002F\u002Fgithub.com\u002Fstrmt7\u002Fai_skills_collection_benchmarked","https:\u002F\u002Fgithub.com\u002Fstrmt7","2026-11-15 03:31:57",{"source":8,"skillName":5,"commands":58,"prompt":68,"zipAvailable":69},[59,62,65],{"tool":60,"command":61},"npx","npx skills add strmt7\u002Fai_skills_collection_benchmarked --skill frontend-patterns-current",{"tool":63,"command":64},"bunx","bunx skills add strmt7\u002Fai_skills_collection_benchmarked --skill frontend-patterns-current",{"tool":66,"command":67},"pnpm","pnpm dlx skills add strmt7\u002Fai_skills_collection_benchmarked --skill frontend-patterns-current","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fstrmt7\u002Fai_skills_collection_benchmarked\u002Fblob\u002Fmain\u002Fincluded\u002Fimproved\u002Fskills\u002Ffrontend-patterns-current\u002FSKILL.md",true,[71,75,81,85,89],{"path":72,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":74,"sourceHtmlUrl":16},"LICENSE","许可证",1071,{"path":76,"resourceType":77,"resourceTypeDesc":78,"sizeBytes":79,"sourceHtmlUrl":80},"NOTICE.md","REFERENCE","参考文档",881,"https:\u002F\u002Fgithub.com\u002Fstrmt7\u002Fai_skills_collection_benchmarked\u002Fblob\u002Fmain\u002Fincluded\u002Fimproved\u002Fskills\u002Ffrontend-patterns-current\u002FNOTICE.md",{"path":82,"resourceType":77,"resourceTypeDesc":78,"sizeBytes":83,"sourceHtmlUrl":84},"provenance\u002Foriginal-agents\u002Fopenai.yaml",251,"https:\u002F\u002Fgithub.com\u002Fstrmt7\u002Fai_skills_collection_benchmarked\u002Fblob\u002Fmain\u002Fincluded\u002Fimproved\u002Fskills\u002Ffrontend-patterns-current\u002Fprovenance\u002Foriginal-agents\u002Fopenai.yaml",{"path":86,"resourceType":77,"resourceTypeDesc":78,"sizeBytes":87,"sourceHtmlUrl":88},"provenance\u002Foriginal-SKILL.md",14773,"https:\u002F\u002Fgithub.com\u002Fstrmt7\u002Fai_skills_collection_benchmarked\u002Fblob\u002Fmain\u002Fincluded\u002Fimproved\u002Fskills\u002Ffrontend-patterns-current\u002Fprovenance\u002Foriginal-SKILL.md",{"path":90,"resourceType":91,"resourceTypeDesc":92,"sizeBytes":93,"sourceHtmlUrl":94},"references\u002Frequest.ts","SCRIPT","脚本",2108,"https:\u002F\u002Fgithub.com\u002Fstrmt7\u002Fai_skills_collection_benchmarked\u002Fblob\u002Fmain\u002Fincluded\u002Fimproved\u002Fskills\u002Ffrontend-patterns-current\u002Freferences\u002Frequest.ts",[96,124,153,178,202,230],{"skillNo":97,"name":98,"nameZh":6,"description":99,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":100,"licenseFileUrl":101,"sourceHtmlUrl":102,"categories":103,"keywords":108,"publishedAt":45},"01M71D4H3T6M57DFKN8HENAWRV","webapp-testing","Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fstrmt7\u002Fai_skills_collection_benchmarked\u002Fblob\u002Fmain\u002Fincluded\u002Fskills\u002Fby-category\u002Ftesting-qa-benchmarking\u002Fofficial-reference\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fstrmt7\u002Fai_skills_collection_benchmarked\u002Fblob\u002Fmain\u002Fincluded\u002Fskills\u002Fby-category\u002Ftesting-qa-benchmarking\u002Fofficial-reference\u002Fwebapp-testing\u002FSKILL.md",[104,107],{"categoryNo":105,"categoryName":106,"taxonomyType":22,"taxonomyTypeDesc":23},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":20,"categoryName":21,"taxonomyType":22,"taxonomyTypeDesc":23},[109,110,111,112,113,114,28,115,116,117,118,119,120,121,37,122,123],"webapp","testing","webapp testing","for","applications","local","debugging","toolkit","logs","browser","with","playwright","web","ui","screenshots",{"skillNo":125,"name":126,"nameZh":6,"description":127,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":100,"licenseFileUrl":128,"sourceHtmlUrl":129,"categories":130,"keywords":134,"publishedAt":45},"01M71D4CQR2A2TB7GASCR5ZBG3","skill-creator","Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.","https:\u002F\u002Fgithub.com\u002Fstrmt7\u002Fai_skills_collection_benchmarked\u002Fblob\u002Fmain\u002Fincluded\u002Fskills\u002Fby-category\u002Ftesting-qa-benchmarking\u002Fofficial-reference\u002Fskill-creator-anthropics\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fstrmt7\u002Fai_skills_collection_benchmarked\u002Fblob\u002Fmain\u002Fincluded\u002Fskills\u002Fby-category\u002Ftesting-qa-benchmarking\u002Fofficial-reference\u002Fskill-creator-anthropics\u002FSKILL.md",[131],{"categoryNo":132,"categoryName":133,"taxonomyType":22,"taxonomyTypeDesc":23},"01JBSEEDCAT000000000000023","Skill与智能体开发",[135,136,137,138,139,140,30,141,142,143,144,145,146,147,148,149,150,151,112,152],"skill creator","creator","performance","improve","run evals","new","analysis","create","optimize","variance analysis","run","edit","benchmark","a skill","existing skill","evals","modify","accuracy",{"skillNo":154,"name":155,"nameZh":6,"description":156,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":157,"categories":158,"keywords":161,"publishedAt":45},"01M71D488XHEZVXXSXFYP8ENMH","playwright-skill","Complete browser automation with Playwright. Auto-detects dev servers, writes reusable test scripts, and supports screenshots, responsive checks, UX validation, login flows, link checks, and arbitrary browser automation. Use when the user wants to test a website, automate browser interactions, validate web functionality, or perform browser-based testing.","https:\u002F\u002Fgithub.com\u002Fstrmt7\u002Fai_skills_collection_benchmarked\u002Fblob\u002Fmain\u002Fincluded\u002Fskills\u002Fby-category\u002Ftesting-qa-benchmarking\u002Flatest-release-browser-automation\u002Fplaywright-skill\u002FSKILL.md",[159,160],{"categoryNo":105,"categoryName":106,"taxonomyType":22,"taxonomyTypeDesc":23},{"categoryNo":132,"categoryName":133,"taxonomyType":22,"taxonomyTypeDesc":23},[120,162,163,164,110,165,166,30,167,118,168,169,170,171,172,173,174,175,176,177],"playwright skill","browser automation","flows","auto","access","Bash","website","ux","login","scripts","read","write","node","install","network","responsive",{"skillNo":179,"name":180,"nameZh":6,"description":181,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":100,"licenseFileUrl":182,"sourceHtmlUrl":183,"categories":184,"keywords":186,"publishedAt":45},"01M71CY25GM939M6RES91QSG3T","web-artifacts-builder","Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn\u002Fui). Use for complex artifacts requiring state management, routing, or shadcn\u002Fui components - not for simple single-file HTML\u002FJSX artifacts.","https:\u002F\u002Fgithub.com\u002Fstrmt7\u002Fai_skills_collection_benchmarked\u002Fblob\u002Fmain\u002Fincluded\u002Fskills\u002Fby-category\u002Fsearch-retrieval-web-automation\u002Fofficial-reference\u002Fweb-artifacts-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fstrmt7\u002Fai_skills_collection_benchmarked\u002Fblob\u002Fmain\u002Fincluded\u002Fskills\u002Fby-category\u002Fsearch-retrieval-web-automation\u002Fofficial-reference\u002Fweb-artifacts-builder\u002FSKILL.md",[185],{"categoryNo":20,"categoryName":21,"taxonomyType":22,"taxonomyTypeDesc":23},[187,188,189,121,190,191,192,112,193,194,28,195,29,196,197,42,198,199,200,201],"builder","artifacts builder","artifacts","web artifacts builder","single-file","css","Tailwind","ui components","single","file","components","multi","state","routing","state management",{"skillNo":203,"name":204,"nameZh":6,"description":205,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":100,"licenseFileUrl":206,"sourceHtmlUrl":207,"categories":208,"keywords":218,"publishedAt":45},"01M71CXZB60QJJ1H4S3NN94WMZ","frontend-design","Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML\u002FCSS layouts, or when styling\u002Fbeautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.","https:\u002F\u002Fgithub.com\u002Fstrmt7\u002Fai_skills_collection_benchmarked\u002Fblob\u002Fmain\u002Fincluded\u002Fskills\u002Fby-category\u002Fsearch-retrieval-web-automation\u002Fofficial-reference\u002Ffrontend-design\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fstrmt7\u002Fai_skills_collection_benchmarked\u002Fblob\u002Fmain\u002Fincluded\u002Fskills\u002Fby-category\u002Fsearch-retrieval-web-automation\u002Fofficial-reference\u002Ffrontend-design\u002FSKILL.md",[209,210,213],{"categoryNo":20,"categoryName":21,"taxonomyType":22,"taxonomyTypeDesc":23},{"categoryNo":211,"categoryName":212,"taxonomyType":22,"taxonomyTypeDesc":23},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":214,"categoryName":215,"taxonomyType":216,"taxonomyTypeDesc":217},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[28,219,220,192,221,222,223,113,224,225,29,30,189,226,197,227,42,228,229,119],"design","frontend design","ui design","generic","aesthetics","landing","pages","code","web ui","react components","examples",{"skillNo":231,"name":232,"nameZh":6,"description":233,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":234,"categories":235,"keywords":236,"publishedAt":45},"01M71CVZ54WFBTVA7R16PFY1ZE","zarr-python","Chunked N-D arrays for cloud storage. Compressed arrays, parallel I\u002FO, S3\u002FGCS integration, NumPy\u002FDask\u002FXarray compatible, for large-scale scientific computing pipelines.","https:\u002F\u002Fgithub.com\u002Fstrmt7\u002Fai_skills_collection_benchmarked\u002Fblob\u002Fmain\u002Fincluded\u002Fskills\u002Fby-category\u002Fscience-research-data-analysis\u002Flatest-release-community\u002Fzarr-python\u002FSKILL.md",[],[237,238,239,240,241,242,243,244,245,112,246,247,248,249,250,251,252,253],"zarr python","python","zarr","arrays","Cloud Storage","scientific","storage","parallel","dask","numpy","gcs","s3","integration","scientific computing","cloud","scale","pipelines"]