A technical CSS implementation skill providing production-ready patterns for layout, typography, and accessible interface design.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install web-design
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install web-design using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Web Design Patterns?
Web Design Patterns is a specialized skill for developers looking to implement high-quality CSS across their projects. While many tools focus on abstract design theory, this skill is specifically engineered for code-focused implementation. It provides a robust framework for building interfaces using modern CSS features like Grid, Flexbox, and container queries.
By integrating this into your Openclaw Skills workflow, you gain access to a curated set of implementation standards for spatial composition, fluid typography, and perceptually uniform color palettes. It serves as the technical backbone for frontend development, ensuring that every interface is not only visually appealing but also performant and accessible.
Web Design Patterns Use Cases
- Building complex, two-dimensional page structures using CSS Grid area templates.
- Establishing a consistent 8px-based spacing system to ensure visual rhythm across components.
- Implementing fluid typography that scales gracefully across mobile and desktop viewports without excessive media queries.
- Designing accessible interactive components with clearly defined hover, focus, and active states.
How Web Design Patterns Works
- Installation of the skill into your development environment via the CLI.
- Definition of a three-layer design token architecture starting from primitive values to semantic aliases.
- Selection of appropriate layout tools (Grid or Flexbox) based on the specific UI context and dimensionality requirements.
- Application of WCAG-compliant accessibility standards, including motion safety and keyboard navigation.
- Final verification using the integrated design quality checklist to ensure production readiness.
Web Design Patterns Setup
To add this capability to your environment, use the following command:
npx clawhub@latest install web-design
Once installed, you can reference the layout principles and CSS patterns directly within your Openclaw Skills enabled projects.
Web Design Patterns Data Schema & Taxonomy
The skill organizes design data into a three-layer taxonomy for maximum maintainability:
| Layer | Description | Example |
|---|---|---|
| Layer 1: Primitives | Raw values like HEX/OKLCH or pixel-to-rem units | --blue-500: oklch(0.55 0.2 250); |
| Layer 2: Semantics | Functional aliases that map primitives to roles | --color-primary: var(--blue-500); |
| Layer 3: Components | Specific variables scoped to individual UI elements | --btn-bg: var(--color-primary); |
This structure allows for seamless theme switching and design system scaling.
Web Design Patterns Advanced Features
- Intrinsic Grid Layouts: Create responsive card grids using
auto-fitandminmaxwithout writing single media queries. - Fluid Sizing: Use CSS
clamp()functions for typography and padding that responds dynamically to the viewport. - Container Queries: Implementation patterns for
@containerto build truly modular, context-aware components. - Perceptually Uniform Color: Advanced color manipulation patterns using HSL and OKLCH for accessible contrast.
- Motion Orchestration: Standardized easing and duration tokens for meaningful micro-interactions and staggered reveal animations.
SKILL.md
Loading
Related Openclaw Skills
Uniswap Swap Simulation
A comprehensive tool for simulating Uniswap V3 swaps, calculating slippage, and determining optimal routing before executing on-chain transactions.
Uniswap Pool Analysis
A professional tool for AI agents to query and analyze Uniswap v3 and v4 pool metrics directly on-chain using viem.
UI/UX Pro Max
A comprehensive design intelligence CLI and database for generating accessible, high-performance design systems from natural language.
UI Design
A comprehensive framework for building production-grade web interfaces focusing on typography, layout, and accessibility.
WebSocket Hub Patterns
A production-grade blueprint for building horizontally scalable WebSocket hubs with Redis coordination and connection management.
Workflow Patterns
A rigorous TDD-based workflow for AI agents that ensures code quality through automated testing, coverage gates, and structured git commits.
Featured*
