{
  "schemaVersion": "1.0",
  "item": {
    "slug": "responsive-design",
    "name": "Responsive Design",
    "source": "tencent",
    "type": "skill",
    "category": "内容创作",
    "sourceUrl": "https://clawhub.ai/wpank/responsive-design",
    "canonicalUrl": "https://clawhub.ai/wpank/responsive-design",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/responsive-design",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=responsive-design",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "README.md",
      "SKILL.md",
      "references/container-queries.md",
      "references/breakpoint-strategies.md",
      "references/fluid-layouts.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "Download the package from Yavira.",
        "Extract it into a folder your agent can access.",
        "Paste one of the prompts below and point your agent at the extracted folder."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete."
        },
        {
          "label": "Upgrade existing",
          "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "slug": "responsive-design",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-30T13:41:04.082Z",
      "expiresAt": "2026-05-07T13:41:04.082Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=responsive-design",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=responsive-design",
        "contentDisposition": "attachment; filename=\"responsive-design-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null,
        "slug": "responsive-design"
      },
      "scope": "item",
      "summary": "Item download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this item.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/responsive-design"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/responsive-design",
    "agentPageUrl": "https://openagent3.xyz/skills/responsive-design/agent",
    "manifestUrl": "https://openagent3.xyz/skills/responsive-design/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/responsive-design/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "Download the package from Yavira.",
      "Extract it into a folder your agent can access.",
      "Paste one of the prompts below and point your agent at the extracted folder."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete."
      },
      {
        "label": "Upgrade existing",
        "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "Responsive Design",
        "body": "Modern responsive CSS patterns using container queries, fluid typography, CSS Grid, and mobile-first strategies."
      },
      {
        "title": "WHAT",
        "body": "Comprehensive responsive design techniques:\n\nContainer queries for component-level responsiveness\nFluid typography and spacing with clamp()\nCSS Grid and Flexbox layout patterns\nMobile-first breakpoint strategies\nResponsive images and media\nViewport units and dynamic sizing"
      },
      {
        "title": "WHEN",
        "body": "Building layouts that adapt across screen sizes\nCreating reusable components that respond to container size\nImplementing fluid typography scales\nSetting up responsive grid systems\nHandling mobile navigation patterns\nOptimizing images for different devices"
      },
      {
        "title": "KEYWORDS",
        "body": "responsive, container query, media query, breakpoint, mobile-first, fluid typography, clamp, css grid, flexbox, viewport, adaptive, responsive images"
      },
      {
        "title": "OpenClaw / Moltbot / Clawbot",
        "body": "npx clawhub@latest install responsive-design"
      },
      {
        "title": "Breakpoint Scale (Mobile-First)",
        "body": "/* Base: Mobile (< 640px) - no media query needed */\n\n@media (min-width: 640px)  { /* sm: Large phones, small tablets */ }\n@media (min-width: 768px)  { /* md: Tablets */ }\n@media (min-width: 1024px) { /* lg: Laptops */ }\n@media (min-width: 1280px) { /* xl: Desktops */ }\n@media (min-width: 1536px) { /* 2xl: Large screens */ }\n\nTailwind equivalents: sm:, md:, lg:, xl:, 2xl:"
      },
      {
        "title": "Container Queries",
        "body": "Component-level responsiveness independent of viewport:\n\n/* Define containment context */\n.card-container {\n  container-type: inline-size;\n  container-name: card;\n}\n\n/* Query the container, not viewport */\n@container card (min-width: 400px) {\n  .card {\n    display: grid;\n    grid-template-columns: 200px 1fr;\n  }\n}\n\n@container card (min-width: 600px) {\n  .card-title {\n    font-size: 1.5rem;\n  }\n}\n\n/* Container query units */\n.card-title {\n  font-size: clamp(1rem, 5cqi, 2rem); /* 5% of container inline-size */\n}"
      },
      {
        "title": "Tailwind Container Queries",
        "body": "function ResponsiveCard({ title, image, description }) {\n  return (\n    <div className=\"@container\">\n      <article className=\"flex flex-col @md:flex-row @md:gap-4\">\n        <img\n          src={image}\n          alt=\"\"\n          className=\"w-full @md:w-48 @lg:w-64 aspect-video @md:aspect-square object-cover\"\n        />\n        <div className=\"p-4 @md:p-0\">\n          <h2 className=\"text-lg @md:text-xl @lg:text-2xl font-semibold\">\n            {title}\n          </h2>\n          <p className=\"mt-2 text-muted-foreground @md:line-clamp-3\">\n            {description}\n          </p>\n        </div>\n      </article>\n    </div>\n  )\n}"
      },
      {
        "title": "CSS Custom Properties Scale",
        "body": ":root {\n  --text-xs:  clamp(0.75rem,  0.7rem + 0.25vw, 0.875rem);\n  --text-sm:  clamp(0.875rem, 0.8rem + 0.375vw, 1rem);\n  --text-base: clamp(1rem,    0.9rem + 0.5vw, 1.125rem);\n  --text-lg:  clamp(1.125rem, 1rem + 0.625vw, 1.25rem);\n  --text-xl:  clamp(1.25rem,  1rem + 1.25vw, 1.5rem);\n  --text-2xl: clamp(1.5rem,   1.25rem + 1.25vw, 2rem);\n  --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);\n  --text-4xl: clamp(2.25rem,  1.75rem + 2.5vw, 3.5rem);\n}\n\nh1 { font-size: var(--text-4xl); }\nh2 { font-size: var(--text-3xl); }\nh3 { font-size: var(--text-2xl); }\np  { font-size: var(--text-base); }"
      },
      {
        "title": "Fluid Spacing Scale",
        "body": ":root {\n  --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);\n  --space-sm: clamp(0.5rem,  0.4rem + 0.5vw, 0.75rem);\n  --space-md: clamp(1rem,    0.8rem + 1vw, 1.5rem);\n  --space-lg: clamp(1.5rem,  1.2rem + 1.5vw, 2.5rem);\n  --space-xl: clamp(2rem,    1.5rem + 2.5vw, 4rem);\n}"
      },
      {
        "title": "Clamp Formula",
        "body": "clamp(MIN, PREFERRED, MAX)\n\nMIN: Smallest allowed size\nPREFERRED: Ideal fluid calculation (often uses vw)\nMAX: Largest allowed size"
      },
      {
        "title": "Auto-Fit Grid (Items Wrap)",
        "body": ".grid-auto {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));\n  gap: 1.5rem;\n}"
      },
      {
        "title": "Named Grid Areas",
        "body": ".page-layout {\n  display: grid;\n  grid-template-areas:\n    \"header\"\n    \"main\"\n    \"sidebar\"\n    \"footer\";\n  gap: 1rem;\n}\n\n@media (min-width: 768px) {\n  .page-layout {\n    grid-template-columns: 1fr 300px;\n    grid-template-areas:\n      \"header header\"\n      \"main sidebar\"\n      \"footer footer\";\n  }\n}\n\n@media (min-width: 1024px) {\n  .page-layout {\n    grid-template-columns: 250px 1fr 300px;\n    grid-template-areas:\n      \"header header header\"\n      \"nav main sidebar\"\n      \"footer footer footer\";\n  }\n}\n\n.header  { grid-area: header; }\n.main    { grid-area: main; }\n.sidebar { grid-area: sidebar; }\n.footer  { grid-area: footer; }"
      },
      {
        "title": "Tailwind Grid",
        "body": "function ProductGrid({ products }) {\n  return (\n    <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6\">\n      {products.map(product => (\n        <ProductCard key={product.id} product={product} />\n      ))}\n    </div>\n  )\n}"
      },
      {
        "title": "Responsive Navigation",
        "body": "function ResponsiveNav({ items }) {\n  const [isOpen, setIsOpen] = useState(false)\n\n  return (\n    <nav className=\"relative\">\n      {/* Mobile toggle */}\n      <button\n        className=\"lg:hidden p-2\"\n        onClick={() => setIsOpen(!isOpen)}\n        aria-expanded={isOpen}\n        aria-controls=\"nav-menu\"\n      >\n        <span className=\"sr-only\">Toggle navigation</span>\n        {isOpen ? <X /> : <Menu />}\n      </button>\n\n      {/* Navigation links */}\n      <ul\n        id=\"nav-menu\"\n        className={cn(\n          // Mobile: dropdown\n          \"absolute top-full left-0 right-0 bg-background border-b\",\n          \"flex flex-col\",\n          isOpen ? \"flex\" : \"hidden\",\n          // Desktop: horizontal, always visible\n          \"lg:static lg:flex lg:flex-row lg:border-0\"\n        )}\n      >\n        {items.map(item => (\n          <li key={item.href}>\n            <a\n              href={item.href}\n              className=\"block px-4 py-3 lg:px-3 lg:py-2 hover:bg-muted lg:hover:bg-transparent\"\n            >\n              {item.label}\n            </a>\n          </li>\n        ))}\n      </ul>\n    </nav>\n  )\n}"
      },
      {
        "title": "Art Direction with Picture",
        "body": "function ResponsiveHero() {\n  return (\n    <picture>\n      {/* Different crops for different screens */}\n      <source media=\"(min-width: 1024px)\" srcSet=\"/hero-wide.webp\" type=\"image/webp\" />\n      <source media=\"(min-width: 768px)\" srcSet=\"/hero-medium.webp\" type=\"image/webp\" />\n      <source srcSet=\"/hero-mobile.webp\" type=\"image/webp\" />\n      \n      <img\n        src=\"/hero-mobile.jpg\"\n        alt=\"Hero description\"\n        className=\"w-full h-auto\"\n        loading=\"eager\"\n        fetchPriority=\"high\"\n      />\n    </picture>\n  )\n}"
      },
      {
        "title": "Resolution Switching with srcset",
        "body": "function ProductImage({ product }) {\n  return (\n    <img\n      src={product.image}\n      srcSet={`\n        ${product.image}?w=400 400w,\n        ${product.image}?w=800 800w,\n        ${product.image}?w=1200 1200w\n      `}\n      sizes=\"(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw\"\n      alt={product.name}\n      className=\"w-full h-auto object-cover\"\n      loading=\"lazy\"\n    />\n  )\n}"
      },
      {
        "title": "Horizontal Scroll Pattern",
        "body": "function ResponsiveTable({ data, columns }) {\n  return (\n    <div className=\"w-full overflow-x-auto\">\n      <table className=\"w-full min-w-[600px]\">\n        <thead>\n          <tr>\n            {columns.map(col => (\n              <th key={col.key} className=\"text-left p-3\">{col.label}</th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {data.map((row, i) => (\n            <tr key={i} className=\"border-t\">\n              {columns.map(col => (\n                <td key={col.key} className=\"p-3\">{row[col.key]}</td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  )\n}"
      },
      {
        "title": "Card Layout on Mobile",
        "body": "function ResponsiveDataTable({ data, columns }) {\n  return (\n    <>\n      {/* Desktop: table */}\n      <table className=\"hidden md:table w-full\">\n        {/* standard table markup */}\n      </table>\n\n      {/* Mobile: cards */}\n      <div className=\"md:hidden space-y-4\">\n        {data.map((row, i) => (\n          <div key={i} className=\"border rounded-lg p-4 space-y-2\">\n            {columns.map(col => (\n              <div key={col.key} className=\"flex justify-between\">\n                <span className=\"font-medium text-muted-foreground\">{col.label}</span>\n                <span>{row[col.key]}</span>\n              </div>\n            ))}\n          </div>\n        ))}\n      </div>\n    </>\n  )\n}"
      },
      {
        "title": "Viewport Units",
        "body": "/* Standard viewport units - problematic on mobile */\n.full-height { height: 100vh; }\n\n/* Dynamic viewport units (recommended) */\n.full-height-dynamic { height: 100dvh; } /* Accounts for mobile browser UI */\n\n/* Small viewport (minimum when UI shown) */\n.min-full-height { min-height: 100svh; }\n\n/* Large viewport (maximum when UI hidden) */\n.max-full-height { max-height: 100lvh; }"
      },
      {
        "title": "Best Practices",
        "body": "Mobile-First: Write base styles for mobile, enhance for larger screens\nContent Breakpoints: Set breakpoints where content breaks, not device sizes\nFluid Over Fixed: Prefer clamp() and relative units over fixed px\nContainer Queries: Use for component-level responsiveness\nTouch Targets: Minimum 44×44px tap targets on mobile\nTest Real Devices: Simulators don't catch all issues\nLogical Properties: Use inline/block for internationalization"
      },
      {
        "title": "Common Issues",
        "body": "IssueCauseFixHorizontal scrollFixed widthsUse relative units, max-width: 100%100vh too tall on mobileAddress barUse 100dvh or 100svhTiny tap targetsDesktop designMin 44px height/width on interactive elementsImages breaking layoutMissing constraintsAdd max-width: 100%; height: auto;Text too smallFixed font sizeUse fluid typography with clamp()"
      },
      {
        "title": "NEVER",
        "body": "Use px for typography (use rem)\nSkip mobile testing on real devices\nForget touch target sizing (44×44px minimum)\nUse 100vh on mobile without fallback\nNest too many media queries (flattens readability)\nIgnore content-based breakpoints in favor of device-specific ones"
      }
    ],
    "body": "Responsive Design\n\nModern responsive CSS patterns using container queries, fluid typography, CSS Grid, and mobile-first strategies.\n\nWHAT\n\nComprehensive responsive design techniques:\n\nContainer queries for component-level responsiveness\nFluid typography and spacing with clamp()\nCSS Grid and Flexbox layout patterns\nMobile-first breakpoint strategies\nResponsive images and media\nViewport units and dynamic sizing\nWHEN\nBuilding layouts that adapt across screen sizes\nCreating reusable components that respond to container size\nImplementing fluid typography scales\nSetting up responsive grid systems\nHandling mobile navigation patterns\nOptimizing images for different devices\nKEYWORDS\n\nresponsive, container query, media query, breakpoint, mobile-first, fluid typography, clamp, css grid, flexbox, viewport, adaptive, responsive images\n\nInstallation\nOpenClaw / Moltbot / Clawbot\nnpx clawhub@latest install responsive-design\n\nBreakpoint Scale (Mobile-First)\n/* Base: Mobile (< 640px) - no media query needed */\n\n@media (min-width: 640px)  { /* sm: Large phones, small tablets */ }\n@media (min-width: 768px)  { /* md: Tablets */ }\n@media (min-width: 1024px) { /* lg: Laptops */ }\n@media (min-width: 1280px) { /* xl: Desktops */ }\n@media (min-width: 1536px) { /* 2xl: Large screens */ }\n\n\nTailwind equivalents: sm:, md:, lg:, xl:, 2xl:\n\nContainer Queries\n\nComponent-level responsiveness independent of viewport:\n\n/* Define containment context */\n.card-container {\n  container-type: inline-size;\n  container-name: card;\n}\n\n/* Query the container, not viewport */\n@container card (min-width: 400px) {\n  .card {\n    display: grid;\n    grid-template-columns: 200px 1fr;\n  }\n}\n\n@container card (min-width: 600px) {\n  .card-title {\n    font-size: 1.5rem;\n  }\n}\n\n/* Container query units */\n.card-title {\n  font-size: clamp(1rem, 5cqi, 2rem); /* 5% of container inline-size */\n}\n\nTailwind Container Queries\nfunction ResponsiveCard({ title, image, description }) {\n  return (\n    <div className=\"@container\">\n      <article className=\"flex flex-col @md:flex-row @md:gap-4\">\n        <img\n          src={image}\n          alt=\"\"\n          className=\"w-full @md:w-48 @lg:w-64 aspect-video @md:aspect-square object-cover\"\n        />\n        <div className=\"p-4 @md:p-0\">\n          <h2 className=\"text-lg @md:text-xl @lg:text-2xl font-semibold\">\n            {title}\n          </h2>\n          <p className=\"mt-2 text-muted-foreground @md:line-clamp-3\">\n            {description}\n          </p>\n        </div>\n      </article>\n    </div>\n  )\n}\n\nFluid Typography\nCSS Custom Properties Scale\n:root {\n  --text-xs:  clamp(0.75rem,  0.7rem + 0.25vw, 0.875rem);\n  --text-sm:  clamp(0.875rem, 0.8rem + 0.375vw, 1rem);\n  --text-base: clamp(1rem,    0.9rem + 0.5vw, 1.125rem);\n  --text-lg:  clamp(1.125rem, 1rem + 0.625vw, 1.25rem);\n  --text-xl:  clamp(1.25rem,  1rem + 1.25vw, 1.5rem);\n  --text-2xl: clamp(1.5rem,   1.25rem + 1.25vw, 2rem);\n  --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);\n  --text-4xl: clamp(2.25rem,  1.75rem + 2.5vw, 3.5rem);\n}\n\nh1 { font-size: var(--text-4xl); }\nh2 { font-size: var(--text-3xl); }\nh3 { font-size: var(--text-2xl); }\np  { font-size: var(--text-base); }\n\nFluid Spacing Scale\n:root {\n  --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);\n  --space-sm: clamp(0.5rem,  0.4rem + 0.5vw, 0.75rem);\n  --space-md: clamp(1rem,    0.8rem + 1vw, 1.5rem);\n  --space-lg: clamp(1.5rem,  1.2rem + 1.5vw, 2.5rem);\n  --space-xl: clamp(2rem,    1.5rem + 2.5vw, 4rem);\n}\n\nClamp Formula\nclamp(MIN, PREFERRED, MAX)\n\nMIN: Smallest allowed size\nPREFERRED: Ideal fluid calculation (often uses vw)\nMAX: Largest allowed size\n\nCSS Grid Responsive Layouts\nAuto-Fit Grid (Items Wrap)\n.grid-auto {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));\n  gap: 1.5rem;\n}\n\nNamed Grid Areas\n.page-layout {\n  display: grid;\n  grid-template-areas:\n    \"header\"\n    \"main\"\n    \"sidebar\"\n    \"footer\";\n  gap: 1rem;\n}\n\n@media (min-width: 768px) {\n  .page-layout {\n    grid-template-columns: 1fr 300px;\n    grid-template-areas:\n      \"header header\"\n      \"main sidebar\"\n      \"footer footer\";\n  }\n}\n\n@media (min-width: 1024px) {\n  .page-layout {\n    grid-template-columns: 250px 1fr 300px;\n    grid-template-areas:\n      \"header header header\"\n      \"nav main sidebar\"\n      \"footer footer footer\";\n  }\n}\n\n.header  { grid-area: header; }\n.main    { grid-area: main; }\n.sidebar { grid-area: sidebar; }\n.footer  { grid-area: footer; }\n\nTailwind Grid\nfunction ProductGrid({ products }) {\n  return (\n    <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6\">\n      {products.map(product => (\n        <ProductCard key={product.id} product={product} />\n      ))}\n    </div>\n  )\n}\n\nResponsive Navigation\nfunction ResponsiveNav({ items }) {\n  const [isOpen, setIsOpen] = useState(false)\n\n  return (\n    <nav className=\"relative\">\n      {/* Mobile toggle */}\n      <button\n        className=\"lg:hidden p-2\"\n        onClick={() => setIsOpen(!isOpen)}\n        aria-expanded={isOpen}\n        aria-controls=\"nav-menu\"\n      >\n        <span className=\"sr-only\">Toggle navigation</span>\n        {isOpen ? <X /> : <Menu />}\n      </button>\n\n      {/* Navigation links */}\n      <ul\n        id=\"nav-menu\"\n        className={cn(\n          // Mobile: dropdown\n          \"absolute top-full left-0 right-0 bg-background border-b\",\n          \"flex flex-col\",\n          isOpen ? \"flex\" : \"hidden\",\n          // Desktop: horizontal, always visible\n          \"lg:static lg:flex lg:flex-row lg:border-0\"\n        )}\n      >\n        {items.map(item => (\n          <li key={item.href}>\n            <a\n              href={item.href}\n              className=\"block px-4 py-3 lg:px-3 lg:py-2 hover:bg-muted lg:hover:bg-transparent\"\n            >\n              {item.label}\n            </a>\n          </li>\n        ))}\n      </ul>\n    </nav>\n  )\n}\n\nResponsive Images\nArt Direction with Picture\nfunction ResponsiveHero() {\n  return (\n    <picture>\n      {/* Different crops for different screens */}\n      <source media=\"(min-width: 1024px)\" srcSet=\"/hero-wide.webp\" type=\"image/webp\" />\n      <source media=\"(min-width: 768px)\" srcSet=\"/hero-medium.webp\" type=\"image/webp\" />\n      <source srcSet=\"/hero-mobile.webp\" type=\"image/webp\" />\n      \n      <img\n        src=\"/hero-mobile.jpg\"\n        alt=\"Hero description\"\n        className=\"w-full h-auto\"\n        loading=\"eager\"\n        fetchPriority=\"high\"\n      />\n    </picture>\n  )\n}\n\nResolution Switching with srcset\nfunction ProductImage({ product }) {\n  return (\n    <img\n      src={product.image}\n      srcSet={`\n        ${product.image}?w=400 400w,\n        ${product.image}?w=800 800w,\n        ${product.image}?w=1200 1200w\n      `}\n      sizes=\"(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw\"\n      alt={product.name}\n      className=\"w-full h-auto object-cover\"\n      loading=\"lazy\"\n    />\n  )\n}\n\nResponsive Tables\nHorizontal Scroll Pattern\nfunction ResponsiveTable({ data, columns }) {\n  return (\n    <div className=\"w-full overflow-x-auto\">\n      <table className=\"w-full min-w-[600px]\">\n        <thead>\n          <tr>\n            {columns.map(col => (\n              <th key={col.key} className=\"text-left p-3\">{col.label}</th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {data.map((row, i) => (\n            <tr key={i} className=\"border-t\">\n              {columns.map(col => (\n                <td key={col.key} className=\"p-3\">{row[col.key]}</td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  )\n}\n\nCard Layout on Mobile\nfunction ResponsiveDataTable({ data, columns }) {\n  return (\n    <>\n      {/* Desktop: table */}\n      <table className=\"hidden md:table w-full\">\n        {/* standard table markup */}\n      </table>\n\n      {/* Mobile: cards */}\n      <div className=\"md:hidden space-y-4\">\n        {data.map((row, i) => (\n          <div key={i} className=\"border rounded-lg p-4 space-y-2\">\n            {columns.map(col => (\n              <div key={col.key} className=\"flex justify-between\">\n                <span className=\"font-medium text-muted-foreground\">{col.label}</span>\n                <span>{row[col.key]}</span>\n              </div>\n            ))}\n          </div>\n        ))}\n      </div>\n    </>\n  )\n}\n\nViewport Units\n/* Standard viewport units - problematic on mobile */\n.full-height { height: 100vh; }\n\n/* Dynamic viewport units (recommended) */\n.full-height-dynamic { height: 100dvh; } /* Accounts for mobile browser UI */\n\n/* Small viewport (minimum when UI shown) */\n.min-full-height { min-height: 100svh; }\n\n/* Large viewport (maximum when UI hidden) */\n.max-full-height { max-height: 100lvh; }\n\nBest Practices\nMobile-First: Write base styles for mobile, enhance for larger screens\nContent Breakpoints: Set breakpoints where content breaks, not device sizes\nFluid Over Fixed: Prefer clamp() and relative units over fixed px\nContainer Queries: Use for component-level responsiveness\nTouch Targets: Minimum 44×44px tap targets on mobile\nTest Real Devices: Simulators don't catch all issues\nLogical Properties: Use inline/block for internationalization\nCommon Issues\nIssue\tCause\tFix\nHorizontal scroll\tFixed widths\tUse relative units, max-width: 100%\n100vh too tall on mobile\tAddress bar\tUse 100dvh or 100svh\nTiny tap targets\tDesktop design\tMin 44px height/width on interactive elements\nImages breaking layout\tMissing constraints\tAdd max-width: 100%; height: auto;\nText too small\tFixed font size\tUse fluid typography with clamp()\nNEVER\nUse px for typography (use rem)\nSkip mobile testing on real devices\nForget touch target sizing (44×44px minimum)\nUse 100vh on mobile without fallback\nNest too many media queries (flattens readability)\nIgnore content-based breakpoints in favor of device-specific ones"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/wpank/responsive-design",
    "publisherUrl": "https://clawhub.ai/wpank/responsive-design",
    "owner": "wpank",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/responsive-design",
    "downloadUrl": "https://openagent3.xyz/downloads/responsive-design",
    "agentUrl": "https://openagent3.xyz/skills/responsive-design/agent",
    "manifestUrl": "https://openagent3.xyz/skills/responsive-design/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/responsive-design/agent.md"
  }
}