skills.rest
dfpalhano
dfpalhanoCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-design

Provide UI/UX design principles and patterns for web and mobile applications.

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

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

  • Design Principles: Learn core concepts like mobile-first, visual hierarchy, and whitespace.
  • Component Stacks: Implement UIs using Tailwind CSS and Shadcn/ui.
  • Accessibility: Ensure WCAG compliance for broader reach.
  • Use Case: When starting a new project, use this Skill to define the design system, choose a color palette, set up typography, and implement responsive layouts with accessible components.

Quick Start

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

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 responsive UI with Tailwind CSS and Shadcn/ui?▼

Design a responsive UI with Tailwind CSS and Shadcn/ui by applying mobile-first principles, establishing visual hierarchy, and integrating accessible component patterns for web and mobile applications. This approach ensures adaptable layouts across screen sizes.

What are the best practices for WCAG compliance in web design?▼

Best practices for WCAG compliance involve implementing accessible UI components, maintaining proper visual hierarchy, and adhering to modern UX design principles. These standards ensure broader reach and usability for all users.

How do I set up a design system for a new SaaS dashboard?▼

Set up a design system for a SaaS dashboard by defining a color palette, configuring a typography scale, and applying whitespace effectively. These foundational UI design principles create a cohesive visual language.

Can I use this approach for mobile-first responsive design?▼

Yes, you can use this approach for mobile-first responsive design. It provides specific patterns and best practices to scale interfaces from mobile to web while maintaining usability and accessibility standards.

What is the role of micro-interactions in modern UX design?▼

The role of micro-interactions in modern UX design is to provide user feedback and enhance visual hierarchy. Implementing these subtle animations alongside accessible components improves overall user engagement.

Does this UI design methodology require external dependencies?▼

No, this UI design methodology does not require external dependencies to implement. It provides standalone design principles and patterns for Tailwind CSS and Shadcn/ui, serving as a reference for building accessible interfaces.

Related Skills

Explore More Design & Creative Skills→
vecearvecear

storybook-setup

Automate Storybook setup, configuration, and CSF3 story authoring for frontend projects.

Community
Intermediate
NammDevNammDev
2

ui-styling

Integrate shadcn/ui with Tailwind CSS for React UI styling.

Community
Intermediate
koralliskorallis
90

tailwind-design-system

Generate Tailwind CSS design systems with custom themes and design tokens.

Community
Intermediate
abbas133abbas133
1

ui-ux-expert

Guide teams in designing accessible, scalable UI with design tokens and WCAG compliance.

Community
Advanced