web-design-guidelines

Review UI code for compliance with Web Interface Guidelines and accessibility standards.

19|5|Updated Nov 23, 2025
One-click install
npx skills add https://github.com/Nir-Bhay/markups --skill web-design-guidelines-nir-bhay
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Nir-Bhay/markups/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/Nir-Bhay/markups --skill web-design-guidelines-nir-bhay

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 design quality.

Core Features & Use Cases

  • Automated Code Review: Scans UI code files against a predefined set of web design and accessibility rules.
  • Compliance Checking: Identifies deviations from best practices, ensuring a higher standard for web interfaces.
  • Use Case: A developer can use this skill to quickly audit a new component's code before merging, ensuring it meets the project's design system and accessibility requirements.

Quick Start

Use the web-design-guidelines skill to review the UI code in the 'src/components' directory.

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check my frontend code for web design and accessibility compliance?

To check frontend code for web design compliance, you can automatically scan UI component files against predefined interface guidelines to identify deviations from accessibility standards and best practices. This process audits code to ensure adherence to design systems.

Can I audit specific component directories for UI guideline deviations?

Yes, you can audit specific component directories for UI guideline deviations by applying web interface guidelines to specified file patterns, such as the 'src/components' directory. This targets the review directly to your front-end development workflows.

What is automated UI code review for web standards?

Automated UI code review for web standards is the process of scanning front-end code files against a predefined set of web design and accessibility rules to identify deviations. It ensures user interface code meets established compliance and design system requirements.

Does this web design guideline review require external accessibility rules?

Yes, the web design guideline review requires fetching external guidelines to apply them to your specified file patterns. This ensures the compliance checking uses established web interface standards rather than relying solely on internal rules.

When do I need to run an accessibility and design system compliance check?

You need to run an accessibility and design system compliance check before merging new components to ensure they meet project requirements. This automated code review improves consistency and overall design quality by identifying best practice deviations early.

What is the best way to ensure UI code meets design system requirements?

The best way to ensure UI code meets design system requirements is using an automated compliance checker that scans front-end code for deviations from established web interface guidelines. This enforces accessibility standards and improves overall design quality.