What kind of design issues does it identify?

It detects violations related to accessibility, user experience patterns, and general UI design best practices as defined in professional web guidelines.

Can I audit specific files or just the whole project?

You can provide specific file paths or glob patterns to target only the UI components or directories you want to review.

Does this work with any frontend framework?

Yes, as long as the code is web-based UI (HTML, JSX, Vue, etc.), the skill can analyze the structure against the design guidelines.

How does this skill stay up to date with the latest standards?

The skill automatically fetches the most recent Web Interface Guidelines from the official Vercel source repository before every review session.

How are the results formatted?

The skill outputs findings in a concise file:line format, allowing you to quickly navigate to and fix issues within your codebase.

Web Interface Design Guidelines Reviewer

Name: Web Interface Design Guidelines Reviewer
Author: a1exalexander

bya1exalexander

0•

设计工具

Audits user interface code for compliance with professional web design, UX, and accessibility standards.

This skill automates the process of reviewing frontend code against industry-standard Web Interface Guidelines. By dynamically fetching the latest design principles and accessibility rules from authoritative sources, it ensures your project maintains high-quality UX and production-grade styling. It is an essential tool for frontend developers looking to catch design debt, accessibility violations, or inconsistent patterns during the development phase, providing precise, actionable feedback directly within the CLI.

主要功能

01Dynamic fetching of the latest Vercel Web Interface Guidelines

02Comprehensive accessibility and UX compliance auditing

03Precise issue reporting with file and line number mapping

04Automated UI code review for design system consistency

050 GitHub stars

06Support for targeted file patterns and directory-wide scans

使用场景

01Ensuring HTML and CSS structures align with professional web standards

02Checking new UI components for accessibility compliance before merging

03Running a full-site audit to identify violations of modern design best practices

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add a1exalexander/portfolio web-design-guidelines

For use in Claude.ai and ChatGPT

Download Skill