skills.rest
zivtech
zivtechOFFICIAL
Explore all skills by this author →
WebsiteGitHub

web-design-critic

Evaluate website designs for usability, visual hierarchy, responsiveness, accessibility, and performance.

Updated Mar 5, 2026
Search Tags:#accessibility#responsive design#design system#usability#web design#ux audit
One-click install
npx skills add https://github.com/zivtech/joyus-desktop --skill web-design-critic
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-critic
Source: https://github.com/zivtech/joyus-desktop/tree/main/.claude/skills/web-design-critic
Command: npx skills add https://github.com/zivtech/joyus-desktop --skill web-design-critic

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This skill eliminates the uncertainty of design handoff by identifying responsive failures, accessibility gaps, and design-system inconsistencies before code is written.

Core Features & Use Cases

  • Viewport Verification: Audits designs across 375px, 768px, 1280px, and 1920px to ensure responsive integrity.
  • Compositional Review: Evaluates visual hierarchy, whitespace, and interaction states to ensure the design functions as a cohesive product.
  • Use Case: A designer needs to verify if a new landing page layout survives mobile viewports and adheres to existing design tokens before engineering begins implementation.

Quick Start

Use the web-design-critic skill to audit the current design artifact for responsive behavior and design-system alignment.

Frequently Asked Questions about web-design-critic

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

FAQPage Schema
How do I audit a web design for responsive failures and accessibility gaps before coding?▼

You can evaluate website and web application designs for usability, visual hierarchy, responsiveness, accessibility, and performance by operating on design artifacts and live web interfaces to provide evidence-backed findings across multiple viewports.

What viewports should I check to ensure responsive design integrity during a UX audit?▼

Responsive design integrity is verified by auditing designs across 375px, 768px, 1280px, and 1920px viewports to identify layout failures and ensure the design functions as a cohesive product across screen sizes.

Do I need Playwright, Figma, and Pencil MCP tools to perform a structural and visual analysis?▼

Yes, performing structural and visual analysis requires integration with Playwright, Figma, and Pencil MCP tools to evaluate design artifacts and live web interfaces effectively.

What is the best way to verify if a landing page layout adheres to existing design tokens?▼

The best way to verify design-system alignment is to conduct a compositional review that evaluates visual hierarchy, whitespace, interaction states, and design-system inconsistencies before engineering begins implementation.

How does a compositional review improve web design and usability?▼

A compositional review improves web design by evaluating visual hierarchy, whitespace, and interaction states to ensure the design functions as a cohesive product and eliminates design-system inconsistencies.

When do I need evidence-backed web design and UX auditing?▼

You need UX auditing when you want to eliminate the uncertainty of design handoff by identifying responsive failures, accessibility gaps, and design-system inconsistencies before code is written.

Related Skills

Explore More Design & Creative Skills→
gbasingbasin
7

figma-to-react

Convert Figma designs to React components with Tailwind CSS.

Community
Advanced
SChannarongSChannarong

frontend-design

Generate frontend code with accessibility, theming, and responsive behavior.

Community
Advanced
Hey-ViswaHey-Viswa

nvidia-design-skill

Integrates the Braille alphabet into the digital world.

Community
Advanced
manutejmanutej
1

playwright-visual-testing

Automate browser testing and visual regression analysis with Playwright.

Community
Advanced