web-design-guidelines

Review UI code against Web Interface Guidelines for accessibility and performance.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps ensure that user interfaces comply with established Web Interface Guidelines, addressing issues related to accessibility, performance, and general best practices.

Core Features & Use Cases

  • Compliance Auditing: Reviews UI code against a set of predefined rules.
  • Accessibility Checks: Identifies potential accessibility barriers in the interface.
  • Best Practice Verification: Ensures the UI adheres to modern web development standards.
  • Use Case: After developing a new component, use this Skill to audit it against accessibility standards and best practices 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 UI code for web accessibility and best practices?

To audit UI code for web accessibility and best practices, you review user-provided files against fetched web interface guidelines. The process identifies compliance issues, accessibility barriers, and performance gaps, outputting findings in a terse file:line format for quick remediation.

What is a UI design audit for frontend compliance?

A UI design audit for frontend compliance reviews user interface code against established web interface guidelines. It focuses on detecting accessibility barriers, performance issues, and deviations from modern frontend best practices before component deployment.

Can I check a specific component file for accessibility issues before deployment?

Yes, you can check a specific component file for accessibility issues before deployment. By providing the file path, such as 'src/components/Button.jsx', the review applies web guidelines directly to that file and outputs specific findings for remediation.

Does the web guidelines review work with custom rule sets?

Yes, the web guidelines review works with custom rule sets by fetching the latest guidelines from a specified URL. This allows the compliance audit to adapt to specific project standards rather than relying solely on internal defaults.

What is the best way to format UX review findings for frontend developers?

The best way to format UX review findings for frontend developers is a terse file:line format. This output style ensures adherence to web standards by pointing directly to the exact locations in the code requiring accessibility or performance fixes.