web-design-guidelines

Fetch external rules and review UI code for Web Interface Guidelines compliance.

1|1|Updated Feb 21, 2026

Search Tags:#ui #code review #accessibility #web design #guidelines #ux

Ready to run

npx skills add https://github.com/dtsong/claude-code-windows-setup --skill web-design-guidelines-dtsong

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/dtsong/claude-code-windows-setup/tree/main/skills/web-design-guidelines
Command: npx skills add https://github.com/dtsong/claude-code-windows-setup --skill web-design-guidelines-dtsong

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps ensure that user interface code adheres to established Web Interface Guidelines, improving consistency, accessibility, and overall design quality.

Core Features & Use Cases

Automated Code Review: Scans UI code files against a predefined set of web design best practices.
Compliance Checking: Verifies adherence to accessibility standards and design principles.
Use Case: When asked to "review my UI code for accessibility issues," this skill will fetch the latest guidelines and check the provided files for compliance.

Quick Start

Review the UI code in the file 'src/components/Button.jsx' for compliance with web interface guidelines.

Frequently Asked Questions about web-design-guidelines

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

FAQPage Schema

How do I check my UI code for web design compliance and accessibility issues?▼

To check UI code for web design compliance, fetch external Web Interface Guidelines and apply them to your files. This process audits your code for accessibility issues and UX best practices, outputting findings in a terse file:line format.

What is the best way to automate a UX and accessibility design audit for UI code?▼

The best way to automate an accessibility design audit is using a code review tool that fetches established web design guidelines and scans your UI files. It validates UX best practices and reports compliance findings directly.

Can I review specific UI components like a Button.jsx file against web interface guidelines?▼

Yes, you can review specific UI components like Button.jsx against web interface guidelines. The review process targets individual files, fetching external rules to validate design consistency, accessibility standards, and UX best practices.

What format does the UI code review output for accessibility and design findings?▼

The UI code review outputs accessibility and design findings in a terse file:line format. This structure pinpoints exact locations within your UI code where web design guidelines, accessibility standards, or UX best practices are not met.

Do I need to provide my own web design guidelines to perform a UI code review?▼

You need to provide a specified URL to fetch the external web design guidelines for the UI code review. The tool applies these fetched rules to your specified UI files to validate accessibility, UX best practices, and design compliance.