skills.rest
dtsong
dtsongCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/dtsong/claude-code-windows-setup --skill web-design-guidelines-dtsong
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
nakafaainakafaai
78

web-design-guidelines

Analyze UI files against Web Interface Guidelines and report issues in file:line format.

Official
Basic
mmsu-pawpatrolmmsu-pawpatrol
2

web-design-guidelines

Analyze HTML, CSS, and JavaScript files for design and accessibility standard violations.

Official
Intermediate
ysyecustysyecust
40

springboot-verification

Verify Spring Boot projects with builds, static analysis, tests, and security scans.

Community
Advanced
zajcazajca
2

web-design-guidelines

Fetch and apply Web Interface Guidelines to audit UI code files.

Community
Intermediate