skills.rest
Mohamed-Elkahef
Mohamed-ElkahefCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Scan UI code files against Vercel Web Interface Guidelines and output file:line findings.

Updated Mar 5, 2026
Search Tags:#accessibility#frontend#best-practices#code-review#web-design#ui-review#ux-audit
One-click install
npx skills add https://github.com/Mohamed-Elkahef/test-project --skill web-design-guidelines-mohamed-elkahef
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Mohamed-Elkahef/test-project/tree/main/.claude/skills/web-design-guidelines
Command: npx skills add https://github.com/Mohamed-Elkahef/test-project --skill web-design-guidelines-mohamed-elkahef

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Manually checking web interfaces for accessibility, design, and UX compliance is time-consuming and prone to human error, especially as web best practice guidelines are frequently updated.

Core Features & Use Cases

  • Up-to-date Guideline Checks: Fetches the latest official Web Interface Guidelines from Vercel's public repository before every review to ensure checks align with current standards.
  • Targeted Code Audits: Scans user-specified UI code files to identify violations of accessibility, design consistency, and UX best practices.
  • Actionable Findings: Outputs clear, terse findings mapped to exact file and line numbers for fast remediation.
  • Use Case: A frontend developer can use this skill to quickly catch missing alt text for images, poor color contrast for text, or inconsistent button styling across a React component library before merging code.

Quick Start

Use the web-design-guidelines skill to review all files in the src/components directory for compliance with the latest web interface best practices.

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

Auditing frontend code for accessibility and UX best practices involves scanning UI files against the latest official Vercel Web Interface Guidelines. This process catches violations like missing alt text or poor color contrast and outputs exact file and line numbers for rapid remediation.

What is the best way to check React components for web design consistency before deployment?▼

Checking React components for web design consistency before deployment is best done by fetching current official web interface guidelines and scanning component files. This catches inconsistencies like poor button styling and maps them to exact line numbers for fast fixes.

Does this UI review process use the latest Vercel Web Interface Guidelines?▼

Yes, this UI review process fetches the latest official Web Interface Guidelines directly from Vercel's public repository before every scan. This ensures that all accessibility, design, and UX checks align with the most current standards.

How do I catch missing alt text and poor color contrast in my web interface code?▼

To catch missing alt text and poor color contrast in web interface code, run an automated UX audit against current best practices. This scans specified files and outputs terse findings mapped to exact file and line numbers for quick remediation.

Can I use this UX audit tool to review my entire src/components directory?▼

Yes, you can use this UX audit tool to review your entire src/components directory. Simply specify the directory path to scan all included UI code files for compliance with accessibility, design, and UX best practices.

What format do the code review findings follow for identified rule violations?▼

The code review findings for identified rule violations follow a terse file:line formatted output. This format maps each accessibility, design, or UX issue directly to its exact file and line number for rapid remediation.

Related Skills

Explore More Software Engineering Skills→
MattRibMattRib

web-design-guidelines

Identify UI code violating Web Interface Guidelines and report file:line findings.

Community
Basic
kimmyxpowkimmyxpow

web-design-guidelines

Audit UI code against Web Interface Guidelines and report violations in file:line format.

Community
Intermediate
DevXojeDevXoje

ui-components

Standardize UI component creation with atomic design and TypeScript guidelines.

Community
Basic
VoTruongDanhVoTruongDanh

web-design-guidelines

Review UI code for compliance with Web Interface Guidelines.

Community
Intermediate