skills.rest
Matheusrlr
MatheusrlrCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Review UI code against Web Interface Guidelines for compliance.

1|Updated Feb 26, 2026
Search Tags:#ui#code review#performance#accessibility#web design#ux
One-click install
npx skills add https://github.com/Matheusrlr/payment-orchestrator --skill web-design-guidelines-matheusrlr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Matheusrlr/payment-orchestrator/tree/main/skills-catalog/skills/%28design%29/web-design-guidelines
Command: npx skills add https://github.com/Matheusrlr/payment-orchestrator --skill web-design-guidelines-matheusrlr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps ensure that web interface code adheres to established design, accessibility, and performance best practices, preventing common UI pitfalls.

Core Features & Use Cases

  • Compliance Review: Audits UI code against a comprehensive set of web interface guidelines.
  • Accessibility Check: Identifies accessibility issues like missing ARIA labels or improper focus management.
  • Performance Audit: Flags performance anti-patterns such as inefficient animations or layout reads.
  • Use Case: A developer can use this Skill to automatically check a new component's code for accessibility compliance before it's merged, ensuring a better user experience for all.

Quick Start

Review the UI code in the file src/components/Button.tsx for guideline compliance.

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check my UI code for accessibility and performance best practices?▼

This Skill reviews UI code for compliance with comprehensive web interface guidelines, covering accessibility, performance, forms, and dark mode. It identifies anti-patterns and flags adherence issues using a terse file:line format for actionable feedback.

What is the best way to audit web components for hydration safety and touch interaction?▼

The best way is to run a compliance review on your UI code that checks for hydration safety, touch interaction, and locale handling. It flags anti-patterns and provides actionable feedback in a terse file:line format to ensure adherence to web interface guidelines.

How do I review a React component for dark mode and hover state compliance?▼

To review a React component for dark mode and hover state compliance, audit the UI code against web interface guidelines. This flags anti-patterns in focus states, typography, and images, providing actionable feedback in a file:line format.

Can I use an automated code review to find missing ARIA labels and improper focus management?▼

Yes, you can use an automated code review to identify accessibility issues like missing ARIA labels and improper focus management. It audits UI code against web interface guidelines and flags anti-patterns using a file:line format for actionable feedback.

Does this web design review check for inefficient animations and layout reads?▼

Yes, this web design review checks for inefficient animations and layout reads as part of its performance audit. It flags these performance anti-patterns by reviewing UI code against web interface guidelines and providing actionable feedback in a file:line format.

Related Skills

Explore More Design & Creative Skills→
riethmayerriethmayer
2

web-design-guidelines

Fetch Web Interface Guidelines and report UI code violations in file:line format.

Community
Intermediate
aberrantCodeaberrantCode
1

ui-web

Standardize glassmorphic web UI design with WCAG-compliant Tailwind patterns.

Community
Intermediate
AndriiklymiukAndriiklymiuk
35

autopilot

Convert build-ready tickets into draft pull requests in a supervised loop.

Community
Advanced
hanzilihanzili
175

a11y-auditor

Audit web pages for WCAG 2.1 AA accessibility issues with screenshots and remediation steps.

Community
Advanced