web-design-guidelines

Review web interface source files against Web Interface Guidelines for accessibility and UX compliance.

2|Updated Jan 30, 2026
One-click install
npx skills add https://github.com/LinXueyuanStdio/viben --skill web-design-guidelines-linxueyuanstdio
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/LinXueyuanStdio/viben/tree/main/.claude/skills/web-design-guidelines
Command: npx skills add https://github.com/LinXueyuanStdio/viben --skill web-design-guidelines-linxueyuanstdio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you identify accessibility and UX issues in your web UI before they reach users.

Core Features & Use Cases

  • Guideline-based UI review: Fetches the latest Web Interface Guidelines and checks provided files or patterns against the full rule set.
  • Deterministic, actionable output: Produces findings in the terse file:line format so issues are easy to locate and fix.
  • Best-practice auditing: Suitable for accessibility checks, design audits, and general UX/code compliance reviews for a site or UI component set.

Quick Start

Run web-design-guidelines and ask it to review your React/HTML/CSS files you want checked for Web Interface Guidelines compliance.

Frequently Asked Questions about web-design-guidelines

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

FAQPage Schema
How do I run an accessibility audit on my web UI source files?

To run an accessibility audit, provide specific file paths or glob patterns for your web UI source files. The tool fetches the latest Web Interface Guidelines and checks your code against the full ruleset to surface compliance issues.

What format are UX review violations reported in?

UX review violations are reported in a deterministic file:line format. This terse output style ensures that identified accessibility and UX compliance issues are easy to locate and fix directly within your codebase.

Can I use this for a design compliance check on React and CSS files?

Yes, you can use this for design compliance checks on React, HTML, and CSS files. It reviews your provided web interface source files against the latest Web Interface Guidelines to identify accessibility and UX issues before they reach users.

Do I need to provide specific file paths for a UI codebase review?

Yes, you need to provide specific file paths or glob patterns for the UI codebase review. The tool requires these inputs to read your target files and check them against the authoritative Web Interface Guidelines ruleset.

What is the difference between this and a standard code review?

Unlike a standard code review, this specifically audits web interface source files against the latest Web Interface Guidelines. It focuses on surfacing accessibility and UX compliance issues rather than general code quality or logic errors.

Are there limitations when checking web interface guidelines?

The tool requires fetching the authoritative ruleset from a configured URL before reading target files. It is limited to auditing provided web interface source files and cannot dynamically render or check pages it cannot access via file paths.