ui-ux-design

Provide expert UI/UX design guidance for frontend frameworks and design systems.

1|Updated Jan 4, 2026
One-click install
npx skills add https://github.com/karchtho/my-claude-marketplace --skill ui-ux-design-karchtho
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-design
Source: https://github.com/karchtho/my-claude-marketplace/tree/main/bundles/react-frontend-bundle/skills/ui-ux-design
Command: npx skills add https://github.com/karchtho/my-claude-marketplace --skill ui-ux-design-karchtho

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI/UX design challenges slow product outcomes; this skill provides expert guidance on user interface and user experience design across frontend frameworks.

Core Features & Use Cases

  • Design systems and tokens
  • Accessibility and WCAG compliance
  • Responsive layouts, typography, and interaction patterns
  • Real-world guidance for layouts, color, spacing, and usability across devices

Quick Start

Assess a UI component for accessibility, consistency, and responsiveness and apply design-system tokens to improve its usability.

Frequently Asked Questions about ui-ux-design

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

FAQPage Schema
How do I check if my UI components meet accessibility and WCAG compliance standards?

To assess UI components for accessibility and WCAG compliance, evaluate them against design principles and system tokens. This process outputs specific accessibility checks and component patterns to ensure your interfaces remain usable and meet compliance standards across devices.

What is the best way to create consistent design tokens for a responsive layout?

The best way to create consistent design tokens for responsive layouts is to extract standardized values for typography, color, and spacing into a centralized system. Applying these tokens across your component library ensures visual consistency and maintains responsive behavior across all devices.

How do I improve frontend UX quality across different frameworks?

Improve frontend UX quality across frameworks by applying expert design principles and standardized systems to your layouts. This approach outputs practical workflows, component patterns, and design tokens that ensure consistent, accessible, and usable interfaces throughout your product.

Can I use design systems to fix inconsistent typography and color theory in my application?

Yes, design systems fix inconsistent typography and color theory by centralizing these values into reusable design tokens. Implementing these tokens across your component library ensures standardized spacing, accessible color contrasts, and consistent typographic scales throughout your application.

When do I need to apply design-system tokens during a UI component review?

Apply design-system tokens during a UI component review when you need to align the element with global standards for accessibility and responsiveness. This step translates theoretical design principles into practical workflows, ensuring the component fits seamlessly into the broader system.