web-design-guidelines

Audit web interface code against Web Interface Guidelines and report violations in file:line format.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you quickly verify that a web interface follows an authoritative set of Web Interface Guidelines, reducing review cycles and preventing accessibility, UX, and implementation regressions.

Core Features & Use Cases

  • Rule-compliant audits: Fetches the latest official guideline rules and checks provided files against every rule.
  • Flexible inputs: Reviews specific files you name or patterns you provide, or asks which files to check when none are specified.
  • Terse reporting: Outputs findings in a consistent file:line format for fast triage.

Use Case: Before releasing a UI update, review the relevant frontend files to catch guideline violations early and focus developer fixes on the exact lines called out by the rules.

Quick Start

Ask the AI to review the pages and components you specify and return any guideline violations in file:line format.

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 code for web UI guideline compliance?

To audit frontend code for web UI guideline compliance, the Skill fetches the latest official Web Interface Guidelines and checks your specified files against every rule, outputting violations in a terse file:line format for fast triage.

What is a web interface compliance review and when do I need it?

A web interface compliance review verifies that your UI code follows authoritative guidelines. You need it during pre-release QA, ongoing maintenance, and regression detection to catch accessibility, UX, and implementation issues early.

How do I check specific files for accessibility and UI guideline violations?

Provide exact filenames or patterns to the Skill to check specific files for accessibility and UI guideline violations. If none are specified, it will ask which frontend components you want to review.

Can I use this for pre-release QA and regression detection on frontend changes?

Yes, you can use this for pre-release QA and regression detection on frontend changes. The Skill applies the latest web interface rules to your code to catch accessibility and UX regressions before release.

Does the web design audit report exact line numbers for frontend code issues?

Yes, the web design audit reports exact line numbers for frontend code issues. It emits all findings in a consistent file:line format, allowing developers to focus fixes directly on the exact lines called out by the rules.

What format are the UI guideline audit results reported in?

The UI guideline audit results are reported in an exact terse file:line format. This consistent output structure ensures fast triage and immediate developer focus on the specific lines violating the fetched web interface rules.