web-design-guidelines

Review UI code for compliance with Web Interface Guidelines.

Updated Dec 4, 2025

Search Tags:#ui #code review #accessibility #web design #guidelines #ux

Ready to run

npx skills add https://github.com/mjmmattoni98/recipe-hub --skill web-design-guidelines-mjmmattoni98

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps ensure that user interface code adheres to established web interface guidelines, improving consistency, accessibility, and overall user experience.

Core Features & Use Cases

UI Code Review: Analyzes provided files against a set of predefined web design and accessibility rules.
Compliance Checking: Identifies deviations from best practices in UI development.
Use Case: Before deploying a new feature, use this Skill to audit the UI code for accessibility issues and ensure it aligns with the company's design system.

Quick Start

Review the UI code in the 'src/components' directory for compliance with 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 review UI code for accessibility and web design compliance?▼

To review UI code for accessibility and web design compliance, you analyze your front-end files against predefined web interface guidelines to identify rule violations and design deviations.

What are web interface guidelines and why do I need them for front-end development?▼

Web interface guidelines are established standards for UI development ensuring consistency, accessibility, and quality assurance. You need them to prevent user experience issues and maintain design system adherence before deployment.

Can I check my existing component files for design system adherence?▼

Yes, you can check existing component files for design system adherence by specifying your source directory for analysis. The review process fetches external guidelines and flags UI code that violates accessibility best practices.

What's the best way to audit front-end code for accessibility issues before deployment?▼

The best way to audit front-end code for accessibility issues is running an automated compliance check against established web design rules. This identifies deviations from best practices and ensures alignment with your company's design system.

Does UI code review for web standards require any specific dependencies or frameworks?▼

UI code review for web standards does not require specific dependencies or frameworks. It operates by fetching external guidelines and analyzing your specified front-end files directly to detect accessibility and design violations.

When should I run a compliance check on my UI code?▼

You should run a compliance check on your UI code before deploying a new feature. This ensures the user interface meets accessibility standards and adheres to established web design guidelines during front-end development.