[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EFFCNJHVHCWMKJKHP3FDEP":3,"skill-same:01M6EFFCNJHVHCWMKJKHP3FDEP":67},{"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":25,"repositoryHtmlUrl":26,"repositoryHomepageUrl":27,"ownerHtmlUrl":28,"ownerBlogUrl":6,"ownerDescription":29,"updatedAt":30,"install":31,"resources":44},"01M6EFFCNJHVHCWMKJKHP3FDEP","marko",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",66,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FTerminalSkills\u002Fskills\u002Fmarko\u002FSKILL.md",[],[5],"2026-11-10 10:12:30",false,"# Marko — HTML-First UI Framework\n\nYou are an expert in Marko, the HTML-first UI framework by eBay that powers ebay.com. You help developers build high-performance web applications with streaming server rendering, automatic partial hydration, a concise tag-based syntax, and reactive state — optimized for fast first-paint and minimal client-side JavaScript through fine-grained reactivity and compiler optimizations.\n\n## Core Capabilities\n\n### Components\n\n```marko\n\u002F\u002F components\u002Fproduct-card.marko — HTML-first syntax\n\u003Clet\u002Fcount=0\u002F>\n\n\u003Cdiv class=\"product-card\">\n  \u003Cimg src=input.imageUrl alt=input.name \u002F>\n  \u003Ch3>${input.name}\u003C\u002Fh3>\n  \u003Cp class=\"price\">$${input.price.toFixed(2)}\u003C\u002Fp>\n\n  \u003Cdiv class=\"rating\">\n    \u003Cfor|star| of=Array.from({length: 5})>\n      \u003Cspan class=(star \u003C input.rating ? \"filled\" : \"empty\")>★\u003C\u002Fspan>\n    \u003C\u002Ffor>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"actions\">\n    \u003Cbutton onClick() { count++ }>\n      Add to Cart ${count > 0 ? `(${count})` : \"\"}\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\nstyle {\n  .product-card {\n    border: 1px solid #e5e7eb;\n    border-radius: 8px;\n    padding: 16px;\n    transition: box-shadow 0.2s;\n  }\n  .product-card:hover {\n    box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n  }\n  .filled { color: #f59e0b; }\n  .empty { color: #d1d5db; }\n}\n```\n\n### Streaming SSR\n\n```marko\n\u002F\u002F pages\u002Fproducts.marko — Streaming server rendering\n\u003Clet\u002Fproducts = fetch(\"\u002Fapi\u002Fproducts\").then(r => r.json()) \u002F>\n\n\u003Chtml>\n\u003Chead>\n  \u003Ctitle>Products\u003C\u002Ftitle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Ch1>Our Products\u003C\u002Fh1>\n\n  \u003C!-- Streams immediately, fills in when data arrives -->\n  \u003Cawait|products| from=products>\n    \u003C@placeholder>\n      \u003Cdiv class=\"skeleton-grid\">\n        \u003Cfor|_| of=Array(8)>\n          \u003Cdiv class=\"skeleton-card\" \u002F>\n        \u003C\u002Ffor>\n      \u003C\u002Fdiv>\n    \u003C\u002F@placeholder>\n\n    \u003C@then>\n      \u003Cdiv class=\"product-grid\">\n        \u003Cfor|product| of=products>\n          \u003Cproduct-card\n            name=product.name\n            price=product.price\n            imageUrl=product.image\n            rating=product.rating\n          \u002F>\n        \u003C\u002Ffor>\n      \u003C\u002Fdiv>\n    \u003C\u002F@then>\n\n    \u003C@catch|error|>\n      \u003Cdiv class=\"error\">Failed to load products: ${error.message}\u003C\u002Fdiv>\n    \u003C\u002F@catch>\n  \u003C\u002Fawait>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### Reactive State\n\n```marko\n\u002F\u002F components\u002Ftodo-list.marko\n\u003Clet\u002Ftodos=[]\u002F>\n\u003Clet\u002FnewTodo=\"\"\u002F>\n\n\u003Cform onSubmit(e) {\n  e.preventDefault();\n  if (newTodo.trim()) {\n    todos = [...todos, { id: Date.now(), text: newTodo, done: false }];\n    newTodo = \"\";\n  }\n}>\n  \u003Cinput value=newTodo onInput(e) { newTodo = e.target.value }\n    placeholder=\"Add a todo...\" \u002F>\n  \u003Cbutton type=\"submit\">Add\u003C\u002Fbutton>\n\u003C\u002Fform>\n\n\u003Cul>\n  \u003Cfor|todo, index| of=todos>\n    \u003Cli class=(todo.done ? \"done\" : \"\")>\n      \u003Cinput type=\"checkbox\" checked=todo.done\n        onChange() {\n          todos = todos.map((t, i) =>\n            i === index ? { ...t, done: !t.done } : t\n          );\n        }\n      \u002F>\n      \u003Cspan>${todo.text}\u003C\u002Fspan>\n    \u003C\u002Fli>\n  \u003C\u002Ffor>\n\u003C\u002Ful>\n\n\u003Cp>${todos.filter(t => t.done).length}\u002F${todos.length} completed\u003C\u002Fp>\n```\n\n## Installation\n\n```bash\nnpx @marko\u002Fcreate my-app\ncd my-app && npm install\nnpm run dev                                # Dev server with hot reload\n```\n\n## Best Practices\n\n1. **HTML-first** — Write HTML with embedded JS, not JS that returns HTML; natural template syntax\n2. **Streaming SSR** — Use `\u003Cawait>` for async data; browser gets HTML progressively, no blank page\n3. **Automatic partial hydration** — Marko only sends JS for interactive components; static parts stay as HTML\n4. **Fine-grained reactivity** — `\u003Clet\u002F>` creates reactive state; only changed DOM nodes update\n5. **Scoped styles** — CSS in `style {}` is scoped to the component; no class name collisions\n6. **Tags API** — Components are custom tags; `\u003Cproduct-card>` auto-resolves from `components\u002F` directory\n7. **eBay scale** — Powers ebay.com serving billions of pages\u002Fday; battle-tested for performance\n8. **Compiler optimized** — Build step optimizes component boundaries, splits server\u002Fclient code automatically\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002FTerminalSkills\u002Fskills\u002Fmarko",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":7,"skillName":5,"commands":32,"prompt":42,"zipAvailable":43},[33,36,39],{"tool":34,"command":35},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill marko",{"tool":37,"command":38},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill marko",{"tool":40,"command":41},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill marko","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FTerminalSkills\u002Fskills\u002Fmarko\u002FSKILL.md",true,[45,51,55,59,63],{"path":46,"resourceType":47,"resourceTypeDesc":48,"sizeBytes":49,"sourceHtmlUrl":50},"references\u002Fdownload.md","REFERENCE","参考文档",3237,"https:\u002F\u002Fgithub.com\u002FThamielis\u002F.agents\u002Fblob\u002Fmain\u002Fskills\u002Fpdftk-server\u002Freferences\u002Fdownload.md",{"path":52,"resourceType":47,"resourceTypeDesc":48,"sizeBytes":53,"sourceHtmlUrl":54},"references\u002Fpdftk-cli-examples.md",3391,"https:\u002F\u002Fgithub.com\u002FThamielis\u002F.agents\u002Fblob\u002Fmain\u002Fskills\u002Fpdftk-server\u002Freferences\u002Fpdftk-cli-examples.md",{"path":56,"resourceType":47,"resourceTypeDesc":48,"sizeBytes":57,"sourceHtmlUrl":58},"references\u002Fpdftk-man-page.md",7081,"https:\u002F\u002Fgithub.com\u002FThamielis\u002F.agents\u002Fblob\u002Fmain\u002Fskills\u002Fpdftk-server\u002Freferences\u002Fpdftk-man-page.md",{"path":60,"resourceType":47,"resourceTypeDesc":48,"sizeBytes":61,"sourceHtmlUrl":62},"references\u002Fpdftk-server-license.md",1489,"https:\u002F\u002Fgithub.com\u002FThamielis\u002F.agents\u002Fblob\u002Fmain\u002Fskills\u002Fpdftk-server\u002Freferences\u002Fpdftk-server-license.md",{"path":64,"resourceType":47,"resourceTypeDesc":48,"sizeBytes":65,"sourceHtmlUrl":66},"references\u002Fthird-party-materials.md",9248,"https:\u002F\u002Fgithub.com\u002FThamielis\u002F.agents\u002Fblob\u002Fmain\u002Fskills\u002Fpdftk-server\u002Freferences\u002Fthird-party-materials.md",[68,82,92,101,107,114],{"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":78,"publishedAt":18},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[73],{"categoryNo":74,"categoryName":75,"taxonomyType":76,"taxonomyTypeDesc":77},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[79,80,81],"model","model hierarchy","model hierarchy skill",{"skillNo":83,"name":84,"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":85,"categories":86,"keywords":88,"publishedAt":18},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[87],{"categoryNo":74,"categoryName":75,"taxonomyType":76,"taxonomyTypeDesc":77},[89,90,91],"MCP","zoom","zoom mcp",{"skillNo":93,"name":94,"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":95,"categories":96,"keywords":97,"publishedAt":18},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[98,99,100,90],"sdk","zoom apps sdk","apps",{"skillNo":102,"name":103,"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":104,"categories":105,"keywords":106,"publishedAt":18},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[103],{"skillNo":108,"name":109,"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":110,"categories":111,"keywords":113,"publishedAt":18},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[112],{"categoryNo":74,"categoryName":75,"taxonomyType":76,"taxonomyTypeDesc":77},[109],{"skillNo":115,"name":116,"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":117,"categories":118,"keywords":119,"publishedAt":18},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[116]]