frontend-design-reviewlisted
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.
##