skills.rest
ChristineTham
ChristineThamCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Identify UI accessibility and design guideline violations in project files.

Updated May 31, 2026
Search Tags:#design#ui#accessibility#audit#guidelines#web
One-click install
npx skills add https://github.com/ChristineTham/lp --skill web-design-guidelines-christinetham
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/ChristineTham/lp/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/ChristineTham/lp --skill web-design-guidelines-christinetham

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams ensure their web UI complies with established design and accessibility guidelines by auditing code and patterns.

Core Features & Use Cases

  • Fetch latest guidelines from the source and compare your UI components against them.
  • Identify accessibility issues (color contrast, semantic HTML, keyboard navigation) and design inconsistencies.
  • Use cases include auditing landing pages, dashboards, and forms for accessibility compliance.

Quick Start

Review my UI files for accessibility and design conformance against the latest guidelines.

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

To audit web UI files for accessibility violations, provide your project files to the skill. It fetches the latest Web Interface Guidelines and reports issues in a compact file:line format for quick triage and remediation planning.

What specific accessibility issues can be detected in a UI component audit?▼

A UI component audit detects common accessibility violations including color contrast failures, improper semantic HTML, keyboard navigation issues, and responsive layout inconsistencies against established web design guidelines.

How do I check if my landing pages and dashboards comply with web accessibility standards?▼

You can check landing pages and dashboards for web accessibility compliance by running them through the skill. It compares your project files against fetched design guidelines and returns findings for quick remediation planning.

Can I use this accessibility audit on any web project without additional dependencies?▼

Yes, you can run this accessibility audit on any web project without additional dependencies. The skill requires no external components and directly analyzes your provided project files against the latest web interface guidelines.

What is the best way to fix reported UI accessibility and design inconsistencies?▼

The best way to fix UI accessibility and design inconsistencies is to use the reported file:line format findings. This compact output pinpoints exact locations of semantic HTML or color contrast issues for quick triage.

Why does my UI audit return findings for color contrast and semantic HTML?▼

Your UI audit returns findings for color contrast and semantic HTML because the skill checks your project files against the latest Web Interface Guidelines to identify these common accessibility patterns and design conformance violations.

Related Skills

Explore More Design & Creative Skills→
Typeless-GitTypeless-Git
1

web-design-guidelines

Audit HTML, CSS, and JavaScript files against the Web Interface Guidelines.

Official
Intermediate
boparaiamritboparaiamrit
5

accessibility-audit

Audit frontend UI accessibility against WCAG standards and generate remediation guidance.

Community
Advanced
calvingitcalvingit
2

ckm:slides

Convert strategic communication needs into HTML slide decks with Chart.js and design tokens.

Community
Advanced
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-forced-colors

Detect forced-colors accessibility failures in rendered web pages.

Community
Intermediate