A rigorous set of architectural constraints and design principles that guide AI agents in building accessible, performant, and visually consistent user interfaces.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install ui-skills
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-skills 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 Skills?
UI Skills provides a definitive framework for AI coding agents to follow when building web interfaces. By establishing strict rules around the technical stack, such as mandatory use of Tailwind CSS and motion/react, it ensures that generated code is not only functional but also adheres to production-grade standards. This skill acts as a guardrail, preventing common mistakes like layout property animations or inaccessible component structures.
Integrating these constraints into your Openclaw Skills workflow ensures that agents produce clean, maintainable, and accessible codebases. It prioritizes established primitives like Radix and Base UI, enforces performance optimizations through compositor-only animations, and ensures responsive design integrity using modern CSS units like dvh.
UI Skills Use Cases
- Enforcing Tailwind CSS best practices and utility-first design consistency.
- Generating accessible UI components that comply with ARIA standards and keyboard navigation.
- Implementing high-performance animations that respect user motion preferences.
- Standardizing typography and layout logic across multi-agent development projects.
- Optimizing mobile web experiences using safe-area-inset and dynamic viewport units.
How UI Skills Works
- The AI agent parses the UI Skills markdown to understand the mandatory tech stack and design constraints.
- When a UI task is initiated, the agent cross-references the required utilities like cn for class merging and Tailwind defaults.
- The agent applies structural rules, prioritizing existing project primitives over creating new ones.
- Interaction logic is automatically wrapped in accessible primitives (e.g., Radix) to ensure focus management and ARIA compliance.
- Layout and animation code is validated against performance rules, such as avoiding layout property shifts and limiting feedback to 200ms.
- The final output is delivered as optimized, production-ready code compatible with Openclaw Skills standards.
UI Skills Setup
To utilize UI Skills in your project, ensure your environment is configured with the necessary dependencies:
npm install tailwindcss motion/react clsx tailwind-merge
Add the ui-skills definition to your agent's system instructions or skill library. Ensure that the agent has access to the component primitives listed in the documentation (e.g., Base UI or Radix).
UI Skills Data Schema & Taxonomy
The UI Skills framework organizes its logic into specific domains to ensure comprehensive coverage of the interface lifecycle:
| Domain | Key Requirement | Tooling/Standard |
|---|---|---|
| Styling | Utility-first | Tailwind CSS |
| Animation | Compositor-only | motion/react |
| Components | Primitive-based | Radix / Base UI |
| Typography | Readability | text-balance / text-pretty |
| Performance | Render-logic | No useEffect for render logic |
UI Skills Advanced Features
- Context-aware animation throttling that respects prefers-reduced-motion settings.
- Smart layout management using size-x utilities and fixed z-index scales.
- Automatic skeleton state generation for complex data-loading components.
- Advanced interaction constraints for destructive actions using AlertDialog patterns.
- Native integration with Openclaw Skills for consistent design system enforcement across different agents.
SKILL.md
Loading
Related Openclaw Skills
Tencent Map API Integration
A comprehensive integration of Tencent Map Web Services for advanced location search, route planning, and coordinate transformations.
Cross-Device Sync Skill
A synchronization tool that uses GitHub as a central repository to keep OpenClaw memory files consistent across all your devices.
Baidu Map Integration
Integrate comprehensive Baidu Map Web Service APIs for location searching, geocoding, and routing.
letsping
A secure sudo-protocol for AI agents that requires manual human approval before executing destructive, financial, or infrastructure-level actions.
Phone Voice Integration
A comprehensive integration that turns your Openclaw instance into a voice-activated phone assistant using ElevenLabs and Twilio.
Taildrop
A command-line utility for retrieving files from the Tailscale Taildrop inbox to local Linux storage.
Featured*
