ui-ux-designExpert guidance on mobile-first UI/UX design, color systems, typography, accessibility (WCAG 2.2), Tailwind + Shadcn/ui integration, micro-interactions, and...
Install via ClawdBot CLI:
clawdbot install itsjustdri/ui-ux-designName: ui-ux-design
Description: Modern UI/UX design principles, patterns, and best practices for web and mobile applications. Use when building user interfaces, designing layouts, choosing color palettes, implementing responsive design, ensuring accessibility (WCAG), or creating beautiful modern applications. Includes 2026 design trends, Tailwind CSS patterns, Shadcn/ui integration, micro-interactions, and mobile-first responsive design.
Activate this skill when:
Guide user attention using:
Build a primary color scale (50-900):
Tools: Huevy.app, Coolors.co, Adobe Color
text-xs: 12px / 16px line-height
text-sm: 14px / 20px
text-base: 16px / 24px (body default)
text-lg: 18px / 28px
text-xl: 20px / 28px
text-2xl: 24px / 32px
text-3xl: 30px / 36px (section headers)
text-4xl: 36px / 40px
text-5xl: 48px / 1 (hero titles)Font pairing: 2 fonts max (sans-serif for UI, optional serif for headings)
repeat(auto-fit, minmax(280px, 1fr)) (no media queries!)transform and opacity (GPU accelerated)npx create-next-app@latest project-name --typescript --tailwind --app
cd project-name
npx shadcn@latest initChoose: Style (Default), Base color (Blue or custom), CSS variables (Yes)
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dialog
npx shadcn@latest add calendarComponents appear in components/ui/ — you own the code, customize freely.
p-4 not p-[17px]w-full md:w-1/2 lg:w-1/3dark:bg-gray-900 dark:text-whiteBefore writing code, confirm:
Study these products:
Tools:
For comprehensive deep-dives (component patterns, animation examples, responsive grid techniques), see UI_UX_MASTER_GUIDE.md in this skill directory.
Last Updated: 2026-02-05
Generated Mar 1, 2026
A startup wants to modernize its admin dashboard to improve user engagement and accessibility. This skill guides selecting a color palette, implementing responsive grids with Tailwind, and adding Shadcn/ui components like data tables and charts, ensuring WCAG compliance for all users.
An e-commerce company is building a mobile-first shopping app. This skill helps design intuitive product pages with clear visual hierarchy, micro-interactions for cart actions, and responsive layouts that adapt from phones to tablets, using pre-build checklists for efficiency.
An online learning platform needs a user-friendly interface for courses and quizzes. This skill assists in setting up typography scales for readability, implementing accessible focus states for keyboard navigation, and using Flexbox for lesson component layouts.
A healthcare provider aims to enhance its patient portal for better accessibility and usability. This skill supports ensuring 4.5:1 text contrast ratios, integrating Shadcn/ui form components with ARIA labels, and applying mobile-first breakpoints for appointment scheduling.
A fintech firm is developing a design system for its banking app. This skill provides principles for consistent UI patterns, color systems with semantic alerts, and micro-interactions like button clicks to build trust and comply with financial accessibility standards.
Offer design consulting and implementation for clients building web or mobile apps. Use this skill to quickly set up projects with Shadcn/ui and Tailwind, ensuring modern, accessible designs that attract higher-paying contracts.
Build and sell a SaaS tool focused on design automation or accessibility testing. Leverage the skill's principles to create a user-friendly interface, driving subscriptions through efficient, beautiful UI that reduces customer churn.
Create and sell courses or tutorials on modern UI/UX design using Tailwind and Shadcn/ui. Use the skill's structured guides to develop curriculum content, attracting students seeking practical, up-to-date design knowledge.
💬 Integration Tip
Start by running the Shadcn/ui setup command in a Next.js project to quickly generate customizable components, then apply the mobile-first breakpoints and color systems from the skill for consistent, accessible designs.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI. Supports both Vite (pure static) and Next.js (Vercel deploy) workflows.
AI skill for automated UI audits. Evaluate interfaces against proven UX principles for visual hierarchy, accessibility, cognitive load, navigation, and more. Based on Making UX Decisions by Tommy Geoco.