web-design-guidelines

Audit UI code against Web Interface Guidelines and report non-conformities in file:line format.

141|20|Updated Dec 19, 2025
One-click install
npx skills add https://github.com/julianromli/opencode-template --skill web-design-guidelines-julianromli
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/julianromli/opencode-template/tree/main/skill/web-design-guidelines
Command: npx skills add https://github.com/julianromli/opencode-template --skill web-design-guidelines-julianromli

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI code often fails to meet standard web interface guidelines, leading to accessibility and usability gaps.

Core Features & Use Cases

  • Fetch the latest guidelines from the official source and apply them to your codebase.
  • Read specified UI files or patterns, then validate against all guidelines.
  • Output concise results in the file:line format to simplify review and remediation.
  • Use case: audit a React component tree for accessibility conformance or check a web page against best practices.

Quick Start

Provide the files or patterns to review and run the skill to audit them against the latest guidelines.

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 UI code for accessibility and web guideline compliance?

To audit UI components for accessibility, provide target files or patterns for the skill to review. It fetches the latest rules from the official guidelines source, evaluates all rules against your code, and returns concise findings in a file:line format for quick remediation.

What is the best way to check a React component tree for accessibility conformance?

Checking a React component tree for accessibility conformance involves reading the specified UI files and validating them against established web guidelines. The skill outputs non-conformities in a terse file:line format to streamline the review process.

Can I review an entire web application for design consistency and accessibility?

Yes, you can review an entire web application for design consistency and accessibility. The skill applies to individual components, pages, or entire applications to ensure your UI code meets standard web interface guidelines across the project.

Do I need to install any dependencies to validate UI files against web guidelines?

No dependencies are required to validate UI files against web guidelines. The skill fetches the latest rules directly from the official source and evaluates your target files without needing external modules or components installed.

What format are accessibility validation results returned in?

Accessibility validation results are returned in a terse file:line format. This concise output style simplifies review and remediation by pinpointing exactly where non-conformities exist within your UI code files.

Why does my UI code fail standard web interface guidelines?

UI code often fails standard web interface guidelines due to accessibility and usability gaps. Running an audit identifies these non-conformities by evaluating all rules against your target files and highlighting exact locations for remediation.