This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.
This skill enables visual inspection and validation of website design quality, identifying and fixing issues at the source code level.
Scope of Application
Static sites (HTML/CSS/JS)
SPA frameworks such as React / Vue / Angular / Svelte
Full-stack frameworks such as Next.js / Nuxt / SvelteKit
CMS platforms such as WordPress / Drupal
Any other web application
Prerequisites
Required
Target website must be running
Local development server (e.g., http://localhost:3000)
Staging environment
Production environment (for read-only reviews)
Browser automation must be available
Screenshot capture
Page navigation
DOM information retrieval
Access to source code (when making fixes)
Project must exist within the workspace
Workflow Overview
flowchart TD
A[Step 1: Information Gathering] --> B[Step 2: Visual Inspection]
B --> C[Step 3: Issue Fixing]
C --> D[Step 4: Re-verification]
D --> E{Issues Remaining?}
E -->|Yes| B
E -->|No| F[Completion Report]
Step 1: Information Gathering Phase
1.1 URL Confirmation
If the URL is not provided, ask the user:
Please provide the URL of the website to review (e.g., http://localhost:3000)
1.2 Understanding Project Structure
When making fixes, gather the following information:
Item
Example Question
Framework
Are you using React / Vue / Next.js, etc.?
Styling Method
CSS / SCSS / Tailwind / CSS-in-JS, etc.
Source Location
Where are style files and components located?
Review Scope
Specific pages only or entire site?
1.3 Automatic Project Detection
Attempt automatic detection from files in the workspace:
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.
Best Practices
DO (Recommended)
✅ Always save screenshots before making fixes
✅ Fix one issue at a time and verify each
✅ Follow the project's existing code style
✅ Confirm with user before major changes
✅ Document fix details thoroughly
DON'T (Not Recommended)
❌ Large-scale refactoring without confirmation
❌ Ignoring design systems or brand guidelines
❌ Fixes that ignore performance
❌ Fixing multiple issues at once (difficult to verify)
