skills.rest
delorenj
delorenjCOMMUNITY
Explore all skills by this author →
Website𝕏@CodeNDaggerGitHub

ui-ux-design

Guide UI/UX design with Tailwind CSS and Shadcn/ui for web and mobile apps.

Updated Feb 10, 2026
Search Tags:#accessibility#design system#shadcn/ui#tailwind css#ux design#ui design
One-click install
npx skills add https://github.com/delorenj/00_ceiling --skill ui-ux-design-delorenj
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-design
Source: https://github.com/delorenj/00_ceiling/tree/main/ui-ux-design
Command: npx skills add https://github.com/delorenj/00_ceiling --skill ui-ux-design-delorenj

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance and best practices for designing and implementing modern, user-friendly, and accessible user interfaces for web and mobile applications.

Core Features & Use Cases

  • Modern Design Principles: Learn about visual hierarchy, whitespace, and mobile-first design.
  • Component Styling: Implement color systems, typography scales, and layout patterns using Tailwind CSS and Shadcn/ui.
  • Accessibility Standards: Ensure WCAG compliance with contrast ratios, keyboard navigation, and ARIA attributes.
  • Micro-interactions: Add subtle animations for enhanced user experience.
  • Use Case: When starting a new web application, use this Skill to define the design system, set up the component library, and ensure the UI is both aesthetically pleasing and accessible.

Quick Start

Use the ui-ux-design skill to generate a color palette and typography scale for a new project.

Frequently Asked Questions about ui-ux-design

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

FAQPage Schema
How do I design a color system and typography scale for a new web application?▼

Design a color system and typography scale by applying modern UI design principles like visual hierarchy and whitespace. This approach provides comprehensive guidance to ensure your web application is both aesthetically pleasing and accessible.

How do I implement WCAG accessibility standards in UI components?▼

Implement WCAG accessibility standards by ensuring proper contrast ratios, keyboard navigation, and ARIA attributes. This approach provides specific best practices to make your user interfaces compliant and accessible for all users.

Can I use Tailwind CSS and Shadcn/ui to build accessible component libraries?▼

Yes, you can integrate Tailwind CSS and Shadcn/ui to implement component styling. This approach covers layout patterns using CSS Grid and Flexbox to build modern, accessible user interfaces.

What is mobile-first design and when do I need it for web applications?▼

Mobile-first design is a principle that prioritizes the mobile user experience before scaling up to larger screens. You need it when starting a new web application to ensure your UI design is responsive and user-friendly across all devices.

What's the best way to add micro-interactions for enhanced user experience?▼

The best way to add micro-interactions is by incorporating subtle animations into your UI design. This technique enhances the overall user experience by providing visual feedback and improving interface responsiveness.

Does this UI design guidance cover both web and mobile applications?▼

Yes, this UI design guidance covers both web and mobile applications. It provides comprehensive best practices for visual hierarchy, layout patterns, and accessibility standards applicable across both platforms.

Related Skills

Explore More Design & Creative Skills→
netprtonynetprtony

shadcn-ui

Automate shadcn/ui component setup and usage in React and Next.js projects.

Community
Advanced
auxi-wardrobeauxi-wardrobe
1

ck:ui-styling

Generate accessible, responsive UIs with shadcn/ui and Tailwind CSS.

Official
Advanced
Adelie-SquadAdelie-Squad
17

ui-designer

Create and apply design tokens for color, typography, and spacing.

Official
Intermediate
htafollahtafolla
5

ui-ux-design

Design mobile-first user interfaces with WCAG 2.1 AA accessibility compliance.

Community
Advanced