skills.rest
aidanaden
aidanadenCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Identify UI design guideline violations in HTML, CSS, and JS files.

Updated Feb 17, 2026
Search Tags:#design#ui#accessibility#frontend#audit#review#web-guidelines
One-click install
npx skills add https://github.com/aidanaden/sg-food-guide --skill web-design-guidelines-aidanaden
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/aidanaden/sg-food-guide/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/aidanaden/sg-food-guide --skill web-design-guidelines-aidanaden

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps UI designers and developers ensure code complies with Web Interface Guidelines by fetching the latest rules, applying them to your files, and reporting violations.

Core Features & Use Cases

  • Fetch the latest Web Interface Guidelines and load them into context.
  • Read and evaluate HTML, CSS, and JavaScript files for guideline compliance.
  • Output findings in a terse file:line format with actionable remediation steps.
  • Use Case: Run a UI audit across a project or design system to surface accessibility and usability issues.

Quick Start

Provide the target UI files or patterns to review, and I will fetch the latest guidelines and report findings.

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 UI code for web design guideline violations?▼

To audit UI code for web design guideline violations, provide your HTML, CSS, and JavaScript files for evaluation. The tool fetches the latest Web Interface Guidelines, checks your code against them, and reports violations in a concise file:line format with actionable remediation steps.

What is the best way to check a component library for accessibility and usability issues?▼

The best way to check a component library for accessibility and usability issues is to run a UI audit that applies the latest Web Interface Guidelines to your files. This surfaces compliance problems across your design system and outputs specific remediation guidance.

Can I review front-end projects for UI compliance without manually checking every file?▼

Yes, you can review front-end projects for UI compliance by providing the target UI files or patterns. The evaluation automatically reads your HTML, CSS, and JavaScript files, applying Web Interface Guidelines to identify violations and deliver actionable findings.

Does the UI audit output include specific file locations and fix recommendations?▼

Yes, the UI audit output includes specific file locations and fix recommendations. Findings are delivered in a terse file:line format, ensuring you receive actionable remediation steps directly tied to the exact lines in your HTML, CSS, and JavaScript files.

What kind of files do I need to provide for a web interface guidelines review?▼

For a web interface guidelines review, you need to provide HTML, CSS, and JavaScript files from your front-end project, design system, or component library. These files are read and evaluated to identify guideline compliance issues.

Related Skills

Explore More Design & Creative Skills→
adryanevadryanev
2

web-design-guidelines

Audit HTML, CSS, and JavaScript files for Web Interface Guidelines violations.

Community
Intermediate
Khoatran1999Khoatran1999

web-design-guidelines

Identify UI code violations against Web Interface Guidelines and propose remediation steps.

Community
Intermediate
BozhidarN7BozhidarN7

web-design-guidelines

Review web UI code against current Vercel interface guidelines and accessibility standards.

Community
Intermediate
HouseofmvpsHouseofmvps
115

a11y

Detect and fix deterministic WCAG 2.2 A/AA accessibility violations in HTML files.

Community
Advanced