skills.rest
joaoprocopio
joaoprocopioCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Identify UI code compliance issues against the latest Web Interface Guidelines.

2|Updated Jun 13, 2023
Search Tags:#accessibility#compliance#code-review#web-design#design-review#ui-guidelines
One-click install
npx skills add https://github.com/joaoprocopio/tooling --skill web-design-guidelines-joaoprocopio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/joaoprocopio/tooling/tree/main/skills/web-design-guidelines
Command: npx skills add https://github.com/joaoprocopio/tooling --skill web-design-guidelines-joaoprocopio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review UI code for Web Interface Guidelines compliance and accessibility, helping teams catch issues early.

Core Features & Use Cases

  • Automated UI Compliance: Evaluate HTML/CSS/JS against the latest guidelines and flag deviations.
  • Accessibility Focus: Detect color contrast issues, keyboard navigation gaps, and semantic markup problems to improve usability.
  • Use Case: When asked to review a site, run checks on provided files and report violations in the file:line format for quick remediation.

Quick Start

Provide the UI files or a path pattern to review and receive a concise compliance report.

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 UI code for web interface compliance and accessibility issues?▼

The Skill detects accessibility and UI compliance issues by fetching the latest Web Interface Guidelines before every review. It evaluates your provided files or path patterns and outputs findings in a file:line format for quick remediation.

Can I review HTML and CSS files for color contrast and keyboard navigation gaps?▼

Yes, you can review HTML and CSS files for color contrast and keyboard navigation gaps. The Skill evaluates provided UI files against current guidelines to flag semantic markup problems and accessibility deviations for quick remediation.

What is the best way to check my site against the latest web design guidelines?▼

The best way to check your site against the latest web design guidelines is to run an automated UI compliance review. The Skill fetches current rules from its source URL before every evaluation to ensure your code is checked against up-to-date standards.

Does the UI compliance review require any specific dependencies or setup?▼

No specific dependencies are required for the UI compliance review. You simply provide the UI files or a path pattern to the Skill, and it will fetch the necessary guidelines from the source URL and apply checks to report violations.

Why does the web design review fail to produce a compliance report?▼

The web design review fails to produce a compliance report if required inputs are missing. The Skill fetches guidelines from its source URL prior to every review and will fail gracefully when it cannot access the provided UI files or path patterns.

Related Skills

Explore More Design & Creative Skills→
Unson-LLCUnson-LLC
9

architecture-patterns

Evaluate Brainbase code against architecture patterns and report violations.

Official
Advanced
elophantoelophanto
116

web-design-guidelines

Fetch web interface guidelines and report UI code compliance in file:line format.

Community
Intermediate
del-zhenwudel-zhenwu

baseline-ui

Validate React components for accessibility, layout, and Tailwind CSS style consistency.

Community
Basic
Vivekmano27Vivekmano27

accessibility-audit

Identify WCAG 2.1 AA/AAA accessibility gaps in web application UIs.

Community
Advanced