ui-ux-pro-max

Provides UI/UX design and implementation guidance emphasizing WCAG 2.1 accessibility and design tokens.

Updated Jan 26, 2026

Search Tags:#accessibility #design system #ui/ux #frontend development #glassmorphism #dark mode

Ready to run

npx skills add https://github.com/shelbeely/ADHD-Closet --skill ui-ux-pro-max-shelbeely

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/shelbeely/ADHD-Closet/tree/main/.agents/skills/ui-ux-pro-max
Command: npx skills add https://github.com/shelbeely/ADHD-Closet --skill ui-ux-pro-max-shelbeely

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the challenges of creating effective, accessible, and aesthetically pleasing user interfaces and user experiences, ensuring designs are not only visually appealing but also functional and user-friendly.

Core Features & Use Cases

Design Principles: Enforces core design principles like minimalism, dark mode, and glassmorphism.
Accessibility Focus: Prioritizes WCAG 2.1 contrast requirements and multi-language typography.
Component Styling: Provides guidelines for consistent styling of buttons, cards, and text hierarchies.
Use Case: A developer needs to design a new SaaS dashboard. This Skill provides the exact CSS tokens, color palettes, and layout rules to ensure a consistent, accessible, and modern look and feel, preventing common "AI-generated" design pitfalls.

Quick Start

Apply the ui-ux-pro-max skill to refactor the existing button components to use the project's design tokens and ensure accessibility compliance.

Frequently Asked Questions about ui-ux-pro-max

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

FAQPage Schema

How do I ensure my UI components meet WCAG 2.1 accessibility contrast requirements?▼

To ensure UI components meet WCAG 2.1 accessibility requirements, apply design tokens and contrast rules that enforce strict visual hierarchy and color compliance for buttons, cards, and text. This prevents generic visual pitfalls while maintaining multi-language typography standards.

What are the best design principles for building a modern SaaS dashboard?▼

The best design principles for a modern SaaS dashboard include leveraging project-specific CSS tokens, applying minimalism, and utilizing modern styles like dark mode and glassmorphism to establish a consistent, accessible layout and prevent generic AI-generated design outputs.

How do I refactor existing frontend components to use a project design system?▼

To refactor existing frontend components into a project design system, map button, card, and text hierarchies to exact project-specific CSS tokens and color palettes. This enforces consistent styling and strict visual hierarchy across the application.

Can I use glassmorphism and dark mode together while maintaining accessibility?▼

Yes, you can implement glassmorphism and dark mode together while maintaining accessibility by enforcing WCAG 2.1 contrast requirements and utilizing exact design tokens. This ensures multi-language typography and component styling remain legible and compliant.

Why does my AI-generated UI design look generic and lack visual hierarchy?▼

AI-generated UI design looks generic when it lacks enforced visual hierarchy, typography rules, and consistent component styling. Applying specific design tokens and accessibility principles prevents these common pitfalls and ensures a structured, professional look.

What CSS tokens do I need to style accessible UI components?▼

Styling accessible UI components requires exact color palettes and CSS design tokens that define text hierarchies, button states, and card layouts. These tokens ensure strict adherence to WCAG 2.1 contrast requirements and project-specific visual guidelines.