web-design-guidelines

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

Updated Mar 25, 2026
One-click install
npx skills add https://github.com/Shaarav4795/ScholarFlow --skill web-design-guidelines-shaarav4795
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Shaarav4795/ScholarFlow/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/Shaarav4795/ScholarFlow --skill web-design-guidelines-shaarav4795

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review UI code for Web Interface Guidelines compliance.

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
  • Guidelines Source Fetch fresh guidelines before each review:
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md

Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.

Usage

When a user provides a file or pattern argument:

  • Fetch guidelines from the source URL above
  • Read the specified files
  • Apply all rules from the fetched guidelines
  • Output findings using the format specified in the guidelines

If no files specified, ask the user which files to review.

Quick Start

Provide the UI files or a pattern to review and trigger guideline fetch to begin the audit.

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 UI code for accessibility and best practices?▼

You can audit UI code by fetching the latest web interface guidelines, reading your specified files, and applying all rules to output findings in a terse file:line format.

What is the process for checking web design compliance against UX guidelines?▼

Checking web design compliance involves fetching fresh guidelines via WebFetch, reading the specified UI files, applying all rules, and emitting findings in the specified format.

Can I review specific files for web interface guideline violations?▼

Yes, you can review specific files by providing a file or pattern argument. If no files are specified, you will be prompted to indicate which files to review.

Does the UI accessibility audit require predefined rules or dependencies?▼

The UI accessibility audit has no dependencies and fetches fresh rules directly from a remote source URL before each review to ensure the latest guidelines are applied.

What format does the web design audit output for identified issues?▼

The web design audit outputs identified issues in a terse file:line format, strictly following the output format instructions contained within the fetched guidelines.

Why do I need to fetch guidelines before reviewing my UI code?▼

Fetching guidelines before reviewing UI code ensures the audit applies the most current web interface rules and output format instructions, preventing outdated accessibility checks.