skills.rest
YanBerdin
YanBerdinCOMMUNITY
Explore all skills by this author →
GitHub

web-design-reviewer

Identify and report visual design issues across web experiences.

2|1|Updated Jan 11, 2024
Search Tags:#design#accessibility#layout#review#responsive#web#visual
One-click install
npx skills add https://github.com/YanBerdin/YanBerdin --skill web-design-reviewer-yanberdin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-reviewer
Source: https://github.com/YanBerdin/YanBerdin/tree/main/.github/skills/web-design-reviewer
Command: npx skills add https://github.com/YanBerdin/YanBerdin --skill web-design-reviewer-yanberdin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

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.

Core Features & Use Cases

  • Static sites, SPA, full-stack apps, and CMS platforms are supported for design review.
  • Detects issues across layout, responsiveness, accessibility, and visual consistency.
  • Provides fixes at the source code level through framework-specific guidance and best practices.
  • Use Case: A developer reviews a local site to surface design problems and apply CSS/component fixes.

Quick Start

Run a quick review on the target site to generate a detailed visual inspection report.

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 website design and fix layout issues in my source code?▼

To review website design and fix layout issues, the skill visually inspects your running target site via browser automation to capture screenshots and DOM data, identifying visual inconsistencies and applying framework-specific fixes directly at the source code level.

Can I check UI responsiveness and accessibility for a local Next.js or React app?▼

Yes, you can check UI responsiveness and accessibility for local Next.js or React apps. The skill supports static sites, SPAs, and full-stack frameworks to detect responsive design flaws and accessibility problems during local development.

Does this web design review tool work with WordPress or Drupal CMS platforms?▼

Yes, this web design review tool works with WordPress, Drupal, and other CMS platforms. It requires a running target site to perform visual inspections and detect layout breakage, applying necessary fixes to the underlying source code.

What is needed to detect visual consistency problems across web experiences?▼

To detect visual consistency problems across web experiences, you need a running target site, browser automation to capture screenshots and DOM data, and access to the workspace source code to apply the recommended design fixes.

What's the best way to find and fix responsive design problems in a Svelte or Vue SPA?▼

The best way to find and fix responsive design problems in a Svelte or Vue SPA is to run a visual inspection that captures screenshots and DOM data, generating a detailed report of layout issues to fix at the component level.

Related Skills

Explore More Design & Creative Skills→
githubgithub
37.6k

web-design-reviewer

Inspect web interfaces for layout, accessibility, and visual consistency issues.

Official
Intermediate
ThedouglerThedougler

web-design-reviewer

Inspect website design issues and fix source code across frameworks.

Community
Advanced
kindfi-orgkindfi-org
19

web-design-guidelines

Assess UI code against Web Interface Guidelines for accessibility and design issues.

Official
Intermediate
HiroyukiMakitaHiroyukiMakita

web-design-reviewer

Inspect website designs and fix responsive, accessibility, and layout issues in source code.

Community
Advanced