web-design-guidelines

Evaluate UI assets for accessibility and design conformance issues.

588|41|Updated May 13, 2026

Search Tags:#design #ui #accessibility #contrast #review #guidelines #semantics

Ready to run

npx skills add https://github.com/zai-org/Synapse --skill web-design-guidelines-zai-org

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/zai-org/Synapse/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/zai-org/Synapse --skill web-design-guidelines-zai-org

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure web interfaces meet established design and accessibility standards, reducing usability issues and rework.

Core Features & Use Cases

Automated UI reviews: checks for color contrast, semantic HTML, alt text, and responsive layout.
Design guidance: suggests improvements aligned with common guidelines for web interfaces.
Use Case: When asked to assess a UI, provide a quick pass/fail on accessibility and design conformance with actionable notes.

Quick Start

Review a UI project and request an accessibility-and-design compliance report for the latest build.

Frequently Asked Questions about web-design-guidelines

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

FAQPage Schema

How do I run an accessibility audit on a web interface?▼

To run an accessibility audit, provide your UI assets to the system for evaluation against established guidelines. It checks color contrast, semantic HTML, alt text, keyboard navigation, and responsive behavior to generate a pass/fail conformance report.

What is UI design conformance review for web projects?▼

A UI design conformance review evaluates web interfaces against established guidelines to identify accessibility and design issues. It checks color contrast, semantic markup, keyboard navigation, and responsive layout to ensure overall design consistency and reduce usability rework.

How do I check color contrast and semantic markup in a design audit?▼

You can check color contrast and semantic markup by submitting your UI project for an automated review. The evaluation identifies conformance issues across these accessibility guidelines and provides actionable notes for UX QA improvements.

Can I evaluate keyboard navigation and responsive behavior for UX QA?▼

Yes, you can evaluate keyboard navigation and responsive behavior by requesting an accessibility and design compliance report. The review assesses these interactive UI elements against established guidelines to deliver actionable pass/fail conformance feedback.

Does this design audit work for live builds and UI components?▼

Yes, this design audit works for live builds, individual UI components, and full web projects. It evaluates provided UI assets against design and accessibility guidelines to identify conformance issues across various implementation contexts.

What are the limitations of automated UI accessibility reviews?▼

Automated UI accessibility reviews focus on established conformance issues like color contrast, semantic markup, and responsive layout. They may not capture complex contextual usability problems, but they provide actionable pass/fail notes to guide manual UX QA follow-up.