skills.rest
krzemienski
krzemienskiCOMMUNITY
Explore all skills by this author →
Website𝕏@nkrzemienskiGitHub

web-design-guidelines

Validate UI code against Web Interface Guidelines for accessibility and consistency.

2|1|Updated May 21, 2025
Search Tags:#ui#accessibility#frontend#audit#design-guidelines#web-standards
One-click install
npx skills add https://github.com/krzemienski/awesome-list-site --skill web-design-guidelines-krzemienski
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/krzemienski/awesome-list-site/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/krzemienski/awesome-list-site --skill web-design-guidelines-krzemienski

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Checks UI code against Web Interface Guidelines to help teams ensure accessibility, consistency, and adherence to best practices across frontend projects.

Core Features & Use Cases

  • Fetch the latest Web Interface Guidelines from the official source before running checks.
  • Analyze specified UI files or patterns to validate accessibility, contrast, semantic markup, keyboard navigation, and responsive behavior.
  • Use Case: Audit a React component library for WCAG compliance and UI consistency across a product’s pages, components, and patterns.

Quick Start

Provide the UI files or a pattern to review, then let the skill fetch the latest guidelines and report findings.

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 React component library for UI accessibility compliance?▼

To audit React component libraries for UI accessibility compliance, provide your UI files or patterns for validation. The tool fetches official Web Interface Guidelines, analyzes semantic markup and keyboard navigation, and outputs findings in a concise file:line format.

What is Web Interface Guidelines validation for frontend codebases?▼

Web Interface Guidelines validation for frontend codebases is the process of checking UI code against best practices to ensure accessibility, consistency, and adherence to web standards. It validates contrast, semantic markup, and responsive behavior.

Does accessibility audit support Vue and plain HTML/CSS projects?▼

Yes, accessibility audits support Vue and plain HTML/CSS projects. The validation applies across React, Vue, and plain HTML/CSS codebases to check UI consistency and WCAG compliance for design systems and component libraries.

How do I check frontend code for design system consistency and regressions?▼

To check frontend code for design system consistency and regressions, target your specified UI files or patterns for review. The process fetches the latest guidelines, applies all rules, and reports findings to catch UI deviations during design reviews.

What is the best way to validate WCAG compliance in frontend code?▼

The best way to validate WCAG compliance in frontend code is fetching the latest Web Interface Guidelines before running checks, then analyzing specified UI files to audit contrast, semantic markup, keyboard navigation, and responsive behavior automatically.

Related Skills

Explore More Design & Creative Skills→
FindMalekFindMalek
9

web-design-guidelines

Audits frontend components for compliance with Web Interface Guidelines.

Community
Intermediate
kqcoxnkqcoxn
369

web-design-guidelines

Identify UI design and accessibility issues across project assets.

Community
Intermediate
SL-A-SHSL-A-SH

normalize

Normalize UI features to match a project's design system using tokens and components.

Community
Advanced
HouseofmvpsHouseofmvps
115

a11y

Detect and fix deterministic WCAG 2.2 A/AA accessibility violations in HTML files.

Community
Advanced