Can it check for accessibility (a11y) issues?

Yes, the skill specifically audits code for accessibility compliance and identifies areas where the user experience can be improved for all users.

Do I need to update the guidelines manually?

No, the skill is designed to fetch fresh guidelines from the source URL before every review session to ensure you are always using the most current rules.

How does the skill report its findings?

Findings are output in a terse 'file:line' format, allowing you to navigate directly to the specific part of your code that requires a fix.

What guidelines does this skill use for reviews?

It fetches the latest Web Interface Guidelines from Vercel's official repository to ensure your code matches modern industry standards for layout and design.

Which file types can this skill review?

The skill can review various UI-related files including React components, HTML, CSS, and other frontend framework files based on the pattern you provide.

Web Design Guidelines

Name: Web Design Guidelines
Author: ycluis

byycluis

0•

设计工具

Audits web user interfaces for compliance with industry-standard design, accessibility, and UX guidelines.

The Web Design Guidelines skill automates the process of reviewing frontend code against modern web interface standards. By fetching the latest guidelines directly from authoritative sources, it provides real-time feedback on accessibility, layout, and UX best practices. It is an essential tool for developers who want to ensure their UI is production-ready, accessible to all users, and consistent with professional design patterns without performing manual audits.

主要功能

01Support for targeted file patterns and specific components

02Automated UI and UX code reviews

03Precise file-and-line reporting for rapid debugging

040 GitHub stars

05Comprehensive accessibility compliance auditing

06Real-time fetching of the latest Vercel design guidelines

使用场景

01Checking a project for WCAG and general accessibility standard compliance

02Preparing a frontend codebase for a production release or design handoff

03Onboarding new developers to ensure UI code meets established design patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ycluis/dotfiles web-design-guidelines

For use in Claude.ai and ChatGPT

Download Skill