skills.rest
ryan-mt
ryan-mtCOMMUNITY
Explore all skills by this author →
GitHub

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

Related Skills

Explore More Software Engineering Skills→
d0whc3rd0whc3r

web-design-guidelines

Compare UI code files against Web Interface Guidelines and report compliance issues in file:line format.

Community
Intermediate
yp717yp717

web-design-guidelines

Review UI code against fetched Web Interface Guidelines for compliance.

Community
Intermediate
xiaoniuge36xiaoniuge36
6

code-review

Analyze code for standards compliance, bugs, performance issues, and security vulnerabilities.

Community
Advanced
GabeujinGabeujin

web-design-reviewer

Inspect website screenshots and DOM structure to fix design issues.

Community
Advanced