| name | review-web-design-quality |
| description | Inspect a live page for layout, spacing, responsive, and accessibility issues, then trace the fixes back to the real source files. |
| category | Task |
| pinned | true |
| trigger_hints | web design, ui review, responsive, layout, accessibility, css, screenshots |
Review web design quality
Inspect a live page for layout, spacing, responsive, and accessibility issues, then trace the fixes back to the real source files.
When to Use This Skill
Use this when a page looks broken, inconsistent, or awkward and you need a practical visual review instead of guessing from code alone.
Workflow Overview
- Review the page visually at meaningful desktop and mobile widths before editing.
- Prioritize layout breakage, overlap, clipping, focus visibility, contrast, and inconsistent spacing ahead of cosmetic nitpicks.
- Identify the real component or stylesheet source for each issue instead of patching symptoms from the wrong file.
- Recheck the affected flow after changes so fixes do not create regressions at another viewport.
Examples
- Review this page for layout and responsive issues.
- Check the UI for visual consistency and accessibility gaps before more feature work.
- Trace the source of a broken layout and fix it at the right component or stylesheet.
