{
  "schemaVersion": "1.0",
  "item": {
    "slug": "css",
    "name": "CSS",
    "source": "tencent",
    "type": "skill",
    "category": "开发工具",
    "sourceUrl": "https://clawhub.ai/ivangdavila/css",
    "canonicalUrl": "https://clawhub.ai/ivangdavila/css",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/css",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=css",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "SKILL.md",
      "layout.md",
      "performance.md",
      "responsive.md",
      "selectors.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. 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. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-30T16:55:25.780Z",
      "expiresAt": "2026-05-07T16:55:25.780Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
        "contentDisposition": "attachment; filename=\"network-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/css"
    },
    "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/css",
    "agentPageUrl": "https://openagent3.xyz/skills/css/agent",
    "manifestUrl": "https://openagent3.xyz/skills/css/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/css/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. 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. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "When to Use",
        "body": "User needs CSS expertise — from layout challenges to production optimization. Agent handles stacking contexts, flexbox/grid patterns, responsive design, performance, and accessibility."
      },
      {
        "title": "Quick Reference",
        "body": "TopicFileLayout patternslayout.mdResponsive techniquesresponsive.mdSelectors and specificityselectors.mdPerformance optimizationperformance.md"
      },
      {
        "title": "CSS Philosophy",
        "body": "Layout should be robust—work with any content, not just demo content\nUse modern features—they have better browser support than you think\nPrefer intrinsic sizing—let content determine size when possible\nTest with extreme content—longest names, missing images, empty states"
      },
      {
        "title": "Stacking Context Traps",
        "body": "z-index only works with positioned elements—or flex/grid children\nisolation: isolate creates stacking context—contains z-index chaos without position\nopacity < 1, transform, filter create stacking context—unexpected z-index behavior\nNew stacking context resets z-index hierarchy—child z-index:9999 won't escape parent"
      },
      {
        "title": "Layout Traps",
        "body": "Margin collapse only vertical, only block—flex/grid children don't collapse\noverflow: hidden on flex container can break—use overflow: clip if you don't need scroll"
      },
      {
        "title": "Flexbox Traps",
        "body": "flex: 1 means flex: 1 1 0%—basis is 0, not auto\nmin-width: 0 on flex child for text truncation—default min-width is min-content\nflex-basis vs width: basis is before grow/shrink—width is after, basis preferred\ngap works in flex now—no more margin hacks for spacing"
      },
      {
        "title": "Grid Traps",
        "body": "fr units don't respect min-content alone—use minmax(min-content, 1fr)\nauto-fit vs auto-fill: fit collapses empty tracks, fill keeps them\ngrid-template-columns: 1fr 1fr is not 50%—it's equal share of REMAINING space\nImplicit grid tracks can surprise you—items placed outside explicit grid still appear"
      },
      {
        "title": "Responsive Philosophy",
        "body": "Start mobile-first—min-width media queries, base styles for mobile\nContainer queries: @container (min-width: 400px)—component-based responsive\ncontainer-type: inline-size on parent required—for container queries to work\nTest on real devices—emulators miss touch targets and real performance"
      },
      {
        "title": "Sizing Functions",
        "body": "clamp(min, preferred, max) for fluid typography—clamp(1rem, 2.5vw, 2rem)\nmin() and max()—width: min(100%, 600px) replaces media query\nfit-content sizes to content up to max—width: fit-content or fit-content(300px)"
      },
      {
        "title": "Modern Selectors",
        "body": ":is() for grouping—:is(h1, h2, h3) + p less repetition\n:where() same as :is() but zero specificity—easier to override\n:has() parent selector—.card:has(img) styles card containing image\n:focus-visible for keyboard focus only—no outline on mouse click"
      },
      {
        "title": "Scroll Behavior",
        "body": "scroll-behavior: smooth on html—native smooth scroll for anchors\noverscroll-behavior: contain—prevents scroll chaining to parent/body\nscroll-snap-type and scroll-snap-align—native carousel without JS\nscrollbar-gutter: stable—reserves scrollbar space, prevents layout shift"
      },
      {
        "title": "Shorthand Traps",
        "body": "inset: 0 equals top/right/bottom/left: 0—less repetition\nplace-items is align-items + justify-items—place-items: center centers both\nmargin-inline, margin-block for logical properties—respects writing direction"
      },
      {
        "title": "Performance Mindset",
        "body": "contain: layout isolates repaints—use on independent components\ncontent-visibility: auto skips offscreen rendering—huge for long pages\nwill-change sparingly—creates layers, uses memory\nAvoid layout thrash—batch reads and writes to DOM"
      },
      {
        "title": "Accessibility Baseline",
        "body": "prefers-reduced-motion: reduce—disable animations for vestibular disorders\nprefers-color-scheme—@media (prefers-color-scheme: dark) for dark mode\nforced-colors: active—adjust for Windows high contrast\nFocus indicators must be visible—don't rely on color alone"
      }
    ],
    "body": "When to Use\n\nUser needs CSS expertise — from layout challenges to production optimization. Agent handles stacking contexts, flexbox/grid patterns, responsive design, performance, and accessibility.\n\nQuick Reference\nTopic\tFile\nLayout patterns\tlayout.md\nResponsive techniques\tresponsive.md\nSelectors and specificity\tselectors.md\nPerformance optimization\tperformance.md\nCSS Philosophy\nLayout should be robust—work with any content, not just demo content\nUse modern features—they have better browser support than you think\nPrefer intrinsic sizing—let content determine size when possible\nTest with extreme content—longest names, missing images, empty states\nStacking Context Traps\nz-index only works with positioned elements—or flex/grid children\nisolation: isolate creates stacking context—contains z-index chaos without position\nopacity < 1, transform, filter create stacking context—unexpected z-index behavior\nNew stacking context resets z-index hierarchy—child z-index:9999 won't escape parent\nLayout Traps\nMargin collapse only vertical, only block—flex/grid children don't collapse\noverflow: hidden on flex container can break—use overflow: clip if you don't need scroll\nFlexbox Traps\nflex: 1 means flex: 1 1 0%—basis is 0, not auto\nmin-width: 0 on flex child for text truncation—default min-width is min-content\nflex-basis vs width: basis is before grow/shrink—width is after, basis preferred\ngap works in flex now—no more margin hacks for spacing\nGrid Traps\nfr units don't respect min-content alone—use minmax(min-content, 1fr)\nauto-fit vs auto-fill: fit collapses empty tracks, fill keeps them\ngrid-template-columns: 1fr 1fr is not 50%—it's equal share of REMAINING space\nImplicit grid tracks can surprise you—items placed outside explicit grid still appear\nResponsive Philosophy\nStart mobile-first—min-width media queries, base styles for mobile\nContainer queries: @container (min-width: 400px)—component-based responsive\ncontainer-type: inline-size on parent required—for container queries to work\nTest on real devices—emulators miss touch targets and real performance\nSizing Functions\nclamp(min, preferred, max) for fluid typography—clamp(1rem, 2.5vw, 2rem)\nmin() and max()—width: min(100%, 600px) replaces media query\nfit-content sizes to content up to max—width: fit-content or fit-content(300px)\nModern Selectors\n:is() for grouping—:is(h1, h2, h3) + p less repetition\n:where() same as :is() but zero specificity—easier to override\n:has() parent selector—.card:has(img) styles card containing image\n:focus-visible for keyboard focus only—no outline on mouse click\nScroll Behavior\nscroll-behavior: smooth on html—native smooth scroll for anchors\noverscroll-behavior: contain—prevents scroll chaining to parent/body\nscroll-snap-type and scroll-snap-align—native carousel without JS\nscrollbar-gutter: stable—reserves scrollbar space, prevents layout shift\nShorthand Traps\ninset: 0 equals top/right/bottom/left: 0—less repetition\nplace-items is align-items + justify-items—place-items: center centers both\nmargin-inline, margin-block for logical properties—respects writing direction\nPerformance Mindset\ncontain: layout isolates repaints—use on independent components\ncontent-visibility: auto skips offscreen rendering—huge for long pages\nwill-change sparingly—creates layers, uses memory\nAvoid layout thrash—batch reads and writes to DOM\nAccessibility Baseline\nprefers-reduced-motion: reduce—disable animations for vestibular disorders\nprefers-color-scheme—@media (prefers-color-scheme: dark) for dark mode\nforced-colors: active—adjust for Windows high contrast\nFocus indicators must be visible—don't rely on color alone"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/ivangdavila/css",
    "publisherUrl": "https://clawhub.ai/ivangdavila/css",
    "owner": "ivangdavila",
    "version": "1.0.1",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/css",
    "downloadUrl": "https://openagent3.xyz/downloads/css",
    "agentUrl": "https://openagent3.xyz/skills/css/agent",
    "manifestUrl": "https://openagent3.xyz/skills/css/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/css/agent.md"
  }
}