skills.rest
ratnesh-maurya
ratnesh-mauryaCOMMUNITY
Explore all skills by this author →
Website𝕏@_ratneshmauryaGitHub

ui-ux-designer

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

1|Updated Aug 17, 2025
Search Tags:#accessibility#design system#figma#wcag#ui design#wireframes#ux research
One-click install
npx skills add https://github.com/ratnesh-maurya/mdconverter --skill ui-ux-designer-ratnesh-maurya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-designer
Source: https://github.com/ratnesh-maurya/mdconverter/tree/main/.claude/skills/ui-ux-designer
Command: npx skills add https://github.com/ratnesh-maurya/mdconverter --skill ui-ux-designer-ratnesh-maurya

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. This Skill provides structured UI/UX guidance covering design tokens, component libraries, user research, and accessibility compliance. ## Core Features & Use Cases - Design System Architecture: Build token-based design systems with atomic design methodology, multi-brand support, 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 AA/AAA 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 create a design token architecture, audit accessibility issues, and produce developer-ready component documentation. ## Quick Start Ask the assistant to design an accessible component library with design tokens for a cross-platform web and mobile product.

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?▼

Start with atomic design methodology by defining foundational tokens for color, typography, and spacing, then build components that consume those tokens. Tools like Figma Variables and Style Dictionary help manage and export tokens for development handoff.

How to make a website WCAG 2.2 AA compliant?▼

Ensure color contrast ratios meet 4.5:1 for body text, provide keyboard navigation with visible focus states, and use semantic markup for screen readers. Run accessibility audits early in the design phase rather than retrofitting after development.

What user research methods work for B2B software redesign?▼

Combine contextual user interviews, task analysis, and usability testing with existing users. Journey mapping and card sorting help validate information architecture before committing to visual design changes.

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 conventions.

When should I not use a design system approach?▼

Avoid heavy design system investment for one-off landing pages, quick prototypes, or early-stage products still validating their concept. Token architecture and governance overhead only pays off with multiple products or long-term maintenance needs.

Related Skills

Explore More Design & Creative Skills→
fredericpoitevinfredericpoitevin

clarify-before-research

Ask clarifying questions to define research goals and scope before starting.

Community
Basic
partme-aipartme-ai
610

react-native

Provides comprehensive guidance for developing cross-platform mobile applications with React Native.

Official
Intermediate
elihuvillarauselihuvillaraus
2

ux-researcher

Analyze user behavior and conduct usability testing for design insights.

Community
Advanced
Odiabackend099Odiabackend099

expert-nextjs-designer

Automate frontend design and implementation for clinical marketing sites with Next.js, Tailwind, and Shadcn/UI.

Community
Advanced