Galaxy Dawn Web Design Reviewer Skill: Visual QA With Source Fixes

What is the web-design-reviewer skill?

The web-design-reviewer skill opens a website that is already running, locally or remotely, looks at it through screenshots, finds design faults and then repairs them at the source code level. Its description lists review website design, check the UI and fix the layout as triggers.

It sits inside a large repository whose main purpose is academic research assistance, so this folder is a side feature. The skill itself is self-contained: one SKILL.md plus two reference files on framework fixes and a visual checklist.

The four-step review loop

1. Information gathering: confirm the URL, then detect the framework and styling method from files such as package.json, tailwind.config and next.config.
2. Visual inspection: capture screenshots, read the DOM snapshot if available and test four viewports, from 375 pixels to 1920 pixels wide.
3. Issue fixing: rank issues P1 to P3, locate the source file by selector or component, and apply the smallest change that works.
4. Re-verification: reload, capture the fixed area, compare before and after, and loop until nothing remains.

What it looks for

• Layout: element overflow, unintended overlap, alignment problems, uneven spacing and clipped text.
• Responsive: layouts that break on small screens, awkward breakpoint transitions and touch targets that are too small.
• Accessibility: low text contrast, no visible focus state and missing alt text on images.
• Visual consistency: mixed font families, unaligned brand colors and uneven spacing between similar elements.

Who the web-design-reviewer skill is for

Best for

• Sites that already exist and need a systematic visual pass, whether a React, Vue, Svelte or static project. The scope also lists WordPress and Drupal.
• Developers who want fixes in the actual style files, with a before and after screenshot for each. A broader audit pass is in web-quality-audit.
• Teams checking responsive behavior at four set widths, then comparing it with owl-responsive-design.

Not for

• Designing a new page from nothing. The skill reviews and repairs, so use frontend-design to create.
• Agents without browser automation. Screenshot capture, page navigation and image analysis are listed as required capabilities.
• A dedicated accessibility audit. Its checks are three issues among many, so pair it with fixing-accessibility for depth.

Use it with UiChemy

After Figma to WordPress or AI to WordPress produces a page, run it on a staging or local copy and read what it finds. The skill edits source code, so on a builder-made page treat its report as a checklist for the editor.

Its four widths make a handy acceptance test for a converted layout. Click Get Started on uichemy.com to build the page first, then use the report to settle spacing, overflow and contrast before launch.

How to install Galaxy Dawn Web Design Reviewer Skill: Visual QA With Source Fixes

git clone https://github.com/Galaxy-Dawn/claude-scholar.git /tmp/claude-scholar
bash /tmp/claude-scholar/scripts/setup.sh

1. Clone the repository

   Run git clone https://github.com/Galaxy-Dawn/claude-scholar.git /tmp/claude-scholar. The README lists Claude Code and Git as the requirements for the main branch.

2. Run the installer or copy one folder

   The README's recommended route is bash /tmp/claude-scholar/scripts/setup.sh, which installs the whole toolkit and backs up overwritten files to ~/.claude/.claude-scholar-backups. For this skill alone, copy skills/web-design-reviewer, including its references folder, into your agent's skills folder.

3. Set up browser automation

   The skill recommends Playwright MCP. Its example configuration runs npx with -y @playwright/mcp@latest --caps=vision as an MCP server named playwright.

4. Start the target site

   Run your local development server, for example at http://localhost:3000, or point to a staging URL. Production sites are for read-only reviews.

Check that it loaded

Ask the agent to review the design of your running site. It should confirm the URL, detect your framework and styling method, capture screenshots at the four widths, list issues with P1 to P3 priorities and report fixes.

Read the official instructions on GitHub

Key features

• Three prerequisitesThe target site must be running, as a local server, staging or production for read-only review. Browser automation must be available, and source access is needed when making fixes.
• Automatic project detectionThe agent reads package.json, tsconfig.json, tailwind.config, next.config, vite.config and nuxt.config to learn the framework and where source lives, before asking you.
• Styling method tableSeven methods map to edit targets: pure CSS, SCSS, CSS Modules, Tailwind CSS className, styled-components, Emotion and other CSS-in-JS. The agent edits the right layer.
• Severity-rated inspectionLayout, responsive, accessibility and visual consistency checks each carry a High, Medium or Low severity, for example overflow and overlap rated High, spacing inconsistency rated Low.
• Four test viewportsMobile at 375 pixels, tablet at 768, desktop at 1280 and wide at 1920, each tied to a representative device such as iPhone SE or iPad.
• Priority matrixP1 means fix immediately for layout problems that affect function. P2 covers visual issues that hurt the experience. P3 is for minor inconsistencies, fixed if possible.
• Source file huntingProblem elements are traced by class name or ID, or by component text and structure, using code search tools, with file pattern hints for style files, components and pages.
• Fix principlesMake minimal changes, respect existing patterns, avoid breaking other areas and add comments that explain a fix. Large refactors need confirmation, and so do major changes.
• Iteration limitIf a single issue needs more than three fix attempts, the agent stops and consults you instead of looping. One issue is fixed and verified at a time.
• Structured review reportThe output has a summary table of URL, framework, styling, viewports, issues detected and fixed, plus per-issue entries with page, element, fixed file and a screenshot pair.

Frequently asked questions