web-design-guidelines

Review UI code against Web Interface Guidelines and accessibility standards.

21|16|Updated Jul 12, 2023
One-click install
npx skills add https://github.com/guillermoscript/lms-front --skill web-design-guidelines-guillermoscript
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/guillermoscript/lms-front/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/guillermoscript/lms-front --skill web-design-guidelines-guillermoscript

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps ensure that user interfaces adhere to established web design best practices and accessibility standards, improving user experience and usability.

Core Features & Use Cases

  • UI Code Review: Automatically checks UI code against a set of predefined guidelines.
  • Accessibility Audits: Identifies potential accessibility issues in the design.
  • Best Practice Compliance: Verifies adherence to modern web design principles.
  • Use Case: A developer can use this skill to quickly audit a new component's UI code before merging it, ensuring it meets the company's design standards.

Quick Start

Use the web-design-guidelines skill to review the UI code in the 'src/components' directory.

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I review UI code for web design best practices and accessibility?▼

UI code review for web design best practices involves checking front-end components against predefined guidelines to identify accessibility issues and verify compliance with modern design principles.

What are web design guidelines for front-end development workflows?▼

Web design guidelines for front-end workflows are standards that ensure user interfaces adhere to accessibility requirements and best practices, improving overall user experience and usability across components.

Can I automatically audit UI code for accessibility standards before merging?▼

Yes, you can automatically audit UI code for accessibility standards before merging by running a design audit that checks your source components against fetched web interface guidelines and best practice rules.

How do I ensure up-to-date rule application when checking UI compliance?▼

To ensure up-to-date rule application when checking UI compliance, the review process fetches the latest web interface guidelines from a specified URL, applying current accessibility standards and best practices to your code.

Does this UI code review work with any front-end component directory?▼

Yes, this UI code review works with any front-end component directory, such as 'src/components', allowing developers to quickly audit new component UI code and ensure it meets company design standards.

What is the best way to identify potential accessibility issues in UI design?▼

The best way to identify potential accessibility issues in UI design is to perform an automated audit that validates your front-end code against fetched web interface guidelines and predefined best practice compliance rules.