web-design-guidelines

Identify UI elements violating Web Interface Guidelines in frontend codebases.

Updated Feb 6, 2026
One-click install
npx skills add https://github.com/aayushsharma141/new-cross-angle --skill web-design-guidelines-aayushsharma141
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/aayushsharma141/new-cross-angle/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/aayushsharma141/new-cross-angle --skill web-design-guidelines-aayushsharma141

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps ensure user interfaces comply with established web design principles and accessibility guidelines, reducing usability issues and redesign cycles.

Core Features & Use Cases

  • Automated guideline checks: Compare UI code against a living set of web design rules.
  • Accessibility validation: Identify contrast, semantic, and keyboard navigation gaps.
  • Consultation use-case: Use in design reviews to verify alignment with best practices.

Quick Start

Run a review on your UI codebase to check for guideline conformance.

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 frontend codebase for UI accessibility and conformance issues?

To audit a frontend codebase for UI accessibility and conformance, you can apply web design guidelines to your codebase, parsing files to identify UI elements that violate established rules and outputting findings in a standardized 'file:line' format.

What is a UI audit against web interface guidelines?

A UI audit against web interface guidelines is a process of parsing frontend code to identify UI elements that violate established web design principles, enabling automated checks for accessibility, consistency, and usability across different frameworks and components.

Does this UI audit work with any frontend framework or design system?

Yes, the UI audit is applicable to frontend codebases across various frameworks, components, and design systems, allowing you to identify semantic, contrast, and keyboard navigation gaps without framework-specific constraints.

How do I check my UI code for accessibility gaps like contrast and keyboard navigation?

You can check your UI code for accessibility gaps by running an automated guideline review that parses your files and applies rules to identify specific contrast, semantic, and keyboard navigation violations in a standardized format.

Can I use this for design reviews to verify alignment with best practices?

Yes, you can use this UI audit in design reviews to verify alignment with best practices, reducing usability issues and redesign cycles by comparing your UI code against a living set of web design rules.

What format do the UI guideline violation findings take?

The UI guideline violation findings are outputted in a standardized 'file:line' format, pinpointing exact locations in your frontend codebase where UI elements violate web interface guidelines for quick remediation.