web-design-guidelines

Review UI code against Web Interface Guidelines and accessibility standards.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill helps ensure that web interfaces comply with established best practices and accessibility standards, preventing common design and usability issues.

Core Features & Use Cases

  • Compliance Review: Checks UI code against a comprehensive set of Web Interface Guidelines.
  • Accessibility Audit: Identifies potential accessibility barriers in the interface.
  • Best Practice Verification: Ensures adherence to modern web design principles.
  • Use Case: When developing a new feature, use this Skill to automatically audit the UI code for compliance before deployment.

Quick Start

Use the web-design-guidelines skill to review the accessibility of 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 my frontend code for web design and accessibility compliance?

To audit web design and accessibility compliance, you can review your UI code by fetching established Web Interface Guidelines from a specified URL and automatically applying those rules to your frontend files or patterns.

What is a UI code review for web interface guidelines?

A UI code review for web interface guidelines is an automated process that checks your frontend components against established design best practices and accessibility standards to prevent common usability issues.

Can I check a specific React component file for accessibility barriers?

Yes, you can check a specific React component file like 'src/components/Button.jsx' for accessibility barriers by passing the file path to the UI review process to verify UX best practices.

Does the accessibility audit require a specific URL to fetch guidelines?

Yes, the accessibility audit requires a specified URL to fetch the latest Web Interface Guidelines, ensuring that the compliance review applies the most current rules to your provided frontend files.

When should I run a UX best practice verification on my web interface?

You should run a UX best practice verification on your web interface during frontend development tasks, specifically before deploying a new feature, to automatically identify potential accessibility barriers and ensure design compliance.