skills.rest
grasberg
grasbergCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Audit frontend UI code against Web Interface Guidelines for accessibility compliance.

3|2|Updated Feb 27, 2026
Search Tags:#consistency#accessibility#usability#guidelines#web-design#ui-audit#frontend-review
One-click install
npx skills add https://github.com/grasberg/sofia --skill web-design-guidelines-grasberg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/grasberg/sofia/tree/main/cmd/sofia/internal/onboard/antigravity-kit/.agent/skills/web-design-guidelines
Command: npx skills add https://github.com/grasberg/sofia --skill web-design-guidelines-grasberg

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reviews UI code for compliance with Web Interface Guidelines to ensure accessible, performant interfaces aligned with best practices.

Core Features & Use Cases

  • Fetch the latest public Web Interface Guidelines before review.
  • Read target UI files or patterns provided by the user.
  • Apply all guidelines and report findings in a concise file:line style.
  • Use Case: A developer asks to audit a landing page for accessibility and usability.

Quick Start

Provide the files or patterns to review, 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 frontend code for web interface accessibility and usability?▼

To audit frontend code for web interface accessibility and usability, provide your target UI files or patterns. The review fetches the latest Web Interface Guidelines, applies the rules to your code, and outputs findings in a concise file:line format.

What is a UI audit for Web Interface Guidelines compliance?▼

A UI audit for Web Interface Guidelines compliance is a review process that identifies whether your frontend code meets accessibility, consistency, and performance standards. It checks color contrast, navigation, and usability against established best practices.

Can I use this to check color contrast and navigation tests on a landing page?▼

Yes, you can check color contrast and run navigation tests on a landing page by providing its frontend code files. The review applies Web Interface Guidelines to identify accessibility and usability issues in the provided patterns.

Do I need to provide my own web design guidelines for the accessibility audit?▼

No, you do not need to provide your own web design guidelines for the accessibility audit. The process automatically fetches the latest public Web Interface Guidelines before reviewing your user-provided frontend files.

What is the best way to ensure consistent interfaces in frontend development?▼

The best way to ensure consistent interfaces in frontend development is to run a UI audit that applies standardized Web Interface Guidelines. This identifies deviations in usability and accessibility, reporting exact file and line locations for fixes.

Related Skills

Explore More Design & Creative Skills→
mjbalcuevamjbalcueva

web-design-guidelines

Review UI code against fetched Web Interface Guidelines for compliance.

Community
Intermediate
capaas2capaas2

web-design-guidelines

Review UI code for web interface guideline compliance and accessibility violations.

Community
Intermediate
ncsound919ncsound919

frontend-design

Design frontend interfaces and components for React or HTML/CSS.

Community
Advanced
matteocervellimatteocervelli
25

accessibility-checker

Identify and report WCAG 2.1 Level AA accessibility violations on web pages.

Community
Advanced