skills.rest
jmigrala
jmigralaCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-designer

Plan UI/UX design work covering design systems, accessibility, and user research.

Updated Oct 30, 2025
Search Tags:#accessibility#prototyping#handoff#ui-ux#wireframes#user-research#design-systems
One-click install
npx skills add https://github.com/jmigrala/priceyourfence --skill ui-ux-designer-jmigrala
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-designer
Source: https://github.com/jmigrala/priceyourfence/tree/main/.claude/skills/ui-ux-designer
Command: npx skills add https://github.com/jmigrala/priceyourfence --skill ui-ux-designer-jmigrala

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI/UX teams often struggle with inconsistent user experiences, inaccessible interfaces, and fragmented workflows. This skill provides a structured, design-systems-driven approach to create cohesive, accessible interfaces and efficient user research processes.

Core Features & Use Cases

  • Design Systems Mastery: Atomic design, token-based architecture, component libraries, governance, and cross-platform adaptation.
  • Accessibility & Inclusive Design: WCAG-based checks, color contrast optimization, keyboard navigation, and inclusive patterns.
  • User Research & Analysis: Planning, execution, usability testing, personas, journey mapping, and data-informed decisions.
  • Information Architecture & UX Strategy: Site mapping, content strategy, user flows, cognitive load reduction, and findability.
  • Collaboration & Handoff: Documentation, cross-functional collaboration, stakeholder alignment, and designer-developer handoff.
  • Cross-Platform Design & Prototyping: Responsive design, prototyping with advanced interactions, and multi-device consistency.

Quick Start

Provide a complete UI/UX design plan for a new product prioritizing accessibility, design systems, and user research.

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 accessibility-first design system for web and mobile?▼

An accessibility-first design system uses token-based architecture and atomic design principles to ensure cross-platform consistency. It incorporates WCAG checks, color contrast optimization, and keyboard navigation patterns to deliver cohesive, inclusive user interfaces across web and mobile.

What is the best way to plan user research and usability testing for a new product?▼

User research planning involves structuring usability testing, developing personas, and journey mapping to generate data-informed decisions. This approach reduces cognitive load and improves content findability by aligning user flows and information architecture with actual user behavior.

How do I manage design-to-development handoff for token-based component libraries?▼

Design-to-development handoff is managed through structured documentation and cross-functional collaboration. Using token-based architecture within component libraries ensures developers receive clear governance guidelines, reducing fragmented workflows and bridging the gap between design and implementation.

Can I use this approach to audit existing UI for WCAG compliance and keyboard navigation?▼

Yes, this approach supports comprehensive design-system audits and accessibility remediation. It evaluates existing interfaces against WCAG standards, optimizing color contrast and validating keyboard navigation to resolve inaccessible patterns and fragmented user experiences.

How do I structure wireframes and prototypes with advanced interactions across multiple devices?▼

Wireframing and prototyping across multiple devices requires responsive design strategies and multi-device consistency. By mapping user flows and integrating advanced interactions, you ensure multi-device consistency while reducing cognitive load through structured information architecture.

Related Skills

Explore More Design & Creative Skills→
ydnikolaevydnikolaev
8

idea-interview

Extract project information through structured stakeholder interviews into a discovery brief.

Community
Advanced
RenyEnnosRenyEnnos
1

design-md

Generate DESIGN.md design-system documentation from Stitch project assets.

Community
Advanced
buiphucminhtambuiphucminhtam
47

ux-researcher

Conduct structured user research and translate findings into design recommendations.

Community
Advanced
MinhDuyDEVMinhDuyDEV

accessibility-audit

Audit web interfaces for WCAG compliance issues and remediation recommendations.

Community
Intermediate