skills.rest
Hamzaoui-Louai
Hamzaoui-LouaiCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-designer

Create interface designs, wireframes, and design systems with accessibility-first workflows.

1|Updated Aug 4, 2026
Search Tags:#accessibility#design system#figma#wireframing#wcag#ui design#ux research
One-click install
npx skills add https://github.com/Hamzaoui-Louai/LEAN-gym-dashboard-frontend --skill ui-ux-designer-hamzaoui-louai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-designer
Source: https://github.com/Hamzaoui-Louai/LEAN-gym-dashboard-frontend/tree/main/.opencode/skills/ui-ux-designer
Command: npx skills add https://github.com/Hamzaoui-Louai/LEAN-gym-dashboard-frontend --skill ui-ux-designer-hamzaoui-louai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing consistent, accessible interfaces across platforms requires expertise in design systems, user research, and WCAG standards that many teams lack in-house. ## Core Features & Use Cases - Design System Architecture: Build token-based component libraries with multi-brand support, theming, and design-to-development handoff workflows. - User Research & Validation: Plan usability tests, user interviews, A/B tests, and journey mapping to validate design decisions with data. - Accessibility & Inclusive Design: Apply WCAG 2.1/2.2 compliance, color contrast analysis, and keyboard navigation patterns from the concept stage. - Use Case: A product team redesigning a B2B dashboard can use this Skill to audit accessibility issues, define a design token architecture, and produce a conversion-optimized user flow with documented rationale. ## Quick Start Ask the assistant to design an accessible component library with design tokens and usage guidelines for your web application.

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 a design system with design tokens?▼

Design tokens define colors, typography, and spacing as reusable variables managed through tools like Figma Variables or Style Dictionary. Start with atomic design methodology, establish naming conventions, and document component usage guidelines for developers.

How to make a website WCAG 2.2 compliant?▼

WCAG 2.2 compliance requires sufficient color contrast ratios, keyboard navigation support, focus management, and screen reader-compatible semantic markup. Conduct an accessibility audit first, then remediate issues and integrate accessibility testing into the design workflow.

What user research methods work for B2B software redesign?▼

B2B redesigns benefit from user interviews, task analysis, usability testing, and journey mapping to understand complex workflows. Combine qualitative insights with analytics data and A/B testing to validate design decisions before full rollout.

Does this skill cover mobile app design guidelines?▼

Yes, it covers native mobile design following iOS Human Interface Guidelines and Material Design, plus responsive web, PWA, and desktop patterns. It addresses cross-platform consistency and platform-specific interaction conventions.

When should I not use a design system approach?▼

Avoid full design system investment for one-off prototypes, short-lived campaigns, or early-stage experiments where speed matters more than consistency. Design systems pay off when multiple products, brands, or teams share components.

Related Skills

Explore More Design & Creative Skills→
KojiroSasaKojiroSasa

ux-researcher

Synthesize UX insights from interviews, usability tests, surveys, and analytics.

Community
Advanced
PMDevSolutionsPMDevSolutions
7

indesign-conversion

Convert InDesign IDML and PDF files into typed React components and design tokens.

Official
Advanced
flitzrrrflitzrrr
4

usability

Evaluate user interfaces against Nielsen heuristics and ISO 9241 principles.

Community
Intermediate
shinnytechshinnytech

using-shadcn-ui

Create React UI components with shadcn/ui and Tailwind CSS.

Official
Intermediate