web-design-guidelines

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

Fetch Web Interface Guidelines and review UI code for compliance.

9.0k|629|Updated Apr 16, 2025

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

Ready to run

npx skills add https://github.com/mengxi-ream/read-frog --skill web-design-guidelines-mengxi-ream

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/mengxi-ream/read-frog/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/mengxi-ream/read-frog --skill web-design-guidelines-mengxi-ream

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

Core Features & Use Cases

Fetch the latest Web Interface Guidelines from the source.
Read the specified files (or prompts) and compare them against the guidelines.
Output findings in the terse file:line format to guide fixes.

Quick Start

Provide the files or patterns you want reviewed and the skill will fetch the latest guidelines and analyze them.

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 design guideline compliance?▼

To audit UI code for design guideline compliance, provide your files or patterns to the skill. It fetches the latest Web Interface Guidelines and compares your code against design, accessibility, and UX checks, outputting findings in a terse file:line format to guide fixes.

What is a UI design audit and how does it check accessibility?▼

A UI design audit identifies UI or code elements that violate Web Interface Guidelines. It checks accessibility by fetching fresh rules from a Guidelines Source URL and applying them to your specified files to detect design and UX violations.

Can I review my site against best practices using specific file patterns?▼

Yes, you can review your site against best practices by specifying file patterns for the skill to read. It retrieves the latest rules using WebFetch and analyzes those exact files to output violations in a file:line format.

How do I check frontend quality for UX and design violations?▼

To check frontend quality for UX and design violations, the skill reads your specified files and compares them against fetched Web Interface Guidelines. It outputs findings in a terse file:line format to directly guide your fixes.

Does the design audit fetch fresh rules every time I review my UI?▼

Yes, the design audit fetches fresh rules every time you review your UI. It retrieves the latest Web Interface Guidelines from the source URL using WebFetch to ensure your code is always checked against current accessibility and UX standards.