[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6GZBJBT71EB6Y4F3J8WAWAT":3,"skill-same:01M6GZBJBT71EB6Y4F3J8WAWAT":79},{"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":37,"linkOnly":38,"markdownContent":39,"markdownBody":40,"frontMatter":41,"refName":42,"commitSha":43,"skillDirectory":44,"forksCount":45,"repositoryHtmlUrl":46,"repositoryHomepageUrl":6,"ownerHtmlUrl":47,"ownerBlogUrl":48,"ownerDescription":49,"updatedAt":50,"install":51,"resources":64},"01M6GZBJBT71EB6Y4F3J8WAWAT","optimize-web-font-loading",null,"Use when text is invisible during load or fonts cause a swap jump. Applies font-display, subsetting, preload and metric overrides.","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-optimize-web-font-loading\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fpayments\u002F0xklen-optimize-web-font-loading\u002FSKILL.md",[],[20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36],"optimize","optimize web","optimize web font loading","loading","web","font","fonts","overrides","when","metric","display","load","preload","subsetting","swap","use","text","2026-11-10 10:12:30",false,"---\nname: optimize-web-font-loading\ndescription: Use when text is invisible during load or fonts cause a swap jump. Applies font-display, subsetting, preload and metric overrides.\n---\n\n# Optimize Web Font Loading\n\nWeb fonts are discovered late in CSS, block text paint, and change line breaks when they swap. Handled well they are invisible; handled badly they cause both a blank-text delay and a layout jump.\n\n## Procedure\n\n1. Count what ships and subset it to the glyphs you use, cutting a 200 kB family to under 30 kB:\n\n       pyftsubset Inter.ttf --flavor=woff2 --unicodes-file=unicode.txt \\\n         --layout-features='*' --output-file=inter-subset.woff2\n\n2. Always set a display strategy; `swap` shows fallback text immediately, `optional` avoids the reflow entirely at the cost of not showing the font on slow loads:\n\n       @font-face { font-family: Inter; src: url(\u002Ff\u002Finter.woff2) format('woff2'); font-display: swap; }\n\n3. Preload the one font used above the fold so the request starts with the document:\n\n       \u003Clink rel=\"preload\" href=\"\u002Ff\u002Finter.woff2\" as=\"font\" type=\"font\u002Fwoff2\" crossorigin>\n\n4. Neutralise the swap shift with a metric-matched fallback via `size-adjust`, `ascent-override` and `descent-override` on a local `@font-face`.\n5. Use `unicode-range` on subset faces so a page only downloads the Cyrillic block when it renders Cyrillic.\n6. Host same-origin; a third-party font origin adds DNS, TLS and connection latency you would otherwise avoid.\n\n## Pitfalls\n\n- Loading four weights and styles when the design uses two; each is a separate blocking file.\n- `font-display: block` with a 3 s block period, which is the worst-case invisible-text delay.\n- Omitting `crossorigin` on the preload, causing a second fetch because preload defaults to a different CORS mode.\n- Subsetting to Latin but leaving an emoji or symbol face unsubsetted at full size.\n- Ignoring the fallback metrics, so the swap moves every line of copy by a few pixels and registers as CLS.\n\n## Verification\n\n    fc-scan --format '%{family} %{fontversion}\\n' inter-subset.woff2 && ls -l inter-subset.woff2\n\nThe subset must be under 40 kB and the swap shift must not appear in a layout-shift observer. Report the file size and the CLS contribution from the font swap.\n","# Optimize Web Font Loading\n\nWeb fonts are discovered late in CSS, block text paint, and change line breaks when they swap. Handled well they are invisible; handled badly they cause both a blank-text delay and a layout jump.\n\n## Procedure\n\n1. Count what ships and subset it to the glyphs you use, cutting a 200 kB family to under 30 kB:\n\n       pyftsubset Inter.ttf --flavor=woff2 --unicodes-file=unicode.txt \\\n         --layout-features='*' --output-file=inter-subset.woff2\n\n2. Always set a display strategy; `swap` shows fallback text immediately, `optional` avoids the reflow entirely at the cost of not showing the font on slow loads:\n\n       @font-face { font-family: Inter; src: url(\u002Ff\u002Finter.woff2) format('woff2'); font-display: swap; }\n\n3. Preload the one font used above the fold so the request starts with the document:\n\n       \u003Clink rel=\"preload\" href=\"\u002Ff\u002Finter.woff2\" as=\"font\" type=\"font\u002Fwoff2\" crossorigin>\n\n4. Neutralise the swap shift with a metric-matched fallback via `size-adjust`, `ascent-override` and `descent-override` on a local `@font-face`.\n5. Use `unicode-range` on subset faces so a page only downloads the Cyrillic block when it renders Cyrillic.\n6. Host same-origin; a third-party font origin adds DNS, TLS and connection latency you would otherwise avoid.\n\n## Pitfalls\n\n- Loading four weights and styles when the design uses two; each is a separate blocking file.\n- `font-display: block` with a 3 s block period, which is the worst-case invisible-text delay.\n- Omitting `crossorigin` on the preload, causing a second fetch because preload defaults to a different CORS mode.\n- Subsetting to Latin but leaving an emoji or symbol face unsubsetted at full size.\n- Ignoring the fallback metrics, so the swap moves every line of copy by a few pixels and registers as CLS.\n\n## Verification\n\n    fc-scan --format '%{family} %{fontversion}\\n' inter-subset.woff2 && ls -l inter-subset.woff2\n\nThe subset must be under 40 kB and the swap shift must not appear in a layout-shift observer. Report the file size and the CLS contribution from the font swap.\n",{"name":5,"description":7},"main","3df1d0d67b30ff15236561f8c0f9f06d33f42dfd","skills\u002Fpayments\u002F0xklen-optimize-web-font-loading",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-14 02:27:51",{"source":8,"skillName":5,"commands":52,"prompt":62,"zipAvailable":63},[53,56,59],{"tool":54,"command":55},"npx","npx skills add jiayaoqijia\u002Fcryptoskill --skill optimize-web-font-loading",{"tool":57,"command":58},"bunx","bunx skills add jiayaoqijia\u002Fcryptoskill --skill optimize-web-font-loading",{"tool":60,"command":61},"pnpm","pnpm dlx skills add jiayaoqijia\u002Fcryptoskill --skill optimize-web-font-loading","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fpayments\u002F0xklen-optimize-web-font-loading\u002FSKILL.md",true,[65,69,75],{"path":66,"resourceType":66,"resourceTypeDesc":67,"sizeBytes":68,"sourceHtmlUrl":16},"LICENSE","许可证",1063,{"path":70,"resourceType":71,"resourceTypeDesc":72,"sizeBytes":73,"sourceHtmlUrl":74},"SOURCE.md","REFERENCE","参考文档",351,"https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fpayments\u002F0xklen-optimize-web-font-loading\u002FSOURCE.md",{"path":76,"resourceType":71,"resourceTypeDesc":72,"sizeBytes":77,"sourceHtmlUrl":78},"TRUST.auto.yaml",2217,"https:\u002F\u002Fgithub.com\u002Fjiayaoqijia\u002Fcryptoskill\u002Fblob\u002Fmain\u002Fskills\u002Fpayments\u002F0xklen-optimize-web-font-loading\u002FTRUST.auto.yaml",[80,108,131,149,162,172],{"skillNo":81,"name":82,"nameZh":6,"description":83,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":84,"sourceHtmlUrl":85,"categories":86,"keywords":87,"publishedAt":37},"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",[],[88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107],"performance","recipe performance","recipe","mm","sentry","harness","app","deterministic","recipes","flow","cold","critical","analysis","tasks","react","browser","layout","screen","network","metamask",{"skillNo":109,"name":110,"nameZh":6,"description":111,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":112,"licenseFileUrl":113,"sourceHtmlUrl":114,"categories":115,"keywords":116,"publishedAt":37},"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",[],[117,118,119,120,121,122,123,124,125,126,127,128,129,130],"mexc spot websocket","spot","websocket","api","workflows","public","listen","streams","depth","keys","for","api keys","maintenance","protobuf",{"skillNo":132,"name":133,"nameZh":6,"description":134,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":112,"licenseFileUrl":135,"sourceHtmlUrl":136,"categories":137,"keywords":138,"publishedAt":37},"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",[],[139,118,140,141,142,143,144,128,127,126,145,146,147,122,148,121,120],"mexc spot rest","REST","admin","signing","Wallet","requests","actions","secure","data","orders",{"skillNo":150,"name":151,"nameZh":6,"description":152,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":112,"licenseFileUrl":153,"sourceHtmlUrl":154,"categories":155,"keywords":156,"publishedAt":37},"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",[],[157,158,119,159,160,129,127,161,125,124,122,121],"mexc futures websocket","futures","position","ping","subscriptions",{"skillNo":163,"name":164,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":165,"sourceHtmlUrl":166,"categories":167,"keywords":168,"publishedAt":37},"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",[],[169,170,171],"refresh","0xklen version and refresh sanctions lists","version",{"skillNo":173,"name":174,"nameZh":6,"description":175,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":176,"sourceHtmlUrl":177,"categories":178,"keywords":179,"publishedAt":37},"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",[],[180,181,182,183,184,185,186,35,187,188,189],"tests","cover","verify tests cover changed lines","verify","coverage","pr","exercise","patch","code","share"]