frontend-ui-ux-design

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 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 for visual hierarchy, consistency, simplicity, feedback, and error prevention guidelines.

For design systems: See 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 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 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 and 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 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 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 - Full design process from research through prototyping and user testing

• design-principles.md - Core design principles (hierarchy, consistency, simplicity, feedback)

• design-systems.md - Building comprehensive design systems with tokens and governance

• accessibility-guide.md - WCAG compliance, ARIA patterns, keyboard navigation, testing

• responsive-design.md - Breakpoints, layout patterns, responsive components

• component-library.md - Atomic/molecular component catalog with specifications

• component-patterns.md - Component patterns (forms, navigation, data display, feedback)

• performance-optimization.md - Image optimization, code splitting, Core Web Vitals

• design-tools-and-resources.md - Design tools, frameworks, icon libraries, resources

• output-format.md - Structured deliverable formats for handoff

• examples.md - Real-world design examples and patterns

• 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