web-css

web-css

目的

此技能支持 OpenClaw 生成、优化和调试 CSS 代码，重点关注 Grid 和 Flexbox 布局、自定义属性（变量）、动画、媒体查询、BEM 方法、CSS Modules，以及 :has() 和 :is() 等选择器。

适用场景

在涉及组件样式的 Web 开发任务中使用此技能，例如创建响应式布局、为元素添加动画，或在使用 React、Vue 等框架的项目中模块化样式。当代码需要高效、易维护并兼容现代浏览器时，也可以使用此技能。

主要功能

• Grid/Flexbox：使用 CSS Grid（例如 display: grid; grid-template-columns: repeat(3, 1fr);）或 Flexbox（例如 display: flex; justify-content: space-between;）创建布局。
• 自定义属性：定义并使用 --primary-color: #007bff; 等变量来设置主题。
• 动画：实现关键帧动画，例如 @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }。
• 媒体查询：处理响应式布局，例如 @media (max-width: 768px) { .container { flex-direction: column; } }。
• BEM：采用 .block__element--modifier 等命名约定，编写可扩展的 CSS。
• CSS Modules：生成作用域样式，例如通过 import styles from './styles.module.css'; 导入，并使用 className={styles.button}。
• 选择器：使用 :has() 和 :is()，例如 div:has(p) { margin: 10px; } 或 button:is(:hover, :active) { background: red; }。

使用方式

要在 OpenClaw 中调用此技能，请使用 CLI 命令：openclaw execute web-css --input "task description" --options key=value。要集成 API，请向 /api/skills/web-css 发送 POST 请求，并附上类似 { "task": "generate grid layout", "params": { "elements": 3 } } 的 JSON 请求体。请始终设置用于身份验证的环境变量：$OPENCLAW_API_KEY。输入可以是字符串或 JSON 对象；例如，可通过 --feature grid 或 --feature animations 等标志指定 CSS 功能。

常用命令/API

• 生成布局：运行 openclaw execute web-css --task generate --type flexbox --properties "justify-content:center; align-items:center;"，以生成 Flexbox 代码片段。
• 添加动画：使用 API 端点：POST /api/skills/web-css，请求体为 { "action": "add-animation", "selector": ".fade-element", "keyframes": "from { opacity: 0; }" }，以追加动画代码。
• 优化媒体查询：运行命令：openclaw execute web-css --optimize --breakpoints "mobile:480px, tablet:768px"，以优化响应式样式。
• 配置格式：以 JSON 格式提供配置，例如 { "bem": true, "modules": { "path": "./src/styles" } }。对于 CSS Modules，请确保输出包含 import styles from './Component.module.css'; 等导入语句。
• 代码片段示例：

  .container {
    display: flex;
    flex-wrap: wrap;
  }
  

  通过 openclaw execute web-css --task layout --type flexbox 生成。

集成说明

将此技能与 Webpack 或 Vite 等构建工具集成时，可将输出封装为模块格式。例如，将 OpenClaw 输出传递给 CSS 处理器：openclaw execute web-css --output file.css && postcss file.css --use autoprefixer。如果在 Node.js 环境中使用，请导入为 const openclaw = require('openclaw-sdk'); openclaw.run('web-css', { auth: process.env.OPENCLAW_API_KEY });。请确保 CSS 输出与所用框架兼容；对于 React，请生成符合 BEM 模式的类名。通过引入 css-loader 等库来处理依赖项。

错误处理

常见错误包括 CSS 语法无效或缺少 API 密钥；请检查响应中是否包含 "SyntaxError"，并使用修正后的输入重试。如果身份验证失败，请确认已设置 $OPENCLAW_API_KEY 且该密钥尚未过期。对于 API 调用，请捕获 401（未授权）等 HTTP 错误，并记录错误信息，提示用户重新进行身份验证。例如，在代码中使用 try-catch：

try {
  const response = await fetch('/api/skills/web-css', { headers: { 'Authorization': `Bearer ${process.env.OPENCLAW_API_KEY}` } });
  if (!response.ok) throw new Error('API error');
} catch (error) {
  console.error('Handle:', error.message); // Output: "API error"
}

执行前请始终验证输入，例如确保选择器是有效字符串。

具体使用示例

1. Flexbox 布局生成：要创建响应式导航栏，请运行 openclaw execute web-css --task generate-layout --type flexbox --selectors ".nav" --properties "justify-content:space-around;"。输出：

   .nav {
     display: flex;
     justify-content: space-around;
   }
   

   然后，将其集成到 HTML 中：<nav class="nav">...</nav>。

2. 用于响应式布局的媒体查询：对于基于网格的图库，请使用 openclaw execute web-css --task add-media --breakpoint "768px" --selector ".gallery" --styles "grid-template-columns:1fr;"。生成的代码片段：

   @media (min-width: 768px) {
     .gallery { grid-template-columns: repeat(2, 1fr); }
   }
   

   在项目中应用此代码，让图库适配平板电脑屏幕。

图关系

• 相关工具：web-html（依赖其提供结构）、web-js（集成以实现动态样式）、tools-build（用于处理 CSS Modules）。
• 集群：通过 web-dev 集群连接，以支持共享 Web 任务。
• 标签：与 “css” 和 “web” 重叠，便于跨技能查询。