skills.rest
Barryrn
BarryrnCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux

Provide structured UI/UX guidance for usability and accessibility across digital interfaces.

Updated Jan 26, 2026
Search Tags:#accessibility#WCAG#responsive design#usability#ui-ux#visual hierarchy#design-patterns
One-click install
npx skills add https://github.com/Barryrn/saas-setup --skill ui-ux-barryrn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux
Source: https://github.com/Barryrn/saas-setup/tree/main/.claude/skills/ui-ux
Command: npx skills add https://github.com/Barryrn/saas-setup --skill ui-ux-barryrn

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides practical UI/UX guidelines to improve usability and accessibility across digital products, helping teams align on visual hierarchy, interface consistency, and inclusive design.

Core Features & Use Cases

  • Establish clear visual hierarchy and consistent patterns across web and mobile interfaces.
  • Ensure accessibility compliance (WCAG) and inclusive design reviews throughout the product lifecycle.
  • Apply to interface tasks such as navigation, forms, error states, responsive layouts, and state management.

Quick Start

Use this skill to review a new screen by assessing labels, focus states, contrast, error feedback, and responsive behavior.

Frequently Asked Questions about ui-ux

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

FAQPage Schema
How do I ensure my website navigation and forms meet WCAG accessibility standards?▼

To ensure website navigation and forms meet WCAG accessibility standards, evaluate interface elements for proper labels, visible focus states, sufficient color contrast, and clear error feedback. This skill provides structured checks to verify compliance across digital products.

What is the best way to establish visual hierarchy and consistent design patterns across web and mobile interfaces?▼

Establishing visual hierarchy requires defining clear expectations for deliverables and applying consistent interaction patterns across screens. This skill outlines practical steps to align teams on interface consistency and inclusive design for web and mobile projects.

How do I review a new app screen for usability and responsive behavior?▼

To review a new app screen for usability and responsive behavior, assess labels, focus states, contrast, error feedback, and layout adjustments across different device sizes. This skill defines clear checks for these specific interaction patterns.

Can I use this UI/UX guidance for both website and mobile app design projects?▼

Yes, you can apply this UI/UX guidance to both website and mobile app design projects. It covers responsive behavior, state management, and accessibility compliance, ensuring usability across various digital platforms.

When do I need to perform an inclusive design review during the product lifecycle?▼

You need to perform an inclusive design review throughout the product lifecycle to maintain accessibility compliance. Use this skill to conduct regular checks on visual hierarchy, error states, and responsive layouts whenever interface changes occur.

Related Skills

Explore More Design & Creative Skills→
launchapp-devlaunchapp-dev
38

visual-hierarchy

Apply size, weight, color, spacing, and positioning rules to prioritize content in web and mobile layouts.

Official
Intermediate
loveconnorloveconnor

typography

Define and validate typographic systems with WCAG 2.2 contrast compliance.

Community
Advanced
AbsolutelySkilledAbsolutelySkilled
207

figma-to-code

Convert Figma design frames into HTML, CSS, and React components.

Official
Advanced
JhabbigJhabbig

wcag-audit-patterns

Audit web interfaces for WCAG 2.2 accessibility violations.

Community
Advanced