skills.rest
marcius-llmus
marcius-llmusCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Review UI and frontend files for accessibility, performance, and UX violations.

1|Updated Feb 21, 2026
Search Tags:#ui#accessibility#a11y#ux#code-review#web#design-audit
One-click install
npx skills add https://github.com/marcius-llmus/skills --skill web-design-guidelines-marcius-llmus
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/marcius-llmus/skills/tree/main/%28design%29/web-design-guidelines
Command: npx skills add https://github.com/marcius-llmus/skills --skill web-design-guidelines-marcius-llmus

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Helps teams and developers quickly find and fix accessibility, UX, and best-practice issues in web UI code so interfaces are usable, performant, and consistent.

Core Features & Use Cases

  • Guided Rule Set: Checks ARIA, semantic HTML, keyboard interaction, focus states, forms, animations, typography, images, performance, navigation, touch, theming, i18n, hydration safety, and common anti-patterns.
  • Terse, Actionable Output: Produces concise findings grouped by file using file:line format for quick remediation.
  • Use Case: Audit a component library or a single-page app to surface missing labels, focus issues, image/size problems, and performance anti-patterns before release.

Quick Start

Review src/ and report all accessibility and UX issues using the 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 audit my frontend code for accessibility and UX violations?▼

You can audit frontend code for accessibility and UX violations by reviewing UI files for ARIA, semantic HTML, keyboard interaction, focus states, and forms, producing terse findings grouped by file in a file:line format for quick remediation.

What does a web design audit check for in component libraries?▼

A web design audit checks component libraries for missing labels, focus issues, image problems, performance anti-patterns, theming, dark mode, i18n, and hydration safety violations to ensure interfaces are usable and consistent.

Can I use this to review ARIA roles and semantic HTML in single-page apps?▼

Yes, you can review ARIA roles and semantic HTML in single-page apps by examining frontend files for accessibility rules, keyboard interaction, focus handling, and navigation to surface violations before release.

What's the best way to find focus handling and form issues in web interfaces?▼

The best way to find focus handling and form issues is to audit web interface files against rules for keyboard interaction, focus states, and form labels, validating for common anti-patterns and outputting actionable file:line findings.

Does the accessibility review cover dark mode, i18n, and hydration safety?▼

Yes, the accessibility review covers dark mode, i18n, and hydration safety by validating UI and frontend files against a guided rule set that includes theming, touch interactions, typography, and performance anti-patterns.

Related Skills

Explore More Design & Creative Skills→
ZawHlaingPhyoTsukiZawHlaingPhyoTsuki

web-design-guidelines

Audit frontend UI files for Web Interface Guidelines violations.

Community
Intermediate
WASD6570WASD6570
1

web-design-guidelines

Audits frontend source files for accessibility, UX, and web guideline violations.

Community
Intermediate
Niksh-HiremathNiksh-Hiremath

audit

Audit web UI accessibility, performance, theming, and responsive design issues.

Community
Advanced
angelriera-devangelriera-dev

web-design-guidelines

Audit UI code against the latest Web Interface Guidelines.

Community
Intermediate