skills.rest
kuroRy
kuroRyCOMMUNITY
Explore all skills by this author →
𝕏@ryo__webGitHub

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
One-click install
npx skills add https://github.com/kuroRy/dotfiles --skill web-design-guidelines-kurory
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
ChristineThamChristineTham

web-design-guidelines

Identify UI accessibility and design guideline violations in project files.

Community
Intermediate
yutanpo1227yutanpo1227

web-design-guidelines

Audit UI code against Web Interface Guidelines for accessibility and design compliance.

Community
Intermediate
opencodosopencodos
14

web-design

Audit HTML, CSS, and JS for web interface guideline compliance.

Official
Intermediate
kimmyxpowkimmyxpow

wcag-audit-patterns

Identify and remediate WCAG 2.2 accessibility violations with automated testing and checklists.

Community
Advanced