web-design-guidelines-review

Audits UI code and diffs for compliance with shared design guidelines.

8|1|Updated Feb 14, 2026
One-click install
npx skills add https://github.com/mrclrchtr/skills --skill web-design-guidelines-review-mrclrchtr
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines-review
Source: https://github.com/mrclrchtr/skills/tree/main/plugins/web-design-guidelines/skills/web-design-guidelines-review
Command: npx skills add https://github.com/mrclrchtr/skills --skill web-design-guidelines-review-mrclrchtr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Audit UI code or diffs against a project's design system and style guidelines to surface concrete issues and inconsistencies that affect usability, accessibility, and visual fidelity.

Core Features & Use Cases

  • Findings-first UI review workflow focusing on interactions, accessibility, forms, motion, performance, and copy.
  • Applicable during code review or design review to ensure conformance with local design guidelines and design tokens.
  • Produces actionable remediation guidance grouped by affected files to accelerate fixes.

Quick Start

Run a UI diff against the local design system reference and generate an actionable findings report.

Frequently Asked Questions about web-design-guidelines-review

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

FAQPage Schema
How do I audit UI code against a local design system?

Audit UI code by comparing it against a local design system to surface concrete issues and inconsistencies. The process reviews interactions, accessibility, forms, motion, performance, and copy, outputting findings grouped by file and line with actionable remediation guidance.

What does a design review of frontend code diffs check for?

A design review of frontend diffs checks for conformance with local design guidelines and tokens. It focuses on interactions, accessibility, forms, motion, performance, and copy, producing actionable findings grouped by affected files to accelerate fixes.

Do I need a design-system map to review UI accessibility?

Yes, a design-system map located under references/core and references/frameworks is required. This style guide provides the necessary baseline to audit frontend projects for accessibility, interactions, and visual fidelity, generating clear remediation guidance.

Can I use a UI audit to check frontend forms and motion?

Yes, you can use a UI audit to check frontend forms and motion. The review workflow focuses on interactions, accessibility, forms, motion, performance, and copy, ensuring conformance with local design guidelines and surfacing concrete issues with actionable remediation steps.

What is the best way to surface visual inconsistencies during code review?

The best way to surface visual inconsistencies is running a findings-first UI review against local design guidelines. This produces actionable findings grouped by affected files and line numbers, providing clear remediation guidance to accelerate fixes.