skills.rest
princejoogie
princejoogieCOMMUNITY
Explore all skills by this author →
𝕏@princecaarloGitHub

web-design-guidelines

Identify UI code violating Web Interface Guidelines and accessibility standards.

30|1|Updated Feb 19, 2022
Search Tags:#ui#accessibility#audit#guidelines#web#design-review
One-click install
npx skills add https://github.com/princejoogie/dotfiles --skill web-design-guidelines-princejoogie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/princejoogie/dotfiles/tree/main/opencode/.config/opencode/skills/web-design-guidelines
Command: npx skills add https://github.com/princejoogie/dotfiles --skill web-design-guidelines-princejoogie

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI code often fails to meet Web Interface Guidelines and accessibility standards, leading to inconsistent UX and reduced usability.

Core Features & Use Cases

  • Fetch the latest Web Interface Guidelines from the official source.
  • Validate UI files against the rules and surface violations with precise references.
  • Use Case: QA teams can quickly audit new components for accessibility and design consistency.

Quick Start

Provide the UI files or repository path to review and I will fetch the latest guidelines and start the audit.

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 web UI code for accessibility and design guideline violations?▼

To audit web UI code, you provide the UI files or repository path. The system fetches the latest Web Interface Guidelines, parses the target files, and reports accessibility violations in a concise file:line format.

What are Web Interface Guidelines and when do I need to check my components against them?▼

Web Interface Guidelines are official standards for UI accessibility and consistency. You need to check your components against them during site audits or when building component libraries to ensure a standards-compliant review and consistent UX.

Can I use this design review tool to audit a component library?▼

Yes, this design review tool is applicable to web projects, component libraries, and site audits. You provide the library path, and it fetches the official guidelines source to validate your UI files.

How does the accessibility audit report UI violations?▼

The accessibility audit reports UI violations with precise references in a file:line format. It parses target files against the fetched official Web Interface Guidelines to surface specific code that violates accessibility best practices.

Do I need to manually provide the web design rules for a design review?▼

No, you do not need to manually provide web design rules. The system automatically fetches the latest Web Interface Guidelines from the official source before parsing your target UI files and reporting findings.

Related Skills

Explore More Design & Creative Skills→
yuribodoyuribodo
2

web-design-guidelines

Validate HTML, CSS, and JavaScript UI files against Web Interface Guidelines.

Community
Basic
noartemnoartem

web-design-guidelines

Audit HTML/CSS/JS files against Web Interface Guidelines and report violations.

Community
Intermediate
hakushunhakushun

web-design-guidelines

Verify UI files against Web Interface Guidelines and output file:line findings.

Community
Intermediate
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-forced-colors

Detect forced-colors accessibility failures in rendered web pages.

Community
Intermediate