web-design-guidelines

Audit HTML and CSS files against Web Interface Guidelines.

Updated Aug 15, 2025

Search Tags:#accessibility #frontend #vercel #guidelines #web-design #ui-review #design-audit

Ready to run

npx skills add https://github.com/gesmith0606/nfl_data_engineering --skill web-design-guidelines-gesmith0606

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/gesmith0606/nfl_data_engineering/tree/main/web/frontend/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/gesmith0606/nfl_data_engineering --skill web-design-guidelines-gesmith0606

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates auditing front-end UI code against a centralized set of Web Interface Guidelines, eliminating manual checklist reviews and surfacing accessibility, layout, and UX violations in a concise format.

Core Features & Use Cases

Fetches authoritative rules: Retrieves the latest Web Interface Guidelines from the Vercel source URL before each review to ensure checks are up to date.
Targeted file audits: Reads user-specified files or glob patterns and evaluates HTML, CSS, and related UI code against the guideline rules.
Terse, actionable results: Produces findings in a concise file:line format suitable for CI integration, PR comments, or developer remediation.
Use Case: Run a pre-merge audit to flag accessibility and design violations across a codebase so designers and engineers can fix issues before release.

Quick Start

Review the project files matching src//*.html and src//*.css against the web interface guidelines and report violations 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 a UI accessibility audit for my front-end code?▼

To automate a UI accessibility audit, this Skill reads specified front-end files or glob patterns and evaluates them against the latest Web Interface Guidelines fetched from a Vercel URL. It outputs terse findings in a file:line format suitable for CI or reporting.

Can I check HTML and CSS files for design guideline violations before merging?▼

You can check HTML and CSS files for design violations by providing file paths or glob patterns to this Skill. It fetches authoritative rules from Vercel and reports any accessibility, layout, or UX violations in a concise file:line format for quick remediation.

What is the best way to validate UX against web design guidelines in a CI pipeline?▼

The best way to validate UX in a CI pipeline is using this Skill to run automated design audits. It evaluates your UI code against centralized Web Interface Guidelines and outputs actionable findings in a file:line format that integrates directly into CI or PR comments.

Do I need to install dependencies to run a design audit on my UI files?▼

No dependencies are required to run a design audit on your UI files. The Skill operates independently, reading your specified front-end files and fetching the latest rules directly from a Vercel raw URL before outputting violations in a file:line format.

How does the web design guidelines audit format its results for developers?▼

The web design guidelines audit formats its results tersely in a file:line structure. This concise output surfaces accessibility, layout, and UX violations directly, making it suitable for CI integration, PR comments, and developer remediation without unnecessary reading friction.