[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6GZCBCPE5WZPYWF4TSV49KG":3,"skill-same:01M6GZCBCPE5WZPYWF4TSV49KG":76},{"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":19,"publishedAt":34,"linkOnly":35,"markdownContent":36,"markdownBody":37,"frontMatter":38,"refName":39,"commitSha":40,"skillDirectory":41,"forksCount":42,"repositoryHtmlUrl":43,"repositoryHomepageUrl":6,"ownerHtmlUrl":44,"ownerBlogUrl":45,"ownerDescription":46,"updatedAt":47,"install":48,"resources":61},"01M6GZCBCPE5WZPYWF4TSV49KG","pair-dark-mode-tokens-by-role",null,"Use when adding a dark theme. Maps semantic tokens to two palettes by role and re-derives surfaces and shadows instead of inverting colours.","jiayaoqijia\u002Fcryptoskill","jiayaoqijia","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F1453879?v=4","01M6GMYTX7Q7S504VC6E756ENR","YQ","01M6GMYV1QKJ1CC75MTTGT9PR0",81,"MIT","https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fpayments\u002F0xklen-pair-dark-mode-tokens-by-role\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fpayments\u002F0xklen-pair-dark-mode-tokens-by-role\u002FSKILL.md",[],[20,21,22,23,24,25,26,27,28,29,30,31,32,33],"pair","tokens","dark mode","mode","role","pair dark mode tokens by role","dark","use","maps","surfaces","semantic","theme","re","when","2026-11-10 10:12:30",false,"---\nname: pair-dark-mode-tokens-by-role\ndescription: Use when adding a dark theme. Maps semantic tokens to two palettes by role and re-derives surfaces and shadows instead of inverting colours.\n---\n\n# Pair dark mode tokens by role\n\nInverting a light palette produces muddy mid-greys and glowing whites because dark mode is a different material, not a negative. The durable approach is semantic tokens with two values per role.\n\n## Procedure\n\n1. Name tokens by role, never by hue: `--surface`, `--surface-raised`, `--text-primary`, `--text-muted`, `--border`, `--accent`. `--grey-200` cannot carry a different meaning in two themes.\n2. Define both palettes on the same token names, scoped to a theme attribute:\n       :root[data-theme=\"light\"] { --surface:#ffffff; --surface-raised:#f7f7f8; --text-primary:#111318; }\n       :root[data-theme=\"dark\"]  { --surface:#0e1117; --surface-raised:#1a1f27; --text-primary:#e8eaed; }\n3. In dark mode make raised surfaces lighter, not darker. Elevation reads as \"closer to the light source\" in both themes; a dark card must be lighter than the page behind it.\n4. Lower pure whites: use `#e8eaed`-range text on dark, not `#ffffff`. Full white on near-black vibrates and is the single most common dark-mode mistake.\n5. Re-pick accent colours. A saturated blue tuned for white has too little contrast on `#0e1117`; lighten it and re-check at 4.5:1 rather than reusing the hex.\n6. Replace drop shadows with a lighter border or a subtle top highlight in dark mode — shadows are invisible on dark and the element loses separation.\n7. Handle images and logos: a black wordmark disappears on dark. Serve a swapped asset via `\u003Cpicture>` with `prefers-color-scheme`, or place it on a light chip.\n8. Set `color-scheme: dark` on the root so form controls, scrollbars and the default canvas follow the theme.\n\n## Pitfalls\n\n- Inverting with a CSS filter (`filter: invert(1)`), which mangles images, brand colours and photos.\n- Only theming the page background and leaving modals, tooltips and menus on the light palette because they render in a portal outside the themed root.\n- Reusing semantic names bound to one theme, so `--background` means white in light and someone hard-codes it as the card colour.\n- Assuming the OS preference equals the app preference; store an explicit user override and apply it before first paint.\n\n## Verification\n\n    # Confirm both themes define the same token set (no gaps):\n    for t in light dark; do\n      grep -oE \"\\-\\-[a-z-]+:\" src\u002Fstyles\u002Ftokens.css | sort -u > \u002Ftmp\u002F$t.txt\n    done\n    diff \u003C(grep -A20 'data-theme=\"light\"' src\u002Fstyles\u002Ftokens.css | grep -oE '\\-\\-[a-z-]+') \\\n         \u003C(grep -A20 'data-theme=\"dark\"'  src\u002Fstyles\u002Ftokens.css | grep -oE '\\-\\-[a-z-]+')\n\nAn empty diff means both palettes cover the same roles. Then screenshot both themes and confirm no element is a light surface on the dark page. Report the token strategy and any role defined in one theme only.\n","# Pair dark mode tokens by role\n\nInverting a light palette produces muddy mid-greys and glowing whites because dark mode is a different material, not a negative. The durable approach is semantic tokens with two values per role.\n\n## Procedure\n\n1. Name tokens by role, never by hue: `--surface`, `--surface-raised`, `--text-primary`, `--text-muted`, `--border`, `--accent`. `--grey-200` cannot carry a different meaning in two themes.\n2. Define both palettes on the same token names, scoped to a theme attribute:\n       :root[data-theme=\"light\"] { --surface:#ffffff; --surface-raised:#f7f7f8; --text-primary:#111318; }\n       :root[data-theme=\"dark\"]  { --surface:#0e1117; --surface-raised:#1a1f27; --text-primary:#e8eaed; }\n3. In dark mode make raised surfaces lighter, not darker. Elevation reads as \"closer to the light source\" in both themes; a dark card must be lighter than the page behind it.\n4. Lower pure whites: use `#e8eaed`-range text on dark, not `#ffffff`. Full white on near-black vibrates and is the single most common dark-mode mistake.\n5. Re-pick accent colours. A saturated blue tuned for white has too little contrast on `#0e1117`; lighten it and re-check at 4.5:1 rather than reusing the hex.\n6. Replace drop shadows with a lighter border or a subtle top highlight in dark mode — shadows are invisible on dark and the element loses separation.\n7. Handle images and logos: a black wordmark disappears on dark. Serve a swapped asset via `\u003Cpicture>` with `prefers-color-scheme`, or place it on a light chip.\n8. Set `color-scheme: dark` on the root so form controls, scrollbars and the default canvas follow the theme.\n\n## Pitfalls\n\n- Inverting with a CSS filter (`filter: invert(1)`), which mangles images, brand colours and photos.\n- Only theming the page background and leaving modals, tooltips and menus on the light palette because they render in a portal outside the themed root.\n- Reusing semantic names bound to one theme, so `--background` means white in light and someone hard-codes it as the card colour.\n- Assuming the OS preference equals the app preference; store an explicit user override and apply it before first paint.\n\n## Verification\n\n    # Confirm both themes define the same token set (no gaps):\n    for t in light dark; do\n      grep -oE \"\\-\\-[a-z-]+:\" src\u002Fstyles\u002Ftokens.css | sort -u > \u002Ftmp\u002F$t.txt\n    done\n    diff \u003C(grep -A20 'data-theme=\"light\"' src\u002Fstyles\u002Ftokens.css | grep -oE '\\-\\-[a-z-]+') \\\n         \u003C(grep -A20 'data-theme=\"dark\"'  src\u002Fstyles\u002Ftokens.css | grep -oE '\\-\\-[a-z-]+')\n\nAn empty diff means both palettes cover the same roles. Then screenshot both themes and confirm no element is a light surface on the dark page. Report the token strategy and any role defined in one theme only.\n",{"name":5,"description":7},"main","3df1d0d67b30ff15236561f8c0f9f06d33f42dfd","skills\u002Fpayments\u002F0xklen-pair-dark-mode-tokens-by-role",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":49,"prompt":59,"zipAvailable":60},[50,53,56],{"tool":51,"command":52},"npx","npx skills add jiayaoqijia\u002Fcryptoskill --skill pair-dark-mode-tokens-by-role",{"tool":54,"command":55},"bunx","bunx skills add jiayaoqijia\u002Fcryptoskill --skill pair-dark-mode-tokens-by-role",{"tool":57,"command":58},"pnpm","pnpm dlx skills add jiayaoqijia\u002Fcryptoskill --skill pair-dark-mode-tokens-by-role","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fpayments\u002F0xklen-pair-dark-mode-tokens-by-role\u002FSKILL.md",true,[62,66,72],{"path":63,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":65,"sourceHtmlUrl":16},"LICENSE","许可证",1063,{"path":67,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":70,"sourceHtmlUrl":71},"SOURCE.md","REFERENCE","参考文档",355,"https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fpayments\u002F0xklen-pair-dark-mode-tokens-by-role\u002FSOURCE.md",{"path":73,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":74,"sourceHtmlUrl":75},"TRUST.auto.yaml",2217,"https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fpayments\u002F0xklen-pair-dark-mode-tokens-by-role\u002FTRUST.auto.yaml",[77,105,128,146,159,169],{"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":81,"sourceHtmlUrl":82,"categories":83,"keywords":84,"publishedAt":34},"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.","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",[],[85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104],"performance","recipe performance","recipe","mm","sentry","harness","app","deterministic","recipes","flow","cold","critical","analysis","tasks","react","browser","layout","screen","network","metamask",{"skillNo":106,"name":107,"nameZh":6,"description":108,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":109,"licenseFileUrl":110,"sourceHtmlUrl":111,"categories":112,"keywords":113,"publishedAt":34},"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",[],[114,115,116,117,118,119,120,121,122,123,124,125,126,127],"mexc spot websocket","spot","websocket","api","workflows","public","listen","streams","depth","keys","for","api keys","maintenance","protobuf",{"skillNo":129,"name":130,"nameZh":6,"description":131,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":109,"licenseFileUrl":132,"sourceHtmlUrl":133,"categories":134,"keywords":135,"publishedAt":34},"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",[],[136,115,137,138,139,140,141,125,124,123,142,143,144,119,145,118,117],"mexc spot rest","REST","admin","signing","Wallet","requests","actions","secure","data","orders",{"skillNo":147,"name":148,"nameZh":6,"description":149,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":109,"licenseFileUrl":150,"sourceHtmlUrl":151,"categories":152,"keywords":153,"publishedAt":34},"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",[],[154,155,116,156,157,126,124,158,122,121,119,118],"mexc futures websocket","futures","position","ping","subscriptions",{"skillNo":160,"name":161,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":162,"sourceHtmlUrl":163,"categories":164,"keywords":165,"publishedAt":34},"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",[],[166,167,168],"refresh","0xklen version and refresh sanctions lists","version",{"skillNo":170,"name":171,"nameZh":6,"description":172,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":173,"sourceHtmlUrl":174,"categories":175,"keywords":176,"publishedAt":34},"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",[],[177,178,179,180,181,182,183,27,184,185,186],"tests","cover","verify tests cover changed lines","verify","coverage","pr","exercise","patch","code","share"]