skills.rest
abbas133
abbas133COMMUNITY
Explore all skills by this author →
GitHub

ui-ux-expert

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
One-click install
npx skills add https://github.com/abbas133/my-claude --skill ui-ux-expert
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
stephanjstephanj
9

design-system-starter

Create design systems with design tokens, atomic components, and WCAG 2.1 AA compliance.

Community
Advanced
karchthokarchtho

ui-ux-design

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

Community
Intermediate
tillysosotillysoso

tailwind-css-patterns

Apply Tailwind CSS patterns for responsive layouts and design tokens.

Community
Intermediate
inbharataiinbharatai
22

accessibility-checker

Audit digital content for WCAG 2.2 compliance and accessibility issues.

Community
Intermediate