web-design-guidelines

Audit UI code against Web Interface Guidelines and report violations in file:line format.

3.9k|784|Updated Feb 7, 2026
One-click install
npx skills add https://github.com/ArcReel/ArcReel --skill web-design-guidelines-arcreel
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/ArcReel/ArcReel/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/ArcReel/ArcReel --skill web-design-guidelines-arcreel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill audits UI code to ensure compliance with Web Interface Guidelines, helping teams meet accessibility, usability, and consistency standards without manual, repetitive checks.

Core Features & Use Cases

  • Fetch the latest Web Interface Guidelines and apply them to your UI code.
  • Read specified files or patterns to evaluate conformance against the guidelines.
  • Output concise, actionable findings in the file:line format for quick fixes.
  • Use Case: A designer wants to verify that a new component respects color contrast, semantic HTML, and keyboard navigation.

Quick Start

Provide the UI files or patterns to review, and I will fetch the latest guidelines, apply them, and report any violations.

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 UI code for accessibility and UX compliance?

To audit UI code for accessibility and UX compliance, provide your UI files or patterns. The tool fetches the latest Web Interface Guidelines, evaluates conformance, and returns concise findings in a file:line format for quick fixes.

What is a UI code review for web interface guidelines?

A UI code review for web interface guidelines is an automated process that checks your files against standards for accessibility, usability, and visual consistency. It fetches current rules and reports violations mapped directly to your source code lines.

Can I review design system components for color contrast and keyboard navigation?

Yes, you can review design system components for color contrast, semantic HTML, and keyboard navigation. Provide the component files, and the review applies the latest guidelines to verify accessibility, usability, and visual consistency conformance.

Does the accessibility review output detailed file paths and line numbers?

Yes, the accessibility review outputs detailed file paths and line numbers. It returns concise, actionable findings in a file:line format, allowing you to quickly locate and fix violations within your website or design system code.

What's the best way to check website files for usability standards without manual checks?

The best way to check website files for usability standards without manual checks is to use an automated guideline review. Provide your UI files to fetch the latest web interface guidelines and apply them directly, returning actionable file:line violations.