Where does the skill get its design rules from?

The skill fetches the latest Web Interface Guidelines directly from the Vercel Labs repository before each review to ensure your code is measured against the most current standards.

Can I run a review on my entire project at once?

Yes, you can provide a file pattern or directory as an argument to perform a bulk audit of your entire UI codebase.

Does this skill automatically fix my design issues?

The skill identifies specific violations and provides the line numbers. Once the issues are identified, you can prompt Claude to refactor the code based on those findings.

What kind of files can I audit with this skill?

You can audit any frontend-related files, including HTML, CSS, JavaScript, TypeScript, and framework-specific files like .jsx, .tsx, .vue, or .svelte.

Web Design Guidelines

Name: Web Design Guidelines
Author: connorads

byconnorads

•

Design Tools

Audits web application code against modern UI/UX best practices and accessibility standards using live design guidelines.

The Web Design Guidelines skill automates the process of reviewing frontend code to ensure it meets professional UI/UX standards. It dynamically fetches the latest guidelines from the Vercel Labs repository to verify your project's compliance with accessibility, layout, and interaction patterns. By scanning your source files and providing precise line-by-line feedback, it helps developers catch design debt and usability issues early in the development cycle, ensuring a high-quality user experience.

Key Features

01Provides precise line-by-line issue reporting

02Fetches live guidelines from Vercel Labs for up-to-date standards

03Integrates with existing frontend workflows for design reviews

04Supports customizable file patterns and directory scanning

05Automates accessibility and UX compliance audits

062 GitHub stars

Use Cases

01Performing a design review on a new landing page before deployment

02Checking legacy codebases against modern web interface best practices

03Auditing React or Vue components for accessibility and usability errors

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add connorads/dotfiles web-design-guidelines

For use in Claude.ai and ChatGPT

Download Skill