Setup & Installation
Or with the ClawHub CLI, for registry-managed skill folders outside a full OpenClaw workspace:
What This Skill Does
A knowledge base covering design systems with layered token hierarchies, WCAG 2.1 accessibility standards, Core Web Vitals optimization, responsive CSS patterns, and game-specific UI techniques. Synthesized from 2024-2026 web design standards. Targets commercial-grade, accessible web interfaces.
Consolidates design systems, accessibility, performance, and game UI guidance into one reference instead of consulting separate specs and docs for each domain.
When to use it
- Setting up a three-tier design token system to keep Figma and code in sync
- Auditing a site for WCAG 2.1 color contrast and keyboard navigation compliance
- Diagnosing and fixing LCP, INP, or CLS regressions before a production launch
- Replacing breakpoint-heavy CSS with fluid clamp() typography and container queries
- Designing a game portfolio page with immersive hero video and hover feedback patterns
Example Workflow
Here's how your AI assistant might use this skill in practice.
User asks: How do I build a design token system for a game website that supports theming?
- 1Define primitive tokens as raw CSS custom properties (e.g., --blue-500: #3B82F6)
- 2Map semantic tokens to primitives to assign role and context (e.g., --action-primary: var(--blue-500))
- 3Create component-level tokens referencing semantic tokens (e.g., --btn-bg: var(--action-primary))
- 4Export token JSON from Tokens Studio in Figma
- 5Run Style Dictionary at build time to distribute tokens to each target platform
A three-layer CSS token system wired from Figma to code, with automated deployment on token changes and runtime theming via CSS custom properties
Requirements
Accounts, API keys, or tools you or your AI assistant may need to set up while using this skill.