frontend-ui-ux-design

What this skill does

# Frontend UI/UX Design

## Overview

This skill enables creation of production-ready frontend UI/UX designs from research through implementation. Follow a structured design process that balances user needs, business goals, technical constraints, and accessibility requirements.

## Design Workflow

## 1. Understand Requirements

**Gather Context:**

- Project goals and success metrics
- Target audience and user personas
- Technical constraints (frameworks, browsers, devices)
- Brand guidelines and design language
- Accessibility requirements (WCAG level)

**Clarify Scope:**

- Type of deliverable (wireframes, mockups, design system, component library)
- Fidelity level (low, medium, high)
- Responsive breakpoints needed
- Browser and device support

### 2. Research & Strategy

**User Research:**

- Analyze user needs, goals, and pain points
- Review existing analytics or user feedback
- Identify key user journeys and scenarios
- Define information architecture

**For complete research process**: See [uiux-design-process.md](references/uiux-design-process.md) for detailed research, personas, journey mapping, and information architecture guidelines.

### 3. Design & Prototype

**Create Wireframes:**

- Start with low-fidelity layouts
- Focus on content hierarchy and structure
- Define user flows for key tasks
- Iterate based on feedback

**Apply Visual Design:**

- Define color palette (primary, secondary, semantic colors)
- Establish typography scale and spacing system
- Design components with variants and states
- Ensure visual hierarchy and consistency

**For design principles**: See [design-principles.md](references/design-principles.md) for visual hierarchy, consistency, simplicity, feedback, and error prevention guidelines.

**For design systems**: See [design-systems.md](references/design-systems.md) when building comprehensive design systems with design tokens, governance, and documentation.

### 4. Ensure Accessibility

**WCAG Compliance:**

- Minimum contrast ratios (4.5:1 for text, 3:1 for large text/UI)
- Keyboard navigation support
- Screen reader compatibility (semantic HTML, ARIA labels)
- Focus indicators and skip links
- Alternative text for images

**For complete accessibility guidance**: See [accessibility-guide.md](references/accessibility-guide.md) for WCAG 2.1/2.2 standards, ARIA patterns, keyboard navigation, testing tools, and compliance checklists.

### 5. Design Responsive Layouts

**Mobile-First Approach:**

- Start with mobile design (320px minimum)
- Progressively enhance for tablets (768px+)
- Optimize for desktop (1024px+, 1440px+)
- Use fluid grids and flexible images
- Apply appropriate layout patterns

**For responsive patterns**: See [responsive-design.md](references/responsive-design.md) for breakpoints, layout patterns (fluid grid, column drop, off-canvas), responsive navigation, typography, images, tables, forms, and container queries.

### 6. Build Component Libraries

**Component Design:**

- Design atomic components (buttons, inputs, icons)
- Create molecule components (form fields, cards, menus)
- Build organism components (headers, forms, sections)
- Define component variants, states, and props
- Document component usage patterns

**For component details**: See [component-library.md](references/component-library.md) and [component-patterns.md](references/component-patterns.md) for comprehensive component catalogs with specifications, variants, states, and usage guidelines.

### 7. Optimize Performance

**Performance Considerations:**

- Optimize images (WebP/AVIF, lazy loading, responsive images)
- Minimize CSS/JS bundle sizes
- Implement critical CSS for above-the-fold content
- Use efficient animations (transform, opacity)
- Monitor Core Web Vitals (LCP, FID, CLS)

**For optimization details**: See [performance-optimization.md](references/performance-optimization.md) for image optimization, code splitting, caching strategies, and performance budgets.

### 8. Document & Handoff

**Design Deliverables:**

- Design specifications (colors, typography, spacing)
- Component documentation with variants
- Responsive breakpoint designs
- Accessibility report and compliance checklist
- Implementation guidelines and design tokens

**For output format**: See [output-format.md](references/output-format.md) for structured deliverable formats including design briefs, wireframes, visual designs, component libraries, and developer handoff materials.

## Quick Reference

### When to Load References

- **[uiux-design-process.md](references/uiux-design-process.md)** - Full design process from research through prototyping and user testing
- **[design-principles.md](references/design-principles.md)** - Core design principles (hierarchy, consistency, simplicity, feedback)
- **[design-systems.md](references/design-systems.md)** - Building comprehensive design systems with tokens and governance
- **[accessibility-guide.md](references/accessibility-guide.md)** - WCAG compliance, ARIA patterns, keyboard navigation, testing
- **[responsive-design.md](references/responsive-design.md)** - Breakpoints, layout patterns, responsive components
- **[component-library.md](references/component-library.md)** - Atomic/molecular component catalog with specifications
- **[component-patterns.md](references/component-patterns.md)** - Component patterns (forms, navigation, data display, feedback)
- **[performance-optimization.md](references/performance-optimization.md)** - Image optimization, code splitting, Core Web Vitals
- **[design-tools-and-resources.md](references/design-tools-and-resources.md)** - Design tools, frameworks, icon libraries, resources
- **[output-format.md](references/output-format.md)** - Structured deliverable formats for handoff
- **[examples.md](references/examples.md)** - Real-world design examples and patterns
- **[design-checklist.md](references/design-checklist.md)** - Quality checklist before finalizing designs

## Key Principles

**1. User-Centered Design**

- Always start with user needs and goals
- Validate assumptions through research and testing
- Prioritize usability over aesthetics

**2. Accessibility First**

- Design for all users, including those with disabilities
- Follow WCAG 2.1 AA standards minimum
- Test with keyboard navigation and screen readers

**3. Mobile-First Responsive**

- Start with smallest screen sizes
- Progressively enhance for larger screens
- Ensure touch-friendly interactions (44x44px minimum)

**4. Design System Thinking**

- Build reusable, consistent components
- Document patterns and usage guidelines
- Maintain design token systems

**5. Performance Matters**

- Optimize images and assets
- Keep bundle sizes small
- Monitor and improve Core Web Vitals

**6. Iterative Process**

- Start with low-fidelity, iterate to high-fidelity
- Gather feedback early and often
- Refine based on user testing and metrics