skills.rest
PinpongTp
PinpongTpCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-ux-design

Guide UI/UX design with mobile-first principles and accessibility guidelines.

Updated Mar 7, 2026
Search Tags:#accessibility#responsive design#tailwind css#web design#ux design#ui design#shadcn ui
One-click install
npx skills add https://github.com/PinpongTp/superblue-v1 --skill ui-ux-design-pinpongtp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-design
Source: https://github.com/PinpongTp/superblue-v1/tree/main/skills/ui-ux-design
Command: npx skills add https://github.com/PinpongTp/superblue-v1 --skill ui-ux-design-pinpongtp

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill unit helps web developers and designers create beautiful, modern, and accessible web applications by providing a comprehensive guide to UI/UX design principles, patterns, and best practices.

Core Features & Use Cases

  • Modern Design Principles: Offers guidelines for mobile-first design, visual hierarchy, whitespace usage, and color systems.
  • Typography Scale: Defines a modular typography scale for consistent text hierarchy.
  • Layout Patterns: Introduces CSS Grid, Flexbox, and responsive grid patterns for building layouts.
  • Micro-Interactions: Provides instructions for creating subtle animations that enhance user experience.
  • Accessibility: Details WCAG 2.2 compliance, including contrast ratios, keyboard navigation, and ARIA labels.
  • Shadcn/UI + Tailwind Stack: Explains setting up and using the Shadcn/UI and Tailwind CSS for Next.js projects.
  • QuickStart: Use the ui-ux-design skill to apply a mobile-first design approach to your next web project.

Quick Start

Apply the ui-ux-design principles to your next project by reviewing the provided design guides and using the included templates as a starting point.

Frequently Asked Questions about ui-ux-design

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

FAQPage Schema
How do I apply mobile-first design principles using Tailwind CSS?▼

Apply mobile-first design principles by utilizing Tailwind CSS responsive utilities to build layouts that scale up from mobile base styles. This approach ensures visual hierarchy, whitespace usage, and responsive grid patterns adapt seamlessly across all screen sizes for modern web applications.

What is a modular typography scale and how does it improve web design?▼

A modular typography scale is a system of proportional font sizes that establishes consistent text hierarchy across a web application. It improves web design by maintaining mathematical relationships between headings and body text, ensuring readability and structural harmony throughout the interface.

How do I ensure WCAG 2.2 accessibility compliance in my UI design?▼

Ensure WCAG 2.2 accessibility compliance in UI design by meeting specific contrast ratios, implementing full keyboard navigation, and applying proper ARIA labels. These guidelines guarantee web applications are perceivable and operable for users with diverse accessibility needs.

Can I use Shadcn UI with Tailwind CSS in a Next.js project?▼

Yes, you can use Shadcn UI with Tailwind CSS in a Next.js project. This Skill provides specific instructions for setting up and integrating the Shadcn UI and Tailwind CSS stack to build accessible, modern web application components efficiently.

What are the best ways to create micro-interactions for web applications?▼

The best ways to create micro-interactions involve implementing subtle animations that enhance user experience without causing distraction. Following modern UI design principles, these interactions provide visual feedback and improve overall interface responsiveness for web applications.

Do I need to know CSS Grid and Flexbox to build responsive web layouts?▼

Yes, you need knowledge of CSS Grid and Flexbox to build responsive web layouts effectively. Familiarity with these layout patterns is required to implement the responsive grid structures and modern layout techniques detailed within the design guidelines.

Related Skills

Explore More Design & Creative Skills→
AbdullahMalik17AbdullahMalik17
9

styling-with-shadcn

Set up shadcn/ui components, forms, and dark mode in Next.js projects.

Community
Intermediate
0xDarkMatter0xDarkMatter
29

tailwind-patterns

Generate Tailwind CSS v3+ utility patterns with responsive breakpoints and dark mode configuration.

Community
Basic
Aurora-AIAurora-AI
1

sovereign-ui

Standardize Tailwind-based UI design with layout, typography, spacing, and color rules.

Community
Basic
vuminhieuvuminhieu

ui-styling

Build accessible React interfaces with shadcn/ui, Tailwind CSS, and canvas visuals.

Community
Intermediate