web-design-guidelines

Audit UI code for Web Interface Guidelines compliance.

9|2|Updated Mar 12, 2026
One-click install
npx skills add https://github.com/hongmaple0820/agent-academy --skill web-design-guidelines-hongmaple0820
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/hongmaple0820/agent-academy/tree/main/skills/design/web-design-guidelines
Command: npx skills add https://github.com/hongmaple0820/agent-academy --skill web-design-guidelines-hongmaple0820

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide helps reviewers verify that UI code adheres to Web Interface Guidelines, ensuring accessible, consistent, and high-quality user interfaces across web projects.

Core Features & Use Cases

  • Guideline-driven reviews: automatically compare UI components and pages against the latest Web Interface Guidelines source.
  • Accessibility & UX validation: flags contrast, semantic structure, keyboard navigation, and responsive behavior issues.
  • Use Case: when reviewing a landing page, the skill identifies violations and suggests fixes to improve usability and accessibility.

Quick Start

Provide the UI files or a path to review, and I will fetch the latest guidelines and run the compliance check.

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 accessibility and design-system compliance?

To audit UI code for accessibility and design-system compliance, provide your UI files or directory path. The tool fetches the latest Web Interface Guidelines and checks your codebase against rules for semantic structure, keyboard navigation, and responsive behavior.

What is a UX audit for frontend web projects?

A UX audit for frontend web projects is a review process that validates UI components against design guidelines. It identifies contrast issues, semantic structure flaws, and keyboard navigation gaps to ensure accessible and consistent user interfaces.

How do I check if my landing page meets web interface guidelines?

To check if your landing page meets web interface guidelines, input the page files for review. The compliance check fetches the target guidelines, applies all rules to your code, and reports violations alongside suggested fixes for improved usability.

Can I review specific components for UX and accessibility conformance?

Yes, you can review specific components for UX and accessibility conformance. The review process applies to individual components, pages, and entire codebases, flagging contrast, semantic structure, and responsive behavior issues based on the fetched guidelines.

Does the accessibility review require any external dependencies?

No, the accessibility review does not require external dependencies. You simply provide the target UI files or file patterns, and the tool fetches the Web Interface Guidelines from the URL specified in the frontmatter to run the compliance check.

What is the best way to validate frontend design-system rules in a codebase?

The best way to validate frontend design-system rules in a codebase is using a guideline-driven review. It automatically compares your UI components against the latest Web Interface Guidelines source, reporting concise findings on accessibility and UX conformance.