web-design-guidelines

Analyzes HTML/CSS/JS codebases for compliance with Web Interface Guidelines.

2|Updated Aug 2, 2025

Search Tags:#accessibility #UI #UX #audit #review #web-design-guidelines

Ready to run

npx skills add https://github.com/wssAchilles/Mycode --skill web-design-guidelines-wssachilles

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/wssAchilles/Mycode/tree/main/telegram/.codex/skills/web-design-guidelines
Command: npx skills add https://github.com/wssAchilles/Mycode --skill web-design-guidelines-wssachilles

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams ensure UI code complies with Web Interface Guidelines, catching accessibility, responsive design, and UX issues early in the development cycle.

Core Features & Use Cases

Guideline-driven review: scans HTML/CSS/JS to detect accessibility violations, color contrast issues, keyboard navigation gaps, and semantic structure.
Consistency checks: verifies naming conventions, component usage, and adherence to design tokens across a project.
Use Case: when you're about to launch a new web feature, run this review to surface accessibility and UX gaps before QA.

Quick Start

Run the web-design-guidelines review on your frontend repository using the remote guidelines source, with file patterns like index.html or src/**/*.tsx to start.

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I run an accessibility audit on my web UI codebase?▼

To run an accessibility audit, this skill scans your HTML, CSS, and JavaScript frameworks to detect accessibility violations, color contrast issues, and keyboard navigation gaps. It fetches the latest remote Web Interface Guidelines rules before applying checks to your project.

What does a UI UX consistency check cover for web projects?▼

A UI UX consistency check verifies naming conventions, component usage, and adherence to design tokens across your web project. It targets semantic structure and responsive design to ensure compliance with Web Interface Guidelines.

Can I use this review tool with JavaScript frameworks like React?▼

Yes, this skill works with JavaScript frameworks by scanning file patterns like src/**/*.tsx. It applies responsive design and UX checks across HTML, CSS, and JS to surface compliance gaps before QA.

When do I need to run a web design guidelines review?▼

You need a web design guidelines review when you are about to launch a new web feature. Running this scan early in the development cycle catches accessibility and UX issues before they reach QA.

How do I scan for color contrast and keyboard navigation gaps in my frontend?▼

Scanning for color contrast and keyboard navigation gaps requires fetching remote Web Interface Guidelines and applying them to your UI codebase. This skill detects these specific accessibility violations alongside responsive design issues.

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

No external dependencies or components are required. The skill fetches the latest rules directly from a remote Web Interface Guidelines source before applying accessibility, naming convention, and design token checks to your codebase.