web-design-guidelines

Audit UI code against Web Interface Guidelines and report violations.

11|2|Updated Jan 15, 2026
One-click install
npx skills add https://github.com/runkids/my-skills --skill web-design-guidelines-runkids
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/runkids/my-skills/tree/main/web-design-guidelines
Command: npx skills add https://github.com/runkids/my-skills --skill web-design-guidelines-runkids

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams verify that UI code complies with established Web Interface Guidelines, reducing design debt and accessibility gaps.

Core Features & Use Cases

  • Guideline-driven reviews: Automatically check UI code against up-to-date rules sourced from the official guidelines.
  • Accessibility & UX focus: Identify violations affecting accessibility, usability, and visual consistency.
  • Use Case: When you review a web project, run this Skill on the scene files to surface non-compliant components and suggested fixes.

Quick Start

When you provide a set of files or a pattern, the skill fetches the latest guidelines, evaluates the files, and reports findings in a terse file:line format according to the fetched rules.

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 compliance violations?

Web UI auditing checks your code against established guidelines to identify accessibility, UX, and compliance gaps. This Skill fetches the latest Web Interface Guidelines rules and scans your files to report violations in file:line format, helping teams reduce design debt and ensure adherence to standards.

Can I use web design guidelines to review my entire web project at once?

Yes. Provide file patterns or a directory, and the Skill applies guideline rules across all matched files in a single run, surfacing non-compliant components and suggested fixes across your entire web project.

What design violations does a web interface audit actually catch?

The audit identifies violations affecting accessibility, visual consistency, and usability by comparing your UI code against up-to-date Web Interface Guidelines rules. Results flag specific compliance gaps so teams can prioritize fixes.

How often are the web design guidelines updated in the audit rules?

The Skill fetches the latest rules from a remote source each time you run an audit, ensuring your reviews stay current with the most recent Web Interface Guidelines without manual updates.

Do I need to know the guidelines in advance to run a UI audit?

No. The Skill automatically retrieves the latest guidelines and applies them to your code, so you don't need prior knowledge of the rules—just provide your files and receive a compliance report.

What file types and web projects does guideline auditing support?

The Skill applies to web project files matching your specified pattern. It's designed for scene files and UI code review across standard web projects, though exact supported formats depend on your implementation setup.