skills.rest
mengxi-ream
mengxi-reamCOMMUNITY
Explore all skills by this author →
Website𝕏@mengxi_reamGitHub

web-design-guidelines

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
One-click install
npx skills add https://github.com/mengxi-ream/read-frog --skill web-design-guidelines-mengxi-ream
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
Matrix-The-OneMatrix-The-One

web-design-guidelines

Audit UI code against Web Interface Guidelines for accessibility and UX gaps.

Community
Intermediate
ThejanaJayalathThejanaJayalath

plankton-code-quality

Enforce code quality via automated linting and formatting hooks.

Community
Advanced
marcustamarcusta

frontend-design

Enforce TapScore design constraints on frontend UI components.

Community
Advanced
lyzno1lyzno1
1

web-design-guidelines

Audit UI code against current Web Interface Guidelines for accessibility and consistency.

Community
Basic