skills.rest
ElwinLiu
ElwinLiuCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Automate UI code reviews against Web Interface Guidelines for accessibility and consistency.

Updated Jan 24, 2026
Search Tags:#accessibility#UI#audit#guidelines#lint#code-review#web-design
One-click install
npx skills add https://github.com/ElwinLiu/agents --skill web-design-guidelines-elwinliu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/ElwinLiu/agents/tree/main/skills/web-design-guidelines
Command: npx skills add https://github.com/ElwinLiu/agents --skill web-design-guidelines-elwinliu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the evaluation of UI code against Web Interface Guidelines, helping teams ensure accessibility, consistency, and design quality across projects.

Core Features & Use Cases

  • Guideline-driven review: Validate UI code against a living guideline set fetched from the official source.
  • File-based analysis: Apply checks to specified web files or codebases to surface violations.
  • Use Case: When asked to "review my UI" or "check accessibility", run a guideline-based audit across the provided files and receive a concise list of violations.

Quick Start

Use the web-design-guidelines skill to review your project files by providing the file paths you want analyzed, for example: assets/index.html, src/components/Button.jsx.

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 my UI code for web design guideline compliance?▼

Use automated UI audits to validate your web files against Web Interface Guidelines. The Skill reviews your code for accessibility, consistency, and design best-practices violations, then returns a concise list of issues to fix.

Can I check accessibility compliance across my entire web project?▼

Yes. Provide your file paths—HTML, JSX, or other web formats—and run a guideline-driven review across your codebase. The Skill applies accessibility and design rules to all specified files and surfaces violations.

What does a web design guideline audit actually check?▼

Web design guideline audits enforce accessibility standards, UI consistency, and design best-practices. They validate your code against official guidelines fetched from the source, catching violations in structure, semantics, and visual compliance.

How do I set up a code review process for UI consistency?▼

Automate UI code reviews by specifying your web files and running them against Web Interface Guidelines. The Skill handles guideline fetching, rule application, and violation reporting—no manual setup required.

Does this work with HTML and JSX components?▼

Yes. File-based analysis applies to HTML, JSX, and other web formats. Provide file paths like assets/index.html or src/components/Button.jsx, and the Skill audits them for guideline compliance.

What happens if my UI fails the accessibility audit?▼

The Skill returns a formatted list of guideline violations specific to your files. Each violation identifies the issue and location, helping your team prioritize fixes for accessibility, consistency, and design quality.

Related Skills

Explore More Design & Creative Skills→
JaylaelikeJaylaelike

web-design-guidelines

Analyze HTML, CSS, and JavaScript files against Web Interface Guidelines.

Community
Intermediate
Montte-erpMontte-erp
6

wcag-audit-patterns

Audit web pages for WCAG 2.2 violations with automated and manual checks.

Official
Intermediate
owenlamontowenlamont
1

python-lint-format

Automate Python code linting and formatting with pre-commit hooks.

Community
Advanced
braswelljrbraswelljr
8

web-design-guidelines

Audit web UI code against official Web Interface Guidelines for compliance issues.

Community
Intermediate