web-design-guidelines

Identify UI code deviations from Web Interface Guidelines and report fixes in file:line format.

23|5|Updated Nov 5, 2025

Search Tags:#ui #accessibility #guidelines #ux #web-design #frontend-review

Ready to run

npx skills add https://github.com/JStaRFilms/VibeCode-Protocol-Suite --skill web-design-guidelines-jstarfilms

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/JStaRFilms/VibeCode-Protocol-Suite/tree/main/assets/.agent/skills/web-design-guidelines
Command: npx skills add https://github.com/JStaRFilms/VibeCode-Protocol-Suite --skill web-design-guidelines-jstarfilms

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web Interface Guidelines review helps teams ensure UI code adheres to established accessibility, usability, and design standards, reducing UX gaps and rework.

Core Features & Use Cases

Fetch the latest Web Interface Guidelines and evaluate target UI files for conformance.
Audit UI patterns, components, and pages for accessibility, color contrast, keyboard navigation, and responsive design.
Use Case: When you receive a new design or open-source UI, run this skill to identify violations and compile a concise list of fixes.

Quick Start

Provide the UI files or patterns you want reviewed; the skill will fetch the latest guidelines and perform the conformance check.

Frequently Asked Questions about web-design-guidelines

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

FAQPage Schema

How do I audit frontend components for accessibility and UI conformance?▼

To audit UI for accessibility and design conformance, provide your frontend files and the skill fetches the latest Web Interface Guidelines, evaluating target pages against all rules to surface actionable fixes in a terse file:line format.

What UI design and usability gaps can an automated frontend review detect?▼

An automated frontend review detects UI code deviations from established guidelines, specifically identifying accessibility gaps, color contrast issues, keyboard navigation flaws, and responsive design problems across components and pages.

How do I check if a new open-source UI meets web design guidelines?▼

To check if a new open-source UI meets web design guidelines, provide the UI patterns for review and the skill fetches the latest standards to evaluate conformance and compile a concise list of fixes.

Does this UI accessibility audit require any specific dependencies or components?▼

No dependencies or components are required to run this UI accessibility audit; you simply provide the target UI files or patterns you want reviewed against the fetched Web Interface Guidelines.

What format does the accessibility conformance check use to report findings?▼

The accessibility conformance check reports findings in a terse file:line format, directly identifying UI code that deviates from the Web Interface Guidelines and surfacing actionable fixes.

When should I run a web interface guidelines review on my project?▼

Run a web interface guidelines review when you receive a new design or need to evaluate existing UI components, ensuring your code adheres to accessibility, usability, and visual standards to reduce UX gaps and rework.