skills.rest
alexgutscher26
alexgutscher26COMMUNITY
Explore all skills by this author →
𝕏@snackforcodeGitHub

web-design-guidelines

Review UI code for compliance with Web Interface Guidelines and accessibility standards.

4|Updated Feb 8, 2026
Search Tags:#best practices#accessibility#ui review#web design#code audit#ux
One-click install
npx skills add https://github.com/alexgutscher26/ClawTrace --skill web-design-guidelines-alexgutscher26
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/alexgutscher26/ClawTrace/tree/main/.agent/skills/web-design-guidelines
Command: npx skills add https://github.com/alexgutscher26/ClawTrace --skill web-design-guidelines-alexgutscher26

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps ensure that web interfaces adhere to established design principles and best practices, improving user experience and accessibility.

Core Features & Use Cases

  • Compliance Review: Checks UI code against a comprehensive set of web interface guidelines.
  • Accessibility Audit: Identifies potential accessibility issues in the design.
  • Best Practice Enforcement: Ensures the UI follows performance and usability standards.
  • Use Case: After developing a new feature, use this Skill to audit the UI code for compliance with accessibility standards and Vercel's internal design guidelines before deployment.

Quick Start

Use the web-design-guidelines skill to review the accessibility of the file 'src/components/Button.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 my frontend codebase for UI compliance and accessibility?▼

To audit UI code for compliance, this review checks your frontend codebase against established web interface guidelines, identifying accessibility issues and enforcing best practices before deployment.

What does a UI code audit for web design best practices check for?▼

A UI code audit for web design best practices checks frontend files to ensure they adhere to established design principles, performance standards, and usability guidelines for improved user experience.

Can I review an individual component file like Button.tsx for accessibility issues?▼

Yes, you can review individual component files like Button.tsx for accessibility issues by specifying the file path, and the review will apply web interface guidelines directly to that target.

Do I need to fetch external guidelines to perform a UX review?▼

Yes, performing a UX review requires fetching external web interface guidelines, which are then applied to your specified frontend files or patterns to accurately assess compliance.

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

You should run a web design compliance check after developing a new feature, allowing you to audit the UI code for adherence to accessibility standards and design guidelines before deployment.

Related Skills

Explore More Design & Creative Skills→
devyan18devyan18

web-design-guidelines

Identify UI compliance issues with Web Interface Guidelines in file:line format.

Community
Intermediate
blackgirlbytesblackgirlbytes

audit-a11y

Audit React/Next.js components for WCAG 2.1 AA accessibility violations.

Community
Intermediate
laymouna7laymouna7

web-design-guidelines

Evaluate frontend source code against Web Interface Guidelines and accessibility standards.

Community
Intermediate
dachentdachent
18

frontend-design-codex

Validate frontend UI components through browser rendering and screenshot analysis.

Community
Advanced