web-design-guidelines

Validate UI code against Web Interface Guidelines and report violations in file:line format.

4|Updated Jan 6, 2026
One-click install
npx skills add https://github.com/smart-village-solutions/sva-studio --skill web-design-guidelines-smart-village-solutions
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/smart-village-solutions/sva-studio/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/smart-village-solutions/sva-studio --skill web-design-guidelines-smart-village-solutions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams verify that UI code adheres to Web Interface Guidelines, catching accessibility gaps and inconsistencies before shipping.

Core Features & Use Cases

  • Fetch fresh guidelines from the official source.
  • Read specified UI files or patterns to review.
  • Validate code against the guidelines and report violations.
  • Use Case: QA teams running audits on web pages for accessibility compliance.

Quick Start

Provide the UI files you want reviewed and trigger the guideline-compliance 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 check my frontend code for UI accessibility compliance?

To check UI accessibility compliance, provide your frontend UI files or patterns to trigger a guideline-compliance review. The tool fetches up-to-date Web Interface Guidelines from a remote source, reads the specified files, and reports any accessibility or consistency violations in a terse file:line format.

Can I audit specific web pages for design consistency best practices?

Yes, you can audit specific web pages for design consistency by specifying the UI files or patterns you want reviewed. The tool validates your code against official Web Interface Guidelines, checking for accessibility gaps and best-practice violations before you ship.

Does this web design review tool work without any external dependencies?

Yes, the web design review tool works without any external dependencies or component installations. It only requires access to a remote source to fetch the latest Web Interface Guidelines, and then it reads your specified frontend files to report violations.

How are accessibility violations reported in a frontend codebase?

Accessibility violations are reported in a terse file:line format, pinpointing exact locations in your frontend codebase where UI code fails to meet Web Interface Guidelines. This allows QA teams to quickly locate and fix design inconsistencies and accessibility gaps.

When should I run a web interface guideline compliance check?

You should run a web interface guideline compliance check during QA audits before shipping, to catch accessibility gaps and UI inconsistencies in your frontend codebase. It is ideal for validating components and pages against the latest best-practices and accessibility standards.

What is the best way to enforce web interface guidelines across a frontend codebase?

The best way to enforce web interface guidelines is to run automated compliance checks that fetch fresh standards from an official source and validate your specified UI files. This catches accessibility gaps and design inconsistencies directly in your frontend codebase before shipping.