skills.rest
PheonixCodder
PheonixCodderCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Evaluates UI code against Web Interface Guidelines for accessibility and consistency.

Updated Apr 4, 2026
Search Tags:#ui#accessibility#review#code-review#web#design-guidelines
One-click install
npx skills add https://github.com/PheonixCodder/Beeclean-Production --skill web-design-guidelines-pheonixcodder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/PheonixCodder/Beeclean-Production/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/PheonixCodder/Beeclean-Production --skill web-design-guidelines-pheonixcodder

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure that UI code complies with Web Interface Guidelines, enabling accessibility audits, consistency checks, and UX quality reviews.

Core Features & Use Cases

  • Fetch the latest Web Interface Guidelines and apply them to target UI files.
  • Inspect HTML/CSS/JS/TS for accessibility, semantics, keyboard navigation, color contrast, and ARIA usage.
  • Produce actionable findings suitable for design reviews or code QA processes.

Quick Start

Provide the UI files or paths you want reviewed.

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 HTML and CSS code for web accessibility and usability gaps?▼

You can audit HTML and CSS for web accessibility by evaluating UI code against Web Interface Guidelines. This process inspects semantics, keyboard navigation, color contrast, and ARIA usage to return actionable findings in a concise file:line format.

Can I review TypeScript component libraries for UI consistency and ARIA usage?▼

Yes, you can review TypeScript component libraries for UI consistency and ARIA usage. The evaluation analyzes HTML/CSS/JS/TS files to detect accessibility, semantics, and consistency gaps against the latest fetched Web Interface Guidelines.

What is the best way to check UI code against the latest web design guidelines?▼

The best way to check UI code against web design guidelines is to fetch the latest standards dynamically via WebFetch and validate your target files. This process ensures your webpages meet current accessibility, usability, and consistency requirements.

Does this accessibility review process require any external dependencies or components?▼

No, this accessibility review process requires no external dependencies or components. You simply provide the UI files or paths you want reviewed, and it fetches the necessary Web Interface Guidelines to validate your code.

How are accessibility and UX code review findings formatted for design QA?▼

Accessibility and UX code review findings are formatted in a concise file:line layout. This structure produces actionable results suitable for integration into design reviews or broader code QA processes.

Related Skills

Explore More Design & Creative Skills→
JetBrainsJetBrains
302

web-design-guidelines

Fetch web interface guidelines and validate HTML, CSS, and JS files for noncompliant UI patterns.

Official
Intermediate
do-ob-iodo-ob-io

web-design-guidelines

Analyze HTML, CSS, and JavaScript UI code against Web Interface Guidelines.

Official
Basic
AutomatticAutomattic
31

liberate-local

Convert static HTML, CSS, and JS directories into WordPress block themes.

Official
Advanced
okwindsokwinds
50

headless-web-viewer

Render JavaScript-heavy webpages and extract visible text with Playwright.

Community
Intermediate