web-design-guidelines

Review UI code against the latest Web Interface Guidelines.

1|Updated Apr 19, 2026
One-click install
npx skills add https://github.com/arthtyagi/onloop --skill web-design-guidelines-arthtyagi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/arthtyagi/onloop/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/arthtyagi/onloop --skill web-design-guidelines-arthtyagi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you review user interfaces against the latest Web Interface Guidelines so you can catch accessibility, usability, and visual compliance issues before they ship.

Core Features & Use Cases

  • Guideline-based review: Checks UI code against the current rule set fetched from the official source.
  • Focused audit workflow: Evaluates specified files or patterns and reports findings in a terse file and line format.
  • Use cases: Useful for accessibility reviews, design QA, frontend code audits, and best-practice checks on web apps and components.

Quick Start

Ask the skill to review the specified UI files or pattern against the latest Web Interface Guidelines.

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I run a UX audit on my frontend code for web compliance?

To run a UX audit, you review UI code for Web Interface Guidelines violations. The skill evaluates specified frontend files, returning terse file and line findings for accessibility, usability, and visual compliance issues.

What is the best way to check UI components for accessibility issues before shipping?

Checking UI components for accessibility involves fetching the latest guideline source and evaluating code against it. This design QA process catches compliance issues in frontend files before they ship by reporting specific file and line findings.

Can I use this to review specific files and patterns during a design QA?

Yes, you can use this for a focused audit workflow during design QA. It evaluates specified frontend files or patterns against the current rule set, returning terse file and line findings for Web Interface Guidelines violations.

How does the web compliance review process work for frontend files?

The web compliance review process works by fetching the latest official guideline source before evaluation. It then checks frontend files against these current rules, identifying accessibility and usability violations in a terse file and line format.

Do I need to fetch the latest guidelines before running a UI review?

Yes, the skill requires fetching the latest guideline source before evaluation. This ensures the UI review checks frontend code against the most current Web Interface Guidelines for accessibility and design compliance.

What format do the results take when auditing UI code for design guidelines?

When auditing UI code for design guidelines, results take a terse file and line format. This reporting style pinpoints exact locations of accessibility, usability, and visual compliance violations within frontend files.