web-design-reviewer

Inspect React and Tailwind CSS components for responsive and accessibility issues.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/chrisbruceus/URL-Streamer --skill web-design-reviewer-chrisbruceus
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-reviewer
Source: https://github.com/chrisbruceus/URL-Streamer/tree/main/.github/skills/web-design-reviewer
Command: npx skills add https://github.com/chrisbruceus/URL-Streamer --skill web-design-reviewer-chrisbruceus

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of visually inspecting and rectifying design issues in web applications, ensuring a polished and consistent user interface.

Core Features & Use Cases

  • Visual Inspection: Identifies layout, responsiveness, accessibility, and visual consistency problems.
  • Code-Level Fixes: Directly addresses issues by modifying React components and Tailwind CSS utility classes.
  • Use Case: A developer needs to ensure the new dashboard layout looks perfect on mobile, tablet, and desktop, and also functions correctly in dark mode. This Skill can guide the review and suggest specific Tailwind class adjustments.

Quick Start

Review the design of the login page at http://localhost:5173/login.

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 and fix responsive design issues in a React application?

To review responsive design in a React application, analyze component files to identify layout issues and apply Tailwind CSS utility classes to correct breakpoints and visual consistency across mobile, tablet, and desktop views.

How can I check my Tailwind CSS components for accessibility problems?

Checking Tailwind CSS components for accessibility involves visually inspecting React component files to identify issues and modifying Tailwind utility classes directly to ensure proper visual contrast, layout consistency, and compliance.

Does this visual inspection process work with React 19 and Vite build tools?

Yes, the visual inspection and design review process requires knowledge of React 19 and Vite build tools to accurately analyze component files and apply Tailwind CSS 4 utility classes for code-level corrections.

What is the best way to fix visual consistency issues in Tailwind CSS?

The best way to fix visual consistency issues in Tailwind CSS is by visually inspecting the React components to locate layout problems and directly modifying the Tailwind utility classes to enforce a polished user interface.

Can I automate dark mode corrections for my React dashboard layout?

You can address dark mode corrections for a React dashboard by visually inspecting the layout for inconsistencies and guiding specific Tailwind class adjustments to ensure the interface functions correctly across different display modes.

Why does my web design review require modifying React component files?

A web design review requires modifying React component files because the process operates by analyzing these files to pinpoint responsive and accessibility issues, directly applying Tailwind utility classes to implement the necessary fixes.