web-design-guidelines

Review UI code for compliance with Web Interface Guidelines.

Updated Jan 17, 2026
One-click install
npx skills add https://github.com/epiphanyapps/mapyourhealth --skill web-design-guidelines-epiphanyapps
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/epiphanyapps/mapyourhealth/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/epiphanyapps/mapyourhealth --skill web-design-guidelines-epiphanyapps

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps ensure that web interfaces adhere to established design and accessibility best practices, improving user experience and usability.

Core Features & Use Cases

  • UI Code Review: Analyzes code for compliance with web interface guidelines.
  • Accessibility Checks: Identifies potential accessibility issues.
  • Design Audits: Reviews user interface against best practices.
  • Use Case: A developer can use this skill to automatically check a new component's code against the company's design system before it's merged.

Quick Start

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

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

To audit UI code for web design guideline compliance, review your front-end files against established web interface guidelines, checking for accessibility issues and design best practices before merging new components.

Can I run an accessibility check on my front-end components automatically?

Yes, you can run an accessibility check on front-end components by applying external guideline definitions to specified UI files or patterns, automatically identifying potential accessibility issues during code review.

What is a UI code review for web design guidelines?

A UI code review for web design guidelines analyzes your user interface code to ensure adherence to design systems and accessibility standards, improving overall user experience and usability.

Does this UI code review work with specific file patterns?

Yes, UI code review works with specific file patterns by fetching external guideline definitions and applying them directly to the specified front-end files, such as reviewing a component like 'src/components/Button.js'.

How do I check a new component against a design system before merging?

To check a new component against a design system before merging, audit the user interface code for compliance with web interface guidelines, ensuring accessibility and design best practices are met.

What are the limitations of automated web design guideline audits?

Automated web design guideline audits require fetching external guideline definitions to function, meaning the audit's scope and accuracy depend entirely on the specific standards and rules defined in those external references.