skills.rest
ElderEvil
ElderEvilCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Analyze UI code for Web Interface Guidelines compliance and output file:line findings.

1|Updated Apr 4, 2023
Search Tags:#accessibility#UI#audit#compliance#review#guidelines#web-design
One-click install
npx skills add https://github.com/ElderEvil/falloutProject --skill web-design-guidelines-elderevil
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/ElderEvil/falloutProject/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/ElderEvil/falloutProject --skill web-design-guidelines-elderevil

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams quickly verify that UI assets, components, and code conform to shared Web Interface Guidelines, reducing accessibility and usability gaps across web applications.

Core Features & Use Cases

  • Guideline Fetching: Pull the latest Web Interface Guidelines from the official source before each review.
  • File & Pattern Review: Read the provided files or file patterns from the target codebase and apply all guideline checks.
  • Result Output: Report findings in a concise file:line format suitable for quick triage and fixes.
  • Use Case: When asked to review a UI, check accessibility, audit design, or assess UX against best practices.

Quick Start

Provide a path to files to review, or a pattern, e.g., "review src/components for accessibility" or "review ui/my-app for guideline conformance".

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

To audit UI code for accessibility and UI compliance, provide a file path or pattern. The tool fetches the latest web interface guidelines, applies all checks, and outputs findings in a terse file:line format for triage.

What's the best way to check web design guidelines conformance across components?▼

Checking web design guidelines conformance across components involves reading provided file patterns from your codebase, applying all fetched guideline rules, and reporting accessibility, usability, and design gaps in a concise file:line format.

Can I review specific UI views for usability gaps without scanning the entire codebase?▼

Yes, you can review specific UI views for usability gaps by providing a targeted path or file pattern. The tool reads only the specified files, applies all guideline checks, and reports identified design gaps.

Does the accessibility review fetch updated rules before analyzing my UI code?▼

Yes, the accessibility review fetches the latest rules from the official web interface guidelines source before each analysis, ensuring your UI code is evaluated against current compliance and accessibility standards.

What format are accessibility audit findings reported in for triage?▼

Accessibility audit findings are reported in a terse file:line format suitable for quick triage and fixes. This concise output identifies specific locations of accessibility, usability, and design gaps within your UI code.

Related Skills

Explore More Design & Creative Skills→
alexwoxalexwox

web-design-guidelines

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

Community
Intermediate
aayushsharma141aayushsharma141

web-design-guidelines

Identify UI elements violating Web Interface Guidelines in frontend codebases.

Community
Intermediate
NolanPicNolanPic

Frontend CSS

Enforce CSS standards for naming, organization, linting, and accessibility.

Community
Basic
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-forced-colors

Detect forced-colors accessibility failures in rendered web pages.

Community
Intermediate