web-design-guidelines

Audit UI code against Web Interface Guidelines for accessibility and consistency.

Updated Mar 24, 2026
One-click install
npx skills add https://github.com/datorresb/niwashi-studio --skill web-design-guidelines-datorresb
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/datorresb/niwashi-studio/tree/main/skills/external/web-design-guidelines
Command: npx skills add https://github.com/datorresb/niwashi-studio --skill web-design-guidelines-datorresb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web interfaces often struggle with accessibility, consistency, and usability. This Skill helps review UI code to ensure compliance with Web Interface Guidelines across projects.

Core Features & Use Cases

  • Guideline-driven reviews: Check UI files against a published set of rules to verify accessibility, layout, and interaction best practices.
  • Pattern-based auditing: Apply guidelines to multiple files or patterns to audit consistency across a codebase.
  • Use Case: Run a review on a React component library to surface color contrast, semantic HTML, and keyboard navigation issues.

Quick Start

Provide the files or patterns you want reviewed; I will fetch the latest guidelines and return findings.

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 code for web accessibility and design consistency?

To audit UI code for web accessibility and design consistency, provide your web project files or patterns for review. The tool fetches the latest Web Interface Guidelines and reports accessibility, semantic HTML, and layout issues in a concise file:line format.

Can I review a React component library for keyboard navigation and color contrast issues?

Yes, you can review a React component library for keyboard navigation and color contrast issues by providing the component files. The tool checks these files against published web design guidelines and surfaces specific compliance findings.

What is a UI code compliance audit against Web Interface Guidelines?

A UI code compliance audit against Web Interface Guidelines is a pattern-based review that checks web project files against official rules to verify accessibility, usability, and interaction best practices, returning results in a file:line format.

Does this web design audit tool work across multiple files in a codebase?

Yes, this web design audit tool works across multiple files in a codebase by applying pattern-based auditing. You provide the file patterns you want reviewed, and it evaluates consistency across the entire project against the fetched guidelines.

What do I need to provide to run a UX accessibility review on my web project?

To run a UX accessibility review on your web project, you only need to provide the UI files or file patterns you want reviewed. The tool automatically fetches the latest guidelines and returns the compliance findings.

How are accessibility audit results reported for my web interface code?

Accessibility audit results for your web interface code are reported in a concise file:line format. This pinpoints exact locations of design consistency, accessibility, and usability issues found during the guideline review.