web-design-guidelines

Review UI code against current Web Interface Guidelines with file:line findings.

Updated Feb 22, 2026
One-click install
npx skills add https://github.com/JustinRoderick/skills --skill web-design-guidelines-justinroderick
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/JustinRoderick/skills/tree/main/.cursor/skills/web-design-guidelines
Command: npx skills add https://github.com/JustinRoderick/skills --skill web-design-guidelines-justinroderick

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams quickly check UI code against the latest Web Interface Guidelines so they can catch accessibility, usability, and design issues before release.

Core Features & Use Cases

  • Guideline-Based Review: Compares the provided UI files to the current Web Interface Guidelines fetched at review time.
  • Accessibility and UX Checks: Flags common issues in layouts, interactions, and interface behavior.
  • Practical Use Case: Use it when reviewing a component, page, or file pattern and you need concise file:line findings for design and frontend QA.

Quick Start

Use the web-design-guidelines skill to review the selected UI files against the latest guidelines.

Frequently Asked Questions about web-design-guidelines

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

FAQPage Schema
How do I audit frontend UI code for design and accessibility compliance?

To audit frontend UI code, review files against the latest Web Interface Guidelines to catch accessibility, usability, and layout issues, returning concise file:line findings for design QA.

What is a UI design audit and how does it check web accessibility?

A UI design audit compares frontend page and component files against current web guidelines, flagging interface behavior and accessibility issues to ensure compliance before release.

Can I review multiple frontend files or components for UX issues at once?

Yes, you can perform a design audit across one file or file patterns, reviewing multiple frontend components simultaneously to identify usability and accessibility findings.

When do I need to run a web guidelines compliance check on my UI?

Run a web guidelines compliance check when reviewing a component, page, or file pattern before release to quickly identify and resolve accessibility and UX design issues.

What format should I expect from an automated UI accessibility review?

An automated UI accessibility review returns terse file:line findings, pinpointing exact locations of design and frontend issues to streamline your QA workflow.