skills.rest
lootlog
lootlogOFFICIAL
Explore all skills by this author →
GitHub

web-design-guidelines

Review UI code against Web Interface Guidelines for accessibility, design, and usability issues.

7|4|Updated Jun 7, 2025
Search Tags:#accessibility#a11y#usability#guidelines#web-design#ui-review
One-click install
npx skills add https://github.com/lootlog/monorepo --skill web-design-guidelines-lootlog
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/lootlog/monorepo/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/lootlog/monorepo --skill web-design-guidelines-lootlog

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI code often fails to meet accessibility, usability, and design consistency guidelines, leading to poor user experiences and rework.

Core Features & Use Cases

  • Automated UI guideline checks across HTML/JSX templates and CSS.
  • Accessibility conformance checks (a11y) including color contrast, semantic structure, and keyboard navigation.
  • Design consistency validation against brand guidelines and reusable components.
  • Use Case: Integrate into CI to catch issues before deployment or perform a manual UI review before design handoff.

Quick Start

Fetch the latest Web Interface Guidelines and review the supplied UI files for accessibility and best-practice 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 UI code for accessibility and usability issues?▼

To audit UI code for accessibility and usability issues, you can review HTML/JSX templates and CSS against Web Interface Guidelines to identify color contrast gaps, semantic structure errors, and visual design inconsistencies, generating deterministic reports.

What does a UI accessibility review check for in web interfaces?▼

A UI accessibility review checks web interfaces for color contrast compliance, semantic structure correctness, keyboard navigation gaps, and design consistency, analyzing HTML/JSX and CSS to ensure component libraries meet usability standards.

Can I integrate accessibility checks into a CI pipeline?▼

Yes, you can integrate accessibility checks into a CI pipeline to catch UI issues before deployment. The review produces deterministic, rule-checked output suitable for automated pipelines, validating HTML/JSX and CSS against web interface guidelines.

Does this UI review tool work with component libraries and responsive layouts?▼

Yes, this UI review tool works with component libraries and responsive layouts across projects. It evaluates HTML/JSX and CSS for accessibility conformance and visual design inconsistencies, ensuring reusable components align with web interface guidelines.

What is the best way to validate design consistency before design handoff?▼

The best way to validate design consistency before handoff is to perform a manual UI review checking HTML/JSX and CSS against brand guidelines, identifying visual design inconsistencies and usability gaps in component libraries.

Why do my web interfaces fail usability and design consistency guidelines?▼

Web interfaces often fail usability and design consistency guidelines due to uncaught accessibility issues in HTML/JSX and CSS, such as poor color contrast or incorrect semantic structure. Automated guideline checks identify these gaps before deployment to prevent rework.

Related Skills

Explore More Design & Creative Skills→
NihaalManafNihaalManaf

web-design-guidelines

Compare HTML, CSS, and JavaScript code against Web Interface Guidelines.

Community
Intermediate
jmdueajmduea

verification-before-completion

Run verification commands and check exit codes before declaring work complete.

Community
Basic
uzh-bfuzh-bf
41

web-design-guidelines

Audit HTML, CSS, and JavaScript UI code against Web Interface Guidelines.

Official
Basic
KILWA73KILWA73

accessibility-compliance-audit

Audit web and Electron interfaces for WCAG accessibility issues.

Community
Intermediate