Use when adding new error messages to React, or seeing "unknown error code" warnings.
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.