web-design-guidelines

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

Updated May 28, 2026

Search Tags:#accessibility #frontend #ui review #design guidelines #ux audit #web interface

Ready to run

npx skills add https://github.com/haryelramalho/skills --skill web-design-guidelines-haryelramalho

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/haryelramalho/skills/tree/main/skills/community/web-design-guidelines
Command: npx skills add https://github.com/haryelramalho/skills --skill web-design-guidelines-haryelramalho

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams review web user interfaces against a shared set of design and accessibility guidelines, reducing inconsistent visuals, usability issues, and missed best-practice checks before release.

Core Features & Use Cases

Guideline-based Review: Checks provided files against the latest web interface rules fetched from the official source.
Focused UI Audits: Supports review of specific files or patterns so you can target components, pages, or frontend changes.
Actionable Reporting: Returns findings in a terse file-and-line format that is easy to triage during code review.
Use Case: A frontend engineer can run this Skill on a changed page and quickly identify accessibility, UX, and layout issues that need fixes.

Quick Start

Ask the Skill to review the specified UI files or file pattern against the latest web interface guidelines.

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 frontend code for web interface design compliance?▼

Auditing frontend code for web interface design compliance involves reviewing specified files or patterns against fetched design guidelines. The tool returns accessibility and UX findings in a terse file:line format for quick triage during code review.

What is a UI UX audit and how does it check accessibility?▼

A UI UX audit evaluates web interface code against established design and accessibility best practices. It fetches the latest guideline source to validate layouts, reduce inconsistent visuals, and identify usability issues before release.

Can I review specific files or patterns for accessibility issues?▼

Yes, you can review specific files or patterns for accessibility issues. This focused UI audit allows you to target individual components, pages, or frontend changes rather than scanning the entire project blindly.

How are UI review findings formatted for code review triage?▼

UI review findings are returned in a terse file-and-line format. This actionable reporting style makes it easy to triage accessibility, layout, and UX issues directly during your standard code review process.

Do I need to manually update design guidelines before checking my frontend?▼

No, you do not need to manually update design guidelines before checking your frontend. The tool automatically fetches the latest web interface guideline source before each review to ensure your UI code is always validated against current rules.

What's the best way to prevent inconsistent visuals in web interfaces?▼

The best way to prevent inconsistent visuals in web interfaces is to run automated guideline-based reviews on changed pages. This validates design best-practices and catches missed UX checks before release.