How does this skill fetch design rules?

It uses the WebFetch capability to retrieve the latest live guidelines from the Vercel Labs repository before each review.

Can I audit specific files or folders?

Yes, the skill accepts file paths or patterns as arguments to focus the review on specific parts of your project.

Does it work with modern frameworks like React?

Yes, it is designed to review modern web codebases, including React, Vue, and Tailwind CSS implementations for compliance.

In what format are the findings delivered?

Findings are output in a terse file:line format, making it easy for Claude or the developer to navigate to and fix the issues.

What kind of issues does the audit catch?

It identifies violations of web accessibility (A11y), visual consistency, layout logic, and general user experience best practices.

Web Design Guidelines

Name: Web Design Guidelines
Author: trancong12102

bytrancong12102

•

デザインツール

Audits frontend code against industry-standard web interface guidelines to ensure accessibility, UX consistency, and design best practices.

The Web Design Guidelines skill empowers Claude to perform professional-grade design audits by fetching and applying the latest interface standards directly to your codebase. It identifies critical issues related to accessibility, layout, and user experience by pulling fresh rules from Vercel Labs' established guidelines. This ensures that your web projects remain compliant with modern design patterns and provides actionable, line-specific feedback to streamline the UI review process.

主な機能

01Automated UI/UX code reviews

02Accessibility compliance checking

03Real-time fetching of latest Vercel Web Interface Guidelines

041 GitHub stars

05Standardized file:line error reporting

06Support for targeted file patterns and directory audits

ユースケース

01Performing a pre-deployment accessibility and UX audit on new components

02Standardizing design patterns across a large-scale frontend repository

03Identifying non-compliant UI code during the development of design systems

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add trancong12102/ccc web-design-guidelines

For use in Claude.ai and ChatGPT

Download Skill