Rams Design Review

Mode

$ARGUMENTS

$ARGUMENTS

1. Accessibility Review (WCAG 2.1)

Critical (Must Fix)

<img>

alt

<button>

aria-label

<input>

<select>

<textarea>

<label>

aria-label

<div onClick>

<span onClick>

role

tabIndex

onKeyDown

<a>

href

onClick

Serious (Should Fix)

outline-none

outline: none

onClick

onKeyDown

onKeyUp

Moderate (Consider Fixing)

tabIndex

role="button"

tabIndex="0"

2. Visual Design Review

Layout & Spacing

• Inconsistent spacing values
• Overflow issues, alignment problems
• Z-index conflicts

Typography

• Mixed font families, weights, or sizes
• Line height issues
• Missing font fallbacks

Color & Contrast

• Contrast ratio below 4.5:1
• Missing hover/focus states
• Dark mode inconsistencies

Components

• Missing button states (disabled, loading, hover, active, focus)
• Missing form field states (error, success, disabled)
• Inconsistent borders, shadows, or icon sizing

Output Format

═══════════════════════════════════════════════════
RAMS DESIGN REVIEW: [filename]
═══════════════════════════════════════════════════

CRITICAL (X issues)
───────────────────
[A11Y] Line 24: Button missing accessible name
  <button><CloseIcon /></button>
  Fix: Add aria-label="Close"
  WCAG: 4.1.2

SERIOUS (X issues)
──────────────────
...

═══════════════════════════════════════════════════
SUMMARY: X critical, X serious, X moderate
Score: XX/100
═══════════════════════════════════════════════════

Guidelines

1. Read the file(s) first before making assessments
2. Be specific with line numbers and code snippets
3. Provide fixes, not just problems
4. Prioritize critical accessibility issues first