web-design-guidelines

Review UI code against web interface guidelines and output file:line findings.

1|Updated Feb 7, 2026
One-click install
npx skills add https://github.com/aarsh21/better-issues --skill web-design-guidelines-aarsh21
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/aarsh21/better-issues/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/aarsh21/better-issues --skill web-design-guidelines-aarsh21

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps ensure that web interface code adheres to established design and accessibility guidelines, preventing common UI/UX issues.

Core Features & Use Cases

  • Automated Code Review: Scans UI code against a comprehensive set of web interface guidelines.
  • Compliance Checking: Identifies violations related to accessibility, usability, and design best practices.
  • Use Case: A developer can use this skill to quickly audit a new component's code before merging to ensure it meets the project's design standards and accessibility requirements.

Quick Start

Review the UI code in the file 'src/components/Button.tsx' for guideline compliance.

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check my UI code for web design guideline compliance?▼

To check web design guideline compliance, run an automated code review that scans your UI files against established accessibility and usability rules, outputting violations in a terse file:line format.

What is automated UI code review for accessibility and UX?▼

Automated UI code review for accessibility and UX is a process that analyzes web interface code against fetched design guidelines to identify violations, preventing common usability and accessibility issues in web development projects.

Can I use a custom URL to fetch web interface guidelines for code review?▼

Yes, you can fetch web interface guidelines from a specified URL to review your UI code. This allows the code review to check against the latest project-specific design and accessibility standards dynamically.

How do I audit a web component for accessibility standards before merging?▼

You can audit a web component for accessibility standards by providing the component's file path for review. The system analyzes the provided files against all fetched web interface rules and outputs findings in a file:line format.

Does UI code review work without manually inputting file contents?▼

UI code review works by analyzing provided files directly or prompting the user for input. It fetches the latest web interface rules from a specified URL to ensure design consistency without requiring manual rule configuration.