skills.rest
alexanderop
alexanderopCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Audit local UI files against Web Interface Guidelines and report violations.

8|Updated Jan 31, 2026
Search Tags:#accessibility#frontend#UI#audit#design-review#web-guidelines
One-click install
npx skills add https://github.com/alexanderop/nuxt-sync-engine --skill web-design-guidelines-alexanderop
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/alexanderop/nuxt-sync-engine/tree/main/.claude/skills/web-design-guidelines
Command: npx skills add https://github.com/alexanderop/nuxt-sync-engine --skill web-design-guidelines-alexanderop

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams verify that their UI code adheres to current Web Interface Guidelines, reducing accessibility gaps and inconsistent design decisions across projects.

Core Features & Use Cases

  • Guideline Compliance: Automatically compare UI components and pages against the latest guidelines to identify accessibility and visual issues.
  • Pattern Reuse & Audit: Assess component libraries and design systems for consistency with guidelines, enabling faster UI reviews.
  • Use Case: When refreshing a design system, run this skill against UI codebases to surface WCAG-aligned issues and recommended fixes.

Quick Start

Fetch the latest guidelines, specify file patterns, and run a review to output findings in file:line format.

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 frontend UI code for accessibility and design guideline violations?▼

To audit frontend UI code for accessibility violations, this skill compares local UI files against the latest Web Interface Guidelines. It checks components, styles, and markup for accessibility, contrast, semantics, and responsive behavior, then outputs a concise file:line report.

Can I check my design system components for WCAG compliance automatically?▼

Yes, you can check design system components for WCAG compliance by running this skill against your UI codebase. It fetches official guidelines and applies rule checks to user-specified file patterns to surface visual and accessibility issues.

What is the best way to review frontend markup for contrast and responsive behavior issues?▼

The best way to review frontend markup for contrast and responsive behavior issues is to run an automated design review. This skill fetches current web guidelines and applies rule checks to your specified file patterns, producing a file:line style report of violations.

Do I need to manually provide web interface guidelines to run a UI accessibility audit?▼

No, you do not need to manually provide web interface guidelines. The skill automatically fetches the latest official guidelines using WebFetch, then applies those rule checks to your local UI files to identify accessibility and design inconsistencies.

Does this accessibility audit work with any frontend project or design system?▼

This accessibility audit is applicable to any frontend project or design system. You simply specify your local file patterns, and it will assess your UI components, styles, and markup for compliance with current web interface standards.

Why does my UI design review report show accessibility gaps across different frontend components?▼

Your UI design review report shows accessibility gaps because the audit compares your local components against the latest Web Interface Guidelines. It identifies inconsistent design decisions and semantic issues across your project, outputting findings in a file:line format.

Related Skills

Explore More Design & Creative Skills→
SiddharthChillaleSiddharthChillale

web-design-guidelines

Reviews frontend code against web interface guidelines and accessibility standards.

Community
Intermediate
zero-rehqzero-rehq

web-design-guidelines

Audit frontend UI against 100+ Web Interface Guidelines rules for accessibility, UX, and performance gaps.

Community
Advanced
alfredosalzilloalfredosalzillo
2

web-design-guidelines

Fetch Web Interface Guidelines and validate UI files against all rules.

Community
Intermediate
alexzhang1030alexzhang1030

i-audit

Audit frontend interfaces for accessibility, performance, theming, and responsive design issues.

Community
Advanced