skills.rest
HorusGoul
HorusGoulCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Enforce Web Interface Guidelines compliance across UI code and design artifacts.

110|3|Updated Jan 26, 2026
Search Tags:#ui#accessibility#audit#compliance#guidelines#design-system#web-design
One-click install
npx skills add https://github.com/HorusGoul/eslint-plugin-react-render-types --skill web-design-guidelines-horusgoul
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/HorusGoul/eslint-plugin-react-render-types/tree/main/.claude/skills/web-design-guidelines
Command: npx skills add https://github.com/HorusGoul/eslint-plugin-react-render-types --skill web-design-guidelines-horusgoul

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Identifies and enforces Web Interface Guidelines compliance across UI code and design assets, reducing accessibility issues and UI inconsistency.

Core Features & Use Cases

  • Automated guideline checks against the latest Web Interface Guidelines
  • Accessibility audits, design-consistency verification, and regression detection
  • Use Case: Review a web app's UI to verify color contrast, keyboard navigation, and component usage against guidelines

Quick Start

Provide a file or pattern to review and the tool will fetch guidelines, analyze the target files, and report 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 design compliance and accessibility?▼

You can audit UI code for web design compliance by providing your target files. The tool fetches Web Interface Guidelines, analyzes the UI code against accessibility and design-system rules, and reports findings in a concise line-based format.

What is a Web Interface Guidelines compliance check?▼

A Web Interface Guidelines compliance check identifies accessibility issues and UI inconsistency across design artifacts and UI code. It enforces rules for color contrast, keyboard navigation, and component usage to maintain web design consistency.

Can I verify design-system consistency across multiple web projects?▼

Yes, you can verify design-system consistency across multiple web projects. The tool performs design-review checks against fetched guidelines, detecting UI regressions and reporting inconsistencies in a line-based format for each specified file.

Does this tool check color contrast and keyboard navigation?▼

Yes, this tool checks color contrast and keyboard navigation. It analyzes specified UI code files against Web Interface Guidelines to verify accessibility compliance and reports any violations in a concise, line-based format.

What's the best way to detect UI regressions in web app components?▼

The best way to detect UI regressions in web app components is running an automated design-review check. The tool fetches the latest Web Interface Guidelines, analyzes your component files against the rules, and reports compliance findings concisely.

How do I start an accessibility audit using web design guidelines?▼

To start an accessibility audit, provide your UI code file or pattern for review. The tool will automatically fetch the Web Interface Guidelines, analyze the target files against the accessibility rules, and report the results.

Related Skills

Explore More Design & Creative Skills→
kurokeitakurokeita
1

web-design-guidelines

Audit UI components and layouts against Web Interface Guidelines compliance.

Community
Intermediate
easyspace-aieasyspace-ai

web-design-guidelines

Enforce Web Interface Guidelines on UI assets and report violations.

Community
Intermediate
jnPiyushjnPiyush

code-review-and-audit

Automate code review, security audits, and compliance verification in CI/CD pipelines.

Community
Advanced
sgpropertyanalyticssgpropertyanalytics
2

web-design-guidelines

Check frontend UI files against the latest Web Interface Guidelines.

Official
Intermediate