skills.rest
0xharryriddle
0xharryriddleCOMMUNITY
Explore all skills by this author →
𝕏@0xHarryNguyenVNGitHub

web-design-guidelines

Evaluates UI code against Web Interface Guidelines for accessibility and UX issues.

3|Updated Mar 22, 2026
Search Tags:#design#ui#accessibility#frontend#review#guidelines#ux
One-click install
npx skills add https://github.com/0xharryriddle/codex-field-kit --skill web-design-guidelines-0xharryriddle
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/0xharryriddle/codex-field-kit/tree/main/archive/upstream/chasebuild-agent-skills/react/skills/web-design-guidelines
Command: npx skills add https://github.com/0xharryriddle/codex-field-kit --skill web-design-guidelines-0xharryriddle

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review UI code for Web Interface Guidelines compliance to ensure accessibility, usability, and visual consistency across projects.

Core Features & Use Cases

  • Automated guideline conformance checks: Compare UI files against the latest Web Interface Guidelines.
  • Accessibility and UX evaluation: Identify issues related to color contrast, semantics, keyboard navigation, and responsive behavior.
  • Practical use cases: Use during design reviews, before accessibility audits, or when validating a site's adherence to best practices.

Quick Start

Provide a review of the supplied UI files against the latest Web Interface Guidelines and report any accessibility or UX issues.

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 my frontend UI code for accessibility and design conformance?▼

To check UI code against Web Interface Guidelines, provide your frontend files for an automated conformance review. The process matches file patterns against rules to identify accessibility, usability, and visual consistency issues, returning a concise, line-numbered report.

What is a Web Interface Guidelines compliance review?▼

A Web Interface Guidelines compliance review evaluates UI code to ensure accessibility and visual consistency across projects. It fetches guidelines, reads file patterns, and matches rules to produce a line-numbered report on usability and semantics.

Can I use this to check accessibility for an entire web app or just individual components?▼

You can validate accessibility for entire web apps, individual pages, or specific UI components. The review reads file patterns across frontend projects to evaluate responsive behavior, semantics, and design consistency at any scale.

What specific accessibility and UX issues does a frontend design review catch?▼

A frontend design review catches accessibility and UX issues related to color contrast, semantics, keyboard navigation, and responsive behavior. It validates UI code against Web Interface Guidelines to ensure usability and visual consistency.

When should I run an accessibility and design conformance audit on my web project?▼

Run an accessibility and design conformance audit during design reviews, before formal accessibility audits, or when validating a site's adherence to best practices. This ensures frontend projects maintain usability and visual consistency before release.

Related Skills

Explore More Design & Creative Skills→
RykunoRykuno
24

web-design-guidelines

Audit UI code against Web Interface Guidelines and report issues in file:line format.

Community
Intermediate
t-stringst-strings

Frontend Accessibility

Review frontend UI code for HTML semantics, ARIA, keyboard navigation, and contrast.

Official
Basic
notbozhonotbozho

web-design-guidelines

Enforce Web Interface Guidelines compliance across UI codebases.

Community
Intermediate
alexanderopalexanderop
8

web-design-guidelines

Audit local UI files against Web Interface Guidelines and report violations.

Community
Basic