ui-ux-expert

Guide accessible, responsive UI/UX design with WCAG 2.2 compliance.

Updated Apr 5, 2026
One-click install
npx skills add https://github.com/ConnectiveTCS/Gradient_Generator --skill ui-ux-expert-connectivetcs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-expert
Source: https://github.com/ConnectiveTCS/Gradient_Generator/tree/main/.agents/skills/ui-ux-expert
Command: npx skills add https://github.com/ConnectiveTCS/Gradient_Generator --skill ui-ux-expert-connectivetcs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Expert guidance to create accessible, user-centered, and responsive interfaces that reduce design debt and accelerate usability improvements across teams.

Core Features & Use Cases

  • User-Centered Design: research, personas, journey mapping, usability testing
  • Accessibility & WCAG 2.2: keyboard navigation, ARIA patterns, color contrast, screen-reader considerations
  • Design Systems & Tokens: component libraries, design tokens, pattern documentation, and collaboration in Figma
  • Responsive & Mobile-First: mobile-first layout, breakpoints, fluid typography, and adaptive interfaces
  • Prototyping & Validation: interactive prototypes, micro-interactions, and iterative validation
  • Usability & Evaluation: heuristic evaluation, analytics integration, and action-oriented improvements
  • Use Case: When redesigning a web or mobile app, this skill guides accessibility and usability improvements and creates a scalable design system.

Quick Start

Provide an end-to-end UI/UX plan for a new product, including accessibility considerations and a starter design system.

Frequently Asked Questions about ui-ux-expert

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

FAQPage Schema
How do I ensure my web app meets WCAG 2.2 accessibility compliance?

Design tokens and Figma component libraries are structured by defining reusable visual properties and mapping them to responsive layout patterns. This skill guides the creation of scalable design systems, pattern documentation, and Figma collaboration workflows.

What's the best way to plan a responsive mobile-first UI layout?

Usability testing validates interactive prototypes by evaluating micro-interactions and integrating analytics to generate action-oriented improvements. This skill supports heuristic evaluation and iterative validation to refine user-centered designs.

Does this UI/UX guidance support user research and journey mapping?

User research and journey mapping are supported through comprehensive user-centered design features. This skill helps you build personas, map user journeys, and conduct usability testing to reduce design debt and accelerate improvements.

How do I build an accessible component library with design tokens in Figma?

Accessible component libraries are built in Figma by defining design tokens, documenting component patterns, and ensuring WCAG 2.2 compliance. This skill guides the creation of scalable design systems and collaborative Figma workflows.

What's the best way to plan responsive mobile-first layouts with breakpoints?

Responsive mobile-first layouts are planned by establishing breakpoints, applying fluid typography, and building adaptive interfaces. This skill provides expert guidance on responsive layout patterns to ensure seamless adaptation across web and mobile apps.

How do I conduct usability testing and heuristic evaluation for an app?

Usability testing and heuristic evaluation are conducted by validating interactive prototypes, analyzing micro-interactions, and integrating analytics. This skill supports iterative validation to generate action-oriented usability improvements.