ui-ux-designer

Produce UI and UX guidance for interface design, wireframing, and accessibility decisions.

41|5|Updated Sep 30, 2025
One-click install
npx skills add https://github.com/efekrbas/discord-hypesquad-manager --skill ui-ux-designer-efekrbas
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-designer
Source: https://github.com/efekrbas/discord-hypesquad-manager/tree/main/.agents/skills/ui-ux-designer
Command: npx skills add https://github.com/efekrbas/discord-hypesquad-manager --skill ui-ux-designer-efekrbas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps turn vague product ideas into clear, usable, and accessible interface designs by giving structured guidance on UX strategy, visual hierarchy, and interaction patterns.

Core Features & Use Cases

  • Design systems guidance: Plan reusable components, tokens, and scalable patterns for consistent experiences across web, mobile, and desktop.
  • Accessibility-first UX: Evaluate color contrast, keyboard navigation, focus states, and inclusive content to reduce barriers for diverse users.
  • Research-informed design: Support user journeys, usability testing, personas, and information architecture so design decisions are grounded in evidence.
  • Use case: A team redesigning a dashboard can use this skill to define the layout, refine navigation, improve empty and loading states, and align the handoff with developers.

Quick Start

Ask the ui-ux-designer skill to review your product flow and propose an accessible wireframe, component strategy, and implementation-ready design recommendations.

Frequently Asked Questions about ui-ux-designer

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

FAQPage Schema
How do I create an accessible wireframe for a product flow?

To create an accessible wireframe, evaluate color contrast, keyboard navigation, focus states, and inclusive content to reduce barriers for diverse users. You can then define the layout, refine navigation, and improve empty and loading states for cross-platform experiences.

What is the best way to plan a scalable design system for cross-platform experiences?

The best way to plan a scalable design system is to define reusable components, design tokens, and scalable patterns for consistent experiences across web, mobile, and desktop. This ensures structured recommendations for interaction states and implementation guidance.

How do I improve UX strategy using user research and information architecture?

To improve UX strategy, support user journeys, usability testing, personas, and information architecture so design decisions are grounded in evidence. This approach helps turn vague product ideas into clear, usable, and accessible interface designs.

Does this approach support design handoff scenarios for developers?

Yes, this approach supports design handoff scenarios by aligning implementation guidance with developers. It provides structured recommendations that account for accessibility standards, interaction states, and design tokens for seamless implementation.

Can I use this to evaluate color contrast and keyboard navigation for accessibility?

Yes, you can use this to evaluate color contrast, keyboard navigation, focus states, and inclusive content. This accessibility-first UX evaluation reduces barriers for diverse users across responsive layouts and cross-platform experiences.

When do I need to define interaction states and design tokens?

You need to define interaction states and design tokens when planning reusable components and scalable patterns for consistent experiences. This is essential for turning vague product ideas into clear, usable, and accessible interface designs across platforms.