Ui Ux Design

What This Skill Does

The UI/UX Design skill by itsjustdri provides a comprehensive framework for modern interface creation within the OpenClaw environment. It encapsulates professional industry standards for web and mobile design, acting as an expert consultant for layout architecture, typography, color theory, and accessibility compliance. By leveraging this skill, users can ensure their interfaces adhere to 2026 design trends, including effective use of Tailwind CSS, Shadcn/ui integration, and sophisticated micro-interaction design. It serves as a bridge between high-level aesthetic decisions and technical implementation, ensuring every design choice aligns with modern responsive frameworks.

Installation

To integrate this skill into your OpenClaw environment, execute the following command in your terminal: clawhub install openclaw/skills/skills/itsjustdri/ui-ux-design

Use Cases

• Project Kickoff: Planning the layout structure and color system for a new dashboard or landing page.
• Refining Components: Designing specific interactive elements like cards, buttons, or navigation menus using Tailwind and Shadcn best practices.
• Accessibility Auditing: Checking existing designs against WCAG 2.2 standards to ensure contrast ratios and keyboard navigation support.
• Mobile Optimization: Converting desktop-first designs into responsive, mobile-first layouts using CSS Grid and Flexbox patterns.

Example Prompts

1. "Design a modern, mobile-first landing page for a SaaS product using a deep indigo primary color, implementing a 12-column grid and a specific typography scale for hierarchy."
2. "Review this UI component configuration: I need to ensure my Shadcn button variations meet WCAG 2.2 accessibility contrast requirements and have smooth 0.3s micro-interaction animations."
3. "Suggest a color palette for a fintech dashboard that emphasizes trust, including semantic colors for error and success states that comply with 4.5:1 contrast ratios."

Tips & Limitations

• Whitespace: Prioritize the 8px baseline grid to ensure visual consistency across all screen sizes.
• Animation: Stick to transform and opacity for animations; these are GPU accelerated and prevent layout shift.
• Limitations: While the skill provides high-level design expertise and CSS patterns, it is a guidance tool. Always perform manual user testing for usability. It does not replace the need for domain-specific user research on your particular target audience.