[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FDGMFDX1VD6ZEEBY77KXDG":3,"skill-same:01M6FDGMFDX1VD6ZEEBY77KXDG":45},{"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},"01M6FDGMFDX1VD6ZEEBY77KXDG","adapt",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fmxyhi\u002Fok-skills\u002Fadapt\u002FSKILL.md",[],[5],"2026-11-10 10:12:30",false,"Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.\n\n## Assess Adaptation Challenge\n\nUnderstand what needs adaptation and why:\n\n1. **Identify the source context**:\n   - What was it designed for originally? (Desktop web? Mobile app?)\n   - What assumptions were made? (Large screen? Mouse input? Fast connection?)\n   - What works well in current context?\n\n2. **Understand target context**:\n   - **Device**: Mobile, tablet, desktop, TV, watch, print?\n   - **Input method**: Touch, mouse, keyboard, voice, gamepad?\n   - **Screen constraints**: Size, resolution, orientation?\n   - **Connection**: Fast wifi, slow 3G, offline?\n   - **Usage context**: On-the-go vs desk, quick glance vs focused reading?\n   - **User expectations**: What do users expect on this platform?\n\n3. **Identify adaptation challenges**:\n   - What won't fit? (Content, navigation, features)\n   - What won't work? (Hover states on touch, tiny touch targets)\n   - What's inappropriate? (Desktop patterns on mobile, mobile patterns on desktop)\n\n**CRITICAL**: Adaptation is not just scaling - it's rethinking the experience for the new context.\n\n## Plan Adaptation Strategy\n\nCreate context-appropriate strategy:\n\n### Mobile Adaptation (Desktop → Mobile)\n\n**Layout Strategy**:\n- Single column instead of multi-column\n- Vertical stacking instead of side-by-side\n- Full-width components instead of fixed widths\n- Bottom navigation instead of top\u002Fside navigation\n\n**Interaction Strategy**:\n- Touch targets 44x44px minimum (not hover-dependent)\n- Swipe gestures where appropriate (lists, carousels)\n- Bottom sheets instead of dropdowns\n- Thumbs-first design (controls within thumb reach)\n- Larger tap areas with more spacing\n\n**Content Strategy**:\n- Progressive disclosure (don't show everything at once)\n- Prioritize primary content (secondary content in tabs\u002Faccordions)\n- Shorter text (more concise)\n- Larger text (16px minimum)\n\n**Navigation Strategy**:\n- Hamburger menu or bottom navigation\n- Reduce navigation complexity\n- Sticky headers for context\n- Back button in navigation flow\n\n### Tablet Adaptation (Hybrid Approach)\n\n**Layout Strategy**:\n- Two-column layouts (not single or three-column)\n- Side panels for secondary content\n- Master-detail views (list + detail)\n- Adaptive based on orientation (portrait vs landscape)\n\n**Interaction Strategy**:\n- Support both touch and pointer\n- Touch targets 44x44px but allow denser layouts than phone\n- Side navigation drawers\n- Multi-column forms where appropriate\n\n### Desktop Adaptation (Mobile → Desktop)\n\n**Layout Strategy**:\n- Multi-column layouts (use horizontal space)\n- Side navigation always visible\n- Multiple information panels simultaneously\n- Fixed widths with max-width constraints (don't stretch to 4K)\n\n**Interaction Strategy**:\n- Hover states for additional information\n- Keyboard shortcuts\n- Right-click context menus\n- Drag and drop where helpful\n- Multi-select with Shift\u002FCmd\n\n**Content Strategy**:\n- Show more information upfront (less progressive disclosure)\n- Data tables with many columns\n- Richer visualizations\n- More detailed descriptions\n\n### Print Adaptation (Screen → Print)\n\n**Layout Strategy**:\n- Page breaks at logical points\n- Remove navigation, footer, interactive elements\n- Black and white (or limited color)\n- Proper margins for binding\n\n**Content Strategy**:\n- Expand shortened content (show full URLs, hidden sections)\n- Add page numbers, headers, footers\n- Include metadata (print date, page title)\n- Convert charts to print-friendly versions\n\n### Email Adaptation (Web → Email)\n\n**Layout Strategy**:\n- Narrow width (600px max)\n- Single column only\n- Inline CSS (no external stylesheets)\n- Table-based layouts (for email client compatibility)\n\n**Interaction Strategy**:\n- Large, obvious CTAs (buttons not text links)\n- No hover states (not reliable)\n- Deep links to web app for complex interactions\n\n## Implement Adaptations\n\nApply changes systematically:\n\n### Responsive Breakpoints\n\nChoose appropriate breakpoints:\n- Mobile: 320px-767px\n- Tablet: 768px-1023px\n- Desktop: 1024px+\n- Or content-driven breakpoints (where design breaks)\n\n### Layout Adaptation Techniques\n\n- **CSS Grid\u002FFlexbox**: Reflow layouts automatically\n- **Container Queries**: Adapt based on container, not viewport\n- **`clamp()`**: Fluid sizing between min and max\n- **Media queries**: Different styles for different contexts\n- **Display properties**: Show\u002Fhide elements per context\n\n### Touch Adaptation\n\n- Increase touch target sizes (44x44px minimum)\n- Add more spacing between interactive elements\n- Remove hover-dependent interactions\n- Add touch feedback (ripples, highlights)\n- Consider thumb zones (easier to reach bottom than top)\n\n### Content Adaptation\n\n- Use `display: none` sparingly (still downloads)\n- Progressive enhancement (core content first, enhancements on larger screens)\n- Lazy loading for off-screen content\n- Responsive images (`srcset`, `picture` element)\n\n### Navigation Adaptation\n\n- Transform complex nav to hamburger\u002Fdrawer on mobile\n- Bottom nav bar for mobile apps\n- Persistent side navigation on desktop\n- Breadcrumbs on smaller screens for context\n\n**IMPORTANT**: Test on real devices, not just browser DevTools. Device emulation is helpful but not perfect.\n\n**NEVER**:\n- Hide core functionality on mobile (if it matters, make it work)\n- Assume desktop = powerful device (consider accessibility, older machines)\n- Use different information architecture across contexts (confusing)\n- Break user expectations for platform (mobile users expect mobile patterns)\n- Forget landscape orientation on mobile\u002Ftablet\n- Use generic breakpoints blindly (use content-driven breakpoints)\n- Ignore touch on desktop (many desktop devices have touch)\n\n## Verify Adaptations\n\nTest thoroughly across contexts:\n\n- **Real devices**: Test on actual phones, tablets, desktops\n- **Different orientations**: Portrait and landscape\n- **Different browsers**: Safari, Chrome, Firefox, Edge\n- **Different OS**: iOS, Android, Windows, macOS\n- **Different input methods**: Touch, mouse, keyboard\n- **Edge cases**: Very small screens (320px), very large screens (4K)\n- **Slow connections**: Test on throttled network\n\nRemember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly.\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Fmxyhi\u002Fok-skills\u002Fadapt",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 adapt",{"tool":37,"command":38},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill adapt",{"tool":40,"command":41},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill adapt","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fmxyhi\u002Fok-skills\u002Fadapt\u002FSKILL.md",true,[],[46,60,70,79,85,92],{"skillNo":47,"name":48,"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":49,"categories":50,"keywords":56,"publishedAt":18},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[51],{"categoryNo":52,"categoryName":53,"taxonomyType":54,"taxonomyTypeDesc":55},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[57,58,59],"model","model hierarchy","model hierarchy skill",{"skillNo":61,"name":62,"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":63,"categories":64,"keywords":66,"publishedAt":18},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[65],{"categoryNo":52,"categoryName":53,"taxonomyType":54,"taxonomyTypeDesc":55},[67,68,69],"MCP","zoom","zoom mcp",{"skillNo":71,"name":72,"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":73,"categories":74,"keywords":75,"publishedAt":18},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[76,77,78,68],"sdk","zoom apps sdk","apps",{"skillNo":80,"name":81,"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":82,"categories":83,"keywords":84,"publishedAt":18},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[81],{"skillNo":86,"name":87,"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":88,"categories":89,"keywords":91,"publishedAt":18},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[90],{"categoryNo":52,"categoryName":53,"taxonomyType":54,"taxonomyTypeDesc":55},[87],{"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},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[94]]