skills.rest
unoplat
unoplatOFFICIAL
Explore all skills by this author →
Website𝕏@unoplatioGitHub

web-design-guidelines

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

95|7|Updated Apr 3, 2024
Search Tags:#linting#a11y#design-system#design-review#component-design#web-accessibility#UI-guidelines
One-click install
npx skills add https://github.com/unoplat/unoplat-code-confluence --skill web-design-guidelines-unoplat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/unoplat/unoplat-code-confluence/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/unoplat/unoplat-code-confluence --skill web-design-guidelines-unoplat

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps UI teams ensure code aligns with Web Interface Guidelines, surfacing accessibility gaps and UX inconsistencies early in development.

Core Features & Use Cases

  • Automated UI compliance checks: Compare code against the latest Web Interface Guidelines to surface accessibility, contrast, and semantic issues.
  • Guided remediation: Provide actionable fixes and patterns to improve UI components, layout, and interactions.
  • Use Case: When reviewing a React component library, run this Skill to identify missing ARIA attributes, color contrast failures, and semantic markup gaps.

Quick Start

Use the Skill to scan a set of UI files or a repository pattern that matches your project structure, for example: review src/components for accessibility and design conformance.

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 web components for accessibility and design system compliance?▼

To audit UI components for accessibility, this Skill validates your code against Web Interface Guidelines by reading remote rules and scanning file patterns to return concise findings on semantic markup, ARIA attributes, and UX inconsistencies.

Can I scan a React component library for missing ARIA attributes and color contrast failures?▼

Yes, you can scan a React component library to identify missing ARIA attributes, color contrast failures, and semantic markup gaps by running this Skill against your project's source directory structure.

What is the best way to automate UI compliance checks during a design review?▼

Automating UI compliance checks involves comparing your code against the latest Web Interface Guidelines to surface accessibility, contrast, and semantic issues early in development, providing actionable fixes for developer workflows.

Does this UI linting skill work with existing design systems and web applications?▼

Yes, this UI linting skill works with existing design systems by applying Web Interface Guidelines across component libraries, pages, and web applications to support reviews, refactors, and audits.

How do I get actionable fixes for web accessibility gaps found in my code?▼

To get actionable fixes for web accessibility gaps, the Skill enforces guideline rules on your code patterns and returns concise findings with guided remediation patterns to improve UI components and interactions.

When should I use an automated UI accessibility scanner instead of manual design reviews?▼

You should use an automated UI accessibility scanner when you need to validate code against Web Interface Guidelines early in development, ensuring consistent design quality across large component libraries and design systems.

Related Skills

Explore More Design & Creative Skills→
chris-gs4chris-gs4

web-design-guidelines

Review UI code against Web Interface Guidelines and report findings.

Community
Intermediate
veerababumanyamveerababumanyam

accessibility

Validate UI components against WCAG 2.1 AA accessibility standards.

Community
Basic
TarasTsavolykTarasTsavolyk
1

verify

Run linting, testing, and type checking before code commit.

Community
Intermediate
bdbchbdbch
2

accessibility-audit

Audit web pages for WCAG 2.1/2.2 compliance and report issues.

Community
Advanced