web-design-guidelines

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

1|Updated Mar 7, 2026
One-click install
npx skills add https://github.com/WASD6570/crypto-monitor --skill web-design-guidelines-wasd6570
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/WASD6570/crypto-monitor/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/WASD6570/crypto-monitor --skill web-design-guidelines-wasd6570

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates a focused review of frontend source files to surface accessibility, interaction, and design anti-patterns so teams can fix usability and compliance issues before release.

Core Features & Use Cases

  • Accessibility checks: identifies missing aria-labels, unlabeled form controls, absent alt text, and misuse of semantic elements.
  • Interaction & visual rules: validates focus-visible states, keyboard handlers, reduced-motion support, and animation best practices.
  • Performance & content handling: flags image dimensions, lazy-loading suggestions, virtualization needs, and hydration risks.
  • Use Case: Run against a component library or a pull request to produce a terse file:line report of UI issues for designers and frontend engineers.

Quick Start

Review the src directory for accessibility, focus states, form labels, images without dimensions, animation issues, and output findings in 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 frontend source files for accessibility and UX anti-patterns?

To audit frontend source files for accessibility and UX anti-patterns, review the component code for missing aria-labels, unlabeled form controls, absent alt text, and semantic HTML misuse to surface usability and compliance issues before release.

What web design guidelines should I check for missing focus-visible states and keyboard handlers?

Web design guidelines for interaction rules validate focus-visible states, keyboard handlers, and reduced-motion support. Checking these guidelines ensures your interface meets animation best practices and remains accessible to keyboard users.

Can I review a pull request for image dimensions and frontend performance anti-patterns?

Yes, you can review a pull request for frontend performance anti-patterns. The audit flags missing image dimensions, suggests lazy-loading, identifies virtualization needs, and checks for hydration risks to optimize web interface performance.

What is the best way to report UI review findings for a component library?

The best way to report UI review findings for a component library is producing a terse file:line formatted report. This format directly maps accessibility, form label, and animation violations to their exact location in the frontend source files.

Does this accessibility audit check for localized content and form label issues?

Yes, this accessibility audit checks for localized content and form label issues. It identifies unlabeled form controls, validates semantic elements, and surfaces localization problems alongside standard a11y compliance violations in frontend projects.