web-design-guidelines

Fetch web interface guidelines and evaluate UI files for accessibility and design conformity.

Updated Mar 29, 2026
One-click install
npx skills add https://github.com/NikileshReddyT/Open-Claw-Saas --skill web-design-guidelines-nikileshreddyt
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/NikileshReddyT/Open-Claw-Saas/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/NikileshReddyT/Open-Claw-Saas --skill web-design-guidelines-nikileshreddyt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams ensure web interfaces comply with established web interface guidelines, catching accessibility and design issues early in the review process.

Core Features & Use Cases

  • Fetch the latest guidelines from a public source and evaluate UI files for accessibility, color contrast, keyboard navigation, and semantic HTML.
  • Compare your UI against the guidelines to generate actionable findings for designers and developers.
  • Use Case: When preparing a release, run a full UI audit across code, components, and assets to surface issues before user testing.

Quick Start

Fetch the latest guidelines and review the target UI files to generate a findings 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 audit UI files for accessibility and design conformity?

To audit web accessibility, you fetch the latest interface guidelines and evaluate target UI files against them. This process identifies accessibility gaps, color contrast issues, keyboard navigation flaws, and semantic HTML adherence, outputting findings in a terse file:line format.

What is the process for checking semantic HTML and color contrast in components?

Checking semantic HTML and color contrast involves applying rules from fetched web design guidelines to your UI files. The evaluation reviews code, components, and assets to surface design quality issues and generate actionable findings for developers.

How do I review code for accessibility gaps before a release?

Review code for accessibility gaps by running a full UI audit across project files before user testing. This compares your components against established guidelines to catch keyboard navigation and design conformity issues early in the release process.

Can I evaluate UI components against a public guidelines URL?

Yes, you can evaluate UI components against a public guidelines URL. The process fetches the latest web interface guidelines from that source, reads your target files, and applies all fetched rules to identify accessibility and design conformity issues.

Does web accessibility compliance review work for assets across different projects?

Web accessibility compliance review works across projects by applying fetched guidelines to review code, components, and assets. It identifies accessibility gaps and semantic HTML adherence issues regardless of the project, outputting results in a concise file:line format.