Frontend Component UX and Accessibility Review
Severity-ranked fixes with code for UI components: states, keyboard, focus, ARIA, touch targets, contrast, and responsive breakage.
Before & after
Same prompt, same agent — the only difference is the skill.
I can take a look at the component and give some feedback. Generally you want to check things like color contrast, consistent spacing, responsive layout on mobile, clear labeling, and making sure interactions feel natural. Accessibility is important too. I'd need to actually see the code and understand what the component is supposed to do to give you specific recommendations. Do you have a particular concern about it?
UI/UX REVIEW CHECKLIST COLOR & CONTRAST • Text-background contrast ratio: 4.8:1 (meets AA standard) • Link underline visibility: pass • Disabled states clearly differentiated: pass • Error message color not sole indicator: FAIL — needs icon + text SPACING & ALIGNMENT • Vertical rhythm: 8px baseline (consistent) • Margin/padding: 16px gaps between sections (consistent) • Component edge padding: 20px (exceeds mobile minimum of 16px) • Alignment grid: 4px subgrid (precise) TYPOGRAPHY • Heading hierarchy: H1 → H2 → Body text (correct) • Line height: 1.6 body, 1.3 headings (accessible) • Font size: 16px base (mobile-readable) • Font weight variation: 3 levels (heading, body, secondary) — IMPROVEMENT: add 1 more for emphasis RESPONSIVE LAYOUT • Mobile breakpoint: 320px+ (good) • Tablet: 768px+ (correct) • Desktop: 1024px+ (good) • Single-column on mobile: pass INTERACTION FEEDBACK • Hover states defined: yes • Focus states for keyboard nav: FAIL — add :focus-visible outline • Loading indicator: exists • Button press feedback (active state): yes FIXES TO APPLY 1. Add error icon + text pair (icon not sole indicator) 2. Add :focus-visible outline for keyboard nav 3. Add 1 intermediate font weight for emphasis text
About this skill
Your new modal looks fine in the screenshot. Then someone presses Tab and focus lands behind it, the close button reads as "button", and the footer gets cut off on a phone. This skill checks each component in every state, with keyboard, screen reader, and touch input, and at every screen size. You get fixes ranked by who is blocked, with the code to apply.
What it does
- Checks every control in each state: default, hover, focus-visible, disabled, loading, error, and empty. It also tries the edge cases: zero items, one item, many items, and very long strings.
- Catches ARIA misuse and recommends native elements instead (button vs div, dialog vs custom overlay). Adding roles everywhere is not the fix.
- Traces focus when things open, close, get deleted, or the route changes, and flags focus traps, lost focus, and focus hidden behind sticky headers.
- Checks WCAG 2.2 AA limits: contrast ratios, the 24px minimum target size, reflow at 320px, and alternatives to drag-only actions.
- Finds responsive bugs: 100vh on mobile, iOS zoom on inputs, hover-only menus, and buttons that overflow.
- Builds accessible components (tabs, comboboxes, forms, dialogs) with the keyboard map and screen-reader announcements included.
What you get
A ship / not-ready verdict, findings grouped as Blocker, Major, Minor, or Polish, patched code for the serious ones, and a short list of things to test by hand.
Best for
Frontend engineers and design engineers reviewing a component or PR before merge, and developers who want AI-generated UI checked for keyboard, screen-reader, and mobile problems before users find them.
SKILL.md preview
---
name: frontend-component-ux-accessibility-review
description: Reviews or builds frontend components and pages for real usability. It walks each control through every interaction state, keyboard and screen-reader paths, ARIA, touch targets, contrast, and responsive and zoom behavior, then returns severity-ranked fixes with code. Use when the user says "review this component before we ship", "is this modal accessible", "audit this page for UX issues", "build this form so it's accessible", "my dropdown doesn't work with the keyboard", "focus keeps jumping to the top of the page", "the layout breaks on mobile", or "the screen reader reads this wrong".
---
… (sign up to view the full skill)More development skills
View all Development skills →Three.js Click-to-Learn 3D Game Builder
Build click-to-learn 3D games in Three.js: TSL materials, reliable object picking, and an accessible quiz overlay fed by content data.
Angular Standalone Features and State Architecture
Build Angular standalone features with lazy routes, scoped state, safe RxJS flows, and targeted tests.
shadcn/ui Component Building and Theming
Build, theme, and debug shadcn/ui components the way the library is designed to work, with Tailwind v3 and v4 theming handled correctly.
Design-Matched SEO Pages and Graded Site Audit
Add about, team, or testimonial pages that match your site's design, with unique meta, canonicals, and JSON-LD, plus a graded audit.