[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FGNPT7J4VGME8QJC5K6ADP":3,"skill-same:01M6FGNPT7J4VGME8QJC5K6ADP":67},{"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":6,"sourceHtmlUrl":16,"categories":17,"keywords":28,"publishedAt":39,"linkOnly":40,"markdownContent":41,"markdownBody":42,"frontMatter":43,"refName":44,"commitSha":45,"skillDirectory":46,"forksCount":47,"repositoryHtmlUrl":48,"repositoryHomepageUrl":49,"ownerHtmlUrl":50,"ownerBlogUrl":6,"ownerDescription":51,"updatedAt":52,"install":53,"resources":66},"01M6FGNPT7J4VGME8QJC5K6ADP","mobile-first-design",null,"Designs responsive interfaces starting from mobile screens with progressive enhancement for larger devices. Use when building responsive websites, optimizing for mobile users, or implementing adaptive layouts.","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\u002Fsecondsky\u002Fclaude-skills\u002Fmobile-first-design\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[29,30,31,32,33,34,35,36,37,38],"design","first","mobile","mobile first","mobile first design","devices","use","responsive","users","with","2026-11-10 10:12:30",false,"---\nname: mobile-first-design\ndescription: Designs responsive interfaces starting from mobile screens with progressive enhancement for larger devices. Use when building responsive websites, optimizing for mobile users, or implementing adaptive layouts.\nlicense: MIT\n---\n\n# Mobile-First Design\n\nDesign interfaces starting with mobile as the foundation, then enhance for larger screens.\n\n## Breakpoints\n\n| Name | Width | Devices |\n|------|-------|---------|\n| Mobile | 320-480px | iPhone SE, small Android |\n| Tablet | 481-768px | iPad mini |\n| Desktop | 769-1024px | iPad Pro, laptops |\n| Large | 1025px+ | Desktop monitors |\n\n## Mobile-First CSS\n\n```css\n\u002F* Base styles (mobile) *\u002F\n.container {\n  padding: 1rem;\n}\n\n.nav {\n  display: none; \u002F* Hidden on mobile *\u002F\n}\n\n.nav-toggle {\n  display: block; \u002F* Hamburger visible *\u002F\n}\n\n\u002F* Tablet and up *\u002F\n@media (min-width: 768px) {\n  .container {\n    padding: 2rem;\n    max-width: 720px;\n    margin: 0 auto;\n  }\n\n  .nav {\n    display: flex;\n  }\n\n  .nav-toggle {\n    display: none;\n  }\n}\n\n\u002F* Desktop *\u002F\n@media (min-width: 1024px) {\n  .container {\n    max-width: 960px;\n  }\n}\n```\n\n## Touch-Friendly Design\n\n```css\n\u002F* Minimum touch target: 48x48px *\u002F\n.button {\n  min-height: 48px;\n  min-width: 48px;\n  padding: 12px 24px;\n}\n\n\u002F* Adequate spacing *\u002F\n.list-item {\n  padding: 16px;\n  margin-bottom: 8px;\n}\n```\n\n## Performance Requirements\n\n| Metric | Target |\n|--------|--------|\n| First Contentful Paint | \u003C3s on 3G |\n| JS bundle | \u003C100KB gzipped |\n| Total page weight | \u003C500KB |\n\n## Progressive Enhancement\n\n```html\n\u003C!-- Layer 1: Semantic HTML (works without CSS\u002FJS) -->\n\u003Cnav>\n  \u003Ca href=\"\u002Fhome\">Home\u003C\u002Fa>\n  \u003Ca href=\"\u002Fabout\">About\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003C!-- Layer 2: CSS enhances appearance -->\n\u003C!-- Layer 3: JS adds interactivity -->\n```\n\n## Best Practices\n\n- Start design at 320px width\n- Use relative units (rem, %, vw)\n- Test on real devices\n- Optimize images for mobile\n- Minimize JavaScript for initial load\n- Ensure readable text without zooming\n","# Mobile-First Design\n\nDesign interfaces starting with mobile as the foundation, then enhance for larger screens.\n\n## Breakpoints\n\n| Name | Width | Devices |\n|------|-------|---------|\n| Mobile | 320-480px | iPhone SE, small Android |\n| Tablet | 481-768px | iPad mini |\n| Desktop | 769-1024px | iPad Pro, laptops |\n| Large | 1025px+ | Desktop monitors |\n\n## Mobile-First CSS\n\n```css\n\u002F* Base styles (mobile) *\u002F\n.container {\n  padding: 1rem;\n}\n\n.nav {\n  display: none; \u002F* Hidden on mobile *\u002F\n}\n\n.nav-toggle {\n  display: block; \u002F* Hamburger visible *\u002F\n}\n\n\u002F* Tablet and up *\u002F\n@media (min-width: 768px) {\n  .container {\n    padding: 2rem;\n    max-width: 720px;\n    margin: 0 auto;\n  }\n\n  .nav {\n    display: flex;\n  }\n\n  .nav-toggle {\n    display: none;\n  }\n}\n\n\u002F* Desktop *\u002F\n@media (min-width: 1024px) {\n  .container {\n    max-width: 960px;\n  }\n}\n```\n\n## Touch-Friendly Design\n\n```css\n\u002F* Minimum touch target: 48x48px *\u002F\n.button {\n  min-height: 48px;\n  min-width: 48px;\n  padding: 12px 24px;\n}\n\n\u002F* Adequate spacing *\u002F\n.list-item {\n  padding: 16px;\n  margin-bottom: 8px;\n}\n```\n\n## Performance Requirements\n\n| Metric | Target |\n|--------|--------|\n| First Contentful Paint | \u003C3s on 3G |\n| JS bundle | \u003C100KB gzipped |\n| Total page weight | \u003C500KB |\n\n## Progressive Enhancement\n\n```html\n\u003C!-- Layer 1: Semantic HTML (works without CSS\u002FJS) -->\n\u003Cnav>\n  \u003Ca href=\"\u002Fhome\">Home\u003C\u002Fa>\n  \u003Ca href=\"\u002Fabout\">About\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003C!-- Layer 2: CSS enhances appearance -->\n\u003C!-- Layer 3: JS adds interactivity -->\n```\n\n## Best Practices\n\n- Start design at 320px width\n- Use relative units (rem, %, vw)\n- Test on real devices\n- Optimize images for mobile\n- Minimize JavaScript for initial load\n- Ensure readable text without zooming\n",{"name":5,"license":15,"description":7},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Fsecondsky\u002Fclaude-skills\u002Fmobile-first-design",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":8,"skillName":5,"commands":54,"prompt":64,"zipAvailable":65},[55,58,61],{"tool":56,"command":57},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill mobile-first-design",{"tool":59,"command":60},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill mobile-first-design",{"tool":62,"command":63},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill mobile-first-design","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fsecondsky\u002Fclaude-skills\u002Fmobile-first-design\u002FSKILL.md",true,[],[68,80,90,99,105,112],{"skillNo":69,"name":70,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":71,"categories":72,"keywords":76,"publishedAt":39},"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":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[77,78,79],"model","model hierarchy","model hierarchy skill",{"skillNo":81,"name":82,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":83,"categories":84,"keywords":86,"publishedAt":39},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[85],{"categoryNo":74,"categoryName":75,"taxonomyType":21,"taxonomyTypeDesc":22},[87,88,89],"MCP","zoom","zoom mcp",{"skillNo":91,"name":92,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":93,"categories":94,"keywords":95,"publishedAt":39},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[96,97,98,88],"sdk","zoom apps sdk","apps",{"skillNo":100,"name":101,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":102,"categories":103,"keywords":104,"publishedAt":39},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[101],{"skillNo":106,"name":107,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":108,"categories":109,"keywords":111,"publishedAt":39},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[110],{"categoryNo":74,"categoryName":75,"taxonomyType":21,"taxonomyTypeDesc":22},[107],{"skillNo":113,"name":114,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":115,"categories":116,"keywords":117,"publishedAt":39},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[114]]