# Send CSS to your agent
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
## Fast path
- 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.
## Suggested prompts
### New install

```text
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.
```
### Upgrade existing

```text
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.
```
## Machine-readable fields
```json
{
  "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": {
    "downloadUrl": "/downloads/css",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=css",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "packageFormat": "ZIP package",
    "primaryDoc": "SKILL.md",
    "includedAssets": [
      "SKILL.md",
      "layout.md",
      "performance.md",
      "responsive.md",
      "selectors.md"
    ],
    "downloadMode": "redirect",
    "sourceHealth": {
      "source": "tencent",
      "slug": "css",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-05-01T05:32:09.571Z",
      "expiresAt": "2026-05-08T05:32:09.571Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=css",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=css",
        "contentDisposition": "attachment; filename=\"css-1.0.1.zip\"",
        "redirectLocation": null,
        "bodySnippet": null,
        "slug": "css"
      },
      "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/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."
      ]
    }
  },
  "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"
  }
}
```
## Documentation

### When to Use

User needs CSS expertise — from layout challenges to production optimization. Agent handles stacking contexts, flexbox/grid patterns, responsive design, performance, and accessibility.

### Quick Reference

TopicFileLayout patternslayout.mdResponsive techniquesresponsive.mdSelectors and specificityselectors.mdPerformance optimizationperformance.md

### CSS Philosophy

Layout should be robust—work with any content, not just demo content
Use modern features—they have better browser support than you think
Prefer intrinsic sizing—let content determine size when possible
Test with extreme content—longest names, missing images, empty states

### Stacking Context Traps

z-index only works with positioned elements—or flex/grid children
isolation: isolate creates stacking context—contains z-index chaos without position
opacity < 1, transform, filter create stacking context—unexpected z-index behavior
New stacking context resets z-index hierarchy—child z-index:9999 won't escape parent

### Layout Traps

Margin collapse only vertical, only block—flex/grid children don't collapse
overflow: hidden on flex container can break—use overflow: clip if you don't need scroll

### Flexbox Traps

flex: 1 means flex: 1 1 0%—basis is 0, not auto
min-width: 0 on flex child for text truncation—default min-width is min-content
flex-basis vs width: basis is before grow/shrink—width is after, basis preferred
gap works in flex now—no more margin hacks for spacing

### Grid Traps

fr units don't respect min-content alone—use minmax(min-content, 1fr)
auto-fit vs auto-fill: fit collapses empty tracks, fill keeps them
grid-template-columns: 1fr 1fr is not 50%—it's equal share of REMAINING space
Implicit grid tracks can surprise you—items placed outside explicit grid still appear

### Responsive Philosophy

Start mobile-first—min-width media queries, base styles for mobile
Container queries: @container (min-width: 400px)—component-based responsive
container-type: inline-size on parent required—for container queries to work
Test on real devices—emulators miss touch targets and real performance

### Sizing Functions

clamp(min, preferred, max) for fluid typography—clamp(1rem, 2.5vw, 2rem)
min() and max()—width: min(100%, 600px) replaces media query
fit-content sizes to content up to max—width: fit-content or fit-content(300px)

### Modern Selectors

:is() for grouping—:is(h1, h2, h3) + p less repetition
:where() same as :is() but zero specificity—easier to override
:has() parent selector—.card:has(img) styles card containing image
:focus-visible for keyboard focus only—no outline on mouse click

### Scroll Behavior

scroll-behavior: smooth on html—native smooth scroll for anchors
overscroll-behavior: contain—prevents scroll chaining to parent/body
scroll-snap-type and scroll-snap-align—native carousel without JS
scrollbar-gutter: stable—reserves scrollbar space, prevents layout shift

### Shorthand Traps

inset: 0 equals top/right/bottom/left: 0—less repetition
place-items is align-items + justify-items—place-items: center centers both
margin-inline, margin-block for logical properties—respects writing direction

### Performance Mindset

contain: layout isolates repaints—use on independent components
content-visibility: auto skips offscreen rendering—huge for long pages
will-change sparingly—creates layers, uses memory
Avoid layout thrash—batch reads and writes to DOM

### Accessibility Baseline

prefers-reduced-motion: reduce—disable animations for vestibular disorders
prefers-color-scheme—@media (prefers-color-scheme: dark) for dark mode
forced-colors: active—adjust for Windows high contrast
Focus indicators must be visible—don't rely on color alone
## Trust
- Source: tencent
- Verification: Indexed source record
- Publisher: ivangdavila
- Version: 1.0.1
## Source health
- Status: healthy
- Item download looks usable.
- Yavira can redirect you to the upstream package for this item.
- Health scope: item
- Reason: direct_download_ok
- Checked at: 2026-05-01T05:32:09.571Z
- Expires at: 2026-05-08T05:32:09.571Z
- Recommended action: Download for OpenClaw
## Links
- [Detail page](https://openagent3.xyz/skills/css)
- [Send to Agent page](https://openagent3.xyz/skills/css/agent)
- [JSON manifest](https://openagent3.xyz/skills/css/agent.json)
- [Markdown brief](https://openagent3.xyz/skills/css/agent.md)
- [Download page](https://openagent3.xyz/downloads/css)