web-design-guidelines

Compare UI code against the latest Web Interface Guidelines and report non-compliance.

20|3|Updated Nov 30, 2025

Search Tags:#ui #accessibility #audit #guidelines #web-design #design-review

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/andrelandgraf/fullstackrecipes/tree/main/templates/fullstackrecipe/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/andrelandgraf/fullstackrecipes --skill web-design-guidelines-andrelandgraf

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure UI code aligns with Web Interface Guidelines, reducing accessibility issues and usability gaps across dashboards, forms, and components.

Core Features & Use Cases

Guideline-driven Review: evaluates UI code against current web guidelines to surface accessibility, contrast, semantic structure, and responsive issues.
Audit & Reporting: generates a concise compliance report with actionable fixes, prioritized by impact.
Use Case: when asked to "review my UI" or "check accessibility," run an automatic guideline-based audit across project files and present findings.

Quick Start

Provide the path to the UI files you want reviewed, and the Skill will fetch guidelines and return compliance 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 UI code for web accessibility compliance?▼

To audit UI code for web accessibility compliance, provide the path to your HTML, CSS, or JavaScript files. The review fetches current Web Interface Guidelines and reports non-compliant findings in a file:line format.

How do I check my web design for visual conformity and semantic structure issues?▼

Checking web design for visual conformity and semantic structure involves comparing UI components against Web Interface Guidelines. The audit evaluates code to surface contrast, responsive, and semantic issues prioritized by impact.

Does this guideline-based UI review work with standard HTML, CSS, and JavaScript projects?▼

Yes, this guideline-based UI review works with standard HTML, CSS, and JavaScript projects. It evaluates web projects, design systems, and UI components to identify accessibility and usability gaps.

What is the best way to run an accessibility audit on my design system components?▼

The best way to run an accessibility audit on design system components is requesting a UI review. The process fetches fresh guidelines before each review, applies all rules, and generates a concise compliance report with actionable fixes.

How do I review my web interface for usability gaps and UX issues?▼

Reviewing web interfaces for usability gaps and UX issues requires comparing UI code to Web Interface Guidelines. The audit surfaces accessibility, contrast, and responsive problems, presenting findings in a precise file:line format.