web-design-guidelines

Analyze UI code against Web Interface Guidelines and output a compliance report.

1|Updated Aug 2, 2025
One-click install
npx skills add https://github.com/YanBerdin/rougecardinalcompany --skill web-design-guidelines-yanberdin
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/YanBerdin/rougecardinalcompany/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/YanBerdin/rougecardinalcompany --skill web-design-guidelines-yanberdin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Help teams ensure UI code and components comply with established Web Interface Guidelines, reducing accessibility issues and visual inconsistencies.

Core Features & Use Cases

  • Lint and audit frontend assets against the latest design guidelines.
  • Validate accessibility, contrast, keyboard navigation, and semantic structure.
  • Use Case: a designer asks to audit a new page to ensure it meets color contrast and focus management requirements.

Quick Start

Provide the target UI files or patterns to review and run the check.

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 UI code for web design guidelines compliance?

To audit UI code for web design guidelines compliance, provide target frontend files or patterns to the Skill. It analyzes the code against established Web Interface Guidelines and outputs a concise compliance report in a terse file:line format.

Can I check accessibility and color contrast requirements in frontend components?

Yes, you can check accessibility and color contrast requirements in frontend components. The Skill validates contrast, keyboard navigation, and semantic structure to reduce accessibility issues and visual inconsistencies across pages and patterns.

What is the best way to lint frontend assets against design guidelines?

The best way to lint frontend assets against design guidelines is to run the Skill on your target UI files. It verifies alignment with the latest Web Interface Guidelines and produces a concise compliance report detailing any issues found.

Does the web design guidelines review require any dependencies or components?

No, the web design guidelines review does not require any dependencies or components. You only need to provide the target UI files or patterns to review and ensure access to updated UI guidelines sources for accurate compliance checking.

What format does the compliance report use for UI code review results?

The compliance report for UI code review results uses a terse file:line format. This concise output style ensures you can quickly identify exactly where in your frontend components or pages the Web Interface Guidelines are not met.