thomas/ui-ux-pro-max-skill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9621b2ceede06a497155380074857ad248a70d4e
ui-ux-pro-max-skill/cli/assets/templates/base/quick-reference.md
Viet Tran 9621b2ceed feat: reorganize codebase with single source of truth + merge prompts into styles 
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>
2026-01-22 22:05:01 +07:00

2.6 KiB
Raw Blame History

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.

Reference in New Issue View Git Blame Copy Permalink