skills.rest
mohamedhabibwork
mohamedhabibworkCOMMUNITY
Explore all skills by this author →
Website𝕏@mohamedhabib70GitHub

web-design-guidelines

Audit UI code against Web Interface Guidelines and output file:line findings.

Updated Apr 7, 2026
Search Tags:#accessibility#usability#standards#guidelines#code-review#web-design#ui-review
One-click install
npx skills add https://github.com/mohamedhabibwork/ticket-app --skill web-design-guidelines-mohamedhabibwork
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/mohamedhabibwork/ticket-app/tree/main/.windsurf/skills/web-design-guidelines
Command: npx skills add https://github.com/mohamedhabibwork/ticket-app --skill web-design-guidelines-mohamedhabibwork

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review UI code for compliance with the Web Interface Guidelines to help teams identify accessibility, consistency, and usability gaps before release.

Core Features & Use Cases

  • Fetch the latest guidelines from the official source.
  • Read the specified files or patterns from the project.
  • Validate against all rules and output findings in a concise file:line format.
  • Use Case: Audit a web UI repository, component library, or design system to enforce accessibility and UX standards.

Quick Start

Provide the UI codebase or file patterns you want reviewed, and receive guideline-aligned findings.

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 web project for accessibility and usability compliance?▼

You can check UI code for accessibility and usability standards by fetching the latest Web Interface Guidelines and validating your project files against every rule. It outputs concise findings in a file:line format to highlight exact compliance gaps.

What is a UI code review for web design guidelines?▼

A UI code review for web design guidelines is an automated validation process that reads project files and checks them against official accessibility and UX standards. It identifies consistency and usability gaps before release.

Can I use this to review a component library or design system?▼

Yes, you can review a component library or design system by providing its file patterns for validation. The review checks every rule against your UI code to enforce accessibility and UX standards across shared components.

How do I enforce web accessibility standards in my codebase?▼

You can enforce web accessibility standards in your codebase by running an automated guideline audit over your specified files. The audit fetches current rules, checks your code, and outputs precise findings to fix compliance issues.

What format do accessibility code review findings use?▼

Accessibility code review findings use a concise file:line format. This structure pinpoints exactly where your UI code violates Web Interface Guidelines, making it straightforward to locate and resolve accessibility or usability issues.

Related Skills

Explore More Design & Creative Skills→
IdkwhatImD0ingIdkwhatImD0ing

web-design-guidelines

Review UI code against Web Interface Guidelines and report file:line findings.

Community
Intermediate
joe-watkinsjoe-watkins
1

a11y-validator

Re-run accessibility tests and verify acceptance criteria against magentaa11y-mcp.

Community
Intermediate
lyzno1lyzno1
1

web-design-guidelines

Audit UI code against current Web Interface Guidelines for accessibility and consistency.

Community
Basic
logo-solutionslogo-solutions

browser-testing-with-devtools

Inspect live DOM, console, network, and performance state in Chromium-based browsers.

Official
Advanced