ui-design · mindrally — Claude Code skill: UI rules for your agent

---
name: ui-design
description: UI design best practices for building accessible, performant, and user-friendly interfaces with modern web standards
metadata:
  maintainer: Mindrally
  source: https://github.com/Mindrally/skills
---

# 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.