web-design-guidelines

Audit frontend UI code against Web Interface Guidelines and accessibility standards.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill ensures that web interfaces adhere to established best practices for design, user experience, and accessibility, preventing common pitfalls and improving overall quality.

Core Features & Use Cases

  • Compliance Auditing: Checks UI code against a comprehensive set of web interface guidelines.
  • Accessibility Review: Identifies potential accessibility issues based on WCAG standards.
  • Design Best Practices: Verifies adherence to modern web design principles.
  • Use Case: You've just finished a new feature's UI. Use this Skill to audit the code and ensure it meets Vercel's high standards for performance, accessibility, and design before deployment.

Quick Start

Review the accessibility and design of the files matching the pattern src/components/**/*.tsx.

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 UI compliance and accessibility?

You can audit UI code by fetching the latest web interface guidelines from a specified URL and applying them to your provided files. This reviews your frontend codebase for accessibility and design best practices compliance.

What is a UI design audit for web interfaces?

A UI design audit reviews frontend codebases for adherence to established web interface guidelines. It identifies potential accessibility issues based on WCAG standards and verifies adherence to modern web design principles.

Can I check my React components for accessibility and design best practices?

Yes, you can check React components by applying web interface guidelines to file patterns such as `src/components/**/*.tsx`. This audits the UI code to ensure it meets high standards for performance, accessibility, and design.

Do I need a specific URL to review my UI code against web guidelines?

Yes, the UI review process requires fetching the latest web interface guidelines from a specified URL. These guidelines are then applied to your user-provided files or patterns to check for design and accessibility compliance.

What's the best way to ensure my web interface meets WCAG standards?

The best way to ensure WCAG compliance is to run a UI review that identifies potential accessibility issues based on these standards. This verifies your frontend codebase adheres to established web interface guidelines and design best practices.

When should I run a code compliance review for my web design?

Run a code compliance review after finishing a new feature's UI to ensure it meets established web interface guidelines before deployment. This prevents common design pitfalls and improves overall interface quality.