b2a05eceeb
BREAKING CHANGES: - Moved canonical data/scripts to src/ui-ux-pro-max/ - Removed duplicate folders (.codex/, .gemini/, .trae/, .codebuddy/, .continue/, skills/, .qoder/) - CLI now uses template system instead of copying pre-built folders New features: - Merged prompts.csv into styles.csv with 4 new columns: - AI Prompt Keywords - CSS/Technical Keywords - Implementation Checklist - Design System Variables - All 67 styles now have complete prompt data - Added Astro stack (53 guidelines) - Added 10 new 2025 UI trend styles CLI changes: - New template rendering system (cli/src/utils/template.ts) - Reduced cli/assets from ~34MB to ~564KB - Assets now contain only: data/, scripts/, templates/ File structure: - src/ui-ux-pro-max/ - Single source of truth - .claude/skills/ - Symlinks to src/ for development - .shared/ - Symlink to src/ui-ux-pro-max/ Bumped CLI version: 2.1.3 → 2.2.0 Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
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.
|
|
|
|
---
|
|
|