ui-ux-designer

Translate product goals into accessible UX workflows and scalable design systems.

Updated Mar 5, 2026
One-click install
npx skills add https://github.com/Vortex4047/github-profile-summarizer --skill ui-ux-designer-vortex4047
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-designer
Source: https://github.com/Vortex4047/github-profile-summarizer/tree/main/.agents/skills/ui-ux-designer
Command: npx skills add https://github.com/Vortex4047/github-profile-summarizer --skill ui-ux-designer-vortex4047

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the challenge of creating user-centered UI/UX that is consistent, accessible, and maintainable across products by turning ambiguous design goals into actionable, testable system-level work.

Core Features & Use Cases

  • Design systems & token-based architecture: Create reusable component libraries and design token frameworks that scale across teams and platforms.
  • Accessibility-first interface design: Implement and verify WCAG 2.1/2.2 AA/AAA compliant patterns, contrast, semantics, and keyboard/focus behavior.
  • UX strategy & validation: Plan research, define user flows and information architecture, and validate results with usability testing and iterative improvement.
  • Design-to-development handoff: Prepare documentation and specifications that reduce implementation risk and improve fidelity.

Quick Start

Use the ui-ux-designer skill to produce an accessibility-first design system plan and component specification for your new dashboard, including the token strategy, key UI states, and verification checklist.

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 design system with reusable components?

Design tokens are variables that store visual design attributes, enabling systematic token and component documentation. Defining them creates a scalable architecture that ensures consistent UI implementation across different platforms and products.

How do I validate UX workflows for WCAG accessibility compliance?

UX validation involves planning user research, defining information architecture, and verifying results with usability testing. This iterative process checks WCAG 2.1/2.2 AA/AAA compliance for semantics, contrast, and keyboard focus behavior to improve interface usability.

What is the best way to document design tokens for development handoff?

The best way to document design tokens for handoff is to generate systematic token and component specifications. This actionable documentation reduces implementation risk and improves development fidelity by explicitly defining key UI states and verification checklists.

Can I use this approach to design a scalable component library for a new dashboard?

Yes, you can use this approach to produce an accessibility-first design system plan for a new dashboard. It generates a component specification including the token strategy, key UI states, and a verification checklist for systematic implementation.

How do I translate product goals into accessible user flows?

Translating product goals into accessible user flows requires mapping UX strategy and information architecture. This guides user-centered interface design by turning ambiguous goals into testable workflows with iterative usability improvements.

What is included in a WCAG-compliant interface design verification checklist?

A WCAG-compliant verification checklist includes testing contrast, semantics, and keyboard or focus behavior. It verifies that interface patterns satisfy WCAG 2.1/2.2 AA/AAA accessibility requirements during the iterative testing phase.