skills.rest
aberrantCode
aberrantCodeCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Audit UI code against Vercel's Web Interface Guidelines with file:line findings.

1|Updated Feb 26, 2026
Search Tags:#design#ui#accessibility#audit#guidelines#web
One-click install
npx skills add https://github.com/aberrantCode/llm_skills --skill web-design-guidelines-aberrantcode
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/aberrantCode/llm_skills/tree/main/claude/skills/web-design-guidelines
Command: npx skills add https://github.com/aberrantCode/llm_skills --skill web-design-guidelines-aberrantcode

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many developers need to ensure their UI code complies with the latest Vercel Web Interface Guidelines for accessibility, design consistency, and best practices, but manually checking each file is time‑consuming and error‑prone.

Core Features & Use Cases

  • Live Guidelines Fetch: Retrieves the most current rules from the official Vercel repository before each review.
  • Pattern‑Based File Scanning: Accepts a file path or glob pattern to target specific components, pages, or whole projects.
  • Terse Findings Output: Returns violations in a concise file:line format suitable for automated pipelines or quick developer feedback. Typical use cases include pre‑pull‑request UI audits, CI/CD accessibility checks, and rapid design system compliance reviews.

Quick Start

Ask the skill to review all TypeScript UI files in the src directory for compliance with the web design guidelines.

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 Vercel web interface guidelines compliance?▼

You can audit UI code for Vercel web interface guidelines compliance by providing a file path or glob pattern. The tool fetches the latest rules at runtime and outputs concise file:line accessibility and design violations.

What are Vercel web interface guidelines and why do I need to check my project against them?▼

Vercel web interface guidelines are rules for accessibility, design consistency, and best practices. You need to check your project against them to ensure UI compliance, preventing manual checking errors and time-consuming reviews across web files.

Can I use glob patterns to scan specific components for accessibility and design rule violations?▼

Yes, you can use glob patterns to scan specific components for accessibility and design rule violations. Pattern-based file scanning accepts targets like TypeScript UI files in a directory for rapid design system compliance reviews.

Does the tool store local copies of the design rules or fetch them at runtime?▼

The tool does not store local copies of design rules; it fetches the most current rules from the official Vercel repository at runtime. This live guidelines fetch ensures reviews always apply the latest accessibility and design standards.

What is the best way to automate pre-pull-request UI audits for a web project?▼

The best way to automate pre-pull-request UI audits is using a tool that outputs terse file:line findings suitable for automated pipelines. Scanning glob patterns provides quick developer feedback on accessibility and design compliance.

Related Skills

Explore More Design & Creative Skills→
alexwoxalexwox

web-design-guidelines

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

Community
Intermediate
Citrus-bitCitrus-bit
135

web-design-guidelines

Review UI code against the Web Interface Guidelines and output file:line violation reports.

Community
Intermediate
0xrafasec0xrafasec
9

new-project

Create new project directories with predefined configurations for Python, Go, TypeScript/Next.js, and Rust.

Community
Advanced
stephschofieldstephschofield

web-design-guidelines

Audit UI code for Web Interface Guidelines compliance and report findings in file:line format.

Community
Intermediate