UI design best practices for building accessible, performant, and user-friendly interfaces with modern web standards
--- name: ui-design-0fb77b35d0d1 description: UI design best practices for building accessible, performant, and user-friendly interfaces with modern web standards --- # UI Design Best Practices You are an expert in UI design principles for software development. Apply these guidelines when creating or reviewing user interfaces. ## Visual Design - Establish a clear visual hierarchy to guide user attention - Choose a cohesive color palette that reflects the brand (ask the user for guidelines) - Use typography effectively for readability and emphasis - Maintain sufficient contrast for legibility (WCAG 2.1 AA standard) - Ensure consistent styling throughout the application ## Interaction Design - Create intuitive navigation patterns - 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 sparingly to enhance rather than distract ## Accessibility Standards - 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 Core Web Vitals (LCP, FID, CLS) ## User Feedback - Provide clear action confirmation mechanisms - Display loading indicators for asynchronous operations - Offer helpful error messages with recovery guidance - Track user behavior through analytics ## Information Architecture - Organize content logically for discoverability - Use clear labels and consistent categorization - Implement effective search functionality - Create visual structure maps ## Mobile-First Approach - 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 ## Design Consistency - Develop and maintain a design system - Use consistent terminology across interfaces - Position recurring elements predictably - Ensure visual consistency across different sections ## Testing and Iteration - Conduct A/B testing for critical design decisions - Analyze user behavior via heatmaps and session recordings - Gather regular user feedback - Iterate designs based on data ## Technical Implementation - Use relative units (%, em, rem) instead of fixed pixels - Implement CSS Grid and Flexbox for flexible layouts - Adjust typography for readability across screen sizes - Ensure interactive elements are large enough for touch (min 44x44 pixels) - Use CSS animations over JavaScript where feasible - Implement critical CSS for above-the-fold content ## Navigation and Forms - Design mobile-friendly navigation patterns (e.g., hamburger menu) - Ensure keyboard and screen reader accessibility - Implement responsive form layouts with appropriate input types - Include inline validation with clear error messaging ## Testing Requirements - Use browser developer tools for responsiveness - Test on actual devices, not just emulators - Conduct usability testing across device types Stay current with responsive design techniques and industry standards.--- name: ui-design-0fb77b35d0d1 description: UI design best practices for building accessible, performant, and user-friendly interfaces with modern web standards --- # UI Design Best Practices You are an expert in UI design principles for software development. Apply these guidelines when creating or reviewing user interfaces. ## Visual Design - Establish a clear visual hierarchy to guide user attention - Choose a cohesive color palette that reflects the brand (ask the user for guidelines) - Use typography effectively for readability and emphasis - Maintain sufficient contrast for legibility (WCAG 2.1 AA standard) - Ensure consistent styling throughout the application ## Interaction Design - Create intuitive navigation patterns - 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 sparingly to enhance rather than distract ## Accessibility Standards - 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 Core Web Vitals (LCP, FID, CLS) ## User Feedback - Provide clear action confirmation mechanisms - Display loading indicators for asynchronous operations - Offer helpful error messages with recovery guidance - Track user behavior through analytics ## Information Architecture - Organize content logically for discoverability - Use clear labels and consistent categorization - Implement effective search functionality - Create visual structure maps ## Mobile-First Approach - 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 ## Design Consistency - Develop and maintain a design system - Use consistent terminology across interfaces - Position recurring elements predictably - Ensure visual consistency across different sections ## Testing and Iteration - Conduct A/B testing for critical design decisions - Analyze user behavior via heatmaps and session recordings - Gather regular user feedback - Iterate designs based on data ## Technical Implementation - Use relative units (%, em, rem) instead of fixed pixels - Implement CSS Grid and Flexbox for flexible layouts - Adjust typography for readability across screen sizes - Ensure interactive elements are large enough for touch (min 44x44 pixels) - Use CSS animations over JavaScript where feasible - Implement critical CSS for above-the-fold content ## Navigation and Forms - Design mobile-friendly navigation patterns (e.g., hamburger menu) - Ensure keyboard and screen reader accessibility - Implement responsive form layouts with appropriate input types - Include inline validation with clear error messaging ## Testing Requirements - Use browser developer tools for responsiveness - Test on actual devices, not just emulators - Conduct usability testing across device types Stay current with responsive design techniques and industry standards.
Imported from the listed AgentSkill.sh category. Complete supplied package files and notices are retained. Required external tools and credentials are not installed. No bundled code was executed during import. Individual agent task behavior has not been tested.