skills.rest
ivanrvpereira
ivanrvpereiraCOMMUNITY
Explore all skills by this author →
𝕏@ivanrvpereiraGitHub

web-design-guidelines

Audit UI code files against Web Interface Guidelines for accessibility violations in file:line format.

17|Updated Feb 19, 2026
Search Tags:#accessibility#ui review#guidelines#code compliance#ux audit#web best practices
One-click install
npx skills add https://github.com/ivanrvpereira/.agents --skill web-design-guidelines-ivanrvpereira
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/ivanrvpereira/.agents/tree/main/skills/web-design-guidelines
Command: npx skills add https://github.com/ivanrvpereira/.agents --skill web-design-guidelines-ivanrvpereira

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps you catch UI and accessibility issues early by checking your interface code against the Web Interface Guidelines.

Core Features & Use Cases

  • Guideline-driven audits: Fetches the latest Web Interface Guidelines before each run and applies every rule to your target files.
  • Targeted file or pattern review: Reviews specific files you provide or prompts you when no inputs are given.
  • Actionable, terse findings: Reports violations in the required terse file:line format for quick fixes and reviews.

Quick Start

Ask the agent to review your UI by providing the files or a glob pattern you want checked, such as "Review my React components in src/components/**/*.{ts,tsx,js,jsx} 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 UI code for accessibility and best practices?▼

To audit your UI code for accessibility, provide specific files or glob patterns to review against the Web Interface Guidelines. The agent fetches the latest rules and reports violations in a terse file:line format for quick fixes.

What is a UX compliance review and how does it check web best practices?▼

A UX compliance review checks your interface code against established web best practices by fetching the latest Web Interface Guidelines. It identifies accessibility and design violations, outputting findings in a mandated file:line format for immediate remediation.

Can I review React components for accessibility using a glob pattern?▼

Yes, you can review React components by providing a glob pattern like src/components/**/*.{ts,tsx,js,jsx} to the agent. It reads the specified code files and applies every Web Interface Guidelines rule to find accessibility and best-practice violations.

Does the UI review require fetching external rules every time?▼

Yes, the UI review fetches the latest command.md rules from the Vercel Web Interface Guidelines repository before each run. This ensures all accessibility and best-practice audits apply the most current standards to your target files.

What format are accessibility violations reported in during a code compliance check?▼

Accessibility violations are reported in a terse file:line format. This actionable output style ensures quick fixes and straightforward reviews when checking your interface code against the Web Interface Guidelines.

Related Skills

Explore More Design & Creative Skills→
not-aninot-ani

web-design-guidelines

Compare web component code against Web Interface Guidelines and report issues in file:line format.

Community
Advanced
agoudbgagoudbg
7

web-design-guidelines

Audits selected files for UI accessibility and design-rule violations.

Community
Intermediate
thec3ukthec3uk

Global Tech Stack

Enforce global tech stack standards across code files during generation, review, and refactoring.

Official
Basic
murphyjosephmurphyjoseph

web-design-guidelines

Audit UI code against official web interface guidelines and accessibility standards.

Community
Intermediate