85 lines
2.6 KiB
Markdown
85 lines
2.6 KiB
Markdown
## When to Apply
|
|
|
|
Reference these guidelines when:
|
|
- Designing new UI components or pages
|
|
- Choosing color palettes and typography
|
|
- Reviewing code for UX issues
|
|
- Building landing pages or dashboards
|
|
- Implementing accessibility requirements
|
|
|
|
## Rule Categories by Priority
|
|
|
|
| Priority | Category | Impact | Domain |
|
|
|----------|----------|--------|--------|
|
|
| 1 | Accessibility | CRITICAL | `ux` |
|
|
| 2 | Touch & Interaction | CRITICAL | `ux` |
|
|
| 3 | Performance | HIGH | `ux` |
|
|
| 4 | Layout & Responsive | HIGH | `ux` |
|
|
| 5 | Typography & Color | MEDIUM | `typography`, `color` |
|
|
| 6 | Animation | MEDIUM | `ux` |
|
|
| 7 | Style Selection | MEDIUM | `style`, `product` |
|
|
| 8 | Charts & Data | LOW | `chart` |
|
|
|
|
## Quick Reference
|
|
|
|
### 1. Accessibility (CRITICAL)
|
|
|
|
- `color-contrast` - Minimum 4.5:1 ratio for normal text
|
|
- `focus-states` - Visible focus rings on interactive elements
|
|
- `alt-text` - Descriptive alt text for meaningful images
|
|
- `aria-labels` - aria-label for icon-only buttons
|
|
- `keyboard-nav` - Tab order matches visual order
|
|
- `form-labels` - Use label with for attribute
|
|
|
|
### 2. Touch & Interaction (CRITICAL)
|
|
|
|
- `touch-target-size` - Minimum 44x44px touch targets
|
|
- `hover-vs-tap` - Use click/tap for primary interactions
|
|
- `loading-buttons` - Disable button during async operations
|
|
- `error-feedback` - Clear error messages near problem
|
|
- `cursor-pointer` - Add cursor-pointer to clickable elements
|
|
|
|
### 3. Performance (HIGH)
|
|
|
|
- `image-optimization` - Use WebP, srcset, lazy loading
|
|
- `reduced-motion` - Check prefers-reduced-motion
|
|
- `content-jumping` - Reserve space for async content
|
|
|
|
### 4. Layout & Responsive (HIGH)
|
|
|
|
- `viewport-meta` - width=device-width initial-scale=1
|
|
- `readable-font-size` - Minimum 16px body text on mobile
|
|
- `horizontal-scroll` - Ensure content fits viewport width
|
|
- `z-index-management` - Define z-index scale (10, 20, 30, 50)
|
|
|
|
### 5. Typography & Color (MEDIUM)
|
|
|
|
- `line-height` - Use 1.5-1.75 for body text
|
|
- `line-length` - Limit to 65-75 characters per line
|
|
- `font-pairing` - Match heading/body font personalities
|
|
|
|
### 6. Animation (MEDIUM)
|
|
|
|
- `duration-timing` - Use 150-300ms for micro-interactions
|
|
- `transform-performance` - Use transform/opacity, not width/height
|
|
- `loading-states` - Skeleton screens or spinners
|
|
|
|
### 7. Style Selection (MEDIUM)
|
|
|
|
- `style-match` - Match style to product type
|
|
- `consistency` - Use same style across all pages
|
|
- `no-emoji-icons` - Use SVG icons, not emojis
|
|
|
|
### 8. Charts & Data (LOW)
|
|
|
|
- `chart-type` - Match chart type to data type
|
|
- `color-guidance` - Use accessible color palettes
|
|
- `data-table` - Provide table alternative for accessibility
|
|
|
|
## How to Use
|
|
|
|
Search specific domains using the CLI tool below.
|
|
|
|
---
|
|
|