skills.rest
williamzujkowski
williamzujkowskiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-ux-design

Generate accessible UI/UX designs with WCAG AA, OKLCH, and Material Design compliance.

18|1|Updated Jan 3, 2026
Search Tags:#ui#accessibility#design system#color palette#prototyping#aesthetic#ux
One-click install
npx skills add https://github.com/williamzujkowski/nexus-agents --skill ui-ux-design-williamzujkowski
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-design
Source: https://github.com/williamzujkowski/nexus-agents/tree/main/skills/ui-ux-design
Command: npx skills add https://github.com/williamzujkowski/nexus-agents --skill ui-ux-design-williamzujkowski

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps designers and developers generate cohesive UI/UX designs that balance creativity with accessibility standards, reducing iteration time.

Core Features & Use Cases

  • Design System Generation: Develops comprehensive style guides and component standards aligned with branding.
  • Accessibility Assurance: Checks color contrasts, touch target sizes, and ARIA compliance to meet WCAG AA.
  • Use Case: A team wants a vibrant, accessible landing page. They specify a color palette and mood, then quickly receive a design blueprint with code snippets ready for implementation.

Quick Start

Describe your desired color palette, typography, and mood, then ask the AI to generate an accessible UI/UX design matching those specifications.

Frequently Asked Questions about ui-ux-design

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

FAQPage Schema
How do I generate a UI design system that meets WCAG AA accessibility standards?▼

This Skill generates accessible UI/UX designs by checking color contrasts, touch target sizes, and ARIA compliance to meet WCAG AA standards. You simply provide a color palette, typography, and mood to receive a compliant design blueprint.

Can I use OKLCH color space for building an accessible color palette?▼

Yes, you can use the OKLCH color space for building accessible color palettes. The Skill enforces OKLCH alongside WCAG AA standards to ensure optimal contrast and visually appealing aesthetic patterns in the generated UI components.

What is the best way to check ARIA compliance and touch target sizes for my web application?▼

The best way to check ARIA compliance and touch target sizes is to use a design enforcement mode that validates these parameters against WCAG AA standards. This ensures your interfaces maintain proper accessibility without manual auditing.

How do I create a vibrant and accessible landing page with code snippets ready for implementation?▼

To create a vibrant, accessible landing page, specify your desired color palette and mood to generate a design blueprint. The output includes detailed style recommendations and code snippets ready for immediate implementation.

Does Material Design work with custom branding workflows and typography?▼

Yes, Material Design works with custom branding workflows. The Skill aligns Material Design principles with your specific typography and color palette to develop comprehensive style guides and component standards tailored to your brand.

Related Skills

Explore More Design & Creative Skills→
sanky369sanky369
29

creative-strategist

Define brand visual direction and generate mood boards and style guides.

Community
Advanced
riecktrieckt

frontend-design

Generate frontend apps and UI components with HTML/CSS/JS or React, Vue.

Community
Intermediate
DauQuangThanhDauQuangThanh
14

frontend-ui/ux-design

Generate UI/UX design plans with wireframes, design systems, and developer handoff artifacts.

Community
Advanced
Dzakiamriz22Dzakiamriz22
1

color-system

Define semantic color tokens in OKLCH with WCAG 2.1 AA contrast.

Community
Advanced