web-design-guidelines

Audit frontend UI files for compliance with web design and accessibility guidelines.

Updated Apr 17, 2026
One-click install
npx skills add https://github.com/hackfest-dev/HF26-24 --skill web-design-guidelines-hackfest-dev
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/hackfest-dev/HF26-24/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/hackfest-dev/HF26-24 --skill web-design-guidelines-hackfest-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review files to ensure compliance with Web Interface Guidelines and accessibility best practices, enabling faster, consistent UI reviews across projects.

Core Features & Use Cases

  • Guidance-driven reviews: compares UI code against latest Web Interface Guidelines to surface non-conformant patterns.
  • Automated checks: identifies accessibility, semantic, and visual consistency issues in frontend code.
  • Use Case: when asked to review a site or component library for accessibility and design conformance, run a guided audit and generate a concise report.

Quick Start

Provide the UI files or a link to review, and I will fetch the latest guidelines and audit your UI for accessibility and design 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 audit my frontend code for accessibility and UI compliance?

To audit frontend code for accessibility and UI compliance, provide your UI files or a link. The system fetches the latest web interface guidelines, reads target files, applies all rules, and reports findings in a concise, actionable format.

What is automated UI accessibility review and how does it work?

Automated UI accessibility review compares frontend code against current web interface guidelines to surface non-conformant patterns. It identifies accessibility, semantic correctness, and visual consistency issues in components and pages.

Can I review a component library for semantic correctness and visual consistency?

Yes, you can review a component library for semantic correctness and visual consistency. Provide the target files, and the system applies design and accessibility rules to audit the library and generate a concise report.

What's the best way to check web interface guidelines conformance across multiple projects?

The best way to check web interface guidelines conformance across projects is running a guidance-driven audit. This fetches the latest guidelines and applies rules to target files, enabling faster, consistent UI reviews.

Does the accessibility audit work without external dependencies?

Yes, the accessibility audit works without external dependencies. You only need to provide the UI files or a link to review, and the system fetches the latest guidelines and evaluates the target files internally.

Why should I use an automated design review instead of manual checks?

Automated design review ensures consistent UI compliance across projects by fetching the latest web interface guidelines and applying all rules systematically. This reduces manual effort and surfaces non-conformant patterns faster.