skills.rest
dotlab-hq
dotlab-hqOFFICIAL
Explore all skills by this author →
GitHub

web-design-guidelines

Identify UI elements violating Web Interface Guidelines across files.

1|Updated Feb 26, 2026
Search Tags:#automation#accessibility#audit#ui-design#design-review#web-guidelines
One-click install
npx skills add https://github.com/dotlab-hq/storage-platform --skill web-design-guidelines-dotlab-hq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/dotlab-hq/storage-platform/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/dotlab-hq/storage-platform --skill web-design-guidelines-dotlab-hq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web teams struggle to ensure UI implementations meet accessibility and usability guidelines across components and pages.

Core Features & Use Cases

  • Automated guideline checks against UI components and markup to flag violations.
  • Accessibility conformance checks for color contrast, keyboard navigation, focus order, and semantic markup.
  • Use Case: QA engineers audit a new design system to ensure consistency with published guidelines before release.

Quick Start

Point the analyzer at your UI assets and project files to start an automated guideline audit.

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 components for accessibility and guideline violations?▼

To audit UI components for accessibility violations, point the analyzer at your UI assets and project files to automatically flag elements that violate web interface guidelines. It checks color contrast, keyboard navigation, focus order, and semantic markup across multiple pages.

What is automated UI guideline checking and how does it work?▼

Automated UI guideline checking applies the latest fetched guidelines from a specified source URL to your provided UI files or codebase. It identifies violations across multiple pages or components and returns findings in a concise, structured format suitable for integration.

Can I use automated design review to check a new design system before release?▼

Yes, you can use automated design review to check a new design system before release. QA engineers audit UI implementations to ensure consistency with published accessibility and usability guidelines across components and pages.

Does the web accessibility audit work with my existing codebase and UI files?▼

The web accessibility audit works with your existing codebase and UI files by fetching the latest guidelines from a specified source URL and applying them to the provided assets. No specific dependencies are required to run the analysis.

What format does the accessibility audit report return?▼

The accessibility audit report returns findings in a concise, structured format suitable for integration, such as a JSON report or a file:line style summary. This allows development teams to quickly locate and fix UI elements that violate guidelines.

Related Skills

Explore More Design & Creative Skills→
gensart-projsgensart-projs

web-design-guidelines

Evaluate UI files against Web Interface Guidelines for accessibility, contrast, typography, and layout.

Community
Intermediate
Logisoft-webLogisoft-web

vulnerability-scanner

Scan code repositories for vulnerabilities in dependencies, secrets, and configurations.

Community
Advanced
sefllessseflless

fixing-accessibility

Identify and fix accessibility issues in UI components using defined rules.

Community
Intermediate
MaxStrootmannMaxStrootmann

web-design-guidelines

Audit UI code against web design and accessibility guidelines.

Community
Intermediate