skills.rest
kqcoxn
kqcoxnCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Identify UI design and accessibility issues across project assets.

369|25|Updated Apr 10, 2025
Search Tags:#ui#linting#accessibility#audit#guidelines#web-design#design-review
One-click install
npx skills add https://github.com/kqcoxn/MaaPipelineEditor --skill web-design-guidelines-kqcoxn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/kqcoxn/MaaPipelineEditor/tree/main/.qoder/skills/web-design-guidelines
Command: npx skills add https://github.com/kqcoxn/MaaPipelineEditor --skill web-design-guidelines-kqcoxn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often struggle to ensure UI components meet accessibility and consistency guidelines across projects.

Core Features & Use Cases

  • Guideline-driven audits: automatically check UI files against a centralized Web Interface Guidelines.
  • Comprehensive coverage: validates accessibility, readability, color contrast, and semantic structure.
  • Use Case: When given a UI codebase, run a review to surface violations and recommended fixes.

Quick Start

Run a quick UI audit on the provided project assets to identify accessibility and design inconsistencies.

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

You can audit web components by running a guideline-driven review on your UI codebase. The tool checks markup and styles against centralized web interface guidelines, validating accessibility, readability, color contrast, and semantic structure.

Can I check color contrast and semantic structure across web components automatically?▼

Yes, you can check color contrast and semantic structure automatically. The reviewer applies a rule set to your markup and styles, surfacing accessibility and readability violations across the target web components.

Does this UI design linting tool require any external dependencies or components?▼

No external dependencies or components are required to run this UI design linting tool. It independently fetches current web interface guidelines, reads your target files, and applies a rule set to output findings.

What is the best way to review web components for readability and accessibility issues?▼

The best way to review web components for readability and accessibility issues is to run an automated guideline-driven audit. It validates your markup and styles against centralized web interface guidelines and outputs violations in a terse file:line format.

How do I surface UI guidelines violations in a terse file:line format?▼

You surface UI guidelines violations in a terse file:line format by running the reviewer on your UI codebase. It reads target files, applies a rule set, and outputs findings pointing directly to non-compliant markup and styles.

Related Skills

Explore More Design & Creative Skills→
misty-stepmisty-step
13

web-design-guidelines

Audit UI files against Web Interface Guidelines for accessibility and UX conformance.

Official
Intermediate
BenavidesMichaelBenavidesMichael

web-design-guidelines

Audit UI code against Web Interface Guidelines for accessibility and design quality.

Community
Intermediate
markky21markky21

web-design-guidelines

Review HTML, CSS, and JS files against Web Interface Guidelines.

Community
Basic
SAPSAP
294

a11y-audit

Audit UI components for WCAG AA accessibility compliance.

Official
Advanced