web-design-guidelines

Identify UI code conformance to Web Interface Guidelines and output compliance findings.

Updated Mar 30, 2026
One-click install
npx skills add https://github.com/Rushtu99/Codex-ReVamped --skill web-design-guidelines-rushtu99
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Rushtu99/Codex-ReVamped/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/Rushtu99/Codex-ReVamped --skill web-design-guidelines-rushtu99

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review UI code for conformance to established Web Interface Guidelines, helping teams catch accessibility and usability gaps early in the design process.

Core Features & Use Cases

  • Accessibility checks: verify color contrast, semantic HTML, keyboard navigation, ARIA usage, and screen-reader friendliness.
  • Design compliance: evaluate typography, spacing, visual hierarchy, and responsive behavior against guidelines.
  • Use Case: run a project directory to generate a report highlighting issues to remediate before release.

Quick Start

Run the UI review on your project files or a site pattern to receive an actionable accessibility and design-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 my UI code for accessibility and web design compliance?

To audit UI code for accessibility and design compliance, you can run a review on your project directory to generate a report. This process checks color contrast, semantic HTML, ARIA usage, and visual hierarchy, outputting concise findings in a file:line format for remediation.

What accessibility checks are included in a UI design review?

An accessibility design review typically includes verifying color contrast, semantic HTML, keyboard navigation, ARIA usage, and screen-reader friendliness. It also evaluates typography, spacing, visual hierarchy, and responsive behavior against established web interface guidelines.

Can I use automated web guidelines checks on a web app project directory?

Yes, you can run automated web guidelines checks on a web app project directory. The review fetches the latest guidelines, reads your target files or site patterns, and outputs concise compliance findings in a file:line format to highlight issues for remediation.

How do I find semantic HTML and ARIA usage issues in my web components?

To find semantic HTML and ARIA usage issues in web components, run a UI code review targeting your project files. The audit reads target files or patterns and outputs actionable compliance findings in a file:line format, surfacing accessibility gaps early.

Does this accessibility review work for websites and UI components across different projects?

Yes, this accessibility review is applicable to websites, web apps, and UI components across different projects. It reads target files or patterns to surface accessibility issues and design inconsistencies, generating an actionable report highlighting issues to remediate before release.

What is the best way to catch usability gaps early in the web design process?

The best way to catch usability gaps early in the web design process is to review UI code for conformance to established web interface guidelines. Running a project directory audit surfaces accessibility issues and design inconsistencies before release, providing concise file:line findings.