web-design-guidelines

Enforce Web Interface Guidelines compliance in HTML/CSS/JS UI files.

6|1|Updated Dec 8, 2009

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

Ready to run

npx skills add https://github.com/jey3dayo/dotfiles --skill web-design-guidelines-jey3dayo

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI teams struggle to ensure code adheres to evolving Web Interface Guidelines, leading to inconsistent and less accessible interfaces.

Core Features & Use Cases

Guideline-driven review: fetches the latest rules and compares UI files (HTML/CSS/JS) against them.
Accessibility checks: assesses contrast, semantic structure, keyboard navigation, and ARIA usage.
Audit scenarios: suitable for site reviews, component audits, and design-to-code handoffs.

Quick Start

Fetch the latest guidelines and run a review against your UI files to verify compliance.

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 HTML and CSS files for accessibility compliance?▼

To audit HTML and CSS files for accessibility, fetch the latest web interface guidelines to compare your code against. This process checks contrast, semantic structure, keyboard navigation, and ARIA usage, outputting concise findings for review.

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

The best way to review UI code against web design guidelines is using an automated audit tool that fetches the latest rules. It identifies compliance issues in your interface assets and outputs concise findings to enforce consistency.

Can I use this for a design-to-code handoff review?▼

Yes, you can use this for design-to-code handoff reviews. It assesses UI assets like HTML, CSS, and JS to ensure the final components adhere to current web interface guidelines and accessibility standards.

Does the accessibility audit check keyboard navigation and ARIA usage?▼

Yes, the accessibility audit specifically checks keyboard navigation and ARIA usage. It also evaluates color contrast and semantic HTML structure to ensure comprehensive compliance with web interface guidelines.

How do I ensure my UI components follow evolving web interface guidelines?▼

To ensure UI components follow evolving web interface guidelines, run automated reviews that fetch the latest compliance rules. This identifies inconsistencies in your HTML, CSS, and JS files before they reach production.