web-design-guidelines

Review UI code against Web Interface Guidelines for accessibility compliance.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps ensure that UI code adheres to established Web Interface Guidelines, improving consistency, accessibility, and overall user experience.

Core Features & Use Cases

  • Automated Code Review: Scans specified files or patterns against a set of predefined design and accessibility rules.
  • Compliance Checking: Identifies deviations from best practices in UI development.
  • Use Case: A developer can use this skill to quickly audit a new component's code for accessibility issues and adherence to the company's design system before merging it.

Quick Start

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

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 compliance with web design guidelines and accessibility standards?

You can audit UI code for web design guidelines by scanning specified files or patterns against predefined design and accessibility rules. This automated code review identifies deviations from best practices to improve consistency and user experience.

What is automated UI code review for front-end development workflows?

Automated UI code review is the process of scanning front-end files against a set of predefined rules to identify deviations from best practices. It checks for compliance with established Web Interface Guidelines and accessibility standards.

Can I check my component code against a custom design system URL before merging?

Yes, you can check component code against a custom design system by fetching the latest guidelines from a specified URL. The skill applies these fetched rules to your user-provided files or patterns to ensure adherence.

How do I review a specific file like src/components/Button.tsx for accessibility issues?

To review a specific file like src/components/Button.tsx, you provide the file path to the skill. It scans the file for accessibility issues and adherence to your design system, identifying deviations before you merge the code.

Does this web design guidelines review work with any front-end framework?

The web design guidelines review applies to front-end development workflows by auditing user interfaces. It processes user-provided files or patterns, making it compatible with any front-end framework code you supply.

What limitations exist when checking UI code for adherence to design systems?

A key limitation is that compliance checking requires fetching the latest guidelines from a specified URL. It only identifies deviations from best practices in the user-provided files or patterns and does not automatically fix the code.