web-design-guidelines

Compare UI files against Web Interface Guidelines and report non-conformities.

Updated Apr 18, 2026

Search Tags:#accessibility #frontend #usability #web-design #design-review #ui-guidelines

Ready to run

npx skills add https://github.com/rattamnoon/our-third-story --skill web-design-guidelines-rattamnoon

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/rattamnoon/our-third-story/tree/main/.cursor/skills/web-design-guidelines
Command: npx skills add https://github.com/rattamnoon/our-third-story --skill web-design-guidelines-rattamnoon

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams ensure UI code adheres to established Web Interface Guidelines, improving accessibility, consistency, and overall user experience.

Core Features & Use Cases

Guideline-driven reviews: Evaluate UI components, pages, and patterns against the latest guidelines and surface violations.
Accessibility checks: Identify color contrast, keyboard navigation, and semantic markup gaps to boost inclusivity.
Use Case: When auditing a new feature, run a guideline-based review to confirm compliance before release.

Quick Start

Provide the UI files or patterns to review, and the system will fetch the latest guidelines and return a concise compliance report.

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 interface guideline compliance?▼

To audit UI code for web interface guideline compliance, provide your UI files or patterns for review. The system fetches the latest guidelines, compares them against your code, and returns a concise compliance report identifying accessibility, usability, and consistency issues.

What is a guideline-driven UI review and how does it work?▼

A guideline-driven UI review evaluates your UI components, pages, and patterns against the latest Web Interface Guidelines. It fetches current rules, applies them to your provided files, and surfaces violations in a concise file:line style format to highlight non-conformities.

Can I use this to check frontend accessibility and usability gaps?▼

Yes, you can use this to check frontend accessibility and usability gaps. The review identifies color contrast issues, keyboard navigation problems, and semantic markup gaps to boost inclusivity and overall user experience in your UI components.

How do I identify UI non-conformities before a feature release?▼

To identify UI non-conformities before a feature release, run a guideline-based review on your new feature's UI files. The system applies current web interface guidelines to your code and reports accessibility, usability, and consistency violations in a concise format.

Does this web design review require any specific frontend frameworks or dependencies?▼

No specific frontend frameworks or dependencies are required. You simply provide the UI files or patterns you want to evaluate, and the system fetches the latest Web Interface Guidelines to compare against your code, making it compatible with any frontend stack.

What is the best way to find accessibility and consistency issues in UI components?▼

The best way to find accessibility and consistency issues in UI components is to run a guideline-driven review. By comparing your provided files against the latest Web Interface Guidelines, the system surfaces non-conformities and reports findings in a concise file:line style format.