skills.rest
allthingslinux
allthingslinuxOFFICIAL
Explore all skills by this author →
GitHub

web-design-guidelines

Evaluate UI files against Web Interface Guidelines and report violations.

4|Updated Jan 8, 2026
Search Tags:#accessibility#frontend#audit#design-review#web-standards#UI guidelines
One-click install
npx skills add https://github.com/allthingslinux/portal --skill web-design-guidelines-allthingslinux
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/allthingslinux/portal/tree/main/.cursor/skills/web-design-guidelines
Command: npx skills add https://github.com/allthingslinux/portal --skill web-design-guidelines-allthingslinux

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure UI code adheres to the latest Web Interface Guidelines, reducing usability and accessibility gaps across products.

Core Features & Use Cases

  • Guideline Fetching: Pulls the most up-to-date rules from the official Web Interface Guidelines source before each review.
  • Automated Scanning: Analyzes UI files (HTML/JSX/TSX, CSS) for accessibility, semantic structure, color contrast, and responsiveness.
  • Compliance Reporting: Outputs a concise list of violations with file paths and line numbers to guide fixes.
  • Use Case: Integrate into pull request checks to automatically flag accessibility issues in UI components.

Quick Start

Use the web-design-guidelines skill to scan your UI project by passing a file or pattern. Example: provide the path to your UI components (for instance, path/to/ui/**/*.tsx). The skill will fetch the latest guidelines, apply them to the specified files, and report findings in a terse file:line format.

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 React or Vue UI code for accessibility issues?▼

To audit UI code for accessibility issues, you can scan your HTML, JSX, or TSX files against the latest Web Interface Guidelines. This process evaluates semantic structure, color contrast, and responsiveness, outputting a concise list of violations with file paths and line numbers to guide fixes.

Can I automatically flag web standards violations in my pull requests?▼

Yes, you can automatically flag web standards violations in pull requests by integrating an automated UI scanning step. It analyzes specified file patterns against fetched Web Interface Guidelines and reports accessibility and usability gaps in a terse file:line format for immediate review.

What is the best way to check frontend components for color contrast and semantic structure?▼

The best way to check frontend components for color contrast and semantic structure is to run an automated design review against official Web Interface Guidelines. This fetches the most up-to-date rules and evaluates your plain HTML/CSS or framework code for compliance.

Does this UI guideline audit work with plain HTML and CSS projects?▼

Yes, this UI guideline audit works with plain HTML and CSS projects, as well as React and Vue codebases. It analyzes UI files for semantic structure, color contrast, and responsiveness by applying fetched Web Interface Guidelines to your specified file patterns.

How do I get a compliance report for my UI files?▼

To get a compliance report for your UI files, run an automated scan passing your component path patterns. The scan fetches the latest Web Interface Guidelines, evaluates the code, and outputs a concise list of violations with exact file paths and line numbers to guide your fixes.

Related Skills

Explore More Design & Creative Skills→
FindMalekFindMalek
9

web-design-guidelines

Audits frontend components for compliance with Web Interface Guidelines.

Community
Intermediate
sefllessseflless

fixing-accessibility

Identify and fix accessibility issues in UI components using defined rules.

Community
Intermediate
cagdotincagdotin
36

web-design-guidelines

Evaluate frontend UI code against Web Interface Guidelines for accessibility and usability gaps.

Community
Intermediate
kennedym-dskennedym-ds
14

accessibility-wcag

Evaluate and implement WCAG 2.1 AA accessibility patterns for frontend web development.

Community
Advanced