skills.rest
zero-rehq
zero-rehqCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Audit frontend UI against 100+ Web Interface Guidelines rules for accessibility, UX, and performance gaps.

Updated Jan 15, 2026
Search Tags:#performance#accessibility#a11y#WCAG#UX#audit#UI guidelines
One-click install
npx skills add https://github.com/zero-rehq/opencode-kit --skill web-design-guidelines-zero-rehq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/zero-rehq/opencode-kit/tree/main/.opencode/skill/web-design-guidelines
Command: npx skills add https://github.com/zero-rehq/opencode-kit --skill web-design-guidelines-zero-rehq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Web Design Guidelines Skill helps teams automatically audit UI code against a comprehensive catalog of 100+ rules covering accessibility, UX, performance, dark mode, i18n, and content quality. It surfaces actionable gaps that hinder inclusive design and optimal user experience.

Core Features & Use Cases

  • 100+ rules across Accessibility, Focus States, Forms, Animation, Typography, Content Handling, Images, Performance, Navigation & State, Touch & Interaction, Safe Areas & Layout, Dark Mode & Theming, Locale & i18n, Hydration Safety, Hover & Interactive States, Content & Copy, and Anti-patterns.
  • Auto-detect triggers: analyzes touched files (UI components, pages, forms) and context (review vs audit) to select relevant checklists.
  • Use Case: during a UI review of a dashboard, surface missing aria-labels, contrast issues, and navigation semantics.

Quick Start

Use this skill to review a UI component file like Header.tsx and generate a prioritized checklist of accessibility and UX improvements.

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 UI for accessibility and UX gaps?▼

Audit frontend UI by checking components, pages, and forms against 100+ predefined rules covering accessibility, UX, and performance. This generates a prioritized, actionable checklist of improvements for reviewers to address.

What is the best way to check if my web components meet WCAG standards?▼

Checking web components against WCAG standards involves applying a predefined rule set during code reviews. The process surfaces missing aria-labels, contrast issues, and navigation semantics to ensure inclusive design compliance.

How do I review a React component for dark mode and i18n support?▼

Review a React component for dark mode and i18n support by analyzing the file against specialized checklists. This surfaces gaps in theming, locale handling, and hydration safety to produce actionable improvements.

Can I automatically detect which UI guidelines to check during a code review?▼

You can automatically detect relevant UI guidelines using frontmatter triggers. The system analyzes touched files and context to select appropriate checklists for components, pages, forms, and navigation.

Does this UI audit cover performance and touch interactions?▼

The UI audit covers performance and touch interactions through its 100+ rule catalog. It evaluates images, animations, safe areas, and hover states to produce a prioritized checklist of actionable improvements.

When should I run a UI design audit on my web application?▼

Run a UI design audit during code reviews, design audits, or code changes across components and pages. This surfaces accessibility, UX, and performance gaps before deployment, generating a prioritized checklist for reviewers.

Related Skills

Explore More Design & Creative Skills→
minhquan2904minhquan2904

security-compliance-checker

Extract OWASP rules from Excel files for security scans.

Community
Advanced
lithos-ailithos-ai
482

code_review

Identify bugs, security issues, performance bottlenecks, and readability problems in code.

Official
Intermediate
Phife726Phife726

code-reviewer

Identify security, performance, and maintainability issues during code reviews.

Community
Advanced
4lerman4lerman

a11y-audit

Scan web application code for WCAG 2.2 violations and suggest fixes.

Community
Advanced