skills.rest
MaxStrootmann
MaxStrootmannCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Audit UI code against web design and accessibility guidelines.

Updated Feb 27, 2024
Search Tags:#accessibility#vercel#code-review#web-design#design-guidelines#ui-review#ux-audit
One-click install
npx skills add https://github.com/MaxStrootmann/lumen-yoga --skill web-design-guidelines-maxstrootmann
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/MaxStrootmann/lumen-yoga/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/MaxStrootmann/lumen-yoga --skill web-design-guidelines-maxstrootmann

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Manually checking user interfaces for accessibility, UX consistency, and web design best practices is time-consuming and error-prone; this Skill automates those audits by applying a canonical rule set to your UI code.

Core Features & Use Cases

  • Fetches canonical guidelines from a maintained source so reviews use the latest rules.
  • File- or pattern-based audits that read specified frontend files and apply rule checks.
  • Terse, machine-friendly output in file:line format suitable for CI, pull request comments, or developer fixes.
  • Use Case: Run on a pull request to automatically detect accessibility violations and design guideline regressions before merging.

Quick Start

Run the web-design-guidelines skill against your project's frontend files or provide a file pattern to produce a rules-based file:line audit.

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 accessibility and UX audits for web frontend code?▼

Automated accessibility and UX audits read your frontend files and apply canonical web design guidelines to detect violations, outputting findings in a machine-friendly file:line format for quick fixes.

Can I run a UI review on specific file patterns in my web project?▼

Yes, UI reviews can be executed against specified frontend files or file patterns, reading the targeted code to audit design compliance and accessibility rule violations.

What is the best way to check web interface design guideline compliance in a pull request?▼

The best way to check design guideline compliance in a pull request is running an automated rules-based audit that outputs findings in file:line format for automated parsing and developer fixes.

Does this automated UI review fetch the latest canonical web design rules?▼

Yes, the automated UI review fetches canonical guidelines from a provided maintained source URL, ensuring your code audits always apply the latest accessibility and web design rules.

How does an automated UX audit format its findings for CI pipelines?▼

An automated UX audit formats findings in a terse, machine-friendly file:line syntax, making the output suitable for automated parsing in CI pipelines or pull request comments.

What are the limitations of using rule-based checks for web design guideline compliance?▼

Rule-based checks for web design compliance are limited to reading specified frontend files and applying fetched canonical rules, meaning they cannot evaluate visual rendering or interactive runtime UX behaviors.

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
oimiragieooimiragieo
36

rule-auditor

Audit code against a rule index and report compliance violations.

Community
Basic
aoxendine3aoxendine3

pr-address

Automate GitHub pull request review comment resolution and CI monitoring.

Community
Advanced
act70255act70255

ui-visual-validator

Validate UI components for visual consistency, design system compliance, and accessibility.

Community
Advanced