← ClaudeAtlas

frontend-design-reviewlisted

Reviews and improves frontend interfaces for visual craft, UX clarity, accessibility, responsive behavior, interaction states, content hierarchy, and implementation quality. Use when building, redesigning, auditing, or polishing user-facing UI.
dills122/ai-central · ★ 0 · Web & Frontend · score 70
Install: claude install-skill dills122/ai-central
# Frontend Design Review Adapted from `pbakaus/impeccable`, commit `1d5d745823aae7019044e8b0a621af4366dae224`, Apache-2.0. Use this skill when the task involves a website, app shell, dashboard, form, landing page, component, empty state, onboarding flow, settings page, visual system, or frontend interaction. ## Review Axes Evaluate the interface across these axes: - Purpose: the primary user action is obvious and not diluted by decoration. - Information architecture: groups, labels, navigation, and hierarchy match the user workflow. - Visual hierarchy: typography, spacing, contrast, and layout guide the eye deliberately. - Interaction quality: hover, focus, active, loading, empty, disabled, and error states are present. - Accessibility: semantic HTML, keyboard navigation, focus visibility, labels, contrast, and reduced-motion behavior are handled. - Responsiveness: layouts work at mobile, tablet, laptop, and wide desktop sizes. - Performance: images, animations, and rendering choices are appropriate for the page. - Fit: the visual language matches the product domain rather than defaulting to generic AI aesthetics. ## Workflow 1. Identify the target user, task, and context. 2. Inspect the current UI or implementation. 3. List concrete issues, ordered by user impact. 4. Make focused changes that improve the actual experience. 5. Verify in a real browser when possible. 6. Check responsive breakpoints and important states. 7. Report what changed and any remaining risk. ##