web-design-guidelines

Review web UI code against Web Interface Guidelines and report issues in file:line format.

Updated Nov 1, 2024
One-click install
npx skills add https://github.com/artreimus/ylang-labs-blog --skill web-design-guidelines-artreimus
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/artreimus/ylang-labs-blog/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/artreimus/ylang-labs-blog --skill web-design-guidelines-artreimus

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you quickly identify UI and UX issues by checking your web interface code against up-to-date Web Interface Guidelines.

Core Features & Use Cases

  • Guideline-based UI review: Fetches the latest guideline rules from the configured source and applies them to your provided files.
  • Targeted file/pattern auditing: Lets you specify a file or pattern to review, or prompts you to choose files when none are provided.
  • Concise issue reporting: Produces findings in the terse file:line format for fast navigation and fixes.
  • Use case: Audit a React/Next.js UI folder before release to catch accessibility and best-practice compliance gaps early.

Quick Start

Ask the assistant to review your UI files for Web Interface Guidelines compliance using your specified file path or pattern.

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 code for accessibility and best-practice compliance?

To audit web UI code for accessibility compliance, this Skill reviews your specified files or glob patterns against the latest Web Interface Guidelines. It fetches remote guideline rules at review time and outputs findings in a file:line format for fast navigation and fixes.

What is a UI UX review for web interface guidelines?

A UI UX review evaluates your web interface code against up-to-date Web Interface Guidelines to identify compliance issues. It checks for accessibility gaps and best-practice violations, producing concise findings that indicate exactly where to fix your code.

Can I review a specific folder or glob pattern for accessibility issues?

Yes, you can provide a specific file path or glob pattern to target your accessibility review. If no files are specified, the Skill will prompt you to choose files before applying the Web Interface Guidelines compliance checks.

How do I check my React or Next.js UI for accessibility gaps before release?

You can check your React or Next.js UI for accessibility gaps by running a guideline-based UI review on your UI folder. The Skill fetches the latest rules and applies them to your code, outputting compliance issues in a terse file:line format.

Do I need an internet connection to fetch web accessibility guideline rules?

Yes, an internet connection is required because the Skill fetches the latest remote guideline rules at review time. This ensures your UI code is always evaluated against the most current web accessibility and best-practice standards.