web-design-guidelines

Compare web interfaces against the latest Web Interface Guidelines and output file:line findings.

Updated Jan 30, 2026
One-click install
npx skills add https://github.com/jon890/fos-blog --skill web-design-guidelines-jon890
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/jon890/fos-blog/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/jon890/fos-blog --skill web-design-guidelines-jon890

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps designers and developers ensure web interfaces conform to current Web Interface Guidelines, improving accessibility, usability, and consistency across products.

Core Features & Use Cases

  • Fetch latest guidelines from the official source and compare against your UI files.
  • Read target UI files or patterns and evaluate them for accessibility, contrast, responsive behavior, and semantics.
  • Use cases include auditing a single page, a design system, or a component library to identify violations and track remediation.

Quick Start

Provide the UI files you want reviewed, and I will fetch the latest guidelines, apply them to your files, and return a concise 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 files for accessibility and UX compliance?

To audit web interface files for accessibility and UX compliance, provide your UI files. The Skill fetches the latest official Web Interface Guidelines, evaluates your code against them, and outputs findings in a concise file:line format.

What is the best way to check a design system for usability and visual design violations?

Checking a design system for usability and visual design violations involves comparing component files against current Web Interface Guidelines. This Skill reads specified patterns to evaluate contrast, semantics, and responsive behavior, returning a detailed compliance report.

Can I review a single page component library for a11y and contrast issues?

Yes, you can review a single page component library for a11y and contrast issues. The Skill applies accessibility audits and visual design checks to individual pages, components, or entire systems to identify specific compliance gaps.

How does a UI compliance review handle guideline updates and semantic checks?

A UI compliance review handles guideline updates by fetching the official guidelines URL and parsing the latest command document. It then reads your target files to evaluate semantic HTML, accessibility rules, and responsive behavior dynamically.

Do I need to manually input web design guidelines to perform a UX review?

No, you do not need to manually input web design guidelines to perform a UX review. The Skill automatically fetches the latest Web Interface Guidelines from the official source before comparing them against your provided UI files.