web-design-guidelines

Evaluate web interface code against Web Interface Guidelines and report issues in file:line format.

2|Updated Apr 6, 2026
One-click install
npx skills add https://github.com/bingeli1379/eli-claude-marketplace --skill web-design-guidelines-bingeli1379
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/bingeli1379/eli-claude-marketplace/tree/main/plugins/eureka-sdd/skills/web-design-guidelines
Command: npx skills add https://github.com/bingeli1379/eli-claude-marketplace --skill web-design-guidelines-bingeli1379

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams ensure web interfaces comply with Web Interface Guidelines by automatically evaluating UI code and highlighting violations.

Core Features & Use Cases

  • Fetch the latest guidelines from the official source.
  • Read the provided files or patterns and apply all rules from the guidelines.
  • Output findings in the concise file:line format for quick remediation.
  • Use Case: when reviewing a site for accessibility, color contrast, and semantic markup.

Quick Start

Provide the UI files or a pattern to review and I will return accessibility and UX findings.

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 accessibility and UX issues?

To audit UI code for web accessibility and UX issues, provide your UI files or patterns for evaluation. The tool fetches the latest Web Interface Guidelines and outputs specific findings in a concise file:line format for quick remediation.

Can I use this tool to review a single-page app for accessibility conformance?

Yes, you can use this tool to review single-page apps for accessibility conformance. It evaluates the provided UI code against current Web Interface Guidelines to highlight semantic markup and color contrast violations.

What is the best way to check my design system for web accessibility violations?

The best way to check a design system for web accessibility violations is to supply the UI code files directly. The evaluation applies all rules from the official guidelines and returns a detailed file:line report of any issues.

Does this accessibility audit require any specific dependencies or components?

No specific dependencies or components are required to run this accessibility audit. You simply provide the UI files or code patterns you want to evaluate, and the tool fetches the guidelines from the source URL automatically.

How does the tool format the results of a web interface design critique?

The tool formats the results of a web interface design critique as a concise file:line report. This output format directly links the identified accessibility and UX issues to their exact location in your code for quick remediation.