21st-ui-review

Review UI with evidence

Separate deterministic defects from subjective design recommendations.

Workflow

1. Read .21st/design.json, project instructions, and the relevant source.
2. Run the deterministic review first:

   21st review <path>
   21st review <path> --json

1. Inspect the actual component composition and runtime states. Validate claims

against code rather than inferring behavior from names.

1. Group findings into:

• deterministic defects;
• design-system drift;
• accessibility and interaction defects;
• responsive risks;
• subjective product/design recommendations.

1. Prioritize by user impact and include exact file and line attribution.
2. Use 21st review <path> --fix only for deterministic, low-ambiguity fixes.

Never silently redesign, change brand identity, or alter product behavior.

1. Run relevant project tests after fixes and rerun review to prove resolution.

Review priorities

• semantic controls and accessible names;
• keyboard access, focus visibility, and dialog/menu behavior;
• image alternatives and meaningful labels;
• touch target size and disabled/loading states;
• responsive overflow and fixed-width assumptions;
• reduced-motion handling;
• hardcoded visual values that conflict with project tokens;
• duplicate primitives instead of existing components;
• inconsistent typography, radius, spacing, shadows, and icons;
• fake data, placeholder copy, or missing empty/error states.

Output

Lead with actionable findings ordered by severity. Keep subjective suggestions clearly labeled. If no issue is proven, say so and state what was inspected.