web-design-guidelines

Check UI files against Web Interface Guidelines and output file:line findings.

Updated Apr 14, 2026
One-click install
npx skills add https://github.com/daudaudinang/vibecode --skill web-design-guidelines-daudaudinang
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/daudaudinang/vibecode/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/daudaudinang/vibecode --skill web-design-guidelines-daudaudinang

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps designers and developers ensure UI code complies with current Web Interface Guidelines, reducing accessibility gaps and visual inconsistencies.

Core Features & Use Cases

  • Fetches the latest guidelines from the official source before reviews.
  • Reads target files or patterns provided by the user and evaluates them against the guidelines.
  • Outputs findings in a concise file:line format to guide rapid fixes.

Quick Start

Provide the UI files or patterns to review and let the agent fetch guidelines and return 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 accessibility compliance?

To audit UI code for accessibility, this Skill fetches the latest web interface guidelines, evaluates your target front-end files, and outputs accessibility findings in a concise file:line format for rapid fixes.

What is the best way to check front-end files against web design guidelines?

The best way to check front-end files is providing your UI file patterns to this Skill, which reads the target files, checks them against fetched web design guidelines, and returns a terse list of violations.

Can I use this for a design QA workflow on existing front-end projects?

Yes, you can use this Skill for design QA workflows on existing front-end projects by evaluating your code and assets against current web interface guidelines to identify visual inconsistencies and accessibility gaps.

Does this accessibility audit tool require any external dependencies?

No, this accessibility audit tool requires no external dependencies, allowing you to directly fetch guidelines, read target UI files, and output findings without needing additional environment setup.

How does the tool format accessibility review findings?

The tool formats accessibility review findings in a terse file:line format, directly mapping each guideline violation to its specific location in your UI code to guide rapid fixes.