web-design-guidelines

Review UI code against Web Interface Guidelines and accessibility standards.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures that web interfaces adhere to established design and accessibility best practices, preventing common UI/UX pitfalls.

Core Features & Use Cases

  • Compliance Checking: Verifies UI code against a comprehensive set of web interface guidelines.
  • Accessibility Audit: Helps identify and rectify accessibility issues in the user interface.
  • Design Review: Provides an automated check against best practices for a consistent and high-quality user experience.
  • Use Case: A developer can use this skill to quickly audit a new component's UI code before merging it into the main branch, ensuring it meets all design and accessibility standards.

Quick Start

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

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 UI code for web design guidelines and accessibility?

To audit UI code for web design guidelines, you can use an automated tool to review your files against established interface and accessibility best practices. This process checks your front-end components for compliance before merging.

What are web interface guidelines and why are they important for front-end development?

Web interface guidelines are established standards for UI and UX design that ensure accessibility and usability. They are important for front-end development because they prevent common design pitfalls and guarantee a consistent user experience across components.

Can I check a specific component file for accessibility issues?

Yes, you can check a specific component file for accessibility issues by targeting its path during the review process. The audit applies external guideline definitions directly to your specified files or patterns to identify compliance gaps.

Does this UI compliance check work with any front-end framework?

The UI compliance check applies to general front-end development workflows and is not restricted to a specific framework. As long as you provide the UI code files or patterns, the tool can fetch external definitions and audit them.

When should I run an accessibility audit during the development workflow?

You should run an accessibility audit when you need to verify a new component's UI code before merging it into the main branch. This ensures the updated user interface meets all design and accessibility standards early in the process.