skills.rest
einargudnig
einargudnigCOMMUNITY
Explore all skills by this author →
Website𝕏@einargudniGitHub

web-design-guidelines

Review UI code files against Web Interface Guidelines and report violations in file:line format.

Updated Oct 1, 2024
Search Tags:#accessibility#guidelines#code-analysis#web-design#ui-review#design-audit
One-click install
npx skills add https://github.com/einargudnig/dotfiles --skill web-design-guidelines-einargudnig
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/einargudnig/dotfiles/tree/main/claude/skills/web-design-guidelines
Command: npx skills add https://github.com/einargudnig/dotfiles --skill web-design-guidelines-einargudnig

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the tedious and error-prone process of checking UI code against published Web Interface Guidelines, helping teams catch accessibility issues, UX regressions, and guideline violations before deployment.

Core Features & Use Cases

  • Guideline-driven audits: Fetches the canonical guidelines and applies every rule to the target files.
  • File-pattern reviews: Read specified files or file patterns and produce concise findings for quick remediation.
  • Use Case: Run a design QA pass on a new UI release to identify accessibility and layout rule violations across component files.

Quick Start

Review the files matching src//*.html and src//*.tsx against the web interface guidelines and report violations in the guideline-specified file:line format.

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I run an automated UI audit for web design accessibility compliance?▼

Automated UI audits for accessibility compliance are performed by fetching canonical web interface guidelines, analyzing your specified HTML or TSX files, and outputting violations in a concise file:line format for quick remediation.

Can I review specific file patterns like src/**/*.tsx during a design QA pass?▼

Yes, you can target specific file patterns like src/**/*.tsx during a design QA pass by providing the patterns to the skill, which reads those files and reports accessibility and layout violations.

What is the best way to check UI code against web interface guidelines before deployment?▼

Checking UI code against web interface guidelines before deployment is best handled by applying every rule from the canonical guidelines to your target component files and generating terse findings to catch UX regressions.

Does this design audit tool require any external dependencies to analyze code?▼

No external dependencies are required to analyze code, as the skill fetches the web interface guidelines directly from the canonical repository URL and applies the rules to your local project files.

What format does the UI review output use to report accessibility violations?▼

The UI review outputs accessibility violations using a terse file:line format, allowing developers to quickly locate and fix specific guideline violations within the analyzed web project files.

Related Skills

Explore More Design & Creative Skills→
achmfachmf

web-design-guidelines

Analyzes web interface source code for compliance with design, accessibility, and performance guidelines.

Community
Intermediate
darthlinuxerdarthlinuxer

web-design-guidelines

Audit web frontend files against Web Interface Guidelines and output file:line findings.

Community
Intermediate
nateanatea

visual-testing-advanced

Detect and quantify visual regressions across web UI screenshots.

Community
Advanced
lord-vinayaklord-vinayak

playwright-accessibility-auditor

Automate browser accessibility testing with axe-core and Playwright.

Community
Advanced