[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6F0WAC3B68YCM2PDG87YMY4":3,"skill-same:01M6F0WAC3B68YCM2PDG87YMY4":95},{"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":31,"publishedAt":52,"linkOnly":53,"markdownContent":54,"markdownBody":55,"frontMatter":56,"refName":60,"commitSha":61,"skillDirectory":62,"forksCount":63,"repositoryHtmlUrl":64,"repositoryHomepageUrl":65,"ownerHtmlUrl":66,"ownerBlogUrl":6,"ownerDescription":67,"updatedAt":68,"install":69,"resources":82},"01M6F0WAC3B68YCM2PDG87YMY4","responsive-design",null,"Create responsive web designs that work across all devices and screen sizes. Use when building mobile-first layouts, implementing breakpoints, or optimizing for different viewports. Handles CSS Grid, Flexbox, media queries, viewport units, and responsive images.","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\u002Faiskillstore\u002Fmarketplace\u002Fsupercent-io\u002Fresponsive-design\u002FSKILL.md",[18,23,26],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51],"responsive","responsive design","design","use","screen","across","query","units","queries","mobile","images","work","Media","first","devices","chatgpt","create","web","gemini","css","2026-11-10 10:12:30",false,"---\nname: responsive-design\ndescription: Create responsive web designs that work across all devices and screen sizes. Use when building mobile-first layouts, implementing breakpoints, or optimizing for different viewports. Handles CSS Grid, Flexbox, media queries, viewport units, and responsive images.\nmetadata:\n  tags: responsive, mobile-first, CSS, Flexbox, Grid, media-query, viewport\n  platforms: Claude, ChatGPT, Gemini\n---\n\n\n# Responsive Design\n\n\n## When to use this skill\n\n- **New website\u002Fapp**: Layout design for combined mobile-desktop use\n- **Legacy improvement**: Converting fixed layouts to responsive\n- **Performance optimization**: Image optimization per device\n- **Multiple screens**: Tablet, desktop, and large screen support\n\n## Instructions\n\n### Step 1: Mobile-First Approach\n\nDesign from small screens and progressively expand.\n\n**Example**:\n```css\n\u002F* Default: Mobile (320px~) *\u002F\n.container {\n  padding: 1rem;\n  font-size: 14px;\n}\n\n.grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 1rem;\n}\n\n\u002F* Tablet (768px~) *\u002F\n@media (min-width: 768px) {\n  .container {\n    padding: 2rem;\n    font-size: 16px;\n  }\n\n  .grid {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 1.5rem;\n  }\n}\n\n\u002F* Desktop (1024px~) *\u002F\n@media (min-width: 1024px) {\n  .container {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 3rem;\n  }\n\n  .grid {\n    grid-template-columns: repeat(3, 1fr);\n    gap: 2rem;\n  }\n}\n\n\u002F* Large screen (1440px~) *\u002F\n@media (min-width: 1440px) {\n  .grid {\n    grid-template-columns: repeat(4, 1fr);\n  }\n}\n```\n\n### Step 2: Flexbox\u002FGrid Layout\n\nLeverage modern CSS layout systems.\n\n**Flexbox** (1-dimensional layout):\n```css\n\u002F* Navigation bar *\u002F\n.navbar {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n}\n\n\u002F* Card list *\u002F\n.card-list {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n@media (min-width: 768px) {\n  .card-list {\n    flex-direction: row;\n    flex-wrap: wrap;\n  }\n\n  .card {\n    flex: 1 1 calc(50% - 0.5rem);  \u002F* 2 columns *\u002F\n  }\n}\n\n@media (min-width: 1024px) {\n  .card {\n    flex: 1 1 calc(33.333% - 0.667rem);  \u002F* 3 columns *\u002F\n  }\n}\n```\n\n**CSS Grid** (2-dimensional layout):\n```css\n\u002F* Dashboard layout *\u002F\n.dashboard {\n  display: grid;\n  grid-template-areas:\n    \"header\"\n    \"sidebar\"\n    \"main\"\n    \"footer\";\n  gap: 1rem;\n}\n\n@media (min-width: 768px) {\n  .dashboard {\n    grid-template-areas:\n      \"header header\"\n      \"sidebar main\"\n      \"footer footer\";\n    grid-template-columns: 250px 1fr;\n  }\n}\n\n@media (min-width: 1024px) {\n  .dashboard {\n    grid-template-columns: 300px 1fr;\n  }\n}\n\n.header { grid-area: header; }\n.sidebar { grid-area: sidebar; }\n.main { grid-area: main; }\n.footer { grid-area: footer; }\n```\n\n### Step 3: Responsive Images\n\nProvide images suited to the device.\n\n**Using srcset**:\n```html\n\u003Cimg\n  src=\"image-800.jpg\"\n  srcset=\"\n    image-400.jpg 400w,\n    image-800.jpg 800w,\n    image-1200.jpg 1200w,\n    image-1600.jpg 1600w\n  \"\n  sizes=\"\n    (max-width: 600px) 100vw,\n    (max-width: 900px) 50vw,\n    33vw\n  \"\n  alt=\"Responsive image\"\n\u002F>\n```\n\n**picture element** (Art Direction):\n```html\n\u003Cpicture>\n  \u003C!-- Mobile: portrait image -->\n  \u003Csource media=\"(max-width: 767px)\" srcset=\"portrait.jpg\">\n\n  \u003C!-- Tablet: square image -->\n  \u003Csource media=\"(max-width: 1023px)\" srcset=\"square.jpg\">\n\n  \u003C!-- Desktop: landscape image -->\n  \u003Cimg src=\"landscape.jpg\" alt=\"Art direction example\">\n\u003C\u002Fpicture>\n```\n\n**CSS background images**:\n```css\n.hero {\n  background-image: url('hero-mobile.jpg');\n}\n\n@media (min-width: 768px) {\n  .hero {\n    background-image: url('hero-tablet.jpg');\n  }\n}\n\n@media (min-width: 1024px) {\n  .hero {\n    background-image: url('hero-desktop.jpg');\n  }\n}\n\n\u002F* Or use image-set() *\u002F\n.hero {\n  background-image: image-set(\n    url('hero-1x.jpg') 1x,\n    url('hero-2x.jpg') 2x\n  );\n}\n```\n\n### Step 4: Responsive Typography\n\nAdjust text size based on screen size.\n\n**clamp() function** (fluid sizing):\n```css\n:root {\n  \u002F* min, preferred, max *\u002F\n  --font-size-body: clamp(14px, 2.5vw, 18px);\n  --font-size-h1: clamp(24px, 5vw, 48px);\n  --font-size-h2: clamp(20px, 4vw, 36px);\n}\n\nbody {\n  font-size: var(--font-size-body);\n}\n\nh1 {\n  font-size: var(--font-size-h1);\n  line-height: 1.2;\n}\n\nh2 {\n  font-size: var(--font-size-h2);\n  line-height: 1.3;\n}\n```\n\n**Media query approach**:\n```css\nbody {\n  font-size: 14px;\n  line-height: 1.6;\n}\n\n@media (min-width: 768px) {\n  body { font-size: 16px; }\n}\n\n@media (min-width: 1024px) {\n  body { font-size: 18px; }\n}\n```\n\n### Step 5: Container Queries (New Feature)\n\nApply styles based on parent container size.\n\n```css\n.card-container {\n  container-type: inline-size;\n  container-name: card;\n}\n\n.card {\n  padding: 1rem;\n}\n\n.card h2 {\n  font-size: 1.2rem;\n}\n\n\u002F* When container is 400px or wider *\u002F\n@container card (min-width: 400px) {\n  .card {\n    display: grid;\n    grid-template-columns: 200px 1fr;\n    padding: 1.5rem;\n  }\n\n  .card h2 {\n    font-size: 1.5rem;\n  }\n}\n\n\u002F* When container is 600px or wider *\u002F\n@container card (min-width: 600px) {\n  .card {\n    grid-template-columns: 300px 1fr;\n    padding: 2rem;\n  }\n}\n```\n\n## Output format\n\n### Standard Breakpoints\n\n```css\n\u002F* Mobile (default): 320px ~ 767px *\u002F\n\u002F* Tablet: 768px ~ 1023px *\u002F\n\u002F* Desktop: 1024px ~ 1439px *\u002F\n\u002F* Large: 1440px+ *\u002F\n\n:root {\n  --breakpoint-sm: 640px;\n  --breakpoint-md: 768px;\n  --breakpoint-lg: 1024px;\n  --breakpoint-xl: 1280px;\n  --breakpoint-2xl: 1536px;\n}\n\n\u002F* Usage example *\u002F\n@media (min-width: 768px) { \u002F* Tablet *\u002F }\n@media (min-width: 1024px) { \u002F* Desktop *\u002F }\n```\n\n## Constraints\n\n### Mandatory Rules (MUST)\n\n1. **Viewport meta tag**: Must be included in HTML\n   ```html\n   \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n   ```\n\n2. **Mobile-First**: Mobile default, use min-width media queries\n   - ✅ `@media (min-width: 768px)`\n   - ❌ `@media (max-width: 767px)` (Desktop-first)\n\n3. **Relative units**: Use rem, em, %, vw\u002Fvh instead of px\n   - font-size: rem\n   - padding\u002Fmargin: rem or em\n   - width: % or vw\n\n### Prohibited (MUST NOT)\n\n1. **Fixed width prohibited**: Avoid `width: 1200px`\n   - Use `max-width: 1200px`\n\n2. **Duplicate code**: Avoid repeating same styles across all breakpoints\n   - Common styles as default, only differences in media queries\n\n## Examples\n\n### Example 1: Responsive Navigation\n\n```tsx\nfunction ResponsiveNav() {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    \u003Cnav className=\"navbar\">\n      {\u002F* Logo *\u002F}\n      \u003Ca href=\"\u002F\" className=\"logo\">MyApp\u003C\u002Fa>\n\n      {\u002F* Hamburger button (mobile) *\u002F}\n      \u003Cbutton\n        className=\"menu-toggle\"\n        onClick={() => setIsOpen(!isOpen)}\n        aria-label=\"Toggle menu\"\n        aria-expanded={isOpen}\n      >\n        \u003Cspan>\u003C\u002Fspan>\n        \u003Cspan>\u003C\u002Fspan>\n        \u003Cspan>\u003C\u002Fspan>\n      \u003C\u002Fbutton>\n\n      {\u002F* Navigation links *\u002F}\n      \u003Cul className={`nav-links ${isOpen ? 'active' : ''}`}>\n        \u003Cli>\u003Ca href=\"\u002Fabout\">About\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"\u002Fservices\">Services\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"\u002Fcontact\">Contact\u003C\u002Fa>\u003C\u002Fli>\n      \u003C\u002Ful>\n    \u003C\u002Fnav>\n  );\n}\n```\n\n```css\n.navbar {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1rem;\n}\n\n\u002F* Hamburger button (mobile only) *\u002F\n.menu-toggle {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.nav-links {\n  display: none;\n  position: absolute;\n  top: 60px;\n  left: 0;\n  right: 0;\n  background: white;\n  flex-direction: column;\n}\n\n.nav-links.active {\n  display: flex;\n}\n\n\u002F* Tablet and above: hide hamburger, always show *\u002F\n@media (min-width: 768px) {\n  .menu-toggle {\n    display: none;\n  }\n\n  .nav-links {\n    display: flex;\n    position: static;\n    flex-direction: row;\n    gap: 2rem;\n  }\n}\n```\n\n### Example 2: Responsive Grid Card\n\n```tsx\nfunction ProductGrid({ products }) {\n  return (\n    \u003Cdiv className=\"product-grid\">\n      {products.map(product => (\n        \u003Cdiv key={product.id} className=\"product-card\">\n          \u003Cimg src={product.image} alt={product.name} \u002F>\n          \u003Ch3>{product.name}\u003C\u002Fh3>\n          \u003Cp className=\"price\">${product.price}\u003C\u002Fp>\n          \u003Cbutton>Add to Cart\u003C\u002Fbutton>\n        \u003C\u002Fdiv>\n      ))}\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n```css\n.product-grid {\n  display: grid;\n  grid-template-columns: 1fr;  \u002F* Mobile: 1 column *\u002F\n  gap: 1rem;\n  padding: 1rem;\n}\n\n@media (min-width: 640px) {\n  .product-grid {\n    grid-template-columns: repeat(2, 1fr);  \u002F* 2 columns *\u002F\n  }\n}\n\n@media (min-width: 1024px) {\n  .product-grid {\n    grid-template-columns: repeat(3, 1fr);  \u002F* 3 columns *\u002F\n    gap: 1.5rem;\n  }\n}\n\n@media (min-width: 1440px) {\n  .product-grid {\n    grid-template-columns: repeat(4, 1fr);  \u002F* 4 columns *\u002F\n    gap: 2rem;\n  }\n}\n\n.product-card {\n  border: 1px solid #ddd;\n  border-radius: 8px;\n  padding: 1rem;\n}\n\n.product-card img {\n  width: 100%;\n  height: auto;\n  aspect-ratio: 1 \u002F 1;\n  object-fit: cover;\n}\n```\n\n## Best practices\n\n1. **Container queries first**: Use container queries instead of media queries when possible\n2. **Flexbox vs Grid**: Flexbox for 1-dimensional, Grid for 2-dimensional\n3. **Performance**: Image lazy loading, use WebP format\n4. **Testing**: Chrome DevTools Device Mode, BrowserStack\n\n## References\n\n- [MDN Responsive Design](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FLearn\u002FCSS\u002FCSS_layout\u002FResponsive_Design)\n- [CSS Grid Guide](https:\u002F\u002Fcss-tricks.com\u002Fsnippets\u002Fcss\u002Fcomplete-guide-grid\u002F)\n- [Flexbox Guide](https:\u002F\u002Fcss-tricks.com\u002Fsnippets\u002Fcss\u002Fa-guide-to-flexbox\u002F)\n- [Container Queries](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_Container_Queries)\n\n## Metadata\n\n### Version\n- **Current Version**: 1.0.0\n- **Last Updated**: 2025-01-01\n- **Compatible Platforms**: Claude, ChatGPT, Gemini\n\n### Related Skills\n- [ui-component-patterns](..\u002Fui-component-patterns\u002FSKILL.md): Responsive components\n- [web-accessibility](..\u002Fweb-accessibility\u002FSKILL.md): Consider alongside accessibility\n\n### Tags\n`#responsive` `#mobile-first` `#CSS` `#Flexbox` `#Grid` `#media-query` `#frontend`\n","# Responsive Design\n\n\n## When to use this skill\n\n- **New website\u002Fapp**: Layout design for combined mobile-desktop use\n- **Legacy improvement**: Converting fixed layouts to responsive\n- **Performance optimization**: Image optimization per device\n- **Multiple screens**: Tablet, desktop, and large screen support\n\n## Instructions\n\n### Step 1: Mobile-First Approach\n\nDesign from small screens and progressively expand.\n\n**Example**:\n```css\n\u002F* Default: Mobile (320px~) *\u002F\n.container {\n  padding: 1rem;\n  font-size: 14px;\n}\n\n.grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 1rem;\n}\n\n\u002F* Tablet (768px~) *\u002F\n@media (min-width: 768px) {\n  .container {\n    padding: 2rem;\n    font-size: 16px;\n  }\n\n  .grid {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 1.5rem;\n  }\n}\n\n\u002F* Desktop (1024px~) *\u002F\n@media (min-width: 1024px) {\n  .container {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 3rem;\n  }\n\n  .grid {\n    grid-template-columns: repeat(3, 1fr);\n    gap: 2rem;\n  }\n}\n\n\u002F* Large screen (1440px~) *\u002F\n@media (min-width: 1440px) {\n  .grid {\n    grid-template-columns: repeat(4, 1fr);\n  }\n}\n```\n\n### Step 2: Flexbox\u002FGrid Layout\n\nLeverage modern CSS layout systems.\n\n**Flexbox** (1-dimensional layout):\n```css\n\u002F* Navigation bar *\u002F\n.navbar {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n}\n\n\u002F* Card list *\u002F\n.card-list {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n@media (min-width: 768px) {\n  .card-list {\n    flex-direction: row;\n    flex-wrap: wrap;\n  }\n\n  .card {\n    flex: 1 1 calc(50% - 0.5rem);  \u002F* 2 columns *\u002F\n  }\n}\n\n@media (min-width: 1024px) {\n  .card {\n    flex: 1 1 calc(33.333% - 0.667rem);  \u002F* 3 columns *\u002F\n  }\n}\n```\n\n**CSS Grid** (2-dimensional layout):\n```css\n\u002F* Dashboard layout *\u002F\n.dashboard {\n  display: grid;\n  grid-template-areas:\n    \"header\"\n    \"sidebar\"\n    \"main\"\n    \"footer\";\n  gap: 1rem;\n}\n\n@media (min-width: 768px) {\n  .dashboard {\n    grid-template-areas:\n      \"header header\"\n      \"sidebar main\"\n      \"footer footer\";\n    grid-template-columns: 250px 1fr;\n  }\n}\n\n@media (min-width: 1024px) {\n  .dashboard {\n    grid-template-columns: 300px 1fr;\n  }\n}\n\n.header { grid-area: header; }\n.sidebar { grid-area: sidebar; }\n.main { grid-area: main; }\n.footer { grid-area: footer; }\n```\n\n### Step 3: Responsive Images\n\nProvide images suited to the device.\n\n**Using srcset**:\n```html\n\u003Cimg\n  src=\"image-800.jpg\"\n  srcset=\"\n    image-400.jpg 400w,\n    image-800.jpg 800w,\n    image-1200.jpg 1200w,\n    image-1600.jpg 1600w\n  \"\n  sizes=\"\n    (max-width: 600px) 100vw,\n    (max-width: 900px) 50vw,\n    33vw\n  \"\n  alt=\"Responsive image\"\n\u002F>\n```\n\n**picture element** (Art Direction):\n```html\n\u003Cpicture>\n  \u003C!-- Mobile: portrait image -->\n  \u003Csource media=\"(max-width: 767px)\" srcset=\"portrait.jpg\">\n\n  \u003C!-- Tablet: square image -->\n  \u003Csource media=\"(max-width: 1023px)\" srcset=\"square.jpg\">\n\n  \u003C!-- Desktop: landscape image -->\n  \u003Cimg src=\"landscape.jpg\" alt=\"Art direction example\">\n\u003C\u002Fpicture>\n```\n\n**CSS background images**:\n```css\n.hero {\n  background-image: url('hero-mobile.jpg');\n}\n\n@media (min-width: 768px) {\n  .hero {\n    background-image: url('hero-tablet.jpg');\n  }\n}\n\n@media (min-width: 1024px) {\n  .hero {\n    background-image: url('hero-desktop.jpg');\n  }\n}\n\n\u002F* Or use image-set() *\u002F\n.hero {\n  background-image: image-set(\n    url('hero-1x.jpg') 1x,\n    url('hero-2x.jpg') 2x\n  );\n}\n```\n\n### Step 4: Responsive Typography\n\nAdjust text size based on screen size.\n\n**clamp() function** (fluid sizing):\n```css\n:root {\n  \u002F* min, preferred, max *\u002F\n  --font-size-body: clamp(14px, 2.5vw, 18px);\n  --font-size-h1: clamp(24px, 5vw, 48px);\n  --font-size-h2: clamp(20px, 4vw, 36px);\n}\n\nbody {\n  font-size: var(--font-size-body);\n}\n\nh1 {\n  font-size: var(--font-size-h1);\n  line-height: 1.2;\n}\n\nh2 {\n  font-size: var(--font-size-h2);\n  line-height: 1.3;\n}\n```\n\n**Media query approach**:\n```css\nbody {\n  font-size: 14px;\n  line-height: 1.6;\n}\n\n@media (min-width: 768px) {\n  body { font-size: 16px; }\n}\n\n@media (min-width: 1024px) {\n  body { font-size: 18px; }\n}\n```\n\n### Step 5: Container Queries (New Feature)\n\nApply styles based on parent container size.\n\n```css\n.card-container {\n  container-type: inline-size;\n  container-name: card;\n}\n\n.card {\n  padding: 1rem;\n}\n\n.card h2 {\n  font-size: 1.2rem;\n}\n\n\u002F* When container is 400px or wider *\u002F\n@container card (min-width: 400px) {\n  .card {\n    display: grid;\n    grid-template-columns: 200px 1fr;\n    padding: 1.5rem;\n  }\n\n  .card h2 {\n    font-size: 1.5rem;\n  }\n}\n\n\u002F* When container is 600px or wider *\u002F\n@container card (min-width: 600px) {\n  .card {\n    grid-template-columns: 300px 1fr;\n    padding: 2rem;\n  }\n}\n```\n\n## Output format\n\n### Standard Breakpoints\n\n```css\n\u002F* Mobile (default): 320px ~ 767px *\u002F\n\u002F* Tablet: 768px ~ 1023px *\u002F\n\u002F* Desktop: 1024px ~ 1439px *\u002F\n\u002F* Large: 1440px+ *\u002F\n\n:root {\n  --breakpoint-sm: 640px;\n  --breakpoint-md: 768px;\n  --breakpoint-lg: 1024px;\n  --breakpoint-xl: 1280px;\n  --breakpoint-2xl: 1536px;\n}\n\n\u002F* Usage example *\u002F\n@media (min-width: 768px) { \u002F* Tablet *\u002F }\n@media (min-width: 1024px) { \u002F* Desktop *\u002F }\n```\n\n## Constraints\n\n### Mandatory Rules (MUST)\n\n1. **Viewport meta tag**: Must be included in HTML\n   ```html\n   \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n   ```\n\n2. **Mobile-First**: Mobile default, use min-width media queries\n   - ✅ `@media (min-width: 768px)`\n   - ❌ `@media (max-width: 767px)` (Desktop-first)\n\n3. **Relative units**: Use rem, em, %, vw\u002Fvh instead of px\n   - font-size: rem\n   - padding\u002Fmargin: rem or em\n   - width: % or vw\n\n### Prohibited (MUST NOT)\n\n1. **Fixed width prohibited**: Avoid `width: 1200px`\n   - Use `max-width: 1200px`\n\n2. **Duplicate code**: Avoid repeating same styles across all breakpoints\n   - Common styles as default, only differences in media queries\n\n## Examples\n\n### Example 1: Responsive Navigation\n\n```tsx\nfunction ResponsiveNav() {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    \u003Cnav className=\"navbar\">\n      {\u002F* Logo *\u002F}\n      \u003Ca href=\"\u002F\" className=\"logo\">MyApp\u003C\u002Fa>\n\n      {\u002F* Hamburger button (mobile) *\u002F}\n      \u003Cbutton\n        className=\"menu-toggle\"\n        onClick={() => setIsOpen(!isOpen)}\n        aria-label=\"Toggle menu\"\n        aria-expanded={isOpen}\n      >\n        \u003Cspan>\u003C\u002Fspan>\n        \u003Cspan>\u003C\u002Fspan>\n        \u003Cspan>\u003C\u002Fspan>\n      \u003C\u002Fbutton>\n\n      {\u002F* Navigation links *\u002F}\n      \u003Cul className={`nav-links ${isOpen ? 'active' : ''}`}>\n        \u003Cli>\u003Ca href=\"\u002Fabout\">About\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"\u002Fservices\">Services\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"\u002Fcontact\">Contact\u003C\u002Fa>\u003C\u002Fli>\n      \u003C\u002Ful>\n    \u003C\u002Fnav>\n  );\n}\n```\n\n```css\n.navbar {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1rem;\n}\n\n\u002F* Hamburger button (mobile only) *\u002F\n.menu-toggle {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.nav-links {\n  display: none;\n  position: absolute;\n  top: 60px;\n  left: 0;\n  right: 0;\n  background: white;\n  flex-direction: column;\n}\n\n.nav-links.active {\n  display: flex;\n}\n\n\u002F* Tablet and above: hide hamburger, always show *\u002F\n@media (min-width: 768px) {\n  .menu-toggle {\n    display: none;\n  }\n\n  .nav-links {\n    display: flex;\n    position: static;\n    flex-direction: row;\n    gap: 2rem;\n  }\n}\n```\n\n### Example 2: Responsive Grid Card\n\n```tsx\nfunction ProductGrid({ products }) {\n  return (\n    \u003Cdiv className=\"product-grid\">\n      {products.map(product => (\n        \u003Cdiv key={product.id} className=\"product-card\">\n          \u003Cimg src={product.image} alt={product.name} \u002F>\n          \u003Ch3>{product.name}\u003C\u002Fh3>\n          \u003Cp className=\"price\">${product.price}\u003C\u002Fp>\n          \u003Cbutton>Add to Cart\u003C\u002Fbutton>\n        \u003C\u002Fdiv>\n      ))}\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n```css\n.product-grid {\n  display: grid;\n  grid-template-columns: 1fr;  \u002F* Mobile: 1 column *\u002F\n  gap: 1rem;\n  padding: 1rem;\n}\n\n@media (min-width: 640px) {\n  .product-grid {\n    grid-template-columns: repeat(2, 1fr);  \u002F* 2 columns *\u002F\n  }\n}\n\n@media (min-width: 1024px) {\n  .product-grid {\n    grid-template-columns: repeat(3, 1fr);  \u002F* 3 columns *\u002F\n    gap: 1.5rem;\n  }\n}\n\n@media (min-width: 1440px) {\n  .product-grid {\n    grid-template-columns: repeat(4, 1fr);  \u002F* 4 columns *\u002F\n    gap: 2rem;\n  }\n}\n\n.product-card {\n  border: 1px solid #ddd;\n  border-radius: 8px;\n  padding: 1rem;\n}\n\n.product-card img {\n  width: 100%;\n  height: auto;\n  aspect-ratio: 1 \u002F 1;\n  object-fit: cover;\n}\n```\n\n## Best practices\n\n1. **Container queries first**: Use container queries instead of media queries when possible\n2. **Flexbox vs Grid**: Flexbox for 1-dimensional, Grid for 2-dimensional\n3. **Performance**: Image lazy loading, use WebP format\n4. **Testing**: Chrome DevTools Device Mode, BrowserStack\n\n## References\n\n- [MDN Responsive Design](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FLearn\u002FCSS\u002FCSS_layout\u002FResponsive_Design)\n- [CSS Grid Guide](https:\u002F\u002Fcss-tricks.com\u002Fsnippets\u002Fcss\u002Fcomplete-guide-grid\u002F)\n- [Flexbox Guide](https:\u002F\u002Fcss-tricks.com\u002Fsnippets\u002Fcss\u002Fa-guide-to-flexbox\u002F)\n- [Container Queries](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_Container_Queries)\n\n## Metadata\n\n### Version\n- **Current Version**: 1.0.0\n- **Last Updated**: 2025-01-01\n- **Compatible Platforms**: Claude, ChatGPT, Gemini\n\n### Related Skills\n- [ui-component-patterns](..\u002Fui-component-patterns\u002FSKILL.md): Responsive components\n- [web-accessibility](..\u002Fweb-accessibility\u002FSKILL.md): Consider alongside accessibility\n\n### Tags\n`#responsive` `#mobile-first` `#CSS` `#Flexbox` `#Grid` `#media-query` `#frontend`\n",{"name":5,"metadata":57,"description":7},{"tags":58,"platforms":59},"responsive, mobile-first, CSS, Flexbox, Grid, media-query, viewport","Claude, ChatGPT, Gemini","main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Faiskillstore\u002Fmarketplace\u002Fsupercent-io\u002Fresponsive-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":70,"prompt":80,"zipAvailable":81},[71,74,77],{"tool":72,"command":73},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill responsive-design",{"tool":75,"command":76},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill responsive-design",{"tool":78,"command":79},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill responsive-design","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fsupercent-io\u002Fresponsive-design\u002FSKILL.md",true,[83,89],{"path":84,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":87,"sourceHtmlUrl":88},"skill-report.json","REFERENCE","参考文档",15715,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fsupercent-io\u002Fresponsive-design\u002Fskill-report.json",{"path":90,"resourceType":91,"resourceTypeDesc":92,"sizeBytes":93,"sourceHtmlUrl":94},"SKILL.toon","OTHER","其他",584,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fsupercent-io\u002Fresponsive-design\u002FSKILL.toon",[96,108,118,127,133,140],{"skillNo":97,"name":98,"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":99,"categories":100,"keywords":104,"publishedAt":52},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[101],{"categoryNo":102,"categoryName":103,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[105,106,107],"model","model hierarchy","model hierarchy skill",{"skillNo":109,"name":110,"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":111,"categories":112,"keywords":114,"publishedAt":52},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[113],{"categoryNo":102,"categoryName":103,"taxonomyType":21,"taxonomyTypeDesc":22},[115,116,117],"MCP","zoom","zoom mcp",{"skillNo":119,"name":120,"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":121,"categories":122,"keywords":123,"publishedAt":52},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[124,125,126,116],"sdk","zoom apps sdk","apps",{"skillNo":128,"name":129,"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":130,"categories":131,"keywords":132,"publishedAt":52},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[129],{"skillNo":134,"name":135,"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":136,"categories":137,"keywords":139,"publishedAt":52},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[138],{"categoryNo":102,"categoryName":103,"taxonomyType":21,"taxonomyTypeDesc":22},[135],{"skillNo":141,"name":142,"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":143,"categories":144,"keywords":145,"publishedAt":52},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[142]]