skills.rest
raphaelandrews
raphaelandrewsCOMMUNITY
Explore all skills by this author →
Website𝕏@_andrewsshGitHub

web-design-guidelines

Audit UI code against Web Interface Guidelines for compliance issues.

1|1|Updated May 15, 2025
Search Tags:#ui#accessibility#frontend#audit#guidelines#ux#web-design
One-click install
npx skills add https://github.com/raphaelandrews/fsx --skill web-design-guidelines-raphaelandrews
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/raphaelandrews/fsx/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/raphaelandrews/fsx --skill web-design-guidelines-raphaelandrews

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps ensure UI code aligns with web interface guidelines, accessibility standards, and UX best practices by auditing code and assets against a centralized reference.

Core Features & Use Cases

  • Fetches the latest Web Interface Guidelines and applies them to your UI codebase.
  • Analyzes UI files, components, and patterns to identify accessibility, contrast, layout, and interaction issues.
  • Produces actionable findings with file paths and line references to guide remediation.

Quick Start

Provide the UI files or page patterns you want reviewed, and I will fetch the latest guidelines and start the audit.

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 UI code for accessibility and UX compliance issues?▼

To audit UI code for accessibility and UX compliance, provide your UI files or page patterns. The tool fetches the latest Web Interface Guidelines and analyzes your codebase to identify layout, readability, contrast, and interaction issues.

What is the best way to check web components against standard interface guidelines?▼

Checking web components against standard interface guidelines involves comparing code to a centralized reference. This tool reads guidelines from a source URL and outputs concise, rule-based findings with file paths and line references to guide remediation.

Can I use this to review frontend code for layout and interaction patterns?▼

Yes, you can review frontend code for layout and interaction patterns. It applies to web projects, components, and assets to cover accessibility, layout, readability, and interaction patterns by comparing code against the latest Web Interface Guidelines.

Do I need to provide a guidelines URL to start the web design audit?▼

You do not need to manually provide a guidelines URL to start the web design audit. The tool automatically fetches the latest Web Interface Guidelines from its source URL when you provide the UI files or page patterns for review.

What format do the accessibility audit results come in?▼

The accessibility audit results come in a concise, rule-based format. The findings include actionable items with specific file paths and line references to help guide your code remediation directly.

Related Skills

Explore More Design & Creative Skills→
jonnathan-lsjonnathan-ls

web-design-guidelines

Compare web project files against Web Interface Guidelines to identify UI compliance issues.

Community
Intermediate
hopeoverturehopeoverture
6

ui-library-usage-auditor

Audit shadcn/ui component usage for accessibility and design-system conformance.

Community
Advanced
mkusakamkusaka
7

run-browser-driven-web-app-example

Run a web development server, drive headless Chromium, and capture screenshots.

Community
Advanced
FindMalekFindMalek
9

web-design-guidelines

Audits frontend components for compliance with Web Interface Guidelines.

Community
Intermediate