web-design-guidelines

Audit UI code against Web Interface Guidelines and output file:line findings.

3|Updated Jan 25, 2026
One-click install
npx skills add https://github.com/dongitran/ai-agent-config --skill web-design-guidelines-dongitran
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/dongitran/ai-agent-config/tree/main/.agent/skills/web-design-guidelines
Command: npx skills add https://github.com/dongitran/ai-agent-config --skill web-design-guidelines-dongitran

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams ensure UI code adheres to the latest Web Interface Guidelines by evaluating files against up-to-date rules and surfacing violations to speed fixes.

Core Features & Use Cases

  • Guidelines-driven review: fetches the latest rules from the official source, reads target UI files, and checks conformance.
  • Actionable findings: reports issues in a concise, line-based format suitable for quick remediation.
  • Use Case: When integrating a design system or auditing accessibility, contrast, and navigation consistency across a UI library, review your codebase to ensure alignment with guidelines.

Quick Start

To review a UI set, provide a file path or pattern and the skill will fetch rules from the guidelines URL, apply them to the specified files, and return a terse file:line report.

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 interface guidelines compliance?

To audit UI code for web interface guidelines compliance, provide a file path or pattern. The tool fetches the latest rules from a remote source, reads the target frontend files, and outputs concise findings in a terse file:line format for quick remediation.

What is a design review for accessibility and UI consistency?

A design review for accessibility and UI consistency checks frontend HTML, CSS, and JS assets against up-to-date rules. It evaluates components to ensure alignment with web interface guidelines, surfacing violations to speed up fixes and improve navigation.

Can I review specific frontend files for accessibility and contrast issues?

Yes, you can review specific frontend files for accessibility and contrast issues by providing a target file path or pattern. The tool reads the specified UI components and assets, applying the fetched guidelines to check conformance and report actionable findings.

Does the UI lint process work with HTML, CSS, and JS assets?

The UI lint process works with frontend projects containing UI components and HTML, CSS, and JS assets. It reads the target files specified by the user and evaluates them against the latest web interface guidelines fetched from a remote source.

What is the best way to report UI guideline violations for quick fixes?

The best way to report UI guideline violations for quick fixes is using a terse file:line format. This design review approach outputs concise, actionable findings that pinpoint exact locations in the codebase, enabling developers to speed up remediation.

When do I need to run a web design guidelines audit on my codebase?

You need to run a web design guidelines audit when integrating a design system or auditing accessibility, contrast, and navigation consistency across a UI library. It ensures your frontend codebase adheres to the latest rules and surfaces violations for remediation.