web-design-guidelines

Audit UI code against Web Interface Guidelines for compliance gaps.

437|53|Updated Jul 4, 2023
One-click install
npx skills add https://github.com/aifuxi/fuxiaochen --skill web-design-guidelines-aifuxi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/aifuxi/fuxiaochen/tree/main/.trae/skills/web-design-guidelines
Command: npx skills add https://github.com/aifuxi/fuxiaochen --skill web-design-guidelines-aifuxi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web interfaces often fail to meet accessibility, usability, and consistency standards. This Skill helps teams verify UI code against the latest Web Interface Guidelines, reducing design debt and improving user experience across projects.

Core Features & Use Cases

  • Guideline compliance checks: scans UI code and design assets to verify alignment with the latest guidelines.
  • Pattern and component validation: ensures components, patterns, and interactions follow accessibility and UX best practices.
  • Use case: ideal for reviewing new UI features or auditing an existing site to surface violations and actionable fixes.

Quick Start

Provide the UI files or a pattern to review, and I will assess them against the latest Web Interface Guidelines.

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?

To audit UI code for accessibility and UX compliance, provide your UI files or design patterns. The system checks components and pages against Web Interface Guidelines to surface violations and actionable recommendations.

What is a web interface guideline compliance check?

A web interface guideline compliance check scans UI code and design assets to verify alignment with current standards. It evaluates components, patterns, and interactions to ensure accessibility, UX, and visual consistency.

Can I review an existing website for accessibility violations and design debt?

Yes, you can review an existing website for accessibility violations and design debt. Provide the UI files or patterns and the system will surface compliance gaps with references to specific guideline rules.

What's the best way to check if my UI components follow accessibility best practices?

The best way to check if UI components follow accessibility best practices is to submit them for pattern and component validation. This process verifies interactions against UX guidelines and reports concrete recommendations.

Does this UI review work for both new features and existing pages?

Yes, this UI review works for both new features and existing pages. It applies checks across UI components, pages, and patterns to surface compliance gaps in real-world projects regardless of their development stage.