skills.rest
not-ani
not-aniCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Compare web component code against Web Interface Guidelines and report issues in file:line format.

Updated Feb 8, 2026
Search Tags:#ui#accessibility#a11y#review#guidelines#quality-assurance#web-design
One-click install
npx skills add https://github.com/not-ani/elevated-school-takehome --skill web-design-guidelines-not-ani
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/not-ani/elevated-school-takehome/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/not-ani/elevated-school-takehome --skill web-design-guidelines-not-ani

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps ensure UI code adheres to Web Interface Guidelines, enabling teams to catch accessibility and usability issues early in the design process.

Core Features & Use Cases

  • Guideline-compliance checks: Compare UI files against the latest Web Interface Guidelines.
  • Automated review scope: Read specified files or patterns and evaluate all applicable rules.
  • Use Case: A designer runs a review on a new component library to ensure contrast, focus rings, and keyboard navigation meet guidelines.

Quick Start

Fetch guidelines and run the UI review on your target files.

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 for accessibility and design quality issues?▼

To audit web UI for accessibility and design quality, compare your component, page, and template files against the latest Web Interface Guidelines. The review identifies discrepancies like contrast or focus ring issues and reports them with precise file and line locations.

What is the best way to check if my UI code complies with web interface guidelines?▼

Checking UI code compliance involves fetching fresh Web Interface Guidelines and applying all rules to your target files. This automated review evaluates usability and accessibility standards, emitting actionable findings in a precise file:line format for quick fixes.

Can I review a new component library for keyboard navigation and contrast issues?▼

Yes, you can review a new component library for keyboard navigation, contrast, and focus rings. The review applies Web Interface Guidelines to your specified files or patterns to ensure all UI components meet accessibility and usability standards early in the design process.

How do I get the latest rules for automated UI accessibility checks?▼

Automated UI accessibility checks use fresh rules fetched directly from the Web Interface Guidelines repository. This ensures the review process always applies the most current standards to your web components and templates, catching discrepancies accurately.

Does this UI review tool require any specific dependencies or components to run?▼

No specific dependencies or components are required to run this UI review. It operates by fetching guidelines from a remote URL and reading your target files directly, allowing you to perform quality assurance checks without additional environment setup.

Related Skills

Explore More Design & Creative Skills→
efekrbasefekrbas
41

web-design-guidelines

Detect web interface guideline violations in UI files and report file:line results.

Community
Intermediate
alunadevalunadev
3

applying-web-design-guidelines

Audit UI code against web interface guidelines for accessibility, performance, UX, and code quality.

Community
Intermediate
petrkohutpetrkohut

bmad-testarch-test-review

Automate test quality review and validation against best practices.

Community
Advanced
bdbchbdbch
2

accessibility-review

Audit web applications for WCAG 2.1/2.2 accessibility compliance in Chrome.

Community
Advanced