skills.rest
NotWrench
NotWrenchCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Compare UI files against Web Interface Guidelines and output violations in file:line format.

1|Updated Feb 23, 2026
Search Tags:#ui#accessibility#audit#review#guidelines#web-design#conformance
One-click install
npx skills add https://github.com/NotWrench/event-management-sc-2026 --skill web-design-guidelines-notwrench
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/NotWrench/event-management-sc-2026/tree/main/.agent/skills/web-design-guidelines
Command: npx skills add https://github.com/NotWrench/event-management-sc-2026 --skill web-design-guidelines-notwrench

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps ensure UI code aligns with Web Interface Guidelines, catching accessibility and design issues early.

Core Features & Use Cases

  • Guideline Conformance: Assess UI code against current web guidelines.
  • Issue Detection: Identify accessibility, color contrast, semantics, and responsive issues.
  • Use Case: When reviewing a UI, run this skill to flag violations and suggest fixes.

Quick Start

Provide an accessibility and design conformance review for the given UI files against the latest 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 audit my HTML and CSS code for web accessibility and design conformance?▼

To audit HTML and CSS for web accessibility and design conformance, compare your UI files against current Web Interface Guidelines. This process identifies compliance issues, outputting violations in a terse file:line format for each detected accessibility or semantic problem.

What is a UI accessibility audit and what issues does it detect?▼

A UI accessibility audit assesses code against web guidelines to detect accessibility, color contrast, semantics, and responsive issues. It flags violations by applying all rules from current Web Interface Guidelines to your provided UI components, ensuring early issue detection.

Can I use this for code reviews to check UI compliance with web design guidelines?▼

Yes, you can use this for code reviews to check UI compliance with web design guidelines. It applies to code reviews, accessibility audits, and design conformance checks across HTML, CSS, and component subsets, fetching current guidelines to flag violations.

How do I check if my UI components meet the latest Web Interface Guidelines?▼

To check if UI components meet the latest Web Interface Guidelines, provide the UI files for an accessibility and design conformance review. The skill fetches current guidelines, applies all rules, and outputs results in a file:line format for each violation found.

What is the best way to identify color contrast and semantic issues in my web design?▼

The best way to identify color contrast and semantic issues in web design is to run a conformance review against current Web Interface Guidelines. This flags UI compliance issues by comparing provided files against established accessibility and design rules.

What format do the accessibility audit results use when reporting UI violations?▼

Accessibility audit results for UI violations use a terse file:line format for each identified issue. This format pinpoints exact locations of non-compliance in your HTML, CSS, and component subsets after comparing them against the latest Web Interface Guidelines.

Related Skills

Explore More Design & Creative Skills→
dthompsonfldthompsonfl

web-design-guidelines

Audit HTML, CSS, and ARIA against Web Interface Guidelines and report violations.

Community
Intermediate
opencodosopencodos
14

web-design

Audit HTML, CSS, and JS for web interface guideline compliance.

Official
Intermediate
tillysosotillysoso

web-design-guidelines

Identify UI design deviations from Web Interface Guidelines in user files.

Community
Intermediate
zeronx798zeronx798

dogfood

Navigate web pages and interact with DOM elements to detect functional, visual, accessibility issues via browser snapshots and console error monitoring, producing structured bug reports.

Community
Advanced