web-design-guidelines

Name: web-design-guidelines
Availability: InStock
Author: Epicenter

Detect UI design violations by comparing project files against Web Interface Guidelines.

4.7k|374|Updated Mar 16, 2023

Search Tags:#ui #accessibility #a11y #guidelines #ux #web-design #design-review

Ready to run

npx skills add https://github.com/EpicenterHQ/epicenter --skill web-design-guidelines-epicenterhq

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/EpicenterHQ/epicenter/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/EpicenterHQ/epicenter --skill web-design-guidelines-epicenterhq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review UI code for compliance with Web Interface Guidelines, helping teams catch accessibility, consistency, and usability issues early.

Core Features & Use Cases

Fetch fresh guidelines from the source
Read specified files (or prompt the user for files/patterns)
Apply all rules from the fetched guidelines
Output findings in the terse file:line format
Use cases: perform accessibility audits for web apps, component libraries, and sites

Quick Start

Provide the UI files to review and run the guidelines check to generate a compliance report.

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 app for accessibility and UI design violations?▼

UI design guideline compliance is checked by fetching up-to-date rules and comparing your web app, component library, or site files against them. It detects accessibility, usability, and consistency issues, emitting results in a terse file:line format.

What is the best way to check a component library for usability and consistency issues?▼

The best way to check a component library for usability and consistency is to read target files or patterns and apply all Web Interface Guidelines checks. It emits a compliance report in a terse file:line format to catch issues early.

Can I review UI code for compliance without specifying individual files?▼

You cannot review UI code for compliance without specifying targets; if omitted, you will be prompted for files or patterns. The review then reads these files to apply all checks from the fetched Web Interface Guidelines.

Does the accessibility audit work with any web design project?▼

Yes, the accessibility audit applies to web apps, component libraries, and sites where accessibility, usability, and consistency are priorities. It fetches fresh guidelines, reads target files, and applies all checks to emit results.

How do I get a compliance report in a file:line format for my web design?▼

A compliance report in a file:line format is generated by fetching fresh Web Interface Guidelines, applying all checks to your web design files, and emitting the findings. This terse output helps locate and fix accessibility and usability issues.

Why should I use automated guideline checks instead of manual design reviews?▼

Automated guideline checks fetch up-to-date Web Interface Guidelines and apply all rules to your project files, catching accessibility and usability issues early. This ensures comprehensive compliance reporting in a terse file:line format.