web-design-guidelines

Fetch remote Web Interface Guidelines and audit UI code files for compliance.

3|Updated Dec 30, 2025
One-click install
npx skills add https://github.com/yungweng/dotfiles --skill web-design-guidelines-yungweng
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/yungweng/dotfiles/tree/main/claude/.claude/skills/web-design-guidelines
Command: npx skills add https://github.com/yungweng/dotfiles --skill web-design-guidelines-yungweng

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

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

Core Features & Use Cases

  • Automated Compliance Checks: Scans UI code against a predefined set of design and accessibility rules.
  • Guideline Fetching: Automatically retrieves the latest guidelines from a specified source to ensure checks are up-to-date.
  • Use Case: A developer can use this skill to quickly audit a new component's UI code before merging, ensuring it adheres to the company's design system and accessibility standards.

Quick Start

Use the web-design-guidelines skill to review the file 'src/components/Button.js' for compliance.

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automatically review UI code for web design guidelines compliance?

To review UI code for web design guidelines compliance, this Skill fetches the latest remote markdown rules and automatically audits your specified files or patterns to ensure they meet established web standards.

What is automated UI code auditing against web interface guidelines?

Automated UI code auditing is the process of scanning user interface files against a predefined set of design and accessibility rules to validate consistency, quality, and compliance with established web interface guidelines.

Can I check component accessibility standards before merging code?

Yes, you can check component accessibility standards before merging by running this Skill against your UI code files to validate that they adhere to the fetched remote design system and accessibility rules.

How do I scan source files for UX and accessibility rule violations?

To scan source files for UX and accessibility rule violations, you specify the target file or pattern, and the Skill parses the latest external markdown content to apply validation rules against your input code.

Does this UI code review tool require any external dependencies?

No, this UI code review tool requires no external dependencies to run, but it does fetch the latest markdown guidelines from a remote source to apply its validation rules against your code.

What's the best way to ensure new components adhere to a web design system?

The best way to ensure new components adhere to a web design system is to use an automated auditing Skill that retrieves the latest guidelines and validates your UI code against those specific design and accessibility standards.