web-design-guidelines

Review UI code against the Web Interface Guidelines and output file:line violation reports.

135|12|Updated Mar 30, 2026
One-click install
npx skills add https://github.com/Citrus-bit/medrix-flow --skill web-design-guidelines-citrus-bit
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Citrus-bit/medrix-flow/tree/main/skills/public/web-design-guidelines
Command: npx skills add https://github.com/Citrus-bit/medrix-flow --skill web-design-guidelines-citrus-bit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates reviewing web UI code against the Web Interface Guidelines to identify accessibility, UX, and styling violations and provide concise, actionable results for designers and engineers.

Core Features & Use Cases

  • Fetch and apply authoritative rules: retrieves the latest Vercel Web Interface Guidelines before each review.
  • File-scoped audits: reads user-specified files or glob patterns and checks them against all rules in the fetched guidelines.
  • Terse, machine-friendly output: reports violations in file:line format suitable for CI pipelines, code review bots, or manual triage.
  • Use Cases: accessibility audits, pre-merge CI checks, design QA, and handoff verification between designers and developers.

Quick Start

Use the web-design-guidelines skill to review files in src/components/ for accessibility and guideline violations and return findings in 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 automate UI accessibility audits for my web project?

Run an automated UI accessibility audit by parsing specified web project files against fetched Vercel Web Interface Guidelines. It performs rule-by-rule checks and outputs concise file:line violation reports for accessibility and styling issues.

Can I use an automated design audit for pre-merge CI checks?

Yes, you can use an automated design audit for pre-merge CI checks. It reviews UI code against web interface guidelines and reports violations in a terse, machine-friendly file:line format suitable for CI pipelines and code review bots.

What is the best way to check UI code for compliance with web design guidelines?

The best way to check UI code for compliance is applying an automated review against the Vercel Web Interface Guidelines. It fetches authoritative rules, reads your specified files, and returns actionable violation findings in a file:line format.

Do I need to provide specific files or glob patterns for a web design audit?

Yes, providing specific files or glob patterns is required for a web design audit. The Skill is file-scoped, reading your specified project paths to run rule-by-rule checks against the fetched web interface guidelines.

Why does my web project need an automated UX and styling review?

Your web project needs an automated UX and styling review to identify accessibility, UX, and styling violations efficiently. It provides concise, actionable results for designers and engineers during design QA or handoff verification.

Are there limitations to using file-scoped accessibility checks for design QA?

Limitations of file-scoped accessibility checks include requiring explicit file or glob pattern inputs to function. It relies on fetching the remote Vercel Web Interface Guidelines, so it is scoped strictly to the rules defined in that document.