ui-ux-pro-max

What This Skill Does

ui-ux-pro-max is an advanced intelligence agent designed for the full lifecycle of interface development. It bridges the gap between abstract design goals and concrete technical implementation. The skill operates as a high-fidelity consultant that understands modern web architectures (React, Next.js, Vue, Svelte) and design systems (Tailwind, CSS-in-JS). It provides structured guidance on layout, typography, accessibility, and component-driven development. By leveraging internal design heuristics and a dedicated design system generator, it ensures that your UI is not only aesthetically pleasing but also functional, scalable, and WCAG-compliant.

Installation

To integrate this skill into your OpenClaw environment, execute the following command in your terminal:

clawhub install openclaw/skills/skills/kjaylee/kj-ui-ux-pro-max

Ensure your project environment is initialized with OpenClaw before running the install command.

Use Cases

• Rapid Prototyping: Generate UI layouts and visual directions from loose conceptual requirements.
• Design System Auditing: Create or refine design tokens, spacing scales, and typography systems to ensure consistency across large codebases.
• UX Refinement: Map out user journeys, including critical error handling, loading skeleton states, and empty state micro-copy.
• Frontend Implementation: Convert static design files or descriptions into production-ready code components with specific Tailwind classes or CSS modules.
• Accessibility Reviews: Evaluate components for keyboard navigation, focus management, and color contrast adherence.

Example Prompts

1. "I need a dark-mode landing page for a SaaS dashboard. Please design the information architecture, provide a color palette using the design system generator, and write the React code for the navigation sidebar."
2. "Review my current checkout flow. The conversion rate is low; can you suggest UX improvements for the shipping form, define the error states for validation, and provide the updated Tailwind classes for the input fields?"
3. "Help me create a design token system for my Svelte project. We need a fluid type scale, a 4px-based spacing system, and focus state guidelines for WCAG AA compliance."

Tips & Limitations

• Be Specific: Always provide context on your existing tech stack (e.g., "I am using Next.js with Tailwind CSS") to get code that you can copy-paste directly.
• Triage First: Use the triage phase to clarify your constraints. Providing a screenshot or a URL makes the agent exponentially more effective.
• Leverage the Script: If you need a structured JSON output for tokens, explicitly ask the agent to run the design_system.py script to ensure programmatic consistency.
• Accessibility: Never skip the accessibility section. Always request focus states and screen-reader-friendly attributes when generating interactive UI components.
• Limitations: While the agent is an expert in design systems and coding, it cannot physically open your Figma files; it relies on your descriptions, exported assets, or visual context provided via images.