ui-ux-pro-max

What This Skill Does

ui-ux-pro-max is an advanced design and engineering assistant within the OpenClaw ecosystem. It acts as a bridge between high-level visual design and concrete frontend implementation. The skill is designed to handle the end-to-end lifecycle of interface creation: from establishing information architecture and UX flows to generating design tokens and writing production-ready code in frameworks like React, Next.js, and Tailwind CSS. It is built to minimize ambiguity by following a structured workflow: Triage, Produce, and Implement.

Installation

To integrate this skill into your OpenClaw environment, use the following CLI command: clawhub install openclaw/skills/skills/xobi667/ui-ux-pro-max

Use Cases

This skill is ideal for scenarios where you need:

• Design System Standardization: Defining color palettes, typography scales, spacing units, and border-radius tokens to ensure UI consistency across an entire application.
• UX Audits: Mapping user journeys and identifying friction points, including empty/loading/error state design.
• Frontend Implementation: Converting visual design concepts into clean, accessible code components that adhere to WCAG accessibility standards.
• Prototyping: Rapidly generating visual concepts for new product features while maintaining a professional 'brand vibe'.
• Component Refactoring: Improving existing UI code by providing specific file-level edits that enhance layout, responsiveness, and interaction patterns.

Example Prompts

1. "I need a dark-mode dashboard layout for a fintech web app. Please propose a grid system, typography scale, and the React code for the navigation sidebar."
2. "Can you help me improve the UX of my checkout flow? It currently has a 30% drop-off rate. Let's start by mapping the current user journey and identifying missing edge cases."
3. "Generate a set of Tailwind configuration tokens for a professional SaaS product using a deep indigo primary palette and sans-serif typography."

Tips & Limitations

• Triage is essential: Always provide context (platform, stack, constraints) to ensure the AI generates code that matches your existing architecture. Failure to provide this will result in generic outputs that may not integrate with your project.
• Accessibility: The skill is optimized for WCAG AA compliance; ensure you explicitly mention if you require higher compliance levels like AAA.
• Bundled Assets: Leverage the internal design data repository for best-practice patterns before manually defining custom UI rules to save time.
• Limitations: While it excels at code generation, always review implementation outputs for architectural alignment with your specific project folder structure.