skills.rest
Maosixian
MaosixianCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-design

Guide modern UI/UX design with mobile-first principles and Shadcn/UI plus Tailwind CSS.

Updated Mar 12, 2026
Search Tags:#accessibility#responsive design#mobile design#shadcn/ui#tailwind css#web design#ui/ux design
One-click install
npx skills add https://github.com/Maosixian/selfused-xavier-lobsterop --skill ui-ux-design-maosixian
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-design
Source: https://github.com/Maosixian/selfused-xavier-lobsterop/tree/main/skills/ui-ux-design
Command: npx skills add https://github.com/Maosixian/selfused-xavier-lobsterop --skill ui-ux-design-maosixian

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill unit provides comprehensive guidelines for modern UI/UX design, helping developers and designers create visually appealing, accessible, and responsive web and mobile applications.

Core Features & Use Cases

  • Design Principles: Offers insights on mobile-first design, visual hierarchy, whitespace usage, and color systems.
  • Typography Scale: Defines a modular typography scale for consistent text hierarchy.
  • Layout Patterns: Explains CSS Grid, Flexbox, and responsive grid layout patterns.
  • Micro-Interactions: Describes hover, click, and loading animations for engaging user interfaces.
  • Accessibility: Details accessibility considerations, including contrast ratios, keyboard navigation, and ARIA attributes.
  • Shadcn/UI + Tailwind Stack: Provides setup instructions and best practices for using Shadcn/UI components with Tailwind CSS.
  • Component Library: Lists resources for UI component libraries and design systems.
  • QuickPost-Specific Design Decisions: Offers specific design choices and considerations for QuickPost.

Quick Start

Start by reviewing the UI/UX design principles and layout patterns.

Frequently Asked Questions about ui-ux-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are the best practices for mobile-first responsive web design?▼

Mobile-first responsive web design requires prioritizing content hierarchy, utilizing CSS Grid and Flexbox for fluid layouts, and defining modular typography scales to ensure consistent visual structure across all screen sizes.

How do I ensure my UI components meet accessibility standards?▼

To meet accessibility standards, your UI components must maintain sufficient color contrast ratios, support full keyboard navigation, and implement proper ARIA attributes for screen reader compatibility throughout the web and mobile application interface.

How do I set up Shadcn/UI with Tailwind CSS for web applications?▼

Setting up Shadcn/UI with Tailwind CSS involves configuring the component library within your project environment and applying the provided best practices to integrate accessible, customizable UI patterns into your web application architecture.

Does this UI/UX design guidance cover micro-interactions and animations?▼

This UI/UX design guidance covers micro-interactions by detailing specific hover, click, and loading animations, providing patterns to create engaging user interfaces and improve overall interactive feedback for web and mobile applications.

What is the recommended approach for defining a color system and visual hierarchy?▼

Defining a color system and visual hierarchy involves utilizing whitespace effectively to separate elements, establishing clear visual dominance through modular scales, and structuring color tokens to guide user attention across the application interface.

Related Skills

Explore More Design & Creative Skills→
justinlevinedotmejustinlevinedotme
7

vite-shadcn-tailwind4

Initialize shadcn/ui with Tailwind v4 in Vite projects.

Community
Advanced
frankxaifrankxai
31

UI/UX Design Expert

Provide UI/UX design guidance covering WCAG 2.2 accessibility and design systems.

Community
Intermediate
locnbk2002locnbk2002
1

ui-styling

Style React interfaces with shadcn/ui components and Tailwind CSS.

Community
Intermediate
trungdo9trungdo9
3

ui-styling

Create React-based user interfaces with shadcn/ui components and Tailwind CSS.

Community
Advanced