web-design-guidelines

Reviews UI code files against fetched Web Interface Guidelines and reports findings.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Manually checking UI code against evolving web interface best practices is slow and inconsistent, especially when guidelines change over time. This Skill automates the audit by fetching the latest rules and applying them to your files. ## Core Features & Use Cases - Fresh Guideline Retrieval: Fetches the latest Web Interface Guidelines from the vercel-labs source URL before every review, so audits always use current rules. - File or Pattern-Based Review: Accepts a specific file or glob pattern argument and checks the matched UI code against all fetched rules. - Terse Findings Output: Reports violations in a compact file:line format for quick triage and fixes. - Use Case: After updating a Thymeleaf template or CSS file, ask for a UI review to catch accessibility and design guideline violations before committing. ## Quick Start Ask the assistant to review your UI file, for example: review my templates/dashboard.html against the web interface guidelines.

Frequently Asked Questions about web-design-guidelines

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

FAQPage Schema
How do I review my UI code against web interface guidelines?

Provide a file path or glob pattern as the argument, and the Skill fetches the latest guidelines from the vercel-labs source URL, reads your files, and checks them against every rule. Findings are reported in a terse file:line format.

How do I check accessibility issues in my HTML templates?

Run the review on your template files and the fetched guidelines will be applied, which include accessibility-related rules. Each violation is reported with its exact file and line number so you can fix issues directly.

Does the design review use the latest guidelines?

Yes. The Skill fetches the guidelines from the vercel-labs web-interface-guidelines repository URL before each review using WebFetch, so audits always reflect the most current published rules rather than a cached copy.

What happens if I do not specify files to review?

If no file or pattern argument is provided, the Skill asks you which files to review. You can then supply a specific file path or a glob pattern matching the UI code you want audited.

What output format does the UI audit produce?

Findings are output in a terse file:line format as specified by the fetched guidelines. This compact style makes it easy to scan violations and jump directly to the offending lines in your editor.