skills.rest
AIBiz-Automatyzacje
AIBiz-AutomatyzacjeCOMMUNITY
Explore all skills by this author →
GitHub

ux-ui-guidelines

Provide UX/UI design guidelines covering accessibility, responsive design, and UI patterns.

70|28|Updated Jan 13, 2026
Search Tags:#ui#accessibility#responsive design#design system#animations#ux#ui patterns
One-click install
npx skills add https://github.com/AIBiz-Automatyzacje/claude-code-starter --skill ux-ui-guidelines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-ui-guidelines
Source: https://github.com/AIBiz-Automatyzacje/claude-code-starter/tree/main/.claude/skills/ux-ui-guidelines
Command: npx skills add https://github.com/AIBiz-Automatyzacje/claude-code-starter --skill ux-ui-guidelines

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides comprehensive UX/UI guidelines to help you design interfaces that are intuitive, accessible, and visually appealing.

Core Features & Use Cases

  • Design System: Access a comprehensive design system with color palettes, typography, spacing, and more.
  • Accessibility: Get guidelines for WCAG 2.2 compliance, including contrast ratios, touch targets, and ARIA labels.
  • Responsive Design: Learn best practices for mobile-first design and container queries.
  • Animations: Understand when and how to use animations effectively for better user experience.
  • UI Patterns: Get examples and patterns for common UI components like navigation, tables, and search.

Quick Start

Run the skill with the command: ux-ui-guidelines help

Frequently Asked Questions about ux-ui-guidelines

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

FAQPage Schema
What are the best practices for WCAG 2.2 accessibility compliance in UI design?▼

WCAG 2.2 accessibility compliance in UI design requires meeting specific contrast ratios, sizing touch targets correctly, and applying ARIA labels to interactive elements for screen reader compatibility.

How do I build a responsive design system with proper spacing and typography?▼

Building a responsive design system involves defining color palettes, typography scales, and spacing rules using mobile-first design principles and container queries for adaptive layouts.

When should I use animations to improve user experience?▼

Use animations in UX design to provide visual feedback, guide user attention, and indicate state changes, ensuring they enhance rather than distract from the core user interface interactions.

Do I need to know web development to apply these UX patterns?▼

Yes, applying UX patterns and accessibility guidelines effectively requires a solid understanding of design principles, accessibility standards, and web development practices to ensure proper implementation.

How do I implement common UI patterns for navigation and search components?▼

Implementing UI patterns for navigation, tables, and search components involves following established design guidelines to ensure interfaces remain intuitive, accessible, and visually appealing.

Related Skills

Explore More Design & Creative Skills→
JaiminVadadoriyaJaiminVadadoriya
1

ui-ux-design

Provide UI/UX design guidelines and component patterns for web interfaces.

Community
Advanced
johnnyelwailerjohnnyelwailer

figma-to-code

Convert Figma designs into React components with token-based styling.

Community
Intermediate
duanbiao2000duanbiao2000
3

accessibility-compliance

Implement WCAG 2.2 compliant accessibility patterns for UI components.

Community
Advanced
kennedym-dskennedym-ds
14

accessibility-wcag

Evaluate and implement WCAG 2.1 AA accessibility patterns for frontend web development.

Community
Advanced