skills.rest
tusosos
tusososCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Compare source code and assets against Web Interface Guidelines to detect UI non-conformities.

Updated Apr 3, 2026
Search Tags:#ui#accessibility#usability#review#design-review#design-guidelines#web-audit
One-click install
npx skills add https://github.com/tusosos/manus-knowledge-base --skill web-design-guidelines-tusosos
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/tusosos/manus-knowledge-base/tree/main/OKComputer-3D/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/tusosos/manus-knowledge-base --skill web-design-guidelines-tusosos

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI design governance and code review can be time-consuming; this skill automates checking UI assets against up-to-date Web Interface Guidelines to surface non-conformities.

Core Features & Use Cases

  • Fetches the latest guidelines from the Guidelines Source and applies them to your codebase and design tokens.
  • Checks accessibility aspects (contrast, semantics, keyboard navigation, ARIA usage) and design consistency across components.
  • Use Case: A designer or developer runs the review on a web app and receives a concise report highlighting accessibility gaps and styling inconsistencies.

Quick Start

Provide the UI files or a URL and run the review to generate a compliance report.

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 web project for accessibility and UI design non-conformities?▼

To check web project accessibility and UI conformance, supply your source code files or a URL. The review fetches the latest Web Interface Guidelines, compares them against your assets, and emits a structured compliance report highlighting semantic and contrast issues.

What is a UI design review against web interface guidelines?▼

A UI design review is an automated audit comparing source code and design assets against up-to-date Web Interface Guidelines. It surfaces non-conformities by detecting accessibility gaps, contrast ratio failures, semantic errors, and usability issues in a structured file and line format.

Can I audit a design system or component library for usability gaps?▼

Yes, you can audit design systems and component libraries for usability gaps. The review applies Web Interface Guidelines directly to your codebase and design tokens to detect styling inconsistencies, keyboard navigation failures, and improper ARIA usage across components.

How do I generate an accessibility compliance report for my web app?▼

Generate an accessibility compliance report by providing your web app files or URL to the review tool. It fetches current guidelines and outputs structured findings in a file:line format, detailing contrast ratios, semantics, and ARIA usage errors.

What aspects of web accessibility does a design review cover?▼

A web accessibility design review covers contrast ratios, semantic HTML, keyboard navigation, and ARIA usage. It evaluates your code against fresh Web Interface Guidelines to identify specific usability gaps and design inconsistencies across your project.

Do I need to provide a guidelines source URL to audit my codebase?▼

Yes, the review requires a Guidelines Source URL to fetch the latest Web Interface Guidelines. It uses these dynamically fetched standards to compare against your target files or patterns, ensuring your accessibility and usability audit reflects current compliance requirements.

Related Skills

Explore More Design & Creative Skills→
misty-stepmisty-step
13

web-design-guidelines

Audit UI files against Web Interface Guidelines for accessibility and UX conformance.

Official
Intermediate
rattamnoonrattamnoon

web-design-guidelines

Compare UI files against Web Interface Guidelines and report non-conformities.

Community
Intermediate
ryan-nguyen-01ryan-nguyen-01
4

skill-ui-accessibility

Analyze web UI structure, semantics, and ARIA usage for accessibility gaps.

Community
Advanced
HouseofmvpsHouseofmvps
115

a11y

Detect and fix deterministic WCAG 2.2 A/AA accessibility violations in HTML files.

Community
Advanced