web-design-guidelines

Assess UI code against Web Interface Guidelines for accessibility and design issues.

19|119|Updated Dec 9, 2024

Search Tags:#accessibility #frontend #ui-review #ux-audit #web-design-guidelines #design-quality

Ready to run

npx skills add https://github.com/kindfi-org/kindfi --skill web-design-guidelines-kindfi-org

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/kindfi-org/kindfi/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/kindfi-org/kindfi --skill web-design-guidelines-kindfi-org

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps ensure web UI code adheres to established web interface guidelines, improving accessibility, consistency, and user experience across projects.

Core Features & Use Cases

Guideline compliance checking: compares UI code against the latest Web Interface Guidelines.
Accessibility checks: highlights issues related to color contrast, keyboard navigation, and ARIA semantics.
Review UX and design quality: identifies potential usability improvements and consistency gaps.
Use Case: When asked to review a UI, check accessibility, audit design, or compare site against best practices.

Quick Start

Provide a review of your UI files against the latest Web Interface Guidelines and report any accessibility and UX inconsistencies.

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 design issues?▼

To audit UI code for accessibility and design issues, provide your HTML, CSS, and component files for review against the latest Web Interface Guidelines to receive actionable reports on compliance, visual consistency, and UX best practices.

What is checked during a web interface accessibility review?▼

A web interface accessibility review checks color contrast, keyboard navigation, and ARIA semantics in your UI code to identify compliance gaps and ensure adherence to established UX best practices.

Can I check my HTML and CSS for guideline compliance?▼

Yes, you can check HTML and CSS for guideline compliance by applying pattern matching against web interface guidelines, which identifies visual inconsistencies and accessibility issues across your component patterns.

How do I identify UX best practices gaps in my web interface?▼

To identify UX best practices gaps, submit your web interface files for a UX audit that evaluates visual consistency and usability, producing concise, actionable reports highlighting potential improvements.

Does this UI review work with component patterns or only raw code?▼

This UI review works with both raw code and component patterns, applying checks across HTML, CSS, and component structures to enforce web interface guideline compliance and identify accessibility issues.

What is the best way to report accessibility inconsistencies in a web UI?▼

The best way to report accessibility inconsistencies is to generate concise, actionable findings that highlight specific ARIA semantics, keyboard navigation, and color contrast issues found during the UI code review.