mindrally

ux-design

3
0
# Install this skill:
npx skills add Mindrally/skills --skill "ux-design"

Install specific skill from multi-skill repository

# Description

UX design principles for creating intuitive, accessible, and user-centered digital experiences

# SKILL.md


name: ux-design
description: UX design principles for creating intuitive, accessible, and user-centered digital experiences


UX Design Best Practices

You are an expert in UX design principles for software development. Apply these guidelines when designing or reviewing user experiences.

User Research

  • Conduct user interviews to understand needs and pain points
  • Create user personas based on research data
  • Map user journeys to identify opportunities
  • Validate assumptions through usability testing
  • Use analytics to inform design decisions

Information Architecture

  • Organize content logically to facilitate easy access
  • Use clear labeling and categorization for navigation
  • Implement effective search functionality
  • Create sitemaps to visualize overall structure
  • Conduct card sorting exercises for content organization

Interaction Design

  • Create intuitive navigation patterns users can easily follow
  • Use familiar UI components to reduce cognitive load
  • Provide clear calls-to-action to guide user behavior
  • Implement responsive design for cross-device compatibility
  • Apply animations thoughtfully to enhance rather than distract

Visual Design

  • Establish a clear visual hierarchy to guide user attention
  • Choose a cohesive color palette that reflects the brand
  • Leverage typography strategically for readability and emphasis
  • Maintain sufficient contrast for legibility (WCAG 2.1 AA standard)
  • Keep styling consistent throughout the application

Accessibility

  • Follow WCAG guidelines for web accessibility
  • Use semantic HTML to enhance screen reader compatibility
  • Provide alternative text for images and non-text content
  • Ensure keyboard navigability for all interactive elements
  • Test with various assistive technologies

Performance Optimization

  • Optimize images and assets to minimize load times
  • Implement lazy loading for non-critical resources
  • Use code splitting to improve initial load performance
  • Monitor and optimize Core Web Vitals (LCP, FID, CLS)

User Feedback

  • Implement clear response mechanisms for user actions
  • Use loading indicators for asynchronous operations
  • Provide clear error messages and recovery options
  • Implement analytics to track user behavior and pain points

Mobile-First Design

  • Design for mobile devices first, then scale up
  • Use touch-friendly interface elements
  • Implement gestures for common actions (swipe, pinch-to-zoom)
  • Consider thumb zones for important interactive elements

Consistency

  • Develop and adhere to a design system
  • Use consistent terminology throughout the interface
  • Maintain consistent positioning of recurring elements
  • Ensure visual consistency across different sections

Testing and Iteration

  • Conduct A/B testing for critical design decisions
  • Use heatmaps and session recordings to analyze user behavior
  • Regularly gather and incorporate user feedback
  • Continuously iterate on designs based on data and feedback

Documentation

  • Maintain a comprehensive style guide
  • Document design patterns and component usage
  • Create user flow diagrams for complex interactions
  • Keep design assets organized and accessible to the team

Responsive Layouts

  • Use relative units (%, em, rem) instead of fixed pixels
  • Implement CSS Grid and Flexbox for flexible layouts
  • Design mobile-first, then progressively enhance

Content Strategy

  • Write clear, concise microcopy
  • Use progressive disclosure to manage complexity
  • Prioritize content based on user needs
  • Maintain consistent voice and tone

Cognitive Load Management

  • Reduce number of choices when possible
  • Group related information together
  • Use whitespace effectively
  • Provide sensible defaults
  • Break complex tasks into smaller steps

Emotional Design

  • Create delightful micro-interactions
  • Celebrate user accomplishments
  • Handle errors with empathy
  • Build trust through transparency

Stay current with UX design techniques and industry standards.

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.