skills.rest
sadie100
sadie100COMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Review UI code for compliance with Web Interface Guidelines.

Updated Apr 8, 2026
Search Tags:#code review#design audit#web accessibility#UX review#UI compliance
One-click install
npx skills add https://github.com/sadie100/claude-dotfiles --skill web-design-guidelines-sadie100
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/sadie100/claude-dotfiles/tree/main/skills/web-design-guidelines
Command: npx skills add https://github.com/sadie100/claude-dotfiles --skill web-design-guidelines-sadie100

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires requests, BeautifulSoup, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps maintain UI code quality by ensuring compliance with Web Interface Guidelines, improving accessibility and user experience.

Core Features & Use Cases

  • Compliance Review: Automatically checks UI code against Web Interface Guidelines.
  • Accessibility Check: Ensures that UI is accessible to all users.
  • Design Audit: Helps in auditing design and UX for best practices.
  • Use Case: When developing a web application, use this Skill to review UI components and ensure they adhere to the guidelines.

Quick Start

Run the skill on your UI code with the command: web-design-guidelines review /path/to/ui-code

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 accessibility compliance?▼

You can check UI code for web accessibility compliance by running an automated review that parses HTML elements against Web Interface Guidelines to identify non-compliant components and design issues.

What is a UI compliance review and how does it work?▼

A UI compliance review is an automated audit that uses regex and HTML parsing to evaluate UI code against design best practices, ensuring components meet accessibility standards and UX guidelines.

How do I run a design audit on my web application's UI components?▼

You can run a design audit on your web application by executing a review command that targets your UI code directory, parsing the HTML to detect non-compliant elements based on established guidelines.

Does this UI review tool require a specific guidelines document to function?▼

Yes, the UI review tool requires access to the Web Interface Guidelines document to accurately parse your UI code and identify design or accessibility non-compliance.

Can I use this to perform a UX review on raw HTML files?▼

Yes, you can perform a UX review on raw HTML files because the tool utilizes BeautifulSoup for HTML parsing and regex to detect non-compliant UI elements within your codebase.

What are the limitations of using regex and HTML parsing for code review?▼

Using regex and HTML parsing for code review limits the audit to static UI elements, meaning it cannot evaluate dynamic runtime states or complex JavaScript-driven accessibility behaviors.

Related Skills

Explore More Software Engineering Skills→
boraoztuncboraoztunc
248

web-design-guidelines

Enforce Web Interface Guidelines compliance across HTML, CSS, and JavaScript files.

Community
Intermediate
7loro7loro
1

web-design-guidelines

Audit UI code against Web Interface Guidelines and report findings in file:line format.

Community
Basic
BURHANDEV-ENTERPRISEBURHANDEV-ENTERPRISE

mop-ui-clone

Extract HTML structure, CSS design tokens, and 3D assets from websites.

Official
Advanced
bingeli1379bingeli1379
2

accessibility

Audit web accessibility for WCAG 2.1 AA compliance using axe-core and eslint-plugin-jsx-a11y.

Community
Intermediate