web-design-guidelines

Review web UI source files against current Vercel Web Interface Guidelines.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you catch UI, accessibility, and UX guideline issues early so your web interface matches best practices and is easier for users to navigate.

Core Features & Use Cases

  • Guideline-based UI review: Checks your provided files against the latest Web Interface Guidelines rules fetched at review time.
  • Focused developer-friendly output: Reports issues in the required terse file:line format for fast fixes.
  • Common audit scenarios: Use it when you need to review a UI, check accessibility, audit design/UX, or verify a site against current standards.

Quick Start

Ask the Skill to review your React/HTML/CSS files by providing a path or pattern, for example: “Review the files matching src//*.tsx and src//*.css for Web Interface Guidelines compliance.”

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 files for accessibility and design best practices?

To audit web UI files for accessibility and design best practices, provide a file path or pattern like `src/**/*.tsx` to the Skill. It fetches the latest Vercel Web Interface Guidelines and checks your code against those rules, outputting issues in a terse file:line format for quick fixes.

What is a UX audit against web interface guidelines and when do I need one?

A UX audit against web interface guidelines is a rule-based review of your UI source code to catch accessibility and design compliance issues. You need one during development and code review cycles to ensure your interface matches current standards before deployment.

Can I review React and CSS files together for web interface compliance?

Yes, you can review React and CSS files together for web interface compliance by providing a matching pattern such as `src/**/*.tsx and src/**/*.css`. The Skill analyzes all targeted files against the fetched guideline rules and reports any violations found.

What's the best way to check HTML and React components for accessibility issues during development?

The best way to check HTML and React components for accessibility issues is running an automated rule-based audit that fetches current web interface guidelines. This catches UI and UX problems early, outputting precise file and line references for fast developer fixes.

Does the UI code audit output include specific line numbers for fixing accessibility issues?

Yes, the UI code audit output includes specific line numbers. It formats all accessibility, UX, and design guideline violations in a terse file:line syntax, allowing developers to locate and fix the exact source of each compliance issue quickly.

What are the limitations of using automated guideline checks for web UI accessibility?

Automated guideline checks for web UI accessibility require a specific file or pattern input to function and cannot evaluate runtime visual rendering or dynamic user interactions. They are limited to static source code analysis against the fetched Vercel Web Interface Guidelines rule set.