web-design-guidelines

Name: web-design-guidelines
Availability: InStock
Author: Isaac

Review UI code against Web Interface Guidelines for accessibility and design compliance.

27|6|Updated Feb 3, 2026

Search Tags:#ui #code review #accessibility #web design #guidelines #ux

Ready to run

npx skills add https://github.com/5kahoisaac/opencode-configs --skill web-design-guidelines-5kahoisaac

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/5kahoisaac/opencode-configs/tree/main/skills/web-design-guidelines
Command: npx skills add https://github.com/5kahoisaac/opencode-configs --skill web-design-guidelines-5kahoisaac

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps ensure that user interface code adheres to established Web Interface Guidelines, improving consistency, accessibility, and overall user experience.

Core Features & Use Cases

Automated Code Review: Scans UI code files against a predefined set of web design best practices.
Compliance Checking: Identifies potential violations of accessibility, usability, and design standards.
Use Case: A developer can use this skill to quickly audit a new component's code before it's merged, ensuring it meets the project's design system and accessibility requirements.

Quick Start

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

You can review UI code for accessibility compliance by scanning it against Web Interface Guidelines. This skill fetches the latest guidelines from a specified URL to check front-end components for usability and design standard violations.

Can I use this to audit a specific component file before merging?▼

Yes, you can audit a specific component file before merging. You can instruct the skill to review a file path like 'src/components/Button.js' to ensure it meets your project's design system and accessibility requirements.

How does this automated code review fetch the latest web standards?▼

The automated code review fetches the latest web standards by retrieving guidelines from a specified URL. This ensures up-to-date rule application when auditing user interface components and web pages.

What specific web design best practices does this skill check?▼

This skill checks web design best practices by scanning for compliance with established Web Interface Guidelines. It identifies potential violations of accessibility, usability, and design standards within your front-end code.

Do I need any dependencies to run accessibility and UX checks on my code?▼

No dependencies are required to run accessibility and UX checks on your code. The skill operates independently to audit user interface components and web pages without needing external libraries.

Best way to ensure front-end components meet usability standards during development?▼

The best way to ensure front-end components meet usability standards is to integrate automated compliance checking into your workflow. This skill scans UI code files against predefined web design best practices to improve consistency and user experience.