skills.rest
alexwox
alexwoxCOMMUNITY
Explore all skills by this author →
Website𝕏@alexwoxstGitHub

web-design-guidelines

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

Updated Apr 6, 2026
Search Tags:#accessibility#code-review#ui-review#web-guidelines#design-audit#ux-review
One-click install
npx skills add https://github.com/alexwox/genesis-template --skill web-design-guidelines-alexwox
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/alexwox/genesis-template/tree/main/.cursor/skills/web-design-guidelines
Command: npx skills add https://github.com/alexwox/genesis-template --skill web-design-guidelines-alexwox

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates reviewing UI code to detect deviations from Web Interface Guidelines, uncover accessibility issues, and flag UX inconsistencies so teams can quickly prioritize fixes at the file level.

Core Features & Use Cases

  • Guideline Synchronization: Fetches the latest rules from the upstream source before each review to ensure checks are current.
  • Targeted Code Scanning: Reads specified files or glob patterns and evaluates components, pages, routes, and styles for guideline violations.
  • Concise, Actionable Output: Emits terse, machine-friendly findings in file:line format that integrate easily with code review and CI workflows.

Quick Start

Review app/components/** and app/routes/** 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 automate UI code review for web design compliance?▼

Automated UI code review for web design compliance reads specified frontend files or glob patterns, applies web interface guidelines, and outputs concise findings in file:line format to flag accessibility, consistency, and UX violations.

What is an accessibility audit for frontend components?▼

An accessibility audit for frontend components evaluates UI code against web interface guidelines to detect accessibility violations and UX inconsistencies, outputting concise file:line findings for design QA prioritization.

How do I run a design audit on my web routes and pages?▼

Run a design audit on web routes and pages by applying glob patterns to frontend files, fetching the latest guideline document, and evaluating code to output machine-friendly findings in file:line format.

Can I use automated UX review output in CI workflows?▼

Yes, you can use automated UX review output in CI workflows because the review emits terse, machine-friendly findings in file:line format that integrate easily with code review and continuous integration processes.

Does the web design guideline checker stay current with new rules?▼

Yes, the web design guideline checker stays current by fetching the latest rules from the specified upstream source URL before each review to ensure all compliance checks are up to date.

Related Skills

Explore More Design & Creative Skills→
bfree-trainerbfree-trainer
60

normalize

Audit and realign UI components to match design system tokens and patterns.

Official
Advanced
woody1234567woody1234567
1

web-design-guidelines

Review UI code against Web Interface Guidelines for accessibility and visual compliance.

Community
Intermediate
rahmatullahbossrahmatullahboss

web-design-guidelines

Analyze web UI code against interface standards for accessibility and design issues.

Community
Intermediate
leafcoderleafcoder
2

web-design-guidelines

Audit web interface code for WCAG, ARIA, and UX compliance.

Community
Intermediate