web-design-guidelines

Audit React/Next.js UI files against the Web Interface Guidelines checklist.

1|Updated Jan 28, 2026
One-click install
npx skills add https://github.com/ENG-BXI/SAAS-SMART-SHIPMENT-TRACKING-CLIENT-SIDE --skill web-design-guidelines-eng-bxi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/ENG-BXI/SAAS-SMART-SHIPMENT-TRACKING-CLIENT-SIDE/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/ENG-BXI/SAAS-SMART-SHIPMENT-TRACKING-CLIENT-SIDE --skill web-design-guidelines-eng-bxi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you identify UI and UX issues by checking your web interface code against the latest Web Interface Guidelines, improving accessibility and best-practice compliance.

Core Features & Use Cases

  • Guidelines-driven audits: Fetches the most recent guideline rules from the official source before each review.
  • Targeted file or pattern checks: Reviews specific files or lets you provide a pattern to define scope for the audit.
  • Actionable output: Reports findings in the compact file:line format to make fixes faster.

Quick Start

Ask to review your Next.js UI files by giving a file path or a glob pattern, such as "Review the app router and components for accessibility and design guideline compliance."

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 Next.js UI files for accessibility and design compliance?

A UI audit checks your React or Next.js source code against a fetched rules-based checklist of Web Interface Guidelines. It evaluates specified files or patterns to identify accessibility issues and UX design best-practice violations, reporting findings in a compact file:line format.

Can I check a specific component pattern instead of my entire front-end project?

Yes, you can scope a UI audit by providing a glob pattern or specific file path instead of reviewing the entire project. This targets the accessibility and design guideline checks only to the React or Next.js components matching your defined input pattern.

How does this tool report accessibility issues for quick fixes?

The accessibility audit reports issues using a compact file:line format. This output mechanism pinpoints exactly where your web UI source code violates the Web Interface Guidelines, allowing you to navigate directly to the exact location and apply fixes faster.

Does this accessibility checker require fetching external rules before reading my code?

Yes, the accessibility checker requires fetching the latest guideline command content from the official source URL. It must retrieve these rules-based checklist items before reading and evaluating your specified Next.js front-end project inputs for UX and design compliance.

What is the best way to review my React app router for UX design best practices?

The best way to review a React app router for UX design best practices is to run a guidelines-driven UI audit. By pointing the review at your app router files, it applies a fetched rules-based checklist to identify accessibility and design violations in a file:line format.