skills.rest
quran
quranOFFICIAL
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Audit web UI code against Web Interface Guidelines for accessibility and usability.

1.9k|619|Updated May 10, 2020
Search Tags:#accessibility#frontend#audit#guidelines#design-review#web-ui
One-click install
npx skills add https://github.com/quran/quran.com-frontend-next --skill web-design-guidelines-quran
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/quran/quran.com-frontend-next/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/quran/quran.com-frontend-next --skill web-design-guidelines-quran

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Helps teams ensure their web UI code complies with Web Interface Guidelines, improving accessibility, readability, and consistency across interfaces.

Core Features & Use Cases

  • Guideline-driven audits: automatically evaluate UI components and pages against the latest Web Interface Guidelines.
  • Accessibility checks: verify color contrast, keyboard navigation, and semantic markup to improve inclusive design.
  • Use Case: QA engineers run audits on new pages to catch accessibility and UX issues before release.

Quick Start

Provide a set of UI files or a pattern to scan, then run the audit to receive guideline-conformance findings.

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 React components for web accessibility issues?▼

To audit React components for web accessibility issues, provide UI files to scan and the tool reads them to apply Web Interface Guidelines, reporting contrast, keyboard navigation, and semantic markup findings in a terse file:line format.

What does a frontend design review check for in web UI code?▼

A frontend design review checks web UI code for accessibility gaps, responsive issues, and UX inconsistencies by applying Web Interface Guidelines across components and pages to ensure inclusive and consistent interfaces.

Can I scan a specific file pattern for accessibility gaps in my project?▼

Yes, you can scan a specific file pattern for accessibility gaps by providing the pattern to the audit tool, which reads the matching files and evaluates them against fetched Web Interface Guidelines.

How do I check my web UI code against Web Interface Guidelines before release?▼

To check web UI code against Web Interface Guidelines before release, run an audit on the specified UI files to identify accessibility and usability issues, ensuring compliance and improving readability across the interface.

Does the web UI audit work with frontend frameworks other than React?▼

The web UI audit applies across React or similar frontend projects, evaluating UI code to identify accessibility gaps, responsive issues, and UX inconsistencies in components, pages, and patterns regardless of the specific framework.

Why does my web UI audit report findings in a file:line format?▼

The web UI audit reports findings in a terse file:line format to precisely identify where accessibility gaps, responsive issues, and UX inconsistencies occur within the evaluated components and pages.

Related Skills

Explore More Design & Creative Skills→
DayMoonDevelopmentDayMoonDevelopment
68

web-design-guidelines

Identify accessibility and UX violations in UI code against Web Interface Guidelines.

Official
Intermediate
gileckgileck

web-design-guidelines

Audit UI code against the latest Web Interface Guidelines.

Community
Basic
zizhenchen47-osszizhenchen47-oss

web-design-guidelines

Review UI code against Web Interface Guidelines and report file:line findings.

Community
Intermediate
zai-orgzai-org
588

web-design-guidelines

Evaluate UI assets for accessibility and design conformance issues.

Official
Intermediate