web-design-reviewer

Visual inspection and source-level fixing of website design issues across responsive, accessibility, and layout concerns. This skill enables visual inspection and validation of website design quality, identifying and fixing issues at the source code level. Target website must be running Browser automation must be available Access to source code (when making fixes) If the URL is not provided, ask the user: Please provide the URL of the website to review (e.g., ) When making fixes, gather the following information: Attempt automatic detection from files in the workspace: Test at the following viewports: Identify source files from problematic elements: Selector-based Search Component-based Search File Pattern Filtering See references/framework-fixes.md for details. Iteration Limit : If more than 3 fix attempts are needed for a specific issue, consult the user Playwright MCP is recommended as the reference implementation for this skill. The same workflow can be implemented with these tools. As long as they provide the necessary capabilities (navigation, screenshot, DOM retrieval), the choice of tool is flexible. - Detects layout overflow, alignment problems, responsive breakpoints, accessibility contrast issues, and visual inconsistencies across mobile (375px), tablet (768px), desktop (1280px), and wide (1920px) viewports - Supports static sites, SPAs (React/Vue/Angular/Svelte),...