web-design-guidelines

Analyze UI code against the latest Web Interface Guidelines and output file:line results.

1|2|Updated Jan 28, 2026
One-click install
npx skills add https://github.com/Danejw/viewbait --skill web-design-guidelines-danejw
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Danejw/viewbait/tree/main/.cursor/skills/web-design-guidelines
Command: npx skills add https://github.com/Danejw/viewbait --skill web-design-guidelines-danejw

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams verify that their UI code conforms to up-to-date Web Interface Guidelines, reducing usability and accessibility gaps across products.

Core Features & Use Cases

  • Guideline-driven review: Fetch the latest Web Interface Guidelines and compare UI files, components, and pages against the rules.
  • Automated findings: Report non-conformant patterns with actionable recommendations.
  • Use Case: When you receive a UI pull request, run this Skill to surface accessibility issues, contrast problems, and layout inconsistencies before review.

Quick Start

Use the web-design-guidelines skill to scan your project files and identify compliance issues against the latest guidelines.

Frequently Asked Questions about web-design-guidelines

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

FAQPage Schema
How do I check my frontend code for accessibility and UI compliance?

To check frontend UI compliance, you need to audit your code against established Web Interface Guidelines. This process analyzes UI files and components to identify accessibility issues, contrast problems, and layout inconsistencies, outputting actionable findings in a file:line format.

What is a UI accessibility audit for component libraries?

A UI accessibility audit for component libraries is a review process that verifies your UI code conforms to up-to-date Web Interface Guidelines. It fetches remote rules and compares your files against them to reduce usability gaps and surface non-conformant patterns.

How do I review a UI pull request for design guideline violations?

Review a UI pull request for design violations by running an automated guideline-driven check. This compares the updated UI files against the latest Web Interface Guidelines to surface accessibility issues and layout inconsistencies before the code review.

Can I scan my project files for UX-alignment and contrast problems automatically?

Yes, you can scan project files automatically for UX-alignment and contrast problems by comparing your UI code against fetched Web Interface Guidelines. The automated findings report non-conformant patterns with actionable recommendations for quick resolution.

Does this UI compliance review work with any frontend project?

Yes, this UI compliance review applies to any frontend project, including component libraries and individual pages needing accessibility checks. It fetches the latest guidelines from a remote source and compares your UI files against those rules.

What format do accessibility and design guideline audit results use?

Accessibility and design guideline audit results use a file:line format. This output structure pinpoints exact non-conformant patterns in your UI code and provides actionable recommendations to fix usability and accessibility gaps.