web-design-guidelines

Audit web UI code against Web Interface Guidelines for accessibility, performance, and UX.

Updated Feb 28, 2026
One-click install
npx skills add https://github.com/lucasfdigital/Orchard --skill web-design-guidelines-lucasfdigital
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/lucasfdigital/Orchard/tree/main/skills/web-design-guidelines
Command: npx skills add https://github.com/lucasfdigital/Orchard --skill web-design-guidelines-lucasfdigital

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures your web user interfaces adhere to established best practices for accessibility, performance, and overall user experience, preventing common design and implementation pitfalls.

Core Features & Use Cases

  • Compliance Checking: Verifies UI code against the latest Web Interface Guidelines.
  • Accessibility Audit: Identifies potential issues related to screen reader compatibility and keyboard navigation.
  • Performance Review: Flags elements that might negatively impact page load times or responsiveness.
  • Use Case: After developing a new feature, use this Skill to perform a final audit to ensure it meets all accessibility and performance standards before deployment.

Quick Start

Use the web-design-guidelines skill to review the file 'src/components/Button.jsx'.

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 web UI code for accessibility and performance standards?

To audit web UI code for accessibility and performance standards, you can use a skill that fetches established Web Interface Guidelines from a specified URL and applies all listed rules to your provided files or patterns. This verifies compliance for screen reader compatibility, keyboard navigation, and page load responsiveness.

What is a UI audit for web components and pages?

A UI audit for web components and pages is a compliance check that reviews frontend code against established Web Interface Guidelines. It identifies design and implementation pitfalls related to accessibility, performance, and UX best practices before deployment.

Can I check frontend code for screen reader compatibility and keyboard navigation?

Yes, you can check frontend code for screen reader compatibility and keyboard navigation. The accessibility audit specifically identifies potential issues related to these UX best practices by applying established Web Interface Guidelines to your code patterns.

Does this web design guidelines audit require fetching a specific URL?

Yes, this web design guidelines audit requires fetching the latest guidelines from a specified URL. The skill then applies all rules listed at that URL to your provided web UI files or patterns to ensure compliance.

When do I need to perform a UX audit for web components?

You need to perform a UX audit for web components during pre-deployment checks or after developing a new feature. This ensures your web user interfaces adhere to established best practices and prevents common design and implementation pitfalls before release.

What is the best way to flag elements that negatively impact page load times?

The best way to flag elements that negatively impact page load times is to use a performance review skill. It checks your web UI code against established Web Interface Guidelines to identify elements impacting responsiveness and overall user experience.