ux-ui-developer

Design accessible user interfaces, build design systems, and audit WCAG 2.1 AA compliance.

6|2|Updated Feb 16, 2026
One-click install
npx skills add https://github.com/CrashBytes/claude-role-skills --skill ux-ui-developer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ux-ui-developer
Source: https://github.com/CrashBytes/claude-role-skills/tree/main/skills/ux-ui-developer
Command: npx skills add https://github.com/CrashBytes/claude-role-skills --skill ux-ui-developer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you design, build, and audit user interfaces that are not only visually appealing but also highly accessible, responsive, and adhere to best practices in design systems and usability.

Core Features & Use Cases

  • UI Design & Prototyping: Generate wireframes, user flows, and design concepts.
  • Design Systems: Build and maintain component libraries with clear architecture and tokenization.
  • Accessibility Audits: Ensure WCAG 2.1 AA compliance and identify usability heuristics violations.
  • Responsive Implementation: Guide the creation of layouts that adapt seamlessly across devices.
  • Use Case: You need to design a new user dashboard. This Skill can help you map out user flows, define a design system for consistent components, ensure the design meets accessibility standards, and provide guidance on responsive implementation.

Quick Start

Use the ux-ui-developer skill to audit the accessibility of the provided design mockups against WCAG 2.1 AA standards.

Frequently Asked Questions about ux-ui-developer

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

FAQPage Schema
How do I audit my UI design for WCAG 2.1 AA accessibility compliance?

To audit UI accessibility for WCAG 2.1 AA compliance, evaluate your design mockups against usability heuristics to identify violations. This process detects accessibility issues in user interfaces, ensuring responsive layouts meet required standards for inclusive, accessible interaction.

What is the best way to build a component library with a design system?

Building a component library with a design system involves defining clear architecture and design tokenization. This approach creates consistent, reusable UI components, ensuring visual coherence and maintainability across your user interface while streamlining front-end implementation.

How do I map user flows and wireframes for a new user dashboard?

Mapping user flows and wireframes for a new user dashboard requires structuring navigation paths and prototyping interface concepts. This process translates abstract UX requirements into intuitive, responsive UI layouts, defining clear visual and functional user journeys.

Can I evaluate usability heuristics for existing front-end components?

Yes, you can evaluate usability heuristics for existing front-end components. Conducting a usability review assesses these user interfaces against established principles, identifying friction points and ensuring the components provide an intuitive, accessible user experience.

When do I need responsive design patterns for UI implementation?

You need responsive design patterns for UI implementation when creating layouts that must adapt seamlessly across multiple devices. Applying these patterns ensures your user interface maintains structural integrity and accessibility on varying screen sizes.

Does this approach work for both UI design prototyping and accessibility auditing?

Yes, this approach works for both UI design prototyping and accessibility auditing. It supports generating wireframes and user flows while simultaneously conducting WCAG audits, ensuring interfaces are both visually intuitive and compliant.