web-design-guidelines

Name: web-design-guidelines
Availability: InStock
Author: kurokeita

Audit UI components and layouts against Web Interface Guidelines compliance.

1|Updated Jan 17, 2026

Search Tags:#accessibility #UI #review #guidelines #design-system #code-audit #web-design-guidelines

Ready to run

npx skills add https://github.com/kurokeita/ai-agent --skill web-design-guidelines-kurokeita

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/kurokeita/ai-agent/tree/main/skills/web-design-guidelines
Command: npx skills add https://github.com/kurokeita/ai-agent --skill web-design-guidelines-kurokeita

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reviews UI code for Web Interface Guidelines compliance.

Core Features & Use Cases

Audit UI components and layouts against the latest guidelines.
Verify accessibility considerations and visual consistency across design systems.
Use Case: When reviewing a new web app, run the skill on the codebase to identify guideline violations and generate a concise report.

Quick Start

Run a UI review on your project by pointing to the codebase, e.g., 'web-design-guidelines path/to/project' or by providing file patterns to scan.

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 frontend codebase for UI accessibility and design system violations?▼

To audit a frontend codebase for UI accessibility and design system violations, run a web interface guidelines review that fetches the latest rules, reads target files, and outputs findings in a file:line format. It scans components and layouts to pinpoint exact guideline violations.

What is a web interface guidelines review and when do I need it for my project?▼

A web interface guidelines review is an automated code audit that checks frontend components, layouts, and accessibility against established design rules. You need it when reviewing a new web app or verifying visual consistency across a design system to ensure compliance.

How do I run a UI code audit on specific files within my web project?▼

To run a UI code audit on specific files, provide the path to your codebase or specify file patterns to scan. The review applies all rules to the target files and generates a concise report detailing accessibility and visual consistency findings.

Can I use this UI review tool with an existing design system and frontend codebase?▼

Yes, you can use this UI review tool with an existing design system and frontend codebase. It requires no additional dependencies or components, directly reading your target files to verify accessibility considerations and visual consistency against the latest guidelines.

Does the accessibility code audit check both component layouts and visual consistency?▼

Yes, the accessibility code audit checks both component layouts and visual consistency. It applies all rules fetched from the latest guidelines to your UI components, ensuring comprehensive coverage of accessibility considerations and design system standards.

What format does the UI code review report use for guideline violations?▼

The UI code review report uses a file:line format to identify guideline violations. This concise output maps each accessibility and visual consistency finding directly to the exact location in your frontend codebase, streamlining the resolution process.