web-design-guidelines

Check frontend UI files against the latest Web Interface Guidelines.

2|1|Updated Dec 15, 2025
One-click install
npx skills add https://github.com/sgpropertyanalytics/sg-property-analytics --skill web-design-guidelines-sgpropertyanalytics
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/sgpropertyanalytics/sg-property-analytics/tree/main/.claude/skills/web-design-guidelines
Command: npx skills add https://github.com/sgpropertyanalytics/sg-property-analytics --skill web-design-guidelines-sgpropertyanalytics

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Teams building web interfaces often struggle to keep UI implementations aligned with evolving design and accessibility guidelines. This Skill automates the verification of UI code against the latest Web Interface Guidelines to reduce manual review time and improve consistency.

Core Features & Use Cases

  • Guideline compliance checks: Compare frontend UI files against the latest Web Interface Guidelines to surface violations.
  • Automated reporting: Produce concise findings in a file:line format for rapid triage and remediation.
  • Guidelines source integration: Fetch fresh rules from a remote URL to ensure reviews stay up-to-date across projects.

Quick Start

Provide the files you want reviewed; I will fetch the latest guidelines and return a concise audit report.

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 checks for my web project?

You can automate UI accessibility checks by evaluating frontend files against the latest Web Interface Guidelines, which surfaces violations and emits findings in a file:line format for rapid remediation.

What is the best way to audit frontend code for design guideline compliance?

Auditing frontend code for design guideline compliance involves fetching fresh rules from a remote guidelines URL, reading your specified UI files, and evaluating all rules to produce a concise compliance report.

Can I use this to review a component library for UX best practices?

Yes, you can review component libraries for UX best practices by applying automated guideline compliance checks to verify accessibility and visual consistency across your web interface components.

Do I need to manually update web design guidelines to run a design QA workflow?

No, you do not need to manually update web design guidelines because the review process fetches fresh rules directly from a remote guidelines URL to ensure checks stay up-to-date across projects.

How does automated UI review report accessibility violations?

Automated UI review reports accessibility violations by emitting concise findings in a file:line format, allowing developers to rapidly triage and remediate issues in the specified frontend code files.