web-design-guidelines

Validate UI code against Web Interface Guidelines and report findings in file:line format.

1|2|Updated Mar 17, 2026
One-click install
npx skills add https://github.com/xrplevm/cosmos-explorer --skill web-design-guidelines-xrplevm
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/xrplevm/cosmos-explorer/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/xrplevm/cosmos-explorer --skill web-design-guidelines-xrplevm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automatically validates UI code against the Web Interface Guidelines to identify accessibility, usability, and consistency gaps.

Core Features & Use Cases

  • Guideline conformance checks against UI codebases and design systems.
  • Accessibility verification and usability consistency checks across components.
  • Use Case: A frontend team can scan a component library to surface violations and recommendations.

Quick Start

Provide the target UI files or patterns; fetch the latest guidelines from https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md, run the checks, and report findings in the 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 frontend code for accessibility and usability issues?

You can audit frontend code by validating UI files against Web Interface Guidelines to identify accessibility, usability, and consistency gaps. The tool fetches live rules, applies them to target file patterns, and outputs findings in a standard file:line format.

What is the best way to check a design system for UI guideline conformance?

Checking a design system for UI guideline conformance involves scanning component libraries against established web interface rules. This process surfaces violations and provides recommendations to ensure accessibility verification and usability consistency across all components.

Can I run accessibility validation on specific file patterns in my codebase?

Yes, you can run accessibility validation on specific file patterns by providing the target UI files to the tool. It fetches the latest guidelines from the Web Interface Guidelines repository, reads the specified patterns, and reports findings in the file:line format.

Does the validation tool work with existing frontend codebases and design systems?

Yes, the validation tool works with existing frontend codebases and design systems. It applies to web interfaces, reading your target files or patterns to apply all rules from the fetched guidelines and output structured findings.

Why does my UI component library fail accessibility checks?

Your UI component library may fail accessibility checks if it contains code that does not conform to the fetched Web Interface Guidelines. Running a design review surfaces specific violations and usability consistency gaps in a file:line format for targeted fixes.