skills.rest
thyde
thydeCOMMUNITY
Explore all skills by this author →
GitHub

web-design-reviewer

Inspect web interfaces for responsive design, Tailwind CSS, and WCAG 2.1 AA accessibility.

Updated Nov 2, 2025
Search Tags:#accessibility#responsive design#qa#shadcn/ui#tailwind css#web design#visual inspection
One-click install
npx skills add https://github.com/thyde/LucidData --skill web-design-reviewer-thyde
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-reviewer
Source: https://github.com/thyde/LucidData/tree/main/.claude/skills/web-design-reviewer
Command: npx skills add https://github.com/thyde/LucidData --skill web-design-reviewer-thyde

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses the challenge of ensuring visual consistency, responsiveness, and accessibility across web interfaces, preventing design flaws and improving user experience.

Core Features & Use Cases

  • Visual QA: Conducts thorough visual inspections of web interfaces, checking for layout issues, responsiveness, and adherence to design systems.
  • Component Validation: Verifies the correct implementation and styling of UI components, particularly those built with Tailwind CSS and shadcn/ui.
  • Accessibility Testing: Assesses compliance with WCAG 2.1 AA standards, identifying contrast, focus, and ARIA-related issues.
  • Use Case: A developer needs to ensure a new dashboard page looks and functions correctly on mobile, tablet, and desktop devices, while also meeting accessibility standards before deployment.

Quick Start

Use the web-design-reviewer skill to visually inspect the dashboard page on a mobile viewport.

Frequently Asked Questions about web-design-reviewer

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

FAQPage Schema
How do I automate visual inspection and design QA for web interfaces?▼

Automate visual inspection by capturing screenshots of web interfaces and analyzing them for layout issues, responsiveness, and adherence to design systems to ensure pixel-perfect web designs.

Can I test WCAG 2.1 AA accessibility compliance and Tailwind CSS consistency automatically?▼

Yes, you can assess WCAG 2.1 AA accessibility compliance by identifying contrast, focus, and ARIA issues, while simultaneously verifying Tailwind CSS consistency and shadcn/ui component styling.

How do I check responsive design across mobile and desktop viewports for Next.js applications?▼

Check responsive design across mobile, tablet, and desktop viewports by automating screenshot capture and analysis specifically supporting development workflows for Next.js applications.

What is the best way to validate shadcn/ui component implementation during web development?▼

The best way to validate shadcn/ui component implementation is through component validation that verifies correct implementation, styling, and adherence to your design system during visual QA.

Does this visual inspection approach work with Next.js applications?▼

Yes, this visual inspection and accessibility testing approach supports development workflows for Next.js applications, automating screenshot capture to document issues across multiple device viewports.

Related Skills

Explore More Software Engineering Skills→
NealSTNealST
1

screenshotting-apps

Generate annotated screenshot documentation for web applications by injecting SVG overlays onto UI elements.

Community
Intermediate
stephanjstephanj
9

design-system-starter

Create design systems with design tokens, atomic components, and WCAG 2.1 AA compliance.

Community
Advanced
antony-jipantony-jip

ckm:ui-styling

Create responsive user interfaces with shadcn/ui components and Tailwind CSS.

Community
Advanced
aroidoaroido

accessibility-audit

Audit web components for WCAG 2.1 AA accessibility issues.

Official
Intermediate