skills.rest
ViewWay
ViewWayCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-design

Standardize UI/UX design with design tokens, breakpoints, and accessibility requirements.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This design guide provides a reusable framework of modern UI/UX principles, patterns, and accessibility guidelines to prevent inconsistent interfaces and design drift.

Core Features & Use Cases

  • Mobile-first design and responsive layout patterns for web and mobile apps.
  • Color systems, typography scales, spacing tokens, and visual hierarchy guidance.
  • Accessibility best practices (WCAG 2.2) including contrast, keyboard navigation, and ARIA labeling.
  • Integration guidance for Tailwind CSS and Shadcn/ui to accelerate UI implementation.
  • Example decision framework for design reviews and rapid prototyping.

Quick Start

Begin a new UI project using mobile-first patterns, a consistent typography scale, and Tailwind + Shadcn UI.

Frequently Asked Questions about ui-ux-design

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

FAQPage Schema
How do I establish a consistent UI design system using Tailwind and Shadcn?▼

To establish a consistent UI design system using Tailwind and Shadcn, apply standardized design tokens, typography scales, spacing rules, and color systems to prevent design drift and ensure visual cohesion. This framework accelerates rapid UI implementation.

What are the best responsive layout patterns for mobile-first web apps?▼

The best responsive layout patterns for mobile-first web apps utilize defined mobile breakpoints and spacing tokens to scale interfaces seamlessly. This approach ensures optimal visual hierarchy and layout consistency across all device sizes.

How do I meet WCAG 2.2 accessibility requirements in my web interfaces?▼

To meet WCAG 2.2 accessibility requirements, implement strict color contrast ratios, keyboard navigation support, and ARIA labeling. Following these guidelines ensures your web and mobile interfaces remain fully accessible to all users.

Does this UI/UX framework provide specific design tokens for dashboards and marketing sites?▼

Yes, this UI/UX framework provides specific design tokens, typography scales, and visual hierarchy guidance tailored for building dashboards, apps, and marketing sites. It enables rapid design decisions and cohesive visual language across product teams.

Why does design drift happen and how can I prevent it during rapid prototyping?▼

Design drift happens when product teams lack a standardized visual language and reusable UI design patterns. You can prevent it by applying a decision framework that specifies color systems, spacing tokens, and accessibility guidelines during design reviews and rapid prototyping.

Related Skills

Explore More Design & Creative Skills→
NammDevNammDev
2

ui-styling

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

Community
Intermediate
omanjayaomanjaya

frontend-design

Provide typography, color, spacing, and motion guidelines for web UI design.

Community
Intermediate
Bbeierle12Bbeierle12
8

form-accessibility

Implement WCAG 2.2 AA form accessibility patterns in React/TypeScript projects.

Community
Basic
ArogyaReddyArogyaReddy

visual-design-foundations

Define typography, color, spacing, and iconography design tokens for web and mobile UI.

Community
Advanced