skills.rest
tfsugjp
tfsugjpOFFICIAL
Explore all skills by this author →
GitHub

web-design-reviewer

Inspect web pages and apply source-level fixes for visual design issues.

3|Updated Jul 25, 2025
Search Tags:#accessibility#responsive-design#web-design#design-review#ui-fixes#visual-inspection
One-click install
npx skills add https://github.com/tfsugjp/csharptemplate --skill web-design-reviewer-tfsugjp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-reviewer
Source: https://github.com/tfsugjp/csharptemplate/tree/main/.github/skills/web-design-reviewer
Command: npx skills add https://github.com/tfsugjp/csharptemplate --skill web-design-reviewer-tfsugjp

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Web designers and developers spend excessive time identifying and correcting visual design issues across pages and breakpoints. This skill helps teams quickly detect and address responsive, accessibility, and consistency problems in real code, reducing manual review effort.

Core Features & Use Cases

  • Detects responsive layout problems, accessibility gaps, and visual inconsistencies directly in code.
  • Proposes targeted fixes and can apply source-level changes to align with design guidelines.
  • Use Case: review a local or remote website to generate a design-quality report and push fixes via source edits.

Quick Start

Run a design review by specifying the target URL and issuing a request like "review website design" to start automated checks and fixes.

Frequently Asked Questions about web-design-reviewer

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

FAQPage Schema
How do I check my website for responsive design and accessibility issues?▼

To check website design for responsive and accessibility issues, you can run an automated visual inspection that renders pages, inspects the DOM, and proposes targeted fixes to your source files.

Can I review and fix UI design issues directly in a Next.js or SvelteKit project?▼

Yes, you can review and fix UI design issues in Next.js, SvelteKit, Nuxt, or static sites by inspecting rendered pages and applying source-level changes directly to your project workspace.

How do I generate a web design quality report for a remote site?▼

You can generate a web design quality report for a remote site by specifying the target URL and initiating an automated design review to detect visual inconsistencies and accessibility gaps.

What's the best way to automate visual inspection of web projects without manual review?▼

The best way to automate visual inspection of web projects is using browser automation to render pages, inspect the DOM, detect layout problems, and push fixes directly to the source code.

Do I need browser automation to inspect DOM and fix visual design issues?▼

Yes, browser automation is required to inspect the DOM and fix visual design issues, as it enables page rendering and DOM inspection necessary for validating design quality and applying source edits.

Related Skills

Explore More Design & Creative Skills→
JLSedJLSed

web-design-reviewer

Inspect website design quality and fix layout, responsiveness, and accessibility issues in source code.

Community
Advanced
EmeaAppGbbEmeaAppGbb

web-design-reviewer

Inspect websites for responsive, accessibility, and visual issues and propose code fixes.

Official
Intermediate
bacchus-labsbacchus-labs
4

visual-regression-testing

Automate visual regression testing by comparing screenshots against baselines.

Official
Advanced
seanspiesmanseanspiesman

web-design-reviewer

Inspect websites for visual design issues and apply source-code fixes.

Community
Advanced