web-design-guidelines

Identify UI code violations against Web Interface Guidelines in file:line format.

Updated Feb 27, 2026
One-click install
npx skills add https://github.com/pau-vega/react-router-drizzle --skill web-design-guidelines-pau-vega
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/pau-vega/react-router-drizzle/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/pau-vega/react-router-drizzle --skill web-design-guidelines-pau-vega

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This tool helps teams ensure UI code adheres to Web Interface Guidelines, catching accessibility, consistency, and UX issues early.

Core Features & Use Cases

  • Guideline Conformance Scanning: Compare code against the latest published guidelines.
  • File-Based Reviews: Read user-specified files or patterns and surface violations.
  • Actionable Output: Deliver concise results in a file:line style for quick remediation.
  • Use cases include pre-release UI audits, accessibility checks, and UX compliance reviews across projects.

Quick Start

Review the latest UI files against the guidelines and report any violations.

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 my UI code for accessibility and UX compliance?

Auditing UI code for accessibility and UX compliance involves scanning your code repositories against the latest Web Interface Guidelines. The tool checks specified file patterns to identify violations in accessibility, UX consistency, and design best practices.

What is the best way to check web interface guidelines conformance in a repository?

Checking web interface guidelines conformance involves fetching the latest rules and applying them directly to your codebase. This tool fetches rules from the web-interface-guidelines source and outputs concise findings in a file:line format for quick remediation.

Can I run an accessibility check on specific file patterns instead of the whole project?

Yes, you can run an accessibility check on specific file patterns. The tool reads user-specified files or patterns within your code repository and surfaces any UI code violations against the design guidelines exclusively for those targeted areas.

How does the file:line format output help with UI design audits?

The file:line format output helps with UI design audits by delivering concise, actionable results that point directly to the exact location of accessibility and UX violations in your code. This format allows for quick identification and remediation of issues.

Do I need any dependencies to scan my codebase for UX consistency issues?

No dependencies are required to scan your codebase for UX consistency issues. The tool operates independently to fetch the latest guidelines and apply checks directly to your repository files, requiring no additional environment setup or modules.