ui-ux-expert

Name: ui-ux-expert
Availability: InStock
Author: Abbas

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

1|Updated Jan 13, 2026

Search Tags:#accessibility #wcag #ui-design #responsive-design #frontend-patterns #design-systems #ux-guidance

Ready to run

npx skills add https://github.com/abbas133/my-claude --skill ui-ux-expert

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-ux-expert
Source: https://github.com/abbas133/my-claude/tree/main/eisaal-app/.claude/skills/ui-ux-expert
Command: npx skills add https://github.com/abbas133/my-claude --skill ui-ux-expert

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Expert UI/UX guidance accelerates interface design, improves accessibility, and aligns frontend implementation with design systems.

Core Features & Use Cases

Design System Tokens: defines cohesive CSS tokens for spacing, typography, and breakpoints to ensure consistency.
Accessibility & WCAG: guidelines for contrast, focus indicators, alt text, and motion preferences.
Responsive Patterns: components and layouts that adapt across devices with clear breakpoints.
Animation & Heuristics: motion guidelines and core UX heuristics to improve usability.
Use Case: when building a new dashboard, apply tokens and components to deliver a scalable, accessible interface from day one.

Quick Start

Provide an expert UI/UX design plan for a new interface, including tokens, components, and accessibility considerations.

Frequently Asked Questions about ui-ux-expert

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

FAQPage Schema

What is the best way to establish UI design system tokens for spacing and typography?▼

To establish UI design system tokens, define cohesive CSS variables for spacing, typography, and breakpoints to ensure visual consistency across web apps. This approach provides a scalable foundation for frontend implementation.

How do I make frontend components WCAG compliant for accessibility?▼

Make frontend components WCAG compliant by applying guidelines for color contrast, focus indicators, alt text, and motion preferences. This ensures interfaces are accessible to all users.

How do I design responsive layouts with clear breakpoints for web apps?▼

Design responsive layouts by applying responsive patterns and components that adapt across devices using clear CSS breakpoints. This ensures interfaces scale correctly from mobile to desktop.

Does this UI/UX guidance apply to building a new dashboard from scratch?▼

Yes, this UI/UX guidance applies to building new dashboards by providing tokens, components, and accessibility considerations. It helps deliver a scalable, accessible interface from day one.

What UX heuristics and motion guidelines should I apply for animation?▼

Apply core UX heuristics and motion guidelines for animation to improve usability. These guidelines address motion preferences and interaction patterns to enhance the overall user experience.