web-design-guidelines

Review UI code against Web Interface Guidelines for accessibility and design compliance.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

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

Core Features & Use Cases

  • Automated Code Review: Scans UI code files for compliance with a predefined set of web design best practices.
  • Guideline Enforcement: Fetches the latest guidelines from a remote source to ensure up-to-date checks.
  • Use Case: A developer can use this skill to quickly audit a new component's code before merging, ensuring it meets accessibility standards and design system requirements.

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 guidelines and accessibility?

To audit UI code for web design guidelines, you can use automated review tools that scan front-end components for compliance with accessibility standards and design best practices. This skill fetches the latest guidelines from a specified URL to perform the audit.

What is the best way to check if my front-end components meet web interface guidelines?

Checking front-end components against web interface guidelines involves scanning your UI code files to verify compliance with design best practices. This skill reviews your code against a predefined set of standards fetched from a remote source.

Can I review a specific component file for accessibility compliance?

Yes, you can review a specific component file for accessibility compliance by passing the file path to the review tool. For example, you can target a specific file like 'src/components/Button.js' to ensure it meets the required UI standards.

Does this UI code review process require any external dependencies?

No external dependencies are required to run this UI code review process. The skill operates independently using its internal scripts and references to fetch guidelines and audit your front-end code.

How do I ensure my web application code is up-to-date with current design standards?

To ensure your web application code is up-to-date with current design standards, use a review tool that fetches the latest guidelines from a remote URL. This guarantees your accessibility and design checks are always based on the most recent requirements.

When do I need to run a UI code review for web accessibility?

You need to run a UI code review for web accessibility before merging new components into your front-end application. This ensures your user interface code adheres to established Web Interface Guidelines and maintains a consistent user experience.