ui-ux-pro-max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/ahump20/ui-ux-pro-max-2What This Skill Does
UI/UX Pro Max is a comprehensive design intelligence suite integrated directly into the OpenClaw agent ecosystem. It serves as an expert consultant for digital product development, offering a massive knowledge base covering 50+ aesthetic styles, 97 color palettes, 57 font pairings, and 99 established UX guidelines. Whether you are building a SaaS dashboard, a mobile app, or a marketing landing page, this skill provides actionable design guidance, code implementation support for 9 major technology stacks (including React, Next.js, SwiftUI, and Flutter), and strict adherence to accessibility standards. It functions as both a design system architect and a code quality reviewer, ensuring your interfaces are not just visually compelling but also performant, accessible, and user-friendly.
Installation
To integrate this skill into your OpenClaw environment, execute the following command in your terminal:
clawhub install openclaw/skills/skills/ahump20/ui-ux-pro-max-2
Once installed, you can trigger the skill using the agent's natural language interface to initiate design tasks or code reviews.
Use Cases
This skill is designed for developers, UI/UX designers, and product managers who require rapid, high-quality design execution. Common use cases include: 1. Generating accessible component layouts for React or Vue dashboards. 2. Performing automated design reviews to identify accessibility violations (like low color contrast) or poor touch-target sizing. 3. Selecting cohesive font pairings and color palettes that align with specific brand identities (e.g., modern SaaS vs. editorial blog). 4. Refactoring existing UI code to implement modern patterns such as glassmorphism or bento grids. 5. Generating skeleton screen implementations for improved perceived performance.
Example Prompts
- "Apply a bento grid style to my current dashboard implementation using Tailwind and shadcn/ui components."
- "Review my registration form component for accessibility; specifically check touch target sizes and label attributes."
- "Recommend a professional color palette and font pairing for a fintech mobile app that prioritizes trust and readability."
Tips & Limitations
To maximize the utility of UI/UX Pro Max, always specify your technology stack early in the conversation to ensure the generated code snippets match your environment. Use the 'review' action frequently during the development phase to catch critical accessibility issues early. Note that while this skill provides high-level design intelligence, final aesthetic decisions should still be reviewed against your specific brand guidelines. The skill relies on external libraries like shadcn/ui; ensure your project environment is prepared for those dependencies.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-ahump20-ui-ux-pro-max-2": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: code-execution