web-design-guidelines

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

36|8|Updated Jan 25, 2024
One-click install
npx skills add https://github.com/beavermoney/beavermoney --skill web-design-guidelines-beavermoney
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/beavermoney/beavermoney/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/beavermoney/beavermoney --skill web-design-guidelines-beavermoney

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers and designers verify that UI code adheres to Web Interface Guidelines, improving accessibility, usability, and consistency across web applications.

Core Features & Use Cases

  • Guideline-driven review: fetches the latest guidelines from the official source and checks UI files for accessibility, contrast, keyboard navigability, and responsive behavior.
  • Codebase-wide assurance: can be applied to individual components, pages, or entire sites to ensure consistency with the guidelines.
  • Use Case: Imagine you are auditing a new product's web UI; run this Skill against your codebase to surface and remediate accessibility issues and guideline violations.

Quick Start

Run the web-design-guidelines Skill against your UI files or a pattern match like 'src/components/**/*.tsx' to verify compliance with the latest Web Interface Guidelines and report findings in the prescribed 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 check my web UI code for accessibility and usability compliance?

To check web UI code for accessibility compliance, review your UI files against Web Interface Guidelines to identify contrast, keyboard navigability, and responsive behavior issues. The skill fetches fresh rules from the official source and outputs findings in a terse file:line format.

Can I audit an entire web project for design standard violations?

Yes, you can audit an entire web project for design standard violations by running the review against a pattern match like 'src/components/**/*.tsx'. It applies guideline-driven checks across components, pages, and templates to ensure codebase-wide consistency.

What does a UI code review for web design guidelines check for?

A UI code review for web design guidelines checks for accessibility, contrast, keyboard navigability, and responsive behavior. It fetches the latest official rules and applies them to your provided files to surface usability and consistency issues.

Do I need to manually update the design standards when auditing my web application?

No, you do not need to manually update design standards when auditing your web application. The review fetches the latest guidelines directly from the official source, ensuring your UI code is always checked against current accessibility and usability rules.

How are accessibility issues reported when reviewing UI files?

Accessibility issues are reported in a terse file:line format when reviewing UI files. This output style pinpoints exact locations of guideline violations across your components and templates for quick remediation.

Does this web design review work with React component files?

Yes, this web design review works with React component files. You can apply it to individual components or pattern matches like 'src/components/**/*.tsx' to verify UI compliance with accessibility and usability standards.