web-design-guidelines

Audit HTML, CSS, and JavaScript files against Web Interface Guidelines.

1|Updated Feb 7, 2026
One-click install
npx skills add https://github.com/xvawl/template-nextjs --skill web-design-guidelines-xvawl
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/xvawl/template-nextjs/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/xvawl/template-nextjs --skill web-design-guidelines-xvawl

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

Core Features & Use Cases

  • Fetch latest guidelines from the source URL below
  • Read the specified files (or prompt user for files/pattern)
  • Check against all rules in the fetched guidelines
  • Output findings in the terse file:line format

Quick Start

Provide the files you want reviewed and let it fetch the latest guidelines, read the files, and report any violations.

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 my web UI code for accessibility and design compliance?

You can audit web UI code for accessibility by running a review process against established web interface guidelines. This checks your HTML, CSS, and JavaScript files to identify layout inconsistencies and accessibility violations, outputting results in a concise file:line format.

What is the best way to check my website against web design best practices?

Checking a website against web design best practices involves fetching the latest interface guidelines and applying them to your project files. This automated review identifies UI compliance issues across your HTML, CSS, and JavaScript assets, reporting exact file and line numbers for each violation.

Can I review HTML, CSS, and JavaScript files for UX compliance issues?

You can review HTML, CSS, and JavaScript files for UX compliance by fetching web interface guidelines and reading your target project assets. The review identifies accessibility issues, layout inconsistencies, and incorrect design token usage, outputting findings in a terse file:line format.

How do I get a concise report of accessibility violations in my frontend code?

You get a concise report of accessibility violations by running a UI compliance audit on your provided project files. This process checks your HTML, CSS, and JavaScript assets against fetched web interface guidelines and outputs all findings in a terse file:line format for quick navigation.

Does a UI compliance audit check for design token usage and layout consistency?

A UI compliance audit does check for design token usage and layout consistency. By applying web interface guidelines to your HTML, CSS, and JavaScript project files, the review identifies accessibility issues and design deviations, outputting all findings in a terse file:line format.