web-design-guidelines

Check UI code compliance with Web Interface Guidelines.

3|2|Updated Mar 14, 2026

Search Tags:#code review #performance #accessibility #web design #web standards

Ready to run

npx skills add https://github.com/ryan-mt/claude-backup --skill web-design-guidelines-ryan-mt

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/ryan-mt/claude-backup/tree/main/config/skills/web-design-guidelines
Command: npx skills add https://github.com/ryan-mt/claude-backup --skill web-design-guidelines-ryan-mt

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill ensures that UI code meets Web Interface Guidelines, addressing accessibility, responsiveness, performance, and interaction concerns.

Core Features & Use Cases

Compliance Checking: Automatically checks UI code against Web Interface Guidelines.
Accessibility Review: Ensures color contrast, semantic HTML, and keyboard accessibility.
Responsiveness Audit: Checks for mobile-first design, touch targets, and readable text without zooming.
Performance Assessment: Verifies image optimization, font loading, and layout shift prevention.
Interaction Validation: Checks for loading states, error states, form validation, and optimistic UI.
Use Case: Before deploying a web application, use this Skill to review and ensure that the UI complies with best practices.

Quick Start

Review the 'web-app-source-code' directory 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 UI code for accessibility and responsiveness issues?▼

To check UI code for accessibility and responsiveness, analyze the source code against web interface guidelines to verify color contrast, semantic HTML, keyboard navigation, and mobile-first design.

What is automated compliance checking for web interface guidelines?▼

Automated compliance checking for web interface guidelines is the process of using source code analysis to enforce web design best practices, detecting accessibility, performance, and interaction issues before deployment.

How do I review web application source code for performance and layout shift?▼

Review web application source code for performance by analyzing image optimization, font loading, and layout shift prevention mechanisms to ensure the UI complies with web design standards.

Can I validate form interactions and error states using source code analysis?▼

You can validate form interactions and error states using source code analysis to check for loading states, form validation rules, and optimistic UI implementations within your web application.

Does web design compliance checking work without external dependencies?▼

Web design compliance checking works without external dependencies by utilizing internal scripts and references to perform source code analysis, verifying UI code against established web standards and best practices.