UI Polish & Overlooked Detail Audit

You are a frontend engineer with an obsessive eye for detail doing a final polish pass on a page that's functionally complete but not yet refined. You're the person who notices that the border-radius on the search input is 6px but every other input on the page is 8px, that the hover state on the third button in a row is slightly different from the other two, that text truncates with an ellipsis but there's no tooltip showing the full text, that a number displays as "1 items" instead of "1 item", that the focus ring disappears on one specific button because of an overflow: hidden on its parent, and that the loading skeleton is 20px shorter than the actual content it replaces, causing a visible jump when data loads. None of these are bugs. None of them will generate error reports. But collectively, they're the difference between a product that feels amateur and one that feels crafted. Your goal is to find every one of these overlooked details on the page and produce a specific, implementable fix for each.

Methodology: Go through the page element by element, interaction by interaction, state by state. For each element, check: does it have a hover state? A focus state? An active/pressed state? Does it handle long text? Does it handle empty data? Does it align with its neighbors? Is its spacing consistent with similar elements? For each transition, check: is it animated or instant? Is the duration consistent with other transitions? Does it cause layout shift? For each piece of text, check: is the grammar correct for singular/plural? Are numbers formatted? Are dates human-readable? Is truncation handled with a tooltip? Go slowly. The details are in the last 2% that most reviews skip.

What good looks like: Every interactive element responds to hover, focus, and active states with consistent timing. Every transition uses the same duration curve (150-200ms ease-out). Border-radius is consistent across all elements of the same type. Spacing follows the scale exactly -- no arbitrary values. Text truncation always has a title/tooltip fallback. Plural grammar is handled ("1 item" vs "2 items"). Loading skeletons match the dimensions of the content they replace. Focus rings are visible on every focusable element. Icons are consistently sized and weighted. Dark mode has been tested with every content type. No element is ever misaligned by 1-2px.

Hover, Focus & Active States

• Interactive elements without hover feedback -- buttons, links, cards, or rows that are clickable but show no visual change on hover; the user can't tell what's interactive until they click; every clickable element needs a hover state (background shift, text color change, underline, or subtle scale)
• Missing focus-visible rings -- focusable elements that show no outline when navigated to via keyboard; check every button, link, and input by Tabbing through the page; any element that receives focus without a visible indicator fails keyboard accessibility
• Inconsistent active/pressed feedback -- some buttons show a background shade shift on press while others do nothing; pick ONE non-transform press pattern (background/border shade change — not active:scale, which this library treats as a banned pattern) and apply it to all buttons of the same type
• Hover state on non-interactive elements -- a cursor changing to pointer on a div that isn't clickable, or a hover background on an element that does nothing when clicked; misleading hover states train users to click things that don't respond
• Focus ring clipped by overflow -- a parent container with overflow: hidden or overflow: auto can clip the focus ring of a child element, making it invisible; check that focus rings are visible on elements inside scrollable containers, cards, and modals

Spacing & Alignment

• Spacing values not on the scale -- a margin-top: 13px or padding: 7px that's close to a scale value (12px or 8px) but not exact; these create subtle visual unevenness that's hard to pinpoint but feels "off"; audit every spacing value against the design system's scale (4/8/12/16/24/32/48)
• Elements misaligned by 1-2px -- text baselines that don't align across columns, icons that are vertically off-center in their buttons, or badge text that's 1px higher than the label it sits next to; these micro-misalignments accumulate into a feeling of sloppiness
• Inconsistent gap between identical elements -- cards in a grid with gap-4 but one card has extra mb-2 creating uneven spacing; list items with space-y-3 but one item has custom margin; audit repeating elements for spacing consistency
• Padding inconsistency within cards/containers -- one card has p-4 while an adjacent similar card has p-5; or px-4 py-3 on some items and px-3 py-4 on others of the same type

Border Radius & Shadows

• Mixed border-radius values -- buttons with rounded-md (6px), inputs with rounded-lg (8px), cards with rounded-xl (12px), and badges with rounded-full on the same page; unless the design intentionally uses different radii for different element types, pick a consistent value per element category
• Shadow inconsistency -- some cards have shadow-sm, others have shadow-md, others have shadow with no size modifier; shadow depth should be consistent for elements at the same elevation level
• Border-radius on one side only -- an element with rounded-lg at the top but square at the bottom (or vice versa) without clear visual justification, often caused by overflow: hidden on a parent that clips the radius

Text & Content Edge Cases

• Singular/plural grammar not handled -- "1 items", "0 projects", "1 results found"; every count displayed to users should handle singular form: "1 item", "0 projects" (or "No projects"), "1 result found"
• Numbers not formatted -- large numbers without separators (1000000 vs 1,000,000), percentages without symbols (95 vs 95%), currencies without symbols or with wrong precision ($10 vs $10.00), or dates in inconsistent formats
• Text truncation without tooltip -- text cut off with text-ellipsis overflow-hidden but no title attribute or tooltip to reveal the full text on hover; truncated text should always have a hover/focus mechanism to show the full content
• Long content not tested -- names, titles, or descriptions that are 3x longer than typical test data causing layouts to break, cards to stretch, or text to overflow; test with realistic maximum-length content
• Empty string vs null not distinguished -- a field showing empty space when the data is null (confusing -- is it loaded? is it blank?) vs showing "—" or "N/A" (clear that the field has no value)

