web-design-guidelines

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

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/MichaelFrieze/riffatlas --skill web-design-guidelines-michaelfrieze
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/MichaelFrieze/riffatlas/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/MichaelFrieze/riffatlas --skill web-design-guidelines-michaelfrieze

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps you find UI and UX issues by checking your web interface code against an authoritative, up-to-date set of Web Interface Guidelines.

Core Features & Use Cases

  • Guidelines-based compliance review: Fetches the latest guideline rules from the official source before analyzing anything.
  • Targeted file review: Reviews specific files or patterns you provide to focus the audit where it matters most.
  • Actionable findings output: Reports results in a concise file:line format so you can fix issues quickly.
  • Use Case: If you are preparing a release and want to confirm that key UI components meet accessibility and design best practices, run this audit across the relevant frontend files.

Quick Start

Ask to review your UI files by providing a file path or glob pattern, for example: review src/components/**/*.tsx for Web Interface Guidelines 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 web UI code for accessibility and design best practices?

To audit web UI code for accessibility and best practices, provide a file path or glob pattern to review. The tool fetches the latest Web Interface Guidelines, applies all rules to your specified files, and returns compliance issues in a concise file:line format for quick fixes.

What is a UI compliance review and how does it find UX issues?

A UI compliance review checks your frontend files against an authoritative set of Web Interface Guidelines. It locates accessibility, design, and UX best practice issues by reading your code and applying fetched rules, returning findings in a terse file:line format.

Can I target specific frontend files or patterns for a UX audit?

Yes, you can target specific frontend files or patterns for a UX audit. Provide a file path or glob pattern, such as src/components/**/*.tsx, to focus the compliance review and receive actionable findings only for the specified files.

Does the accessibility review use the latest web interface guidelines?

Yes, the accessibility review always uses the latest web interface guidelines. It fetches the most current guideline rules from the official source URL before analyzing your code to ensure all compliance checks reflect up-to-date standards.

What format do the code review findings use to report design compliance issues?

Code review findings for design compliance issues use a terse file:line format. This concise output identifies exactly where accessibility and UX best practice violations occur in your web UI files so you can quickly locate and fix them.

When should I run a web UI accessibility audit on my project?

You should run a web UI accessibility audit when preparing a release or verifying that key UI components meet design best practices. It confirms your frontend files comply with authoritative Web Interface Guidelines before deployment.