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-designGrade Good — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
https://github.com/shadcn.pngAudited Apr 16, 2026 · audit v1.0
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.
Scored Apr 19, 2026
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Build or update the BlueBubbles external channel plugin for Clawdbot (extension package, REST send/probe, webhook inbound).
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.
Frontend development with React, Next.js, Tailwind CSS. Build landing pages, dashboards, forms, components. Responsive, accessible, performant UI.
Use when building Next.js 14/15 applications with the App Router. Invoke for routing, layouts, Server Components, Client Components, Server Actions, Route Handlers, authentication, middleware, data fetching, caching, revalidation, streaming, Suspense, loading states, error boundaries, dynamic routes, parallel routes, intercepting routes, or any Next.js architecture question.
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.