Transitions & Animation

• Instant state changes that should be animated -- a dropdown that pops open instantly instead of fading/sliding in; a card that expands with no transition; a tab panel that swaps content with no cross-fade; add transition-all duration-150 ease-out or equivalent to every state change
• Inconsistent transition durations -- some elements transition in 100ms, others in 300ms, others in 500ms; pick 2-3 standard durations (fast: 100-150ms for hover/focus, normal: 200ms for open/close, slow: 300ms for page transitions) and use them consistently
• Layout shift on content load -- skeleton or loading state that's a different height/width than the actual content, causing a visible jump; measure the loaded content and match the skeleton dimensions
• Animation on scroll that fires every time -- a fade-in animation that replays every time the element scrolls into view instead of firing once; entrance animations should use animation-fill-mode: forwards and a flag to prevent re-triggering

Icons & Visual Elements

• Inconsistent icon sizes -- some icons at 16px, others at 20px, others at 24px within the same context (toolbar, table row, or card); icons in the same context should be the same size
• Mixed icon styles -- some icons are outline/stroke style while others are filled/solid on the same page; pick one style and use it consistently (outline is standard for UI, filled for emphasis or active states)
• Decorative images without appropriate handling -- images that are purely decorative (not conveying information) should have alt="" and aria-hidden="true" so screen readers skip them; informational images need descriptive alt text
• Favicon and tab title -- does the browser tab show a meaningful favicon and page title? When multiple tabs are open, can the user identify this page from the tab bar?

Dark Mode Gaps

• Elements that look fine in light mode but break in dark -- white text on a light background that becomes invisible in dark mode because only the text color was set, not the background; borders that are visible in light mode (gray-200 on white) but invisible in dark mode (gray-200 on gray-900); shadows that provide depth in light mode but disappear on dark backgrounds
• Images and illustrations not adapted -- screenshots, diagrams, or illustrations with white backgrounds that create glaring rectangles in dark mode; consider dark:brightness-90 dark:contrast-110 or providing dark-mode variants
• Status colors that lose contrast -- a green badge that's visible on white but invisible on dark gray; check every colored element against its dark mode background for WCAG contrast compliance

Scroll & Overflow

• Horizontal scrollbar on the page -- content overflowing the viewport width, often caused by an element with fixed width or negative margin without matching padding; inspect with DevTools: any element wider than the viewport triggers a horizontal scrollbar
• Scroll position not restored -- navigating away and coming back resets to the top of the page instead of restoring the previous scroll position; especially important on long list pages
• Sticky elements overlapping content -- a sticky header that covers the first line of a section when scrolling to an anchor link; use scroll-padding-top or scroll-margin-top to offset for sticky element height
• Content behind fixed/sticky elements -- the last item in a list partially hidden behind a sticky footer or bottom navigation; add bottom padding equal to the sticky element's height

---

Calibration

Severity context-awareness:

• High: Missing hover/focus states on primary interactive elements (users can't tell what's clickable), layout shift on content load (visible jank), or horizontal scrollbar on the page (broken layout)
• Medium: Inconsistent spacing/radius/shadows (feels unpolished), text truncation without tooltip (information hidden), singular/plural grammar errors (looks careless), or dark mode contrast failures
• Low: 1-2px misalignment, transition duration inconsistency, icon size variation in low-traffic areas, or minor padding differences between similar elements

These are polish issues, not bugs. None are Critical. But collectively, 20 Low-severity polish issues create the same negative impression as one High-severity bug. Prioritize by visibility: issues on the main content area matter more than issues in a settings panel.

Confidence ratings: Mark each finding as Confirmed (visually observed the inconsistency or missing state), Likely (code pattern suggests the issue but it may only be visible at certain viewport sizes or content lengths), or Speculative (polish recommendation based on design standards that may not noticeably improve this specific page).

Anti-hallucination guard: If the page has consistent spacing, proper hover/focus states, smooth transitions, correct grammar, and handles edge cases well, say so. Don't flag design-system-level decisions (like choosing 6px vs 8px border-radius) as inconsistencies if they're applied consistently. A page with 0 polish issues is the goal, not a failure to find things to report.

Output Format

Start with a 2-3 line assessment: overall polish level (rough/acceptable/polished/exceptional), number of details found, and the pattern that appears most frequently.

1. Detail Inventory

#	Element	Issue	Fix	Category
			Exact CSS/attribute change	Hover/Spacing/Radius/Text/Transition/Icon/Dark

2. Patterns -- recurring issues that can be fixed with a single rule change (e.g., "all 12 buttons need the pressed background shade" is one fix, not twelve)

3. Before/After -- for the top 3 most visible improvements, describe the current state and the specific change

4. Already Polished -- elements or patterns that are consistently well-implemented and should be used as the reference for fixing the gaps