[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7ECHSEM7C9HTGTSQ1TTH902":3,"skill-same:01M7ECHSEM7C9HTGTSQ1TTH902":49},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":20,"frontMatter":21,"refName":22,"commitSha":23,"skillDirectory":24,"forksCount":13,"repositoryHtmlUrl":25,"repositoryHomepageUrl":6,"ownerHtmlUrl":26,"ownerBlogUrl":6,"ownerDescription":27,"updatedAt":28,"install":29,"resources":42},"01M7ECHSEM7C9HTGTSQ1TTH902","design-system-extraction",null,"jonahthan433\u002FCortexOS","jonahthan433","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F211465495?v=4","01M7ECH9HPHGA89DCXHHJBTS3C","jonah.ai","01M7ECH9JCEM45DZMWPT7148S1",0,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fjonahthan433\u002FCortexOS\u002Fblob\u002Fmain\u002Fskills\u002Fimported\u002F.archive\u002Fdesign-system-extraction\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"# design-system-extraction\n\n# Design System Extraction & Clean Rebuild\n\n## When to use\n- \"Rebuild this landing page using its exact style \u002F colors \u002F fonts \u002F spacing.\"\n- \"Clone site X's design but remove the SaaS stuff \u002F AI slop.\"\n- Any task needing a site's real tokens without guessing hex values.\n\n## Lazy path (do this first — no browser needed)\nBrowser vision (browser_exec \u002F computer_use) is NOT required to get exact tokens. The production CSS is the source of truth and is more precise than eyeballing a screenshot. Fetch it.\n\n1. **Get the HTML** (curl, not a browser):\n   ```\n   curl -sSL -m 20 https:\u002F\u002FSITE\u002F -o \u002Ftmp\u002Fsite.html -w \"HTTP %{http_code} size %{size_download}\\n\"\n   ```\n2. **Find the CSS link** in the HTML. Modern builds (Next.js etc.) use hashed paths like `\u002F_next\u002Fstatic\u002Fcss\u002F\u003Chash>.css`. Grep for `\\.css` — do NOT hardcode the hash, it changes per deploy.\n3. **Fetch the CSS file**:\n   ```\n   curl -sSL -m 20 https:\u002F\u002FSITE\u002F\u003Cpath>.css -o \u002Ftmp\u002Fsite.css\n   ```\n4. **Parse the minified CSS** (it's one line — do NOT read it raw with read_file, it truncates). Use Python regex to expand rules and filter to the components you care about. Recipe in `references\u002Fextract_tokens_recipe.py`.\n5. **Capture `:root` vars** — that block IS the token palette (bg, panel, border, accent, text, muted, font families). This is the single most important extraction.\n6. **Capture fonts** from the `@import`\u002F`\u003Clink>` (common pairing: Inter + JetBrains Mono via Google Fonts).\n7. **Rebuild as a single self-contained `index.html`** — inline the `:root` tokens and component CSS. No build step, no framework, no extra deps.\n\n## Pitfalls\n- **Chrome not running** → `browser_exec` returns `chrome-not-running: no supported browser is running`. Don't fight it. curl+CSS parse is faster and exact for tokens; vision adds nothing for hex values. (If the user explicitly demands \"see it,\" note the limitation and proceed with curl — it's more precise anyway.)\n- **Minified CSS overwhelms read_file** — one giant line; pagination truncates mid-rule. Always parse with Python (`re.findall(r'([^{}]+)\\{([^{}]*)\\}', css)`), filter by selector keywords, print readable.\n- **Hashed asset URLs** change per deploy — always re-fetch the `\u003Clink>` from the live HTML; never hardcode a stale hash.\n- **Token drift** — SPA loads one CSS; multi-page may vary. Grab the CSS the page you're cloning actually references.\n\n## Clean-rebuild principles (kill the slop)\n- Strip: sign-up\u002Fsign-in funnels, upsell banners, \"Copy to LLM\" nudges, walls of marketing prose, injected component-library classes (e.g. `parallel-*`), hero animations \u002F gradient blobs, testimonial\u002Flogo clutter.\n- Keep: the function. Make forms actually POST to the real endpoint; surface `402 Payment Required` honestly instead of faking auth.\n- Prefer native platform features: CSS grid for layout, `\u003Cinput>` for fields, `:focus` borders, `fetch` — no JS lib for what CSS\u002FHTML already does.\n- One file. No bundler. Inline tokens. Works when served beside the gateway (`window.location.origin`) or with a single `BASE` constant.\n\n## Verify (don't claim done untested)\n- Serve: `python3 -m http.server 8899` (background) → `curl -o \u002Fdev\u002Fnull -w \"%{http_code}\" http:\u002F\u002Flocalhost:8899\u002Findex.html` expect 200.\n- Smoke the live API the page calls: `curl -X POST ...\u002Fapi\u002Fsearch -d '{\"query\":\"x\"}'` → expect `402` with the same payment payload your frontend surfaces. Confirms your 402 handling matches reality.\n- Kill the server when done (`process(action=kill)` \u002F `pkill -f http.server`).\n\n## References\n- `references\u002Fextract_tokens_recipe.py` — exact curl + Python parse recipe, with the parallelmpp.dev token dump as a worked example.\n",{},"main","38b32c99e7ed0b8e215d638e92cfa452c1ec3079","skills\u002Fimported\u002F.archive\u002Fdesign-system-extraction","https:\u002F\u002Fgithub.com\u002Fjonahthan433\u002FCortexOS","https:\u002F\u002Fgithub.com\u002Fjonahthan433","AI Consultant","2026-10-24 05:13:39",{"source":7,"skillName":5,"commands":30,"prompt":40,"zipAvailable":41},[31,34,37],{"tool":32,"command":33},"npx","npx skills add jonahthan433\u002FCortexOS --skill design-system-extraction",{"tool":35,"command":36},"bunx","bunx skills add jonahthan433\u002FCortexOS --skill design-system-extraction",{"tool":38,"command":39},"pnpm","pnpm dlx skills add jonahthan433\u002FCortexOS --skill design-system-extraction","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fjonahthan433\u002FCortexOS\u002Fblob\u002Fmain\u002Fskills\u002Fimported\u002F.archive\u002Fdesign-system-extraction\u002FSKILL.md",true,[43],{"path":44,"resourceType":45,"resourceTypeDesc":46,"sizeBytes":47,"sourceHtmlUrl":48},"skill.json","REFERENCE","参考文档",376,"https:\u002F\u002Fgithub.com\u002Fjonahthan433\u002FCortexOS\u002Fblob\u002Fmain\u002Fskills\u002Fimported\u002F.archive\u002Fdesign-system-extraction\u002Fskill.json",[50,56,62,68,74,80],{"skillNo":51,"name":52,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":53,"categories":54,"keywords":55,"publishedAt":18},"01M7EDQZDQX3Q8Y7GCQX6KN9V7","opportunity-brief","https:\u002F\u002Fgithub.com\u002Fjonahthan433\u002FCortexOS\u002Fblob\u002Fmain\u002Fskills\u002Fsales\u002Fopportunity-brief\u002FSKILL.md",[],[],{"skillNo":57,"name":58,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":59,"categories":60,"keywords":61,"publishedAt":18},"01M7EDQYA0V9Y99VKBREJJ3MRT","morning-intel","https:\u002F\u002Fgithub.com\u002Fjonahthan433\u002FCortexOS\u002Fblob\u002Fmain\u002Fskills\u002Fresearch\u002Fmorning-intel\u002FSKILL.md",[],[],{"skillNo":63,"name":64,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":65,"categories":66,"keywords":67,"publishedAt":18},"01M7EDQVX1JVY0B6PDHKKGM19G","decision-brief","https:\u002F\u002Fgithub.com\u002Fjonahthan433\u002FCortexOS\u002Fblob\u002Fmain\u002Fskills\u002Fresearch\u002Fdecision-brief\u002FSKILL.md",[],[],{"skillNo":69,"name":70,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":71,"categories":72,"keywords":73,"publishedAt":18},"01M7EDQV1GENZAC2SZSD8KZ3GM","weekly-review","https:\u002F\u002Fgithub.com\u002Fjonahthan433\u002FCortexOS\u002Fblob\u002Fmain\u002Fskills\u002Fproductivity\u002Fweekly-review\u002FSKILL.md",[],[],{"skillNo":75,"name":76,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":77,"categories":78,"keywords":79,"publishedAt":18},"01M7EDQT2KETJ1Y3CGVN9EKW2J","system-health","https:\u002F\u002Fgithub.com\u002Fjonahthan433\u002FCortexOS\u002Fblob\u002Fmain\u002Fskills\u002Fops\u002Fsystem-health\u002FSKILL.md",[],[],{"skillNo":81,"name":82,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":83,"categories":84,"keywords":85,"publishedAt":18},"01M7EDQQN2JK3XPWMS1M4T0F3K","backup-restore","https:\u002F\u002Fgithub.com\u002Fjonahthan433\u002FCortexOS\u002Fblob\u002Fmain\u002Fskills\u002Fops\u002Fbackup-restore\u002FSKILL.md",[],[]]