skills.rest
kindfi-org
kindfi-orgOFFICIAL
Explore all skills by this author →
Website𝕏@KindFi_W3GitHub

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

Related Skills

Explore More Design & Creative Skills→
deangilmoreremixdeangilmoreremix

web-design-guidelines

Review UI files against web design and accessibility guidelines.

Community
Intermediate
aifuxiaifuxi
437

web-design-guidelines

Audit UI code against Web Interface Guidelines for compliance gaps.

Community
Intermediate
nanorepublicananorepublica
61

Global Tech Stack

Validate code against centralized global tech stack standards.

Community
Basic
radenadriradenadri

accessibility-audit

Audit user interfaces for WCAG compliance and generate remediation reports.

Community
Advanced