web-design-guidelines

Fetch latest Web Interface Guidelines and review UI code for compliance.

Updated Feb 19, 2026

Search Tags:#design #ui #code review #accessibility #guidelines #ux

Ready to run

npx skills add https://github.com/acastillo9/budget --skill web-design-guidelines-acastillo9

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/acastillo9/budget/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/acastillo9/budget --skill web-design-guidelines-acastillo9

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

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

Core Features & Use Cases

Guideline Compliance: Fetches the latest web interface guidelines and checks provided files against them.
Automated Auditing: Identifies specific lines and files that violate design best practices.
Use Case: A developer can use this skill to quickly audit a new component's code for accessibility issues and adherence to the company's design system before merging it.

Quick Start

Use the web-design-guidelines skill to review the file 'src/components/Button.svelte'.

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 UI code for web design guideline compliance, this skill fetches the latest external rules and analyzes your specified files. It audits components line-by-line to identify specific violations of established UX and accessibility best practices.

What is the best way to audit a component for accessibility issues before merging?▼

The best way to audit a component for accessibility issues is to run an automated design check against your source files. This skill reviews UI code automatically, identifying exact lines that violate web interface guidelines and accessibility standards.

Can I review Svelte or Vue files for UX best practice verification?▼

Yes, you can review Svelte or Vue files for UX best practice verification by specifying the file path. The skill performs file analysis on the provided component code to ensure it meets web interface and accessibility guidelines.

Does this skill require fetching external guideline documents to perform a design audit?▼

Yes, this skill requires fetching external guideline documents to perform a design audit. It retrieves the latest web interface rules during execution to accurately verify that your UI code meets current accessibility and UX standards.

When do I need an automated UX best practice verification for my codebase?▼

You need automated UX best practice verification when you want to improve consistency and accessibility across your user interface. It is particularly useful for auditing new components to ensure they adhere to your company's design system before merging.

What limitations exist when reviewing UI code for web interface guidelines?▼

A limitation when reviewing UI code for web interface guidelines is that the skill relies entirely on fetching external rule documents. If external guidelines are unreachable, the automated auditing and accessibility checks cannot be performed on your files.