web-design-guidelines

Review UI code against Web Interface Guidelines for accessibility and best practices.

Updated Sep 7, 2025
One-click install
npx skills add https://github.com/BartekFo/my-dev-setup --skill web-design-guidelines-bartekfo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/BartekFo/my-dev-setup/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/BartekFo/my-dev-setup --skill web-design-guidelines-bartekfo

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 best practices, preventing common UI/UX issues before deployment.

Core Features & Use Cases

  • Automated Compliance Checks: Scans code files against a comprehensive set of web interface guidelines.
  • Error Reporting: Identifies specific lines and files that violate the guidelines.
  • Use Case: A developer can use this skill to audit a new component's code for accessibility and adherence to the company's design system before merging it.

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 check my UI code for accessibility and design system compliance?

To check UI code for accessibility and design compliance, you review front-end files against established web interface guidelines. This process identifies specific lines violating best practices, preventing common UI/UX issues before deployment.

What is automated UI code review for web development?

Automated UI code review for web development is the process of scanning source files against web interface guidelines. It reports specific errors and violations to ensure front-end components adhere to accessibility standards.

How do I audit front-end components for accessibility before merging code?

You audit front-end components for accessibility by applying fetched web interface guidelines to user-provided files or patterns. This flags specific code lines that violate UX best practices before merging code into the main branch.

Can I use custom web interface guidelines to review my UI code?

Yes, you can use custom web interface guidelines to review UI code by fetching the latest guidelines from a specified URL. The review process then applies these fetched rules directly to your provided front-end files and patterns.

What's the best way to prevent UI/UX issues in web development?

The best way to prevent UI/UX issues in web development is running automated compliance checks on UI code. Scanning source files against web interface guidelines catches accessibility and design system violations before deployment.

Why does my UI code review require fetching guidelines from a URL?

UI code review requires fetching guidelines from a URL to ensure checks apply the latest established web interface standards. This guarantees that accessibility and best practice audits are evaluated against the most current rules.