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.