web-design-guidelines

Review UI code against Web Interface Guidelines and report accessibility and UX issues in file:line format.

Updated Apr 24, 2026
One-click install
npx skills add https://github.com/Katlyng/proy_vibetribe --skill web-design-guidelines-katlyng
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Katlyng/proy_vibetribe/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/Katlyng/proy_vibetribe --skill web-design-guidelines-katlyng

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps ensure web UI code complies with current Web Interface Guidelines, surfacing accessibility and UX issues early.

Core Features & Use Cases

  • Automated guideline fetch and application to codebases.
  • File pattern scanning and targeted review of UI components.
  • Use Case: Suppose you have a React component library; run this skill on your web UI files to surface accessibility and UX guideline violations.

Quick Start

Provide the UI files you want reviewed and I will fetch the latest guidelines and start the audit.

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 UX issues?

Accessibility and UX audits are performed by scanning UI files against Web Interface Guidelines, fetching the latest rules and reporting violations in a file:line format. This process surfaces design consistency and compliance issues early.

What is the best way to check a React component library for UX guideline violations?

Checking a React component library for UX violations involves running a targeted guideline review on UI component files. The audit fetches current web interface rules and outputs specific accessibility and design consistency findings.

Can I scan specific file patterns in my web UI repository for accessibility issues?

Yes, you can scan specific file patterns by providing targeted UI files for review. The tool applies fetched web interface guidelines to selected codebase paths to identify accessibility and UX best-practice violations.

Do I need to manually update the web design guidelines used for the audit?

No, you do not need to manually update web design guidelines because the audit uses WebFetch to automatically retrieve the latest rules from the source before reviewing your UI code.

How does the reporting format work for UI accessibility audits?

The reporting format for UI accessibility audits outputs findings in a file:line format, pinpointing exact locations of accessibility and UX best-practice violations within reviewed frontend code.