web-design-guidelines

Review UI code for compliance with Web Interface Guidelines.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers ensure their web interface code adheres to established best practices and accessibility standards, preventing common design and usability issues.

Core Features & Use Cases

  • Automated Code Review: Scans UI code against a comprehensive set of web interface guidelines.
  • Compliance Checking: Verifies adherence to accessibility and design best practices.
  • Use Case: When you've finished building a new feature's UI, use this Skill to audit the code for compliance before deployment.

Quick Start

Use the web-design-guidelines skill to review the accessibility of the file 'src/components/Button.jsx'.

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 my UI code for web accessibility and design compliance?

Automated code review scans your UI code against established web interface guidelines to verify adherence to accessibility and design best practices. This auditing process checks front-end development workflows to ensure user interfaces meet compliance standards.

What does a web interface guidelines audit check for in front-end development?

A web interface guidelines audit checks front-end code for adherence to accessibility standards and design best practices. It reviews UI components against fetched guidelines to ensure established web standards are met, preventing common usability issues during front-end development.

How do I check a specific component file for accessibility and design best practices?

To check a specific component file for accessibility and design best practices, provide the file path to the code review tool. It fetches web interface guidelines and performs compliance checks on the provided UI file to identify standard violations.

Can I use a custom URL to fetch web design guidelines for my code review?

Yes, you can use a specified URL to fetch web design guidelines for your code review. The tool utilizes these fetched guidelines to perform compliance checks on your provided UI files or patterns, ensuring adherence to your specific established standards.

When should I run an accessibility and design compliance check on my UI code?

You should run an accessibility and design compliance check on your UI code when you have finished building a new feature's user interface. Auditing your front-end code before deployment ensures web standards are met and prevents common usability issues.