majiayu000 UX Design Skill
Implement UX for: $ARGUMENTS
Mobile-First Responsive Design (MANDATORY)
All components MUST be:
- Mobile-first: Write CSS for mobile, add media queries for larger screens
- Responsive: Work across mobile, tablet, desktop
- Theme-aware: Support light and dark themes
Breakpoints
/* Mobile (default) - ≤640px */
.component {
padding: 1rem;
flex-direction: column;
}
/* Tablet - ≥768px */
@media (min-width: 768px) {
.component {
padding: 1.5rem;
flex-direction: row;
}
}
/* Desktop - ≥1024px */
@media (min-width: 1024px) {
.component {
padding: 2rem;
}
}
Mobile Adjustments
- Single column layouts
- Full-width buttons
- Reduced padding (1rem)
- Stack flex layouts vertically
- Hide non-essential button text (show icons only)
Tablet Adjustments
- Form rows → single column
- Adjust grid columns
- Show abbreviated labels
Desktop
- Full multi-column layouts
- All features visible
- Hover states active
Theme Support
/* Light theme (default) */
.component {
background: var(--bg-card);
color: var(--text-primary);
border: 1px solid var(--border-normal);
}
/* Dark theme */
[data-theme="dark"] .component {
background: rgba(30, 41, 59, 0.95);
border-color: rgba(255, 255, 255, 0.1);
}
CSS Variables for Theming
--bg-card: /* card background */
--bg-input: /* input field background */
--text-primary: /* primary text */
--text-secondary: /* secondary text */
--text-tertiary: /* muted text */
--border-normal: /* default border */
--color-primary: /* primary action */
--color-danger: /* danger/error */
--color-success: /* success */
--color-info: /* information */
--shadow-sm, --shadow-md, --shadow-lg, --shadow-xl: /* shadows */
--focus-ring: /* focus state */
Spacing System
Padding
/* Page container */ padding: 1.5rem;
/* Cards/sections */ padding: 1.25rem to 1.5rem;
/* Form fields */ padding: 0.75rem;
/* Primary buttons */ padding: 0.75rem 1.5rem;
/* Secondary buttons */ padding: 0.625rem 1.25rem;
/* Dialog content */ padding: 1rem to 1.5rem;
Margins
/* Page header bottom */ margin-bottom: 2rem;
/* Section spacing */ margin: 1.5rem to 2rem;
/* Form field spacing */ margin-bottom: 1.25rem;
/* Item spacing */ margin: 0.625rem to 1rem;
Gaps (Flexbox/Grid)
gap: 1rem; /* Primary - DEFAULT */
gap: 0.5rem; /* Compact - icon+text */
gap: 1.5rem; /* Wide - major sections */
Layout Patterns
Page Container
.page-container {
max-width: 1400px;
margin: 0 auto;
padding: 1.5rem;
}
Stats Grid (Auto-Responsive)
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
Card Grid
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.25rem;
}
Form Row (2-Column)
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 768px) {
.form-row {
grid-template-columns: 1fr;
}
}
Interaction Patterns
Transitions
transition: all 0.2s ease; /* Standard */
transition: all 0.3s ease; /* Important states */
/* NEVER exceed 0.3s */
Hover Effects
/* Lift effect */
transform: translateY(-2px); /* Subtle */
transform: translateY(-4px); /* Cards */
/* Scale (FAB only) */
transform: scale(1.1);
Focus States
/* Always visible focus ring */
:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
border-color: #8b5cf6;
}
Loading States
.loading {
opacity: 0.7;
pointer-events: none;
}
.spinner {
animation: spin 1s linear infinite;
}
Animations
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
Accessibility Requirements
Form Labels
<!-- Always associate labels with inputs -->
<label for="email">Email <span class="required">*</span></label>
<input id="email" type="email" aria-required="true">
Required Fields
- Red asterisk (
*) after label aria-required="true"on input- Clear validation messages
Focus Management
- All interactive elements focusable
- Visible focus indicators
- Logical tab order
- Skip links for navigation
Screen Readers
<!-- Announce dynamic content -->
<div role="alert" aria-live="polite">
{{ statusMessage }}
</div>
<!-- Descriptive buttons -->
<button aria-label="Delete member John Doe">
<i class="pi pi-trash"></i>
</button>
Color Contrast
- Text on backgrounds: minimum 4.5:1 ratio
- Large text: minimum 3:1 ratio
- Interactive elements: clearly distinguishable
ARIA for PrimeNG
<p-table aria-label="Members list">
<p-dialog [ariaLabel]="'Edit member'">
<p-dropdown [ariaLabel]="'Select fellowship'">
User Feedback Patterns
Success Feedback
// Toast notification
this.messageService.add({
severity: 'success',
summary: 'Success',
detail: 'Member saved successfully'
});
Error Feedback
// Show in form AND toast for critical errors
this.messageService.add({
severity: 'error',
summary: 'Error',
detail: 'Failed to save member'
});
Confirmation Dialogs
// Always confirm destructive actions
this.confirmationService.confirm({
message: 'Are you sure you want to delete this member?',
header: 'Confirm Delete',
icon: 'pi pi-exclamation-triangle',
acceptButtonStyleClass: 'p-button-danger',
accept: () => this.deleteMember()
});
Progress Indicators
- Show spinner for operations > 300ms
- Show progress bar for uploads/long operations
- Disable submit buttons while processing
Navigation Patterns
Breadcrumbs
<nav aria-label="Breadcrumb">
<ol class="breadcrumb">
<li><a routerLink="/dashboard">Dashboard</a></li>
<li><a routerLink="/members">Members</a></li>
<li aria-current="page">John Doe</li>
</ol>
</nav>
Back Navigation
- Always provide way to go back
- Preserve form state when navigating away
- Warn before losing unsaved changes
Critical UX Rules
- ALWAYS design mobile-first
- ALWAYS provide loading feedback
- ALWAYS confirm destructive actions
- ALWAYS maintain visible focus states
- ALWAYS use semantic HTML
- NEVER remove content without confirmation
- NEVER disable back navigation
- NEVER auto-submit forms
- NEVER hide errors from users
- ALWAYS preserve user input on errors