Can I scan specific files instead of the whole project?

Yes, you can provide specific file paths or patterns as arguments to audit only the specific components or pages you are working on.

What guidelines does this skill use for audits?

This skill fetches the latest rules directly from the Vercel Labs Web Interface Guidelines repository, ensuring your UI is always measured against current industry standards.

Does this skill help with web accessibility?

Absolutely. The fetched guidelines include comprehensive checks for accessibility best practices to ensure your site meets modern inclusive design standards.

How are the audit results presented?

Findings are output in a terse 'file:line' format, allowing you to quickly locate and resolve design or accessibility issues within your editor.

Web Design Guidelines Auditor

Name: Web Design Guidelines Auditor
Author: calcom

bycalcom

•

39,848

•

Design Tools

Audits frontend code for compliance with Vercel's Web Interface Guidelines to ensure high-quality UI, UX, and accessibility standards.

The Web Design Guidelines skill automates the review of your user interface code by fetching and applying the latest standards from the Vercel Labs repository. It allows developers to quickly identify design inconsistencies, accessibility gaps, and UX anti-patterns directly within their codebase. By providing line-specific feedback, it helps teams maintain professional frontend standards and ensures that web applications adhere to modern, production-grade interface best practices without the need for manual design audits.

Key Features

01Fetches real-time design rules from the official Vercel Labs repository

02Ensures adherence to modern web interface best practices

03Identifies specific line-level compliance issues in source code

04Supports custom file patterns and directory-wide scanning

05Performs automated accessibility and UX audits on local UI files

0639,848 GitHub stars

Use Cases

01Auditing a new feature's UI components before submitting a pull request

02Improving website accessibility by identifying non-compliant code patterns

03Ensuring design consistency across large-scale frontend projects

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add calcom/cal.com web-design-guidelines

For use in Claude.ai and ChatGPT

Download Skill