web-design-guidelines

Compare UI code against the latest Web Interface Guidelines to identify noncompliance and accessibility gaps.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/galafis/fonte --skill web-design-guidelines-galafis
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/galafis/fonte/tree/main/_kilo_marketplace_temp/skills/web-design-guidelines
Command: npx skills add https://github.com/galafis/fonte --skill web-design-guidelines-galafis

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps designers and developers verify that UI components and pages comply with current Web Interface Guidelines, improving accessibility, usability, and visual consistency with minimal manual effort.

Core Features & Use Cases

  • Automated guideline checks: Compare UI code and markup against the latest web interface rules to surface violations.
  • Accessibility & UX audits: Identify color contrast, keyboard navigation, aria attributes, and usability gaps across components.
  • On-demand reviews: Scan specific pages, components, or patterns and generate concise compliance reports ready for handoff.

Quick Start

Provide the UI files or a pattern to review, and I will fetch the latest guidelines and return a structured compliance report.

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 web interface for accessibility and usability compliance?

To audit web interface accessibility and usability, you provide UI files or patterns for review against the latest Web Interface Guidelines. The audit identifies color contrast, keyboard navigation, aria attribute, and visual consistency gaps, returning a structured compliance report.

What does an automated UI compliance check cover for modern web frameworks?

An automated UI compliance check covers accessibility, usability, and visual consistency across modern web frameworks. It compares individual components, pages, or entire sites against the latest Web Interface Guidelines to surface noncompliance and UX gaps.

Can I scan specific UI components for aria attribute and color contrast violations?

Yes, you can scan specific UI components by providing the relevant files or patterns. The scan identifies accessibility gaps including aria attribute issues and color contrast violations, generating a concise compliance report ready for handoff.

What's the best way to check if my web pages meet current Web Interface Guidelines?

The best way to verify web pages meet current Web Interface Guidelines is to provide the page files for automated comparison. The tool fetches the latest guidelines, reads the specified files, and reports findings in a prescribed terse format.

Does this accessibility audit work with individual components or only entire sites?

This accessibility audit works with individual components, specific pages, and entire sites. It applies across modern frameworks, allowing you to target any scope of your interface to identify usability and visual consistency gaps.

Why do I need to fetch the latest guidelines before checking UI noncompliance?

Fetching the latest guidelines before checking UI noncompliance ensures the audit reflects current accessibility and usability standards. The tool retrieves up-to-date Web Interface Guidelines to accurately identify gaps in aria attributes, keyboard navigation, and visual consistency.