web-design-guidelines

Compare project files against Web Interface Guidelines and report UI issues.

Updated Aug 17, 2023

Search Tags:#accessibility #usability #guidelines #web-design #ui-review #design-audit

Ready to run

npx skills add https://github.com/kuroRy/dotfiles --skill web-design-guidelines-kurory

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/kuroRy/dotfiles/tree/main/config/claude/skills/web-design-guidelines
Command: npx skills add https://github.com/kuroRy/dotfiles --skill web-design-guidelines-kurory

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The skill helps designers and developers verify that UI code adheres to Web Interface Guidelines, improving accessibility, consistency, and overall usability.

Core Features & Use Cases

Automated UI review: Checks code against the latest Web Interface Guidelines for accessibility, color contrast, semantics, and responsive behavior.
UX alignment: Identifies deviations from guidelines and suggests practical improvements.
Use Case: When asked to "review my UI", "check accessibility", or "audit design", the skill analyzes source files and returns violations with actionable fixes.

Quick Start

Provide a UI review for a given project by checking it against the latest Web Interface Guidelines.

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 accessibility and UX best practices?▼

Automated UI review checks source files against the latest Web Interface Guidelines to identify accessibility, color contrast, semantics, and responsive behavior issues. It returns violations in a terse file:line format for direct layout and UX improvements.

How do I check color contrast and semantics in my web design?▼

To check color contrast and semantics in your web design, compare your source files against external Web Interface Guidelines. This automated review identifies specific deviations and outputs findings in a terse file:line format for immediate layout and UX fixes.

Can I review responsive behavior and layout using web design guidelines?▼

Yes, you can review responsive behavior and layout by applying automated checks to your specified project files. The review compares your code against external Web Interface Guidelines and reports deviations in a terse file:line format for quick fixes.

What is the best way to perform a design audit on source files?▼

The best way to perform a design audit is to check your project files against an external Web Interface Guidelines source. This process identifies accessibility, contrast, semantic, and responsive issues, returning findings in a terse file:line format for immediate action.

Does the UI review require any specific dependencies or components?▼

No dependencies or components are required to run the UI review. The skill operates independently by comparing your specified project files or patterns against an external Web Interface Guidelines URL to output accessibility and UX findings.