skills.rest
involvex
involvexCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Review web UI code against Web Interface Guidelines and report violations in file:line format.

2|Updated Mar 26, 2026
Search Tags:#accessibility#vercel#code-review#web#design-guidelines#ui-review
One-click install
npx skills add https://github.com/involvex/happy-vibecode --skill web-design-guidelines-involvex
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/involvex/happy-vibecode/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/involvex/happy-vibecode --skill web-design-guidelines-involvex

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Manual reviews of frontend code against evolving web interface standards are time-consuming and inconsistent; this Skill automates the comparison of UI code to a canonical guideline so teams can quickly find accessibility, UX, and design violations.

Core Features & Use Cases

  • Fetches canonical rules: Always retrieves the latest Web Interface Guidelines from the specified source URL before each review.
  • File or pattern scanning: Reads specified files or glob patterns from a codebase and applies guideline checks to each file.
  • Terse, actionable output: Reports findings in a compact file:line format suitable for automated triage or CI integration.
  • Use Case: Run an accessibility and design audit on a pull request's changed frontend files to automatically flag guideline violations.

Quick Start

Run the web-design-guidelines skill to review apps/web/components/**/*.tsx for accessibility and design guideline violations.

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 code for accessibility and design violations?▼

You can automate a UX review by passing frontend file paths or glob patterns to this skill. It fetches the latest Web Interface Guidelines and reports design compliance violations in a compact file:line format for quick triage.

Can I use this for a pull request design compliance check on changed files?▼

Yes, you can run a design compliance check on changed frontend files in a pull request. The skill applies Web Interface Guidelines to the specified files and outputs actionable findings suitable for automated triage or CI integration.

What format does the UI review output use for reporting violations?▼

The UI review reports violations in a terse file:line format. This compact output ensures findings are actionable and easily parsed for automated triage or integration into continuous integration pipelines.

Does the accessibility audit require an internet connection to fetch guidelines?▼

Yes, the accessibility audit requires an internet connection because it fetches the canonical Web Interface Guidelines from a specified external URL before each review to ensure it applies the latest rules.

How do I scan specific directories like apps/web/components for UX violations?▼

To scan specific directories for UX violations, provide the target path or glob pattern, such as apps/web/components/**/*.tsx. The skill reads the specified files and applies design guideline checks to each one.

Related Skills

Explore More Design & Creative Skills→
alexwoxalexwox

web-design-guidelines

Review UI code against Web Interface Guidelines and output file:line findings.

Community
Intermediate
martindzejkymartindzejky
1

fix-ci

Diagnose CI failures by parsing logs and applying minimal fixes.

Community
Intermediate
agoudbgagoudbg
7

web-design-guidelines

Audits selected files for UI accessibility and design-rule violations.

Community
Intermediate
angelriera-devangelriera-dev

web-design-guidelines

Audit UI code against the latest Web Interface Guidelines.

Community
Intermediate