skills.rest
afonsoft
afonsoftCOMMUNITY
Explore all skills by this author →
Website𝕏@afonsoftGitHub

web-design-reviewer

Inspect websites visually via browser automation and fix design issues in source code.

Updated Jul 21, 2026
Search Tags:#accessibility#responsive design#css#ui review#web design#playwright#visual inspection
One-click install
npx skills add https://github.com/afonsoft/gamehub --skill web-design-reviewer-afonsoft
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-reviewer
Source: https://github.com/afonsoft/gamehub/tree/main/.claude/skills/web-design-reviewer
Command: npx skills add https://github.com/afonsoft/gamehub --skill web-design-reviewer-afonsoft

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Manually checking websites for layout breakage, responsive failures, and accessibility issues across multiple viewports is slow and error-prone. This Skill automates visual inspection of running websites and applies fixes directly at the source code level. ## Core Features & Use Cases - Visual Inspection: Navigate pages, capture screenshots, and detect layout overflow, element overlap, contrast failures, and responsive breakpoints issues at mobile, tablet, desktop, and wide viewports. - Source-Level Fixes: Locate the responsible CSS, Tailwind, styled-components, or Vue scoped style files and apply minimal, pattern-consistent fixes. - Iterative Verification: Re-screenshot after each fix, run regression checks, and loop until issues are resolved, producing a structured review report. - Use Case: Point the Skill at your local Next.js dev server, and it will find that your card grid overflows on 375px screens, fix the grid classes in the component, and verify the result. ## Quick Start Review the design of my website running at http://localhost:3000 and fix any layout or responsive issues you find.

Frequently Asked Questions about web-design-reviewer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I review my website's design automatically?▼

Provide the URL of your running website, such as a local dev server at http://localhost:3000. The Skill navigates pages, captures screenshots at multiple viewports, detects layout and accessibility issues, fixes them in your source code, and re-verifies the results.

What tools can I use for automated visual website inspection?▼

Playwright MCP is the recommended reference implementation, providing navigation, screenshots, DOM snapshots, and viewport resizing. Selenium, Puppeteer, Cypress, and WebDriver BiDi also work if they provide navigation, screenshot, and DOM retrieval capabilities.

Does it work with Tailwind CSS and styled-components?▼

Yes. The Skill detects your styling method from project files like tailwind.config or styled-component imports, then applies fixes in the appropriate location: utility classes for Tailwind, JS/TS files for styled-components and Emotion, or CSS/SCSS files for traditional styles.

Which frameworks are supported for design review and fixing?▼

Static HTML/CSS/JS sites, SPA frameworks including React, Vue, Angular, and Svelte, full-stack frameworks like Next.js, Nuxt, and SvelteKit, and CMS platforms such as WordPress and Drupal are all supported.

Why are my style fixes not showing up in the browser?▼

Check that your dev server's hot module replacement is working, clear the browser cache, and rebuild if the project requires it. CSS specificity conflicts can also override fixes, so use more specific selectors if changes do not apply.

What are the limitations of automated visual design review?▼

The target website must be running and accessible, browser automation must be available, and source code access is required for fixes. If an issue needs more than three fix attempts, the Skill stops and consults the user rather than continuing to iterate.

Related Skills

Explore More Design & Creative Skills→
EstomEstom

webapp-testing

Automate end-to-end testing of local web applications using Playwright.

Community
Intermediate
Comfy-OrgComfy-Org
2.0k

red-green-fix

Fixes bugs as two commits so CI proves the regression test catches the bug.

Official
Intermediate
Hack23Hack23
9

playwright-testing

Automate end-to-end browser testing for static websites with Playwright.

Official
Advanced
JaiminVadadoriyaJaiminVadadoriya
1

visual-testing

Automate visual regression testing by comparing screenshots against baselines.

Community
Advanced