web-design-guidelines

Name: web-design-guidelines
Availability: InStock
Author: beeman

Evaluate web UI components against Web Interface Guidelines for compliance.

12|1|Updated Feb 4, 2026

Search Tags:#design #accessibility #UX #compliance #guidelines #code-review #web

Ready to run

npx skills add https://github.com/beeman/solana-mobile-monorepo --skill web-design-guidelines-beeman

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/beeman/solana-mobile-monorepo/tree/main/.ruler/skills/web-design-guidelines
Command: npx skills add https://github.com/beeman/solana-mobile-monorepo --skill web-design-guidelines-beeman

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web interfaces often fail accessibility, usability, and consistency guidelines, causing friction for users and inconsistent brand experiences. This Skill helps review UI code against web interface guidelines and best practices to identify issues and improvements.

Core Features & Use Cases

Automated UI Review: Evaluate components for accessibility (ARIA, contrast), responsive behavior, headings, and semantic markup.
Guideline Compliance: Check against published guidelines (e.g., Web Interface Guidelines) to ensure consistency and quality.
Use Case: When asked to review a web page or component tree, run analyses and produce a concise report of issues and recommended fixes.

Quick Start

Provide the target file or pattern to review, and run the web design guidelines checker to produce a compliance report.

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 my web UI for accessibility and UX compliance?▼

To audit web UI for accessibility and UX compliance, provide your target file or pattern to the checker. It evaluates components for ARIA, contrast, responsive behavior, and semantic markup to produce a concise compliance report.

Does this UI review tool work with React and Vue codebases?▼

Yes, the UI review tool works with React and Vue codebases. It also supports Next.js and plain HTML, evaluating accessibility, layout, and semantic markup across these web UI component frameworks.

What is the best way to check code for Web Interface Guidelines deviations?▼

The best way to check code for Web Interface Guidelines deviations is to run an automated analysis on specified files. It fetches the latest published guidelines and evaluates your patterns to identify issues and recommended fixes.

What does an automated UI accessibility review evaluate?▼

An automated UI accessibility review evaluates components for ARIA attributes, color contrast, responsive behavior, headings, and semantic markup. It checks your code against published guidelines to identify usability and consistency issues.

Can I review plain HTML files for semantic markup and layout issues?▼

Yes, you can review plain HTML files for semantic markup and layout issues. The checker evaluates plain HTML alongside React, Next.js, and Vue components to generate a concise report of deviations and improvements.

How do I get a compliance report for my web design guidelines?▼

To get a compliance report for your web design guidelines, provide the target file or pattern to review. The checker fetches the latest guidelines, evaluates your code, and produces a concise report of issues and recommended fixes.