web-design-guidelines

Review UI code files against fetched Web Interface Guidelines.

1|Updated Feb 28, 2026
One-click install
npx skills add https://github.com/locnbk2002/my-copilot --skill web-design-guidelines-locnbk2002
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/locnbk2002/my-copilot/tree/main/my-copilot-frontend/skills/web-design-guidelines
Command: npx skills add https://github.com/locnbk2002/my-copilot --skill web-design-guidelines-locnbk2002

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers ensure their user interface code adheres to established web interface guidelines, improving consistency, accessibility, and overall quality.

Core Features & Use Cases

  • Automated Code Review: Scans UI code files for compliance with a predefined set of web design and accessibility rules.
  • Guideline Fetching: Automatically retrieves the latest guidelines from a specified remote source before performing a review.
  • Use Case: Before merging a new UI component, run this Skill to audit its code against best practices for accessibility and design consistency.

Quick Start

Review the file 'src/components/Button.jsx' for compliance with web interface guidelines.

Frequently Asked Questions about web-design-guidelines

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

FAQPage Schema
How do I review UI code for accessibility and web design compliance?

Automated code review for UI code involves fetching the latest web interface guidelines from a remote URL and analyzing specified files against all fetched rules. This process outputs findings in a terse file:line format, identifying accessibility and design violations.

How do I audit frontend components against web interface guidelines before merging?

Auditing frontend components against web interface guidelines involves analyzing specified files or patterns fetched from a remote URL. This automated code audit outputs findings in a terse file:line format, identifying compliance issues before merging.

Can I use this to check specific UI files for accessibility rules?

Yes, you can check specific UI files for accessibility rules. The Skill analyzes specified files or patterns against all fetched web interface guidelines, outputting accessibility check findings in a terse file:line format for targeted code audits.

Does the code review process require external dependencies to fetch guidelines?

The code review process fetches the latest rules from a remote URL before performing a review. This ensures the automated code audit checks your UI code against the most current web interface guidelines without requiring local rule configuration.

What format does the automated code audit output for UI guideline violations?

The automated code audit outputs UI guideline violations in a terse file:line format. This format precisely identifies where your frontend code fails to meet web interface guidelines, making it easy to locate and fix accessibility and design system issues.

When should I run a web design guideline compliance check on my frontend code?

You should run a web design guideline compliance check before merging new UI components or during automated code audits. This ensures your frontend code meets web standards for accessibility and design system enforcement, preventing violations from reaching production.