web-design-guidelines

Review UI code against Web Interface Guidelines for accessibility and design compliance.

Updated Feb 11, 2026
One-click install
npx skills add https://github.com/lexand-dev/subtrack-monorepo --skill web-design-guidelines-lexand-dev
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/lexand-dev/subtrack-monorepo/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/lexand-dev/subtrack-monorepo --skill web-design-guidelines-lexand-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

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

Core Features & Use Cases

  • Automated Review: Scans UI code against a predefined set of best practices and accessibility standards.
  • Compliance Checking: Identifies deviations from guidelines, providing specific feedback for correction.
  • Use Case: A developer can use this skill to quickly audit a new component or a set of pages to ensure they meet the company's design system and accessibility requirements before deployment.

Quick Start

Use the web-design-guidelines skill to review the UI code in the 'src/components' directory.

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 UI code for compliance with web accessibility standards?

To audit UI code for web accessibility standards, you can use a tool that scans your files against established guidelines and identifies specific deviations. This skill fetches the latest guidelines from a specified URL and applies them to your provided components to ensure design best practices.

What is a UI design audit and how does it improve user experience?

A UI design audit is a review process that checks user interface code against predefined web interface guidelines. It improves user experience by identifying compliance issues with accessibility standards and providing specific feedback for correction before deployment.

Can I check my component's accessibility against a custom URL for web guidelines?

Yes, you can check component accessibility against custom web guidelines by fetching standards from a specified URL. The skill applies these fetched guidelines directly to your user-provided files or patterns to validate compliance.

How do I review files in my src directory for UX best practices?

You can review files in your src directory for UX best practices by targeting the directory path during the audit. The skill scans the UI code within the specified directory and validates it against fetched web interface guidelines.

What are the limitations of using an automated tool for code compliance checking?

The main limitation of automated code compliance checking is its dependency on fetching guidelines from an external URL and requiring user-provided files. It cannot evaluate visual rendering dynamically and relies strictly on static pattern matching against the established standards.