web-design-guidelines

Name: web-design-guidelines
Availability: InStock
Author: songyinggoh

Fetch latest web interface guidelines and review UI code for compliance.

Updated Jan 23, 2026

Search Tags:#code quality #accessibility #frontend #ui review #design audit #web guidelines

Ready to run

npx skills add https://github.com/songyinggoh/renovation-agent-monorepo --skill web-design-guidelines-songyinggoh

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/songyinggoh/renovation-agent-monorepo/tree/main/.claude/skills/skills/web-design-guidelines
Command: npx skills add https://github.com/songyinggoh/renovation-agent-monorepo --skill web-design-guidelines-songyinggoh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the review of UI code to ensure it complies with established Web Interface Guidelines, improving consistency and quality.

Core Features & Use Cases

Automated Compliance Checks: Scans specified files against a comprehensive set of design and accessibility rules.
Guideline Fetching: Dynamically retrieves the latest guidelines from a remote source before each review.
Use Case: A developer can use this skill to quickly audit a new component's code for adherence to the company's design system and accessibility standards before merging it.

Quick Start

Review the UI code in the file 'src/components/Button.tsx' against the latest 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 audit UI code for compliance with web interface guidelines?▼

To audit UI code for web interface guidelines, provide specific component files or patterns for analysis. The Skill fetches the latest remote rules and outputs findings in a terse file:line format.

Can I check frontend accessibility standards automatically before merging code?▼

Yes, you can check frontend accessibility standards automatically by running a design audit on your specified files. The review analyzes your code against dynamically fetched rules to identify compliance issues.

What is the best way to ensure a new component meets design system rules?▼

The best way to ensure a component meets design system rules is to run an automated compliance check. This reviews your provided source files against a comprehensive set of fetched web guidelines.

Does this automated design audit work with any frontend framework?▼

The design audit works with any frontend framework by analyzing the provided UI code files or patterns directly. It checks the source code structure against fetched web interface guidelines.

How are the web interface guideline rules updated during a UI review?▼

During a UI review, the web interface guideline rules are updated by dynamically fetching the latest standards from a specified remote URL before analyzing your provided code files.

What format does the code quality review output for identified issues?▼

The code quality review outputs identified issues in a terse file:line format. This points directly to the exact locations in your UI code where web interface guidelines were not met.