[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6GRVBTBFME7XBAC87VBARPE":3,"skill-same:01M6GRVBTBFME7XBAC87VBARPE":92},{"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":28,"publishedAt":54,"linkOnly":55,"markdownContent":56,"markdownBody":57,"frontMatter":58,"refName":59,"commitSha":60,"skillDirectory":61,"forksCount":62,"repositoryHtmlUrl":63,"repositoryHomepageUrl":6,"ownerHtmlUrl":64,"ownerBlogUrl":65,"ownerDescription":66,"updatedAt":67,"install":68,"resources":81},"01M6GRVBTBFME7XBAC87VBARPE","frontend-ux",null,"Use when building, fixing, or reviewing how an Ethereum dApp frontend behaves for its users: product identity, address inputs that resolve names, token amounts and decimals, approve-then-act flows, fiat context, the target chain. The completeness steps agents skip unprompted. Not for the Scaffold-ETH 2 pre-ship checklist (`\u002Fqa`).","jiayaoqijia\u002Fcryptoskill","jiayaoqijia","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F1453879?v=4","01M6GMYTX7Q7S504VC6E756ENR","YQ","01M6GMYV1QKJ1CC75MTTGT9PR0",81,"AGPL-3.0","https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fdev-tools\u002Faustintgriffith-official-frontend-ux\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53],"ux","frontend ux","frontend","act","when","approve","ship checklist","pre-ship","for","dapp","flows","users","completeness","chain","eth","token","fiat","checklist","use","how","ship","ethereum","product","qa","identity","2026-11-10 10:12:30",false,"---\nname: frontend-ux\ndescription: \"Use when building, fixing, or reviewing how an Ethereum dApp frontend behaves for its users: product identity, address inputs that resolve names, token amounts and decimals, approve-then-act flows, fiat context, the target chain. The completeness steps agents skip unprompted. Not for the Scaffold-ETH 2 pre-ship checklist (`\u002Fqa`).\"\n---\n\n# Frontend UX\n\nWorking transaction code is not a finished product. Check these product-completeness surfaces before calling an onchain frontend finished.\n\n**Product identity.** Replace every framework default: tab title, favicon, OG\u002FTwitter title, description and image, and visible \"built with\" branding. Nothing in the build fails when `Create Next App` or `Scaffold-ETH 2 App` ships to production, so nothing reminds you.\n\n**Address inputs.** A recipient field gated on `isAddress()` silently rejects `vitalik.eth` and leaves the button dead with no explanation. Resolve names onchain, show the resolved address before submit, submit that address, and give a reason whenever input is rejected. Use your UI kit's address component if it has one.\n\n**Fiat context.** Every token or ETH amount you show — balances, inputs, confirmations, position summaries — carries a value from a real price source. Label a stale or unavailable price rather than silently dropping it.\n\n**Target chain.** Point the app at the chain the brief names; scaffold defaults sit on local\u002Fhardhat. Use a dedicated RPC for production rather than the accidental public fallback, and don't slow the template's polling interval.\n\nAlso required, and usually already habit — confirm rather than rebuild:\n\n- One pending state per button, held from click through the receipt *and* the authoritative state refetch (`isPending` clears when the wallet returns the hash, not at confirmation), released in `finally` so a rejection can't lock it.\n- One primary action at a time: connect → switch network → approve → execute. Approval status comes from a fresh onchain read, never a local flag.\n- Token math in the token's real decimals (`parseUnits`\u002F`formatUnits`; USDC is 6). Never render base units.\n- Reverts and wallet errors translated to human text, shown near the action that failed.\n- Semantic theme tokens, not a hardcoded dark wrapper. If dark-only is deliberate, remove the theme toggle.\n\nFinish by running the project's build or typecheck, and confirming the configured target chain matches the brief.\n\nBefore you finish: send a one-line note via [feedback\u002FSKILL.md](https:\u002F\u002Fethskills.com\u002Ffeedback\u002FSKILL.md) — issue or praise.\n","# Frontend UX\n\nWorking transaction code is not a finished product. Check these product-completeness surfaces before calling an onchain frontend finished.\n\n**Product identity.** Replace every framework default: tab title, favicon, OG\u002FTwitter title, description and image, and visible \"built with\" branding. Nothing in the build fails when `Create Next App` or `Scaffold-ETH 2 App` ships to production, so nothing reminds you.\n\n**Address inputs.** A recipient field gated on `isAddress()` silently rejects `vitalik.eth` and leaves the button dead with no explanation. Resolve names onchain, show the resolved address before submit, submit that address, and give a reason whenever input is rejected. Use your UI kit's address component if it has one.\n\n**Fiat context.** Every token or ETH amount you show — balances, inputs, confirmations, position summaries — carries a value from a real price source. Label a stale or unavailable price rather than silently dropping it.\n\n**Target chain.** Point the app at the chain the brief names; scaffold defaults sit on local\u002Fhardhat. Use a dedicated RPC for production rather than the accidental public fallback, and don't slow the template's polling interval.\n\nAlso required, and usually already habit — confirm rather than rebuild:\n\n- One pending state per button, held from click through the receipt *and* the authoritative state refetch (`isPending` clears when the wallet returns the hash, not at confirmation), released in `finally` so a rejection can't lock it.\n- One primary action at a time: connect → switch network → approve → execute. Approval status comes from a fresh onchain read, never a local flag.\n- Token math in the token's real decimals (`parseUnits`\u002F`formatUnits`; USDC is 6). Never render base units.\n- Reverts and wallet errors translated to human text, shown near the action that failed.\n- Semantic theme tokens, not a hardcoded dark wrapper. If dark-only is deliberate, remove the theme toggle.\n\nFinish by running the project's build or typecheck, and confirming the configured target chain matches the brief.\n\nBefore you finish: send a one-line note via [feedback\u002FSKILL.md](https:\u002F\u002Fethskills.com\u002Ffeedback\u002FSKILL.md) — issue or praise.\n",{"name":5,"description":7},"main","3df1d0d67b30ff15236561f8c0f9f06d33f42dfd","skills\u002Fdev-tools\u002Faustintgriffith-official-frontend-ux",17,"https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill","https:\u002F\u002Fgithub.com\u002Fjiayaoqijia","https:\u002F\u002Feth2030.com","Hardcore infra. Building @alt-research and applied cryptography.","2026-11-13 02:31:19",{"source":8,"skillName":5,"commands":69,"prompt":79,"zipAvailable":80},[70,73,76],{"tool":71,"command":72},"npx","npx skills add jiayaoqijia\u002Fcryptoskill --skill frontend-ux",{"tool":74,"command":75},"bunx","bunx skills add jiayaoqijia\u002Fcryptoskill --skill frontend-ux",{"tool":77,"command":78},"pnpm","pnpm dlx skills add jiayaoqijia\u002Fcryptoskill --skill frontend-ux","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fdev-tools\u002Faustintgriffith-official-frontend-ux\u002FSKILL.md",true,[82,88],{"path":83,"resourceType":84,"resourceTypeDesc":85,"sizeBytes":86,"sourceHtmlUrl":87},"SOURCE.md","REFERENCE","参考文档",348,"https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fdev-tools\u002Faustintgriffith-official-frontend-ux\u002FSOURCE.md",{"path":89,"resourceType":84,"resourceTypeDesc":85,"sizeBytes":90,"sourceHtmlUrl":91},"TRUST.auto.yaml",2217,"https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fdev-tools\u002Faustintgriffith-official-frontend-ux\u002FTRUST.auto.yaml",[93,122,144,162,175,185],{"skillNo":94,"name":95,"nameZh":6,"description":96,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":97,"licenseFileUrl":98,"sourceHtmlUrl":99,"categories":100,"keywords":101,"publishedAt":54},"01M712C436EQYE43342Q4E7GG1","recipe-performance","Diagnose a specific MetaMask user flow's real-app performance and Sentry critical-user-flow telemetry with deterministic mm-harness recipes. Use for CUF boundaries, cold\u002Fwarm\u002Fbackground-resume behavior, latency regressions, lifecycle tags, duplicate or blocking network requests, long tasks, layout\u002Fpaint cost, screen redraws, React rerenders, or browser trace analysis where tests alone cannot prove the real app.","MIT","https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fwallets\u002Fmetamask-official-recipe-performance\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fwallets\u002Fmetamask-official-recipe-performance\u002FSKILL.md",[],[102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121],"performance","recipe performance","recipe","mm","sentry","harness","app","deterministic","recipes","flow","cold","critical","analysis","tasks","react","browser","layout","screen","network","metamask",{"skillNo":123,"name":124,"nameZh":6,"description":125,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":126,"licenseFileUrl":127,"sourceHtmlUrl":128,"categories":129,"keywords":130,"publishedAt":54},"01M70XT2F8A5CQZ81JBP98KSW3","mexc-spot-websocket","MEXC Spot WebSocket workflows for public streams, protobuf handling, depth maintenance, listen keys, and private streams without exposing API keys.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fexchanges\u002Fmncrftfrcnm-mexc-spot-websocket\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fexchanges\u002Fmncrftfrcnm-mexc-spot-websocket\u002FSKILL.md",[],[131,132,133,134,135,136,137,138,139,140,37,141,142,143],"mexc spot websocket","spot","websocket","api","workflows","public","listen","streams","depth","keys","api keys","maintenance","protobuf",{"skillNo":145,"name":146,"nameZh":6,"description":147,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":126,"licenseFileUrl":148,"sourceHtmlUrl":149,"categories":150,"keywords":151,"publishedAt":54},"01M70XT0MBXN3WZY1BKN0CPNKR","mexc-spot-rest","MEXC Spot REST workflows for public data, signed account requests, orders, wallet\u002Fadmin actions, and secure signing without exposing API keys.","https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fexchanges\u002Fmncrftfrcnm-mexc-spot-rest\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fexchanges\u002Fmncrftfrcnm-mexc-spot-rest\u002FSKILL.md",[],[152,132,153,154,155,156,157,141,37,140,158,159,160,136,161,135,134],"mexc spot rest","REST","admin","signing","Wallet","requests","actions","secure","data","orders",{"skillNo":163,"name":164,"nameZh":6,"description":165,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":126,"licenseFileUrl":166,"sourceHtmlUrl":167,"categories":168,"keywords":169,"publishedAt":54},"01M70XSYSVZ2N0N91XCAR2CAK0","mexc-futures-websocket","MEXC Futures WebSocket workflows for public streams, private account\u002Forder\u002Fposition streams, ping\u002Fpong, subscriptions, and depth maintenance.","https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fexchanges\u002Fmncrftfrcnm-mexc-futures-websocket\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fexchanges\u002Fmncrftfrcnm-mexc-futures-websocket\u002FSKILL.md",[],[170,171,133,172,173,142,37,174,139,138,136,135],"mexc futures websocket","futures","position","ping","subscriptions",{"skillNo":176,"name":177,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":97,"licenseFileUrl":178,"sourceHtmlUrl":179,"categories":180,"keywords":181,"publishedAt":54},"01M6H0ZWHVE5W04WG2DKQE2SQC","0xklen-version-and-refresh-sanctions-lists","https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fpayments\u002F0xklen-version-and-refresh-sanctions-lists\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fpayments\u002F0xklen-version-and-refresh-sanctions-lists\u002FSKILL.md",[],[182,183,184],"refresh","0xklen version and refresh sanctions lists","version",{"skillNo":186,"name":187,"nameZh":6,"description":188,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":97,"licenseFileUrl":189,"sourceHtmlUrl":190,"categories":191,"keywords":192,"publishedAt":54},"01M6H0Z28Q3R8J0S799GJQWXM3","verify-tests-cover-changed-lines","Use when a PR adds code that the existing suite may not exercise. Measures patch coverage — the share of newly changed lines hit by tests — before approving.","https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fpayments\u002F0xklen-verify-tests-cover-changed-lines\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fpayments\u002F0xklen-verify-tests-cover-changed-lines\u002FSKILL.md",[],[193,194,195,196,197,198,199,47,200,201,202],"tests","cover","verify tests cover changed lines","verify","coverage","pr","exercise","patch","code","share"]