web-design-guidelines

Review web UI files against Web Interface Guidelines and report issues in file:line format.

41|6|Updated Nov 27, 2025
One-click install
npx skills add https://github.com/mralexsaavedra/spotiarr --skill web-design-guidelines-mralexsaavedra
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/mralexsaavedra/spotiarr/tree/main/skills/web-design-guidelines
Command: npx skills add https://github.com/mralexsaavedra/spotiarr --skill web-design-guidelines-mralexsaavedra

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps you systematically review your web interface against established Web Interface Guidelines so you can catch usability, accessibility, and design issues before they reach users.

Core Features & Use Cases

  • Guideline-aligned reviews: Pulls the latest guideline rules from the official source before each run to keep checks current.
  • Targeted file/pattern inspection: Scans user-specified files or prompts you to choose what to review when nothing is provided.
  • Actionable, terse reporting: Produces findings in the required file:line format to speed up fixes, regression tracking, and code review.

Quick Start

Run a review by providing the files you want checked, for example: “Review my UI for accessibility using web interface guidelines in src/components and all matching files.”

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 files for accessibility and design compliance?

To audit web UI files for accessibility and design compliance, provide the target file paths or directories. The tool scans the specified UI code against the latest Web Interface Guidelines and emits findings in a terse file:line format.

What is the file:line format for UI compliance findings?

The file:line format for UI compliance findings is a terse reporting style that pinpoints exact locations of accessibility and design issues. This format speeds up fixes, regression tracking, and code review by directly mapping to your source files.

Do I need to manually update the design audit rules before checking my site?

No, you do not need to manually update design audit rules. The tool automatically fetches the up-to-date guideline rules from the provided command source before each run to keep accessibility and design checks current.

How does a UX review against web interface guidelines handle missing file inputs?

When a UX review against web interface guidelines receives no file inputs, the tool prompts you to specify or choose the target files. This ensures the accessibility and design compliance scan always has a valid scope to inspect.