Agent skill · design visual · github
web-design-reviewer
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.
Why this skill is useful
Adds specific commands for visual inspection and automated fixes that the AI wouldn't generate on its own.
What it needs
Requires browser-automation-tool installed locally. About 6k tokens when loaded. Last updated 2026-08-07. 37,534 stars on the source repository.
What this skill does
Web Design Reviewer 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 1. Target website must be running Local development server (e.g., http://localhost:3000) Staging environment Production environment (for read-only reviews) 2. Browser automation must be available Screenshot capture Page navigation DOM information retrieval 3. Access to source code (when making fixes) Project must exist within the workspace Workflow Overview --- 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: 1.4 Identifying Styling Method Method Detection Edit Target -------- ----------- ------------- Pure CSS .css files Global CSS or component CSS SCSS/Sass .scss, .sass SCSS files CSS Modules .module.css Module CSS files Tailwind CSS tailwind.config. className in components styled-components styled. in code JS/TS files Emotion @emotion/ imports JS/TS files CSS-in-JS (other) Inline styles JS/TS files --- Step 2: Visual Inspection Phase 2.1 Page Traversal 1. Navigate to the specified URL 2. Capture screenshots 3. Retrieve DOM structure/snapshot (if possible) 4. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills github/web-design-reviewer