ui-skills

What This Skill Does

The ui-skills package provides a rigorous set of opinionated constraints and best practices for building consistent, performant, and accessible user interfaces within the OpenClaw agent ecosystem. It serves as a style guide-as-code, forcing developers and AI agents to adhere to a specific technical architecture. By standardizing the usage of Tailwind CSS, motion/react for animations, and accessible primitives like Radix or Base UI, this skill ensures that all generated interfaces are not only visually cohesive but also technically robust and keyboard-accessible.

Installation

To integrate these UI constraints into your OpenClaw environment, execute the following command in your terminal:

clawhub install openclaw/skills/skills/correctroadh/ui-skills

Once installed, the agent will begin applying these rules to all UI-related tasks, including layout generation, component selection, and animation implementation.

Use Cases

• Standardizing Enterprise Dashboards: Ensuring that multiple AI-generated modules share the same shadow scale, spacing, and accessibility standards.
• Rapid Interface Prototyping: Accelerating development by enforcing pre-approved defaults, allowing agents to focus on logic rather than reinventing UI patterns.
• Performance Optimization: Enforcing strict rules against layout animations (width, height) and blocking expensive operations like large-scale backdrop-filter usage, ensuring the interface remains fluid on lower-end devices.
• Accessibility Compliance: Automatically ensuring keyboard focus, aria-label requirements, and reduced-motion preferences are handled without manual oversight.

Example Prompts

1. "Design a settings panel for the user dashboard using ui-skills standards, ensuring all inputs are accessible and conform to the atomic design requirements."
2. "Create a loading skeleton for the data table that respects the h-dvh constraint and uses the approved Tailwind spacing scale."
3. "Refactor the existing delete button to use an AlertDialog for confirmation, ensuring the animation uses standard compositor properties and avoids layout thrashing."

Tips & Limitations

• Limitations: This skill is strictly opinionated. It prohibits certain design flourishes like custom gradients or arbitrary z-index values to ensure maintainability. If your project specifically requires high-end, complex visuals, these constraints may feel restrictive.
• Tips: Always rely on the cn utility for class merging to avoid collisions. When building interactive elements, prioritize Base UI or Radix primitives over building custom logic; the agent is trained to reject manual re-implementation of focus traps. Remember that animations must be strictly for interaction feedback and limited to opacity and transform to maintain 60fps performance.