web-design-guidelines

Audit HTML, CSS, and JavaScript files against Vercel Web Interface Guidelines.

Updated Feb 17, 2026
One-click install
npx skills add https://github.com/Gatsbyhateyou/gatsby-website --skill web-design-guidelines-gatsbyhateyou
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Gatsbyhateyou/gatsby-website/tree/main/.cursor/skills/web-design-guidelines
Command: npx skills add https://github.com/Gatsbyhateyou/gatsby-website --skill web-design-guidelines-gatsbyhateyou

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures your web UI code adheres to best practices and accessibility standards, preventing common design and usability issues.

Core Features & Use Cases

  • UI Code Compliance: Reviews HTML, CSS, and JavaScript files against established web interface guidelines.
  • Accessibility Audit: Checks for common accessibility pitfalls like missing ARIA labels or improper focus states.
  • Use Case: Before launching a new feature, use this Skill to audit the UI code for compliance with Vercel's Web Interface Guidelines, identifying and fixing potential issues early.

Quick Start

Use the web-design-guidelines skill to review the UI code in the file 'index.html'.

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit web UI code for accessibility and best practices?

To audit web UI code for accessibility and best practices, review your HTML, CSS, and JavaScript files against Vercel Web Interface Guidelines to identify issues in focus states, forms, animation, and typography. The audit outputs findings in a file:line - issue format.

What are common web design anti-patterns to check before launching a feature?

Common web design anti-patterns include missing ARIA labels, improper focus states, and inaccessible forms. Checking for these UI issues before launch ensures your code adheres to established web interface guidelines and prevents usability problems.

Can I use Vercel guidelines to review HTML and CSS files?

Yes, you can use Vercel guidelines to review HTML and CSS files. The audit checks these files for compliance with established web interface guidelines, identifying accessibility pitfalls and anti-patterns to fix before deployment.

How do I check for missing ARIA labels and focus states in my UI?

To check for missing ARIA labels and improper focus states, run a UI compliance audit on your code. This process reviews your interface components against web design best practices and outputs specific line-by-line issues.

What is the best way to ensure UI code compliance with Vercel Web Interface Guidelines?

The best way to ensure UI code compliance is to fetch the latest rules from the specified GitHub URL and audit your interface code. This identifies accessibility issues and anti-patterns across your files, outputting results in a structured format.

Do I need specific dependencies to perform a UI code audit for web design?

No specific dependencies are required to perform a UI code audit for web design. The process fetches the latest rules from a GitHub URL and evaluates your raw HTML, CSS, and JavaScript files directly for compliance.