skills.rest
harsh-pandhe
harsh-pandheCOMMUNITY
Explore all skills by this author →
Website𝕏@HarshPandheGitHub

web-design-guidelines

Apply Web Interface Guidelines to identify UI conformance gaps with file:line references.

Updated Aug 27, 2026
Search Tags:#ui#accessibility#compliance#review#best-practices#web-guidelines#design-audit
One-click install
npx skills add https://github.com/harsh-pandhe/pod-transit --skill web-design-guidelines-harsh-pandhe
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/harsh-pandhe/pod-transit/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/harsh-pandhe/pod-transit --skill web-design-guidelines-harsh-pandhe

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers ensure their UI code adheres to the latest Web Interface Guidelines, improving accessibility, usability, and visual consistency across products.

Core Features & Use Cases

  • Guideline retrieval: Fetches the latest Web Interface Guidelines from the specified source before each review.
  • File/pattern evaluation: Reads target files or patterns to scope the audit.
  • Rule-based audit & reporting: Compares code against all guidelines and reports violations in a concise file:line format.
  • Use Case: When auditing a web app or component library for accessibility and UX conformance, run this skill to identify violations and recommended fixes.

Quick Start

Provide the files or pattern to review and ask me to run the Web Interface Guidelines check.

Frequently Asked Questions about web-design-guidelines

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

FAQPage Schema
How do I audit my web components for accessibility and UX best practices?▼

To audit web components for accessibility, you provide target files or patterns and the tool fetches the latest Web Interface Guidelines to compare against your code, reporting violations with precise file:line references.

What is a UI conformance review for web design guidelines?▼

A UI conformance review evaluates your project files against established Web Interface Guidelines to identify accessibility gaps, such as color contrast and ARIA usage issues, ensuring usability and visual consistency.

Can I check ARIA usage and color contrast violations in my UI code?▼

Yes, you can check ARIA usage and color contrast by loading your target files; the audit applies web guidelines to detect these specific accessibility violations and reports them with exact locations.

How do I run a design audit on specific files or patterns in my web app?▼

To run a design audit on specific files, provide the file paths or patterns you want evaluated, and the tool will scope the review to those targets and report any conformance gaps found.

Does this accessibility review tool work with any web framework?▼

The accessibility review evaluates UI code by reading target files or patterns, making it applicable across various web frameworks as long as the project files can be loaded and analyzed.

What is the best way to identify web interface guideline violations during a code review?▼

The best way to identify web interface guideline violations during a code review is to run an automated rule-based audit that fetches current standards and compares them directly against your codebase.

Related Skills

Explore More Design & Creative Skills→
hongmaple0820hongmaple0820
9

web-design-guidelines

Audit UI code for Web Interface Guidelines compliance.

Community
Intermediate
majiayu000majiayu000
12

skill

Route user requests to registered skill modules and execute them in context.

Community
Basic
CwuztoCwuzto

web-design-guidelines

Validate UI code against Web Interface Guidelines and report violations in file:line format.

Community
Intermediate
warpdotdevwarpdotdev
820

web-accessibility-audit

Audit web pages against WCAG standards using automated tools and manual review.

Official
Intermediate