Review UI Code
review-ui-codeReview React, CSS, and SwiftUI source for UI/UX, accessibility, and design-system issues; get exact line-level findings and fixes before presenting the result.
Instructions
Deterministic UI and UX review of React component source and its CSS, and of SwiftUI .swift views. Run it on every UI file you write or change, including globals.css and a one-file .html page (its blocks are checked), before you present the result. Pass the markup of every mock product screen or embedded panel too, not only the page around it. When CSS references a framework font variable, include the layout or font-loader .ts/.tsx/.js/.jsx module in the same call.
get-review-rules gives you the judgment rules to apply yourself. This tool is the mechanical half: it parses the code and returns exact findings with line numbers and fixes, the same input always producing the same findings. It catches:
Native elements the installed design system already ships: raw , , , , .
Raw app shells and repeated record rows that bypass installed Sidebar and Table compositions.
Undefined font variables that leave the rendered app on an unintended fallback family.
Hardcoded colors and Tailwind arbitrary color values that bypass semantic tokens, raw palette classes (bg-white, text-gray-500), and dark: forks.
Generated-UI tells: letter-spaced capital labels, a left-edge stripe on a callout, selected row or active nav item, gradient text, eyebrow labels above titles, em dashes in copy.
WCAG basics: images without alt, icon-only buttons without an accessible name, removed focus outlines.
SwiftUI: literal colours outside the theme, text that ignores Dynamic Type, icon-only buttons with no accessibility label, tap gestures used as buttons, and a chart axis inside a small card.
This source reviewer cannot judge rendered hierarchy or semantic color roles. After it passes, inspect the rendered dashboard and confirm title → metrics → records → interpretation, distinct action and status colors, and that a stepper begins only after a task starts.
Send each file's path and leave out content to have the tool read the whole file from disk. Fix every critical and serious finding, then call it again on the fixed source. Findings feed the same loop as a human code review: read, fix, re-check.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| files | Yes | The .tsx, .jsx, .ts, .js, .css, .html, .svg and .swift files to review, as written. Send an icon's own file beside the pages that use it, so a nudge finding can name the viewBox or path to fix. | |
| context | No | Optional. One sentence on WHY you are calling this and what the user asked for (e.g. 'adding nav icons for the fintech dashboard'). Used only for usage analytics; does not change the result. |