web-css

Purpose

This skill allows OpenClaw to generate, optimize, and debug CSS code focusing on advanced features like Grid and Flexbox layouts, custom properties (variables), animations, media queries, BEM methodology, CSS Modules, and selectors like :has() and :is().

When to Use

Use this skill for web development tasks involving styling components, such as creating responsive layouts, animating elements, or modularizing styles in projects using frameworks like React or Vue. Apply it when code needs to be efficient, maintainable, and compatible with modern browsers.

Key Capabilities

• Grid/Flexbox: Create layouts using CSS Grid (e.g., display: grid; grid-template-columns: repeat(3, 1fr);) or Flexbox (e.g., display: flex; justify-content: space-between;).
• Custom Properties: Define and use variables like --primary-color: #007bff; for theming.
• Animations: Implement keyframe animations, e.g., @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }.
• Media Queries: Handle responsiveness, e.g., @media (max-width: 768px) { .container { flex-direction: column; } }.
• BEM: Enforce naming conventions like .block__element--modifier for scalable CSS.
• CSS Modules: Generate scoped styles, e.g., importing as import styles from './styles.module.css'; and using className={styles.button}.
• Selectors: Utilize :has() and :is(), e.g., div:has(p) { margin: 10px; } or button:is(:hover, :active) { background: red; }.

Usage Patterns

To invoke this skill in OpenClaw, use the CLI command: openclaw execute web-css --input "task description" --options key=value. For API integration, send a POST request to /api/skills/web-css with a JSON body like { "task": "generate grid layout", "params": { "elements": 3 } }. Always set the environment variable for authentication: $OPENCLAW_API_KEY. Pass inputs as strings or JSON objects; for example, specify CSS features via flags like --feature grid or --feature animations.