Openclaw Skills guidance for building production-grade interfaces with native CSS, BEM, modern layouts, and polished motion.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install ui-master-static
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 ui-master-static 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 UI Master Static?
UI Master Static is the Openclaw Skills reference for building production-grade interfaces with native CSS only — no Tailwind, no CSS-in-JS, and no utility framework. It replaces framework guardrails with disciplined architecture: design tokens in :root, BEM naming, predictable file layering, and accessibility-first validation.
Use it when a project needs a static site, Vite scaffold, landing page, dashboard shell, header, navbar, or other polished UI built from plain CSS. Openclaw Skills users should treat it as a reference library: read the specific guide for architecture, layout, effects, or accessibility, then apply only the pieces the brief requires.
UI Master Static Use Cases
- Openclaw Skills tasks that explicitly require native CSS, vanilla CSS, or no Tailwind.
- New Vite + HTML/CSS projects that need a maintainable architecture from day one.
- Static sites, landing pages, marketing pages, and hero sections with strong visual polish.
- Headers, navbars, dashboard shells, sidebar layouts, and responsive card grids.
- Adding modern effects such as glassmorphism, layered gradients, scroll-driven animation, parallax, or 3D transforms.
- Retrofitting an existing stylesheet with tokens, BEM conventions, and flat specificity.
- Shipping accessible, progressive-enhancement CSS with reduced-motion fallbacks and browser support guards.
How UI Master Static Works
- Inspect the existing repo and confirm scope. If styles already exist, match the current conventions and introduce BEM and tokens incrementally. For greenfield work, start from the full architecture.
- Define the token system and file layers. Put colors, spacing, radius, shadow, typography, and motion in
:root, then separate CSS into tokens, base/reset, layout, components, and utilities. - Build structural patterns with the provided references. Reuse header, dashboard, grid, and hero patterns; use container queries and CSS Grid template areas where they fit.
- Add one signature visual effect per screen. Choose from glassmorphism, mesh gradients, micro-interactions, scroll-driven animation, parallax, 3D transforms, or Houdini-powered effects, and always include fallbacks.
- Verify quality before shipping. Check
prefers-reduced-motion,@supportsfallbacks, flat specificity, and token-only values so the stylesheet stays maintainable and accessible.
UI Master Static Setup
No package install is required. Set up the CSS architecture and reference folders, then keep all component styles token-driven.
- Create the base folder structure:
mkdir -p styles/tokens styles/base styles/layout styles/components styles/utilities references examples
touch styles/main.css
- Seed the project with the reference docs and examples that match the task.
- In
styles/main.css, import layers in order: tokens, base/reset, layout, components, utilities. - Define runtime theme variables in
:rootand avoid literal values in component rules. - Match any existing repo conventions first; only introduce BEM and token layers incrementally when the codebase is already structured another way.
UI Master Static Data Schema & Taxonomy
File and data model
| Layer | Paths / files | Purpose | Taxonomy |
|---|---|---|---|
| Skill metadata | SKILL.md front matter (name, description) |
Declares when the skill should trigger and what it should avoid | scope, exclusions, implementation style |
| Architecture reference | references/css-architecture-bem.md |
Token system, BEM rules, folder organization, theme-toggle model | tokens, specificity, import order, theming |
| Layout patterns | references/layout-patterns.md, examples/header.html, examples/header.css, examples/dashboard.html, examples/dashboard.css |
Reusable shells for headers, navbars, dashboard layouts, and responsive grids | shell, grid areas, container queries, hero rhythm |
| Effects catalog | references/modern-effects.md, examples/effects-showcase.html, examples/effects-showcase.css |
Isolated demos for glassmorphism, gradients, scroll animation, parallax, 3D transforms, and Houdini | motion, elevation, interaction, progressive enhancement |
| Verification | references/accessibility-performance-checklist.md |
Accessibility and performance gates before shipping | reduced motion, supports fallbacks, specificity |
| CSS source layers | styles/tokens, styles/base, styles/layout, styles/components, styles/utilities |
Production stylesheet organization for framework-free builds | block, element, modifier, state, utility |
Token taxonomy
- Color tokens: semantic foreground, background, border, surface, accent values
- Space tokens: spacing scale for padding, gap, and layout rhythm
- Shape tokens: radius and border-width scales
- Elevation tokens: shadows, blur, and overlay depth
- Type tokens: font families, sizes, line-height, tracking, weight
- Motion tokens: duration, easing, and transform intensity
UI Master Static Advanced Features
- Runtime light/dark theming with a two-stage custom-property pattern
- Flat-specificity BEM architecture that scales without selector battles or
!important - Container-query-responsive components and CSS Grid dashboard shells
- Scroll-driven animations, parallax, 3D transforms, and multi-stage keyframes
- CSS Houdini
@propertysupport with@supportsprogressive enhancement for Paint API effects - Accessibility guardrails with
prefers-reduced-motionfallbacks for motion-heavy UI - Openclaw Skills-friendly reference workflow that encourages using only the guide needed for architecture, layout, effects, or accessibility
SKILL.md
Loading
Related Openclaw Skills
GIF Picker
GIF Picker lets Openclaw agents choose a local reaction GIF by tag and return a reliable `MEDIA:` path for chat replies.
Save — Conversation Memory Index
Save is an Openclaw Skills memory system that turns live conversations into durable, searchable local knowledge.
savemaintenance
savemaintenance is an Openclaw Skills maintenance pipeline that backs up, reconciles, rebuilds, and audits the three-tier memory system in one deterministic run.
Dali Creative Intelligence
Dali scores and upgrades image and video prompts before generation, preventing wasted credits and improving output quality.
Tristan RFQ Overseer
Tristan RFQ Overseer turns inbound RFQs into priced, compared, and approval-gated quotation drafts with vault-backed state.
Canvora Visual Generation Skill
Canvora is a CLI-driven utility that converts raw text, web URLs, and documents into high-quality, on-brand marketing visuals and structured slide decks.
Featured*
