skills.rest
wixels
wixelsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Audit React, Next.js, and web UI code against Vercel Web Interface Guidelines.

Updated Apr 22, 2026
Search Tags:#accessibility#best-practices#web-design#ui-review#frontend-guidelines#ux-audit
One-click install
npx skills add https://github.com/wixels/sab-colour-profile --skill web-design-guidelines-wixels
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/wixels/sab-colour-profile/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/wixels/sab-colour-profile --skill web-design-guidelines-wixels

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Manually auditing web interfaces for compliance with accessibility, UX, and design best practices is time-consuming and prone to human error, especially as guidelines are updated regularly.

Core Features & Use Cases

  • Up-to-date guideline enforcement: Fetches the latest official Web Interface Guidelines from Vercel's public repository before each review to ensure checks align with current standards.
  • Targeted UI code review: Reviews specified web UI files against all relevant guidelines, flagging specific compliance gaps.
  • Use Case: A frontend developer building a Next.js e-commerce site can use this skill to audit their product page components for accessibility issues and UX inconsistencies before launch.

Quick Start

Use the web-design-guidelines skill to review the UI code in your app's components directory for compliance with current web 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 web UI code for accessibility and UX best practices?▼

You can audit web UI code by running an automated review against the latest official Vercel Web Interface Guidelines. This fetches current standards and outputs precise file and line-level compliance findings for React, Next.js, and general web UI components.

What is a UX audit for frontend development and how does it work?▼

A UX audit for frontend development reviews your web interface files against evolving accessibility and design best practices. It automatically fetches official Vercel guidelines and enforces them to flag specific compliance gaps in your codebase.

Can I use this to review React and Next.js components for compliance?▼

Yes, you can review React and Next.js components for compliance. The skill applies to frontend development workflows and audits your web UI files against current industry guidelines to identify accessibility issues and UX inconsistencies.

What's the best way to ensure my web interface follows current Vercel guidelines?▼

The best way to ensure your web interface follows current Vercel guidelines is to fetch the latest official standards directly from their public repository before each review, ensuring your UI code aligns with up-to-date accessibility and design best practices.

How do I get file and line-level findings for UI code remediation?▼

To get file and line-level findings for UI code remediation, review your specified web UI files against all relevant guidelines. The audit outputs precise compliance gaps mapped directly to your frontend code for targeted fixes.

Related Skills

Explore More Design & Creative Skills→
f0rr0f0rr0
45

web-design-guidelines

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

Community
Basic
kitaikuyo123kitaikuyo123

web-design-guidelines

Review web interface code for usability and accessibility compliance.

Community
Intermediate
thangvawnthangvawn

plankton-code-quality

Automate code quality enforcement with formatters, linters, and Claude subprocesses.

Community
Advanced
sao-codingsao-coding

web-design-guidelines

Fetch current Web Interface Guidelines and evaluate UI code compliance.

Community
Intermediate