Frontend Ui Ux Design

What it does

This skill assists with creating production-ready frontend UI/UX designs throughout the entire process, from initial research to final implementation. It guides users through a structured design workflow that considers user needs, business goals, technical limitations, and accessibility requirements. The skill supports the creation of various deliverables including wireframes, mockups, design systems, and component libraries at different fidelity levels.

When to use it

• When designing new frontend UIs or overhauling existing ones.
• To ensure designs meet accessibility standards (WCAG).
• For creating reusable UI components and design systems.
• When needing help with responsive layout design for various devices.
• To structure a complete UI/UX design process from research to implementation.

Key capabilities

• Requirement Gathering: Defines project goals, target audience, technical constraints, brand guidelines, and accessibility requirements.
• User Research Analysis: Analyzes user needs, reviews analytics, identifies key user journeys, and defines information architecture.
• Wireframe Creation: Develops low-fidelity layouts focusing on content hierarchy and structure.
• Visual Design Application: Defines color palettes, typography scales, spacing systems, and component variants.
• Accessibility Compliance: Ensures adherence to WCAG guidelines (contrast ratios, keyboard navigation, screen reader compatibility).
• Responsive Layout Design: Implements a mobile-first approach for designing across different devices.
• Component Library Building: Designs atomic, molecule, and organism components with defined variants and states.

Example prompts

• "Help me create wireframes for a user registration form."
• "What are the WCAG guidelines for color contrast?"
• "Design a button component with primary, secondary, and disabled states."
• “Outline the steps to define information architecture for a new website.”

Tips & gotchas

• The skill references several supporting documents (uiux-design-process.md, design-principles.md, design-systems.md, accessibility-guide.md, responsive-design.md) for more detailed guidance on specific aspects of the design process. Consult these resources for deeper dives into particular topics.
• The skill focuses on frontend UI/UX design and does not cover broader development tasks